/* ==========================================================================
   Lumina Display Systems — brand theme + catalogue components
   Loaded last, so the token overrides below re-skin every inherited component
   and the sections after them add what a multi-product storefront needs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand tokens
   The inherited stylesheets reference --green-* throughout; remapping those
   names to the Lumina blues re-themes the whole site from one place.
   -------------------------------------------------------------------------- */
:root {
  /* Lumina blues (named --green-* only for backwards compatibility) */
  --green-50: #eef5ff;
  --green-100: #dbe9fd;
  --green-200: #bcd6fa;
  --green-300: #8dbaf5;
  --green-400: #16b8e6;
  --green-500: #2f7be0;
  --green-600: #013a85;
  --green-700: #00285c;
  --green-800: #001a3d;

  /* Semantic aliases — prefer these in new code */
  --primary: #00285c;
  --primary-600: #013a85;
  --primary-900: #001a3d;
  --accent: #2f7be0;
  --accent-cyan: #16b8e6;
  --accent-soft: #eef5ff;

  --grad-primary: linear-gradient(
    135deg,
    #013a85 0%,
    #00285c 60%,
    #001a3d 100%
  );
  --grad-accent: linear-gradient(135deg, #2f7be0 0%, #16b8e6 100%);
  --grad-green: var(--grad-accent);
  --grad-green-soft: linear-gradient(135deg, #eef5ff 0%, #dbe9fd 100%);
  --grad-text: linear-gradient(90deg, #013a85, #2f7be0 55%, #16b8e6);
  --grad-sheen: linear-gradient(
    120deg,
    transparent 20%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 80%
  );

  --bg-soft: #f5f8fd;
  --line: rgba(1, 58, 133, 0.1);
  --line-strong: rgba(1, 58, 133, 0.18);

  --shadow-lg: 0 30px 60px -20px rgba(1, 58, 133, 0.32);
  --shadow-blue: 0 18px 40px -18px rgba(1, 58, 133, 0.45);
  --shadow-card: 0 10px 30px -14px rgba(0, 40, 92, 0.18);

  --header-h: 72px;
  --shell-max: 1280px;

  --ok: #0f9d58;
  --warn: #d97706;
  --danger: #dc2626;
}

::selection {
  background: var(--accent);
  color: #fff;
}

/* The inherited layout offsets <main> for a fixed header; ours is sticky and
   already occupies flow space, so that offset would double up. */
.page-main {
  padding-top: 0;
}

/* Nothing may push the page wider than the viewport. `clip` does the same job
   as `hidden` without turning the page into a scroll container — which is what
   breaks `position: sticky` on the shop sidebar. `hidden` stays as the
   fallback for browsers without `clip`. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

.lu-hero,
.lu-pagehero,
.lu-section,
.lu-footer {
  max-width: 100vw;
}

/* Base-stylesheet headings default to dark ink — restore white wherever the
   Lumina surface behind them is navy. */
.lu-section--dark h1,
.lu-section--dark h2,
.lu-section--dark h3,
.lu-hero h1,
.lu-hero h2,
.lu-pagehero h1,
.lu-cta h2 {
  color: #fff;
}

/* --------------------------------------------------------------------------
   2. Shared primitives
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

.lu-section {
  padding: clamp(56px, 1vw, 96px) 0;
}

.lu-section--soft {
  background: var(--bg-soft);
}

.lu-section--dark {
  background: var(--grad-primary);
  color: #fff;
}

.lu-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  /* gap: 24px; */
  margin-bottom: clamp(18px, 4vw, 34px);
}

.lu-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

.lu-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-accent);
}

.lu-section--dark .lu-eyebrow {
  color: var(--accent-cyan);
}

.lu-title {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.4vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--primary);
  /* margin: 0 0 12px; */
}

.lu-section--dark .lu-title {
  color: #fff;
}

.lu-sub {
  color: var(--slate-600);
  font-size: 1.02rem;
  margin: 0;
}

.lu-section--dark .lu-sub {
  color: rgba(255, 255, 255, 0.78);
}

.lu-gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Buttons ---------------------------------------------------------------- */
.lu-btn {
  --btn-bg: var(--grad-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: #fff;
  font: 600 0.95rem/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-blue);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.lu-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 22px 44px -18px rgba(1, 58, 133, 0.6);
}

.lu-btn:active {
  transform: translateY(0);
}

.lu-btn[disabled],
.lu-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.lu-btn--solid {
  --btn-bg: var(--grad-primary);
}

.lu-btn--ghost {
  background: #fff;
  color: var(--primary-600);
  border: 1.5px solid var(--line-strong);
  box-shadow: none;
}

.lu-btn--ghost:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  filter: none;
}

.lu-btn--light {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: none;
  backdrop-filter: blur(6px);
}

.lu-btn--light:hover {
  background: rgba(255, 255, 255, 0.24);
  filter: none;
}

.lu-btn--sm {
  padding: 9px 18px;
  font-size: 0.85rem;
}

.lu-btn--block {
  width: 100%;
}

.lu-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary-600);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}

.lu-link-arrow i {
  transition: transform 0.18s ease;
}

.lu-link-arrow:hover i {
  transform: translateX(4px);
}

/* Badges ----------------------------------------------------------------- */
.lu-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}

.lu-badge--sale {
  background: linear-gradient(135deg, #e11d48, #f43f5e);
  color: #fff;
}

.lu-badge--new {
  background: var(--grad-accent);
  color: #fff;
}

.lu-badge--best {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #3b2500;
}

.lu-badge--out {
  background: var(--slate-200);
  color: var(--slate-600);
}

.lu-badge--soft {
  background: var(--accent-soft);
  color: var(--primary-600);
}

/* --------------------------------------------------------------------------
   3. Header — brand, nav, search, category mega menu
   -------------------------------------------------------------------------- */
.lu-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition:
    background 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.2s ease,
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scrolling down hides the bar, scrolling up brings it straight back
   (toggled in lumina.js). */
.lu-header.is-hidden {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .lu-header.is-hidden {
    transform: none;
  }
}

/* .lu-header.is-stuck {
  box-shadow: 0 8px 28px -18px rgba(0, 40, 92, 0.5);
} */

/* -- Transparent over a dark hero band, solid white once scrolled (.is-stuck
      is toggled in lumina.js). `has-hero` is set by every controller whose page
      opens with .lu-pagehero; the homepage uses .is-home. Pages with no hero
      (product, checkout, account) keep the solid header from the start. ---- */
:is(.is-home, .has-hero) .lu-header {
  position: fixed;
  inset: 0 0 auto;
}

:is(.is-home, .has-hero) .lu-header:not(.is-stuck) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

:is(.is-home, .has-hero) .lu-header:not(.is-stuck) .lu-brand__name,
:is(.is-home, .has-hero) .lu-header:not(.is-stuck) .lu-nav__link,
:is(.is-home, .has-hero) .lu-header:not(.is-stuck) .lu-iconbtn {
  color: #fff;
}

:is(.is-home, .has-hero) .lu-header:not(.is-stuck) .lu-brand__tag {
  color: rgba(255, 255, 255, 0.72);
}

:is(.is-home, .has-hero) .lu-header:not(.is-stuck) .lu-nav__link:hover,
:is(.is-home, .has-hero) .lu-header:not(.is-stuck) .lu-nav__link.is-active {
  color: #fff;
}

:is(.is-home, .has-hero) .lu-header:not(.is-stuck) .lu-nav__link:hover::after,
:is(.is-home, .has-hero)
  .lu-header:not(.is-stuck)
  .lu-nav__link.is-active::after {
  background: var(--accent-cyan);
}

:is(.is-home, .has-hero) .lu-header:not(.is-stuck) .lu-iconbtn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

:is(.is-home, .has-hero) .lu-header:not(.is-stuck) .lu-iconbtn__count {
  border-color: transparent;
}

:is(.is-home, .has-hero) .lu-header:not(.is-stuck) .lu-search__form {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}

:is(.is-home, .has-hero) .lu-header:not(.is-stuck) .lu-search__form i,
:is(.is-home, .has-hero) .lu-header:not(.is-stuck) .lu-search__input {
  color: #fff;
}

:is(.is-home, .has-hero)
  .lu-header:not(.is-stuck)
  .lu-search__input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* Focus flips the pill to solid white, so restore readable ink. */
:is(.is-home, .has-hero)
  .lu-header:not(.is-stuck)
  .lu-search__form:focus-within
  i,
.is-home
  .lu-header:not(.is-stuck)
  .lu-search__form:focus-within
  .lu-search__input {
  color: var(--ink);
}

.is-home
  .lu-header:not(.is-stuck)
  .lu-search__form:focus-within
  .lu-search__input::placeholder {
  color: var(--slate-500);
}

/* Single-row header: brand · primary nav · search · actions. */
.lu-header__inner {
  position: relative;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
}

.lu-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex-shrink: 0;
}

.lu-brand__mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* Wordmark lockup — sized by height, width follows the 5.9:1 artwork. */
.lu-brand__logo {
  height: clamp(28px, 3.4vw, 40px);
  width: auto;
  max-width: 100%;
  display: block;
  border: var(--green-100) 0.3px solid;
  flex-shrink: 0;
}

.lu-footer__about .lu-brand__logo {
  height: 50px;
  margin-bottom: 23px;
}

.lu-brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.lu-brand__name {
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary);
}

.lu-brand__tag {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Search ----------------------------------------------------------------- */
.lu-search {
  position: relative;
  flex: 0 1 260px;
  min-width: 0;
}

.lu-search__form {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  background: var(--bg-soft);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

.lu-search__form:focus-within {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(47, 123, 224, 0.12);
}

.lu-search__form i {
  color: var(--slate-500);
  font-size: 1rem;
}

.lu-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: 400 0.92rem var(--font-sans);
  color: var(--ink);
}

.lu-search__btn {
  height: 34px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--grad-accent);
  color: #fff;
  font: 600 0.84rem var(--font-sans);
  cursor: pointer;
  transition: filter 0.16s ease;
}

.lu-search__btn:hover {
  filter: brightness(1.08);
}

.lu-suggest {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 60;
}

.lu-suggest[hidden] {
  display: none;
}

.lu-suggest__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--ink-2);
  border-bottom: 1px solid var(--slate-100);
  transition: background 0.14s ease;
}

.lu-suggest__item:last-child {
  border-bottom: 0;
}

.lu-suggest__item:hover,
.lu-suggest__item.is-active {
  background: var(--accent-soft);
}

.lu-suggest__img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: var(--bg-soft);
  border-radius: 8px;
  flex-shrink: 0;
}

.lu-suggest__name {
  font-size: 0.86rem;
  font-weight: 600;
  display: -webkit-box;
  /* -webkit-line-clamp: 1; */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lu-suggest__meta {
  font-size: 0.75rem;
  color: var(--slate-500);
}

.lu-suggest__price {
  margin-left: auto;
  font-weight: 700;
  color: var(--primary-600);
  font-size: 0.88rem;
  white-space: nowrap;
}

.lu-suggest__empty {
  padding: 16px;
  text-align: center;
  color: var(--slate-500);
  font-size: 0.88rem;
}

/* Header actions --------------------------------------------------------- */
.lu-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.lu-iconbtn {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--primary);
  font-size: 1.22rem;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.16s ease,
    color 0.16s ease;
}

.lu-iconbtn:hover {
  background: var(--accent-soft);
  color: var(--primary-600);
}

.lu-iconbtn__count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--grad-accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  border: 2px solid #fff;
}

.lu-iconbtn__count[hidden] {
  display: none;
}

/* Nav bar ---------------------------------------------------------------- */
.lu-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  height: 100%;
  flex: 1;
  min-width: 0;
}

.lu-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 clamp(9px, 1.1vw, 15px);
  height: 100%;
  color: var(--slate-700);
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.16s ease;
}

/* Underline drawn just under the label rather than on the header's bottom
   edge, so it reads as belonging to the word. */
.lu-nav__link::after {
  content: "";
  position: absolute;
  left: clamp(9px, 1.1vw, 15px);
  right: clamp(9px, 1.1vw, 15px);
  bottom: calc(50% - 1.05em);
  height: 2.5px;
  border-radius: var(--radius-pill);
  background: transparent;
  transition: background 0.16s ease;
}

.lu-nav__link .bi-chevron-down {
  font-size: 0.68rem;
  transition: transform 0.18s ease;
}

.lu-mega:hover .lu-nav__link .bi-chevron-down,
.lu-mega:focus-within .lu-nav__link .bi-chevron-down {
  transform: rotate(180deg);
}

.lu-nav__link:hover,
.lu-nav__link.is-active {
  color: var(--primary-600);
}

.lu-nav__link:hover::after,
.lu-nav__link.is-active::after {
  background: var(--accent);
}

/* Mega menu -------------------------------------------------------------- */
/* Static, so the wide panel below anchors to .lu-header__inner and centres on
   the page rather than on this off-centre trigger. */
.lu-mega {
  position: static;
  height: 100%;
  display: flex;
  align-items: center;
}

.lu-mega__panel {
  position: absolute;
  /* Anchored so the wide panel is centred in the viewport and can never
     overflow either edge, whatever the trigger's position. */
  top: calc(100% + 8px);
  left: 50%;
  translate: -50% 0;
  width: min(1180px, calc(100vw - 28px));
  /* Never taller than the screen: the panel is a single view, no page scroll. */
  max-height: calc(100vh - var(--header-h) - 22px);
  padding: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 34px 80px -30px rgba(0, 26, 61, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s;
  z-index: 80;
}

/* Invisible bridge so the pointer can travel from link to panel. */
.lu-mega__panel::before {
  content: "";
  position: absolute;
  inset: -18px 0 100% 0;
}

.lu-mega:hover .lu-mega__panel,
.lu-mega:focus-within .lu-mega__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lu-mega__grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 244px;
  gap: 14px;
  align-items: stretch;
  /* Fixed working height: adding categories scrolls the rail instead of
     growing the panel. */
  height: min(64vh, 470px);
  min-height: 0;
}

/* ---- categories rail ---- */
/* One card, rows separated by hairline dividers (no per-row cards). */
.lu-mega__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.lu-mega__rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  /* Scrolling stays inside the rail — the page never moves with it. */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c3d3e8 transparent;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

/* Slim, self-effacing scrollbar that only firms up on hover. */
.lu-mega__rail::-webkit-scrollbar {
  width: 6px;
}

.lu-mega__rail::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}

.lu-mega__rail::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #d3deeb;
  transition: background 0.16s ease;
}

.lu-mega__rail:hover::-webkit-scrollbar-thumb {
  background: #a9c0dd;
}

.lu-mega__rail::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

.lu-mega__item {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink-2);
  transition:
    background 0.14s ease,
    color 0.14s ease;
}

.lu-mega__item:first-child {
  border-radius: 13px 13px 0 0;
}

.lu-mega__item:last-child {
  border-bottom: 0;
  border-radius: 0 0 13px 13px;
}

.lu-mega__item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: transparent;
  transition: background 0.14s ease;
}

.lu-mega__item:hover,
.lu-mega__item.is-active {
  background: var(--accent-soft);
}

.lu-mega__item:hover::before,
.lu-mega__item.is-active::before {
  background: var(--accent);
}

.lu-mega__icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.15rem;
  transition: 0.14s ease;
}

.lu-mega__item:hover .lu-mega__icon,
.lu-mega__item.is-active .lu-mega__icon {
  background: var(--grad-primary);
  color: #fff;
}

.lu-mega__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lu-mega__name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lu-mega__item:hover .lu-mega__name,
.lu-mega__item.is-active .lu-mega__name {
  color: var(--accent);
}

.lu-mega__meta {
  font-size: 0.76rem;
  color: var(--slate-500);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lu-mega__chev {
  margin-left: auto;
  padding-left: 8px;
  font-size: 0.8rem;
  color: #9aa8bd;
  transition: transform 0.14s ease;
}

.lu-mega__item:hover .lu-mega__chev,
.lu-mega__item.is-active .lu-mega__chev {
  color: var(--accent);
  transform: translateX(3px);
}

.lu-mega__help {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  flex: none;
  padding: 14px;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid rgba(47, 123, 224, 0.16);
  text-decoration: none;
  transition: 0.16s ease;
}

.lu-mega__help:hover {
  background: #dbe9fd;
}

.lu-mega__help-ico {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff;
  color: var(--accent);
  font-size: 1.15rem;
}

.lu-mega__help b {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--primary);
}

.lu-mega__help small {
  display: block;
  font-size: 0.76rem;
  color: var(--slate-500);
}

.lu-mega__help em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
}

/* ---- featured product cards ---- */
.lu-mega__main {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.lu-mega__cards {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lu-mega__card {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  transition:
    border-color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.lu-mega__card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -22px rgba(0, 40, 92, 0.55);
}

.lu-mega__thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: #f4f8fd;
  overflow: hidden;
}

.lu-mega__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.lu-mega__flag {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 1;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
}

.lu-mega__flag.is-best {
  background: var(--primary-600);
}

.lu-mega__flag.is-new {
  background: var(--accent-cyan);
}

.lu-mega__flag.is-pop {
  background: #0f9d58;
}

.lu-mega__cname {
  margin-top: 9px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--primary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lu-mega__cmeta {
  margin-top: 3px;
  font-size: 0.72rem;
  color: var(--slate-500);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lu-mega__clink {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--accent);
}

.lu-mega__clink i {
  transition: transform 0.16s ease;
}

.lu-mega__card:hover .lu-mega__clink i {
  transform: translateX(3px);
}

/* ---- promo rail ---- */
.lu-mega__promo {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 18px 16px;
  border-radius: 16px;
  background: var(--grad-primary);
  color: #fff;
  text-decoration: none;
  text-align: center;
  overflow: hidden;
}

.lu-mega__promo-eyebrow {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-cyan);
}

.lu-mega__promo-title {
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lu-mega__promo-points {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  text-align: left;
}

.lu-mega__promo-points span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.86);
}

.lu-mega__promo-points i {
  color: var(--accent-cyan);
}

.lu-mega__promo-media {
  display: block;
  flex: 1;
  min-height: 0;
  margin: 14px 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.lu-mega__promo-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.lu-mega__promo-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 11px;
  background: var(--grad-accent);
  font-size: 0.83rem;
  font-weight: 700;
  transition: filter 0.16s ease;
}

.lu-mega__promo:hover .lu-mega__promo-btn {
  filter: brightness(1.12);
}

/* ---- trust strip ---- */
.lu-mega__trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  padding: 13px 8px 4px;
  border-top: 1px solid var(--line);
}

.lu-mega__trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lu-mega__trust-item > i {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.9rem;
}

.lu-mega__trust-item b {
  display: block;
  font-size: 0.78rem;
  color: var(--primary);
  line-height: 1.2;
}

.lu-mega__trust-item small {
  display: block;
  font-size: 0.7rem;
  color: var(--slate-500);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ---- panes: one per rail item, swapped on hover ---- */
.lu-mega__pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.lu-mega__pane[hidden] {
  display: none;
}

.lu-mega__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 9px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--slate-500);
}

.lu-mega__label a {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: none;
}

.lu-mega__label a:hover {
  color: var(--primary-600);
}

.lu-mega__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 22px 10px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--slate-500);
}

/* Compact price line replaces the old description + link rows so six cards
   always fit one screen. */
.lu-mega__cprice {
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
}

/* Shorter viewports: two rows of three would overflow, so the cards shrink
   before the panel ever scrolls. */
@media (max-height: 780px) {
  .lu-mega__thumb {
    aspect-ratio: 16 / 10;
  }

  .lu-mega__promo-media {
    margin: 10px 0;
    aspect-ratio: 16 / 10;
  }
  .lu-mega__trust {
    display: none;
  }
}

@media (max-height: 680px) {
  /* Still six cards — only the chrome gets tighter. */
  .lu-mega__panel {
    padding: 10px;
  }
  .lu-mega__thumb {
    aspect-ratio: 16 / 9;
  }
  .lu-mega__help {
    display: none;
  }
}

/* Narrower desktops: drop the promo rail first, then a card column. */
@media (max-width: 1240px) {
  .lu-mega__grid {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .lu-mega__promo {
    display: none;
  }
}

@media (max-width: 1040px) {
  /* Keep the 3 x 2 grid — only the trust strip stacks. */
  .lu-mega__trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile drawer ---------------------------------------------------------- */
.lu-burger {
  display: none;
}

.lu-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(88vw, 340px);
  background: #fff;
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  padding: 20px;
  box-shadow: 0 0 60px rgba(0, 26, 61, 0.3);
}

.lu-drawer.is-open {
  transform: translateX(0);
}

.lu-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.lu-drawer__link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  /* A rule under every row, so the list reads as discrete entries. */
  border-bottom: 1px solid var(--line);
}

/* The row before a section label, and the last row in a group, would double up
   with the label's own divider. */
.lu-drawer__link:last-child,
.lu-drawer__link:has(+ .lu-drawer__label),
.lu-drawer__link:has(+ .lu-drawer__sec),
.lu-drawer__seclist .lu-drawer__link:last-child {
  border-bottom: 0;
}

.lu-drawer__link:hover {
  background: var(--accent-soft);
  color: var(--primary-600);
}

/* Category rows carry their tagline and live product count. */
.lu-drawer__ctext {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.lu-drawer__ctext small {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--slate-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lu-drawer__count {
  margin-left: auto;
  flex: none;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}

/* Featured products inside the drawer. */
.lu-drawer__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.lu-drawer__card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  background: #fff;
}

.lu-drawer__card:hover {
  border-color: var(--accent);
}

.lu-drawer__card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 8px;
  background: #f4f8fd;
}

.lu-drawer__card span {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Every section label doubles as its own divider, so the groups read as
   separate blocks rather than one long list of links. */
.lu-drawer__label {
  margin: 14px 0 6px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-400);
  font-weight: 700;
}

/* ---- Collapsible drawer sections ---------------------------------------
   Categories and Featured fold away so Company and Account stay within one
   screen instead of sitting a long scroll below them. */
.lu-drawer__sec {
  padding-bottom: 6px;
}

/* The label rule above supplies the divider; the summary only needs the row
   layout for its badge and chevron. */
.lu-drawer__sec > summary.lu-drawer__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 2px 4px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* Hide the native disclosure marker in both engines. */
.lu-drawer__sec > summary::-webkit-details-marker {
  display: none;
}

.lu-drawer__sec > summary:focus-visible {
  outline: 2px solid var(--accent-cyan, #38bdf8);
  outline-offset: 2px;
  border-radius: 6px;
}

.lu-drawer__secnum {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--slate-100, #eef2f7);
  color: var(--slate-500, #64748b);
  font-size: 0.68rem;
  letter-spacing: 0;
}

.lu-drawer__chev {
  margin-left: auto;
  font-size: 0.8rem;
  transition: transform 0.22s ease;
}

.lu-drawer__sec[open] .lu-drawer__chev {
  transform: rotate(180deg);
}

/* Even expanded, a long list scrolls within itself — what follows the section
   is always reachable without paging through every category. */
.lu-drawer__seclist {
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

@media (prefers-reduced-motion: reduce) {
  .lu-drawer__chev {
    transition: none;
  }
}

.lu-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 26, 61, 0.5);
  backdrop-filter: blur(2px);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s;
}

.lu-scrim.is-open {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   4. Hero — credentials, headline, product stage with spec card, stat bar
   -------------------------------------------------------------------------- */
.lu-hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(
      1100px 620px at 74% 18%,
      rgba(22, 184, 230, 0.2),
      transparent 60%
    ),
    radial-gradient(
      820px 480px at 6% 92%,
      rgba(47, 123, 224, 0.22),
      transparent 66%
    ),
    linear-gradient(160deg, #031734 5%, #022a5b 45%, #000b1a 100%);
  /* linear-gradient(160deg, #021a3d 0%, #001126 55%, #000b1a 100%); */
  color: #fff;
  overflow: hidden;
  /* The header floats over the hero, so reserve its height at the top. */
  padding: calc(var(--header-h) + clamp(14px, 3vh, 40px)) 0
    clamp(18px, 4vh, 44px);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 4vh, 44px);
}

.lu-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 40% 40%, #000 20%, transparent 74%);
  pointer-events: none;
}

/* Big brand disc behind the product, as in the reference. */
.lu-hero__blob {
  position: absolute;
  z-index: -1;
  top: 4%;
  right: 2%;
  width: min(42vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 35%,
    rgba(30, 120, 220, 0.55),
    rgba(10, 60, 140, 0.25) 55%,
    transparent 72%
  );
  filter: blur(2px);
  pointer-events: none;
}

.lu-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(26px, 3.4vw, 48px);
  align-items: center;
}

.lu-hero__inner > * {
  min-width: 0;
}

/* Credential chips ------------------------------------------------------- */
.lu-hero__creds {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 clamp(14px, 2.4vh, 26px);
  padding: 0;
  list-style: none;
}

.lu-hero__creds li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px);
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}

.lu-hero__creds i {
  color: var(--accent-cyan);
  font-size: 0.9rem;
}

/* Headline --------------------------------------------------------------- */
.lu-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, min(3.6vw, 5.6vh), 3.15rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  /* Explicit, because the inherited base stylesheet colours every h1 dark. */
  color: #fff;
  margin: 0 0 clamp(12px, 2vh, 20px);
}

.lu-hero__title-accent {
  background: linear-gradient(90deg, #16b8e6, #4f9dfb);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lu-hero__lead {
  font-size: clamp(0.96rem, min(1.35vw, 1.9vh), 1.08rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  max-width: 52ch;
  margin: 0 0 clamp(16px, 2.8vh, 30px);
}

.lu-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: clamp(14px, 2.4vh, 26px);
}

.lu-hero__cta .lu-btn {
  padding: 14px 28px;
  font-size: 0.95rem;
}

/* Rating row ------------------------------------------------------------- */
.lu-hero__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

.lu-hero__stars {
  display: inline-flex;
  gap: 2px;
  color: #f5b32c;
  font-size: 0.9rem;
}

/* Product stage ---------------------------------------------------------- */
.lu-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lu-hero__halo {
  position: absolute;
  z-index: 0;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(22, 184, 230, 0.28),
    transparent 62%
  );
  filter: blur(28px);
  pointer-events: none;
}

.lu-hero__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  /* --hero-ratio is stamped on the element from the real banner dimensions
     (views/home.php); 4/3 is only the no-banner fallback. */
  max-width: min(
    100%,
    calc(
      (100svh - var(--header-h) - clamp(190px, 34vh, 330px)) *
        var(--hero-ratio, 1.3333)
    )
  );
  aspect-ratio: var(--hero-ratio, 1.3333);
  margin-inline: auto;
  border-radius: var(--radius-xl);
  padding: 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  box-shadow:
    0 50px 90px -40px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Thin cyan rim light along the top edge of the frame. */
.lu-hero__stage::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18%;
  right: 18%;
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-cyan),
    transparent
  );
  opacity: 0.8;
}

.lu-hero__slider {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius-xl) - 10px);
  overflow: hidden;
  background: #04142e;
}

/* With banner artwork the plate is white, so the mid-crossfade moment (both
   slides partly transparent) must not flash the dark backdrop through. */
.lu-hero__slider:has(.lu-hero__slide--banner) {
  background: #fff;
}

.lu-hero__slides {
  position: absolute;
  inset: 0;
}

.lu-hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  /* Outgoing slide falls away into the stage as it fades, so the pair reads
     as depth rather than a straight crossfade. */
  transform: scale(0.92);
  will-change: opacity, transform;
  transition:
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.5s;
}

/* Incoming slide starts oversized and settles back to fit — a zoom-out. */
.lu-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  animation: lu-hero-zoom-in 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes lu-hero-zoom-in {
  from {
    opacity: 0;
    transform: scale(1.18);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.lu-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Studio-white product photos glare on a dark hero; take the edge off. */
  filter: saturate(1.05) contrast(1.02) brightness(0.94);
  /* Ken Burns drift, retimed to finish inside the shorter slide interval. */
  transition: transform 3.4s ease-out;
}

.lu-hero__slide.is-active img {
  transform: scale(1.05);
}

/* Banner artwork is already art-directed: show it as designed, undarkened. */
.lu-hero__slide--banner img {
  filter: none;
  /* Never crop the artwork — banners differ in ratio, so contain shows each
     one whole. The stage ratio is averaged from the real files, so any
     leftover margin is small and reads as part of the dark hero. */
  object-fit: contain;
  background: #fff;
}

/* White plate behind the artwork so the contained margins match it. */
.lu-hero__slide--banner {
  background: #fff;
}

/* The Ken Burns zoom would push a contained banner past the stage edges and
   clip it, which is exactly the cropping contain is here to avoid. */
.lu-hero__slide--banner.is-active img {
  transform: none;
}

/* Banners carry no caption, so the scrim that existed to keep one readable
   would only be dimming the artwork. */
.lu-hero__slide--banner::after {
  content: none;
}

/* Scrim so the caption stays readable over any photo. */
.lu-hero__slide::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(180deg, transparent, rgba(2, 16, 40, 0.9));
  pointer-events: none;
}

.lu-hero__slide figcaption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 2;
  /* max-width: 62%; */
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(4, 20, 46, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  font-size: 0.78rem;
  font-weight: 650;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Glowing plinth under the product. */
.lu-hero__podium {
  position: absolute;
  left: 50%;
  bottom: -5%;
  translate: -50% 0;
  width: 82%;
  height: 11%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(47, 123, 224, 0.55), transparent 78%),
    linear-gradient(90deg, transparent, rgba(22, 184, 230, 0.85), transparent);
  filter: blur(6px);
  pointer-events: none;
}

.lu-hero__dots {
  position: absolute;
  left: 50%;
  bottom: -38px;
  translate: -50% 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  background: rgba(4, 20, 46, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
}

.lu-hero__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition:
    width 0.24s ease,
    background 0.24s ease;
}

.lu-hero__dot.is-active {
  width: 24px;
  background: var(--accent-cyan);
}

/* Spec card floating over the right edge of the stage. */
.lu-hero__specs {
  position: absolute;
  z-index: 4;
  top: 50%;
  right: clamp(-36px, -2vw, -12px);
  translate: 0 -50%;
  width: clamp(200px, 17vw, 236px);
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 10px;
  list-style: none;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    165deg,
    rgba(14, 40, 82, 0.92),
    rgba(6, 20, 46, 0.92)
  );
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px);
  box-shadow:
    0 34px 70px -30px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.lu-hero__specs li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 8px;
  border-radius: var(--radius-md);
  transition: background 0.16s ease;
}

.lu-hero__specs li:hover {
  background: rgba(255, 255, 255, 0.07);
}

.lu-hero__specs li:hover .lu-hero__spec-ico {
  background: var(--grad-accent);
  border-color: transparent;
  color: #fff;
}

.lu-hero__spec-ico {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(47, 123, 224, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--accent-cyan);
  font-size: 0.92rem;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    border-color 0.16s ease;
}

.lu-hero__specs b {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}

.lu-hero__specs small {
  display: block;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.3;
}

/* Stat bar --------------------------------------------------------------- */
.lu-hero__statwrap {
  position: relative;
  z-index: 2;
}

.lu-hero__statbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.lu-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(14px, 2vh, 20px) clamp(14px, 1.6vw, 24px);
}

.lu-stat + .lu-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.lu-stat__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(47, 123, 224, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--accent-cyan);
  font-size: 1.15rem;
}

.lu-stat__body {
  min-width: 0;
}

.lu-stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, min(2vw, 2.8vh), 1.6rem);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.lu-stat__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  margin-top: 2px;
}

.lu-stat__text {
  font-size: 0.74rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.5);
  margin: 3px 0 0;
}

/* --------------------------------------------------------------------------
   5. Feature icon (shared by the "why us" cards)
   -------------------------------------------------------------------------- */
.lu-usp__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--grad-accent);
  color: #fff;
  font-size: 1.24rem;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   6. Category cards
   -------------------------------------------------------------------------- */
.lu-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  /* box-shadow: 0 18px 40px -34px rgba(0, 40, 92, 0.6); */
  transition:
    transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.26s ease,
    border-color 0.26s ease;
}

/* Brand gradient washes up from the base on hover. */
.lu-cat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--grad-primary);
  opacity: 0;
  transition: opacity 0.26s ease;
}

.lu-cat:hover {
  transform: translateY(-8px);
  border-color: transparent;
  /* box-shadow: 0 34px 60px -28px rgba(0, 40, 92, 0.55); */
}

.lu-cat:hover::before {
  opacity: 1;
}

/* Media panel ------------------------------------------------------------ */
.lu-cat__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 90% at 50% 0%, #fff 12%, transparent 60%),
    var(--grad-green-soft);
  overflow: hidden;
  transition: background 0.26s ease;
}

.lu-cat__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 32px;
  padding: 16px;
  mix-blend-mode: multiply;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lu-cat:hover .lu-cat__img {
  transform: scale(1.07);
}

.lu-cat__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--grad-accent);
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 16px 30px -16px rgba(1, 58, 133, 0.85);
  transition: transform 0.26s ease;
}

.lu-cat:hover .lu-cat__icon {
  transform: scale(1.08);
}

/* Count badge sits on the media, out of the text flow. */
.lu-cat__count {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary-600);
  transition:
    background 0.26s ease,
    color 0.26s ease,
    border-color 0.26s ease;
}

.lu-cat:hover .lu-cat__count {
  background: var(--grad-accent);
  border-color: transparent;
  color: #fff;
}

/* Body ------------------------------------------------------------------- */
.lu-cat__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}

.lu-cat__name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 5px;
  transition: color 0.26s ease;
}

.lu-cat__tag {
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--slate-500);
  margin: 0 0 16px;
  transition: color 0.26s ease;
}

.lu-cat__foot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  transition:
    color 0.26s ease,
    gap 0.26s ease;
}

.lu-cat__foot i {
  transition: transform 0.26s ease;
}

.lu-cat:hover .lu-cat__foot {
  color: #fff;
}

.lu-cat:hover .lu-cat__foot i {
  transform: translateX(4px);
}

.lu-cat:hover .lu-cat__name {
  color: #fff;
}

.lu-cat:hover .lu-cat__tag {
  color: rgba(255, 255, 255, 0.74);
}

.lu-cat:hover .lu-cat__media {
  background: rgba(255, 255, 255, 0.08);
}

.lu-cat:hover .lu-cat__img {
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  .lu-cat,
  .lu-cat__img,
  .lu-cat__icon,
  .lu-cat__foot i {
    transition: none;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   7. Product card + grid
   -------------------------------------------------------------------------- */
.lu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 22px;
}

.lu-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Fixed three-up (blog teasers). Fixed rather than auto-fit on purpose: with
   only one or two posts published, auto-fit stretched the lone card across the
   full shell and its 16/10 media blew up to a full-screen slab. */
.lu-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

@media (max-width: 900px) {
  .lu-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .lu-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lu-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* box-shadow: 0 16px 36px -32px rgba(0, 40, 92, 0.6); */
  transition:
    transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.26s ease,
    border-color 0.26s ease;
}

.lu-card:hover {
  transform: translateY(-6px);
  border-color: rgba(47, 123, 224, 0.35);
  /* box-shadow: 0 30px 56px -26px rgba(0, 40, 92, 0.42); */
}

.lu-card.is-sold-out .lu-card__img {
  filter: grayscale(0.55);
  opacity: 0.75;
}

/* Media ------------------------------------------------------------------ */
.lu-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
  overflow: hidden;
}

.lu-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lu-card:hover .lu-card__img {
  transform: scale(1.06);
}

.lu-card__flags {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  z-index: 3;
}

.lu-card__soldout {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 7px 12px;
  background: rgba(0, 26, 61, 0.82);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

/* Single affordance in the corner instead of a stack of floating buttons. */
.lu-card__quick {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.24s ease,
    transform 0.24s ease;
}

.lu-card:hover .lu-card__quick {
  opacity: 1;
  transform: translateY(0);
}

.lu-card__qbtn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-accent);
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 12px 24px -12px rgba(1, 58, 133, 0.9);
}

/* Body ------------------------------------------------------------------- */
.lu-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 16px 16px;
}

.lu-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.lu-card__cat {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lu-card__cat:hover {
  color: var(--primary-600);
}

.lu-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-2);
}

.lu-card__rating i {
  color: #f59e0b;
  font-size: 0.72rem;
}

.lu-card__rating span {
  font-weight: 500;
  color: var(--slate-500);
}

/* Star row — also used on the product page reviews. */
.lu-stars {
  display: inline-flex;
  gap: 1px;
  color: #f59e0b;
  font-size: 0.8rem;
}

.lu-stars i.is-off {
  color: var(--slate-300);
}

.lu-card__name {
  font-weight: 650;
  line-height: 1.42;
  margin: 7px 0 14px;
  min-height: 1.84em;
  display: -webkit-box;
  /* -webkit-line-clamp: 2; */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lu-card__name a {
  color: var(--primary);
  text-decoration: none;
}

.lu-card__name a:hover {
  color: var(--accent);
}

/* Price sits left, availability right — one tidy line above the CTA. */
.lu-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  /* margin-top: auto; */
  padding-top: 12px;
  border-top: 1px solid var(--line);
  margin-bottom: 12px;
}

.lu-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.lu-price {
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.01em;
}

.lu-price--was {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--slate-400);
  text-decoration: line-through;
}

.lu-price--off {
  font-size: 0.76rem;
  font-weight: 700;
  color: #e11d48;
}

.lu-card__stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
}

/* Status dot replaces the old icon — quieter, reads faster in a grid. */
.lu-card__stock::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.lu-card__stock.is-in {
  color: var(--ok);
}
.lu-card__stock.is-low {
  color: var(--warn);
}
.lu-card__stock.is-out {
  color: var(--danger);
}

/* CTA — tinted by default, gradient on hover: four of these in a row stay
   calm instead of shouting. */
.lu-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  border: 1px solid rgba(47, 123, 224, 0.28);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--primary-600);
  font: 700 0.85rem/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.lu-card__cta:hover {
  background: var(--grad-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 14px 28px -16px rgba(1, 58, 133, 0.9);
}

.lu-card__cta--muted {
  background: var(--bg-soft);
  border-color: var(--line);
  color: var(--ink-2);
}

.lu-card__cta--muted:hover {
  background: var(--primary);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .lu-card,
  .lu-card__img,
  .lu-card__quick {
    transition: none;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   8. Shop layout — filters + toolbar + pagination
   -------------------------------------------------------------------------- */
/* Anchor target for pagination/sort links — clears the sticky header. */
#luResults {
  scroll-margin-top: calc(var(--header-h) + 20px);
}

.lu-shop {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* The <aside> is the sticky element, not the panel inside it: the panel's
   containing block is the aside, which is only as tall as the panel itself,
   so sticking the panel gives it no travel. The aside's grid area spans the
   full row height, so sticking the aside works. Its own overflow keeps a
   long filter list usable on short screens. */
.lu-shop__side {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  align-self: start;
  max-height: calc(100svh - var(--header-h) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Scrolls, but the bar itself stays out of the design. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lu-shop__side::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.lu-filters {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 6px 20px 20px;
}

.lu-filters__group {
  padding: 18px 0;
  border-bottom: 1px solid var(--slate-100);
}

.lu-filters__group:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}

.lu-filters__title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 13px;
}

.lu-filters__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--slate-600);
  font-size: 0.87rem;
  text-decoration: none;
  transition:
    background 0.14s ease,
    color 0.14s ease;
}

.lu-filters__link:hover {
  background: var(--accent-soft);
  color: var(--primary-600);
}

.lu-filters__link.is-active {
  background: var(--grad-accent);
  color: #fff;
  font-weight: 650;
}

.lu-filters__link.is-active .lu-filters__n {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.lu-filters__link--sub {
  padding-left: 26px;
  font-size: 0.83rem;
}

.lu-filters__n {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--slate-500);
  background: var(--slate-100);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.lu-filters__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lu-input {
  width: 100%;
  height: 40px;
  padding: 0 13px;
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-sm);
  font: 400 0.88rem var(--font-sans);
  color: var(--ink);
  background: #fff;
  outline: none;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.lu-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 123, 224, 0.12);
}

select.lu-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
  padding-right: 32px;
}

.lu-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.87rem;
  color: var(--slate-600);
  cursor: pointer;
  padding: 5px 0;
}

.lu-check input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
}

.lu-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  margin-bottom: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.lu-toolbar__count {
  font-size: 0.87rem;
  color: var(--slate-600);
}

.lu-toolbar__count b {
  color: var(--primary);
}

.lu-toolbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}


/* --------------------------------------------------------------------------
   Custom sort dropdown (replaces the native select in the shop toolbar)
   -------------------------------------------------------------------------- */
.lu-sort {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lu-sort__label {
  font-size: 0.85rem;
  color: var(--slate-500);
  white-space: nowrap;
}

.lu-sort__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 196px;
  height: 40px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: #fff;
  color: var(--primary);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.lu-sort__btn > i:first-child {
  color: var(--accent);
}

.lu-sort__value {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lu-sort__caret {
  font-size: 0.72rem;
  color: var(--slate-500);
  transition: transform 0.18s ease;
}

.lu-sort__btn:hover,
.lu-sort.is-open .lu-sort__btn {
  border-color: var(--accent);
}

.lu-sort.is-open .lu-sort__caret {
  transform: rotate(180deg);
}

.lu-sort__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 232px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 22px 44px -26px rgba(0, 40, 92, 0.5);
}

.lu-sort__menu[hidden] {
  display: none;
}

.lu-sort__menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--ink-2);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.14s ease;
}

.lu-sort__menu a i:first-child {
  color: var(--slate-500);
  font-size: 0.9rem;
}

.lu-sort__menu a:hover {
  background: var(--accent-soft);
  color: var(--primary-600);
}

.lu-sort__menu a.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.lu-sort__menu a.is-active i:first-child,
.lu-sort__tick {
  color: var(--accent);
}

.lu-sort__tick {
  margin-left: auto;
}

/* ---- mobile: full-width toolbar, sheet-style menu ---- */
@media (max-width: 640px) {
  .lu-toolbar {
    gap: 10px;
    padding: 12px 14px;
  }

  .lu-toolbar__count {
    width: 100%;
    font-size: 0.82rem;
  }

  .lu-sort {
    width: 100%;
    gap: 8px;
  }

  .lu-sort__label {
    display: none;
  }

  .lu-sort__btn {
    width: 100%;
    min-width: 0;
    height: 44px;
  }

  .lu-sort__menu {
    left: 0;
    right: 0;
    min-width: 0;
  }
}

.lu-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.lu-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--primary-600);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
}

.lu-chip i {
  font-size: 0.76rem;
  opacity: 0.7;
}

.lu-chip:hover {
  background: var(--accent);
  color: #fff;
}

.lu-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.lu-pager a,
.lu-pager span {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #fff;
  color: var(--slate-600);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.16s ease;
}

.lu-pager a:hover {
  border-color: var(--accent);
  color: var(--primary-600);
}

.lu-pager .is-current {
  background: var(--grad-accent);
  border-color: transparent;
  color: #fff;
}

.lu-pager .is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.lu-empty {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 40px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  /* box-shadow: 0 26px 60px -46px rgba(0, 40, 92, 0.65); */
}

/* Soft brand wash behind the artwork, fading out down the panel. */
.lu-empty::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: 62%;
  background: radial-gradient(
    72% 100% at 50% 0%,
    rgba(47, 123, 224, 0.09),
    transparent 70%
  );
}

/* Icon in a ringed disc rather than floating loose on the panel. */
.lu-empty__art {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--grad-green-soft);
  box-shadow: 0 0 0 10px rgba(47, 123, 224, 0.06);
}

.lu-empty__art i {
  font-size: 2.1rem;
  color: var(--accent);
}

.lu-empty h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--primary);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.lu-empty p {
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.7;
  color: var(--slate-500);
}

.lu-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(20px, 3vw, 28px);
}

/* Shortcut chips, so the panel offers somewhere to go rather than dead-ending. */

@media (max-width: 560px) {
  .lu-empty__actions .lu-btn {
    flex: 1 1 100%;
  }
}

/* Product carousel --------------------------------------------------------
   A scroll-snapped rail of product cards; the arrows live in the section
   head so they never overlap a card. */
.lu-carousel {
  position: relative;
  --cards: 4;
  --rail-gap: 22px;
}

.lu-carousel__rail {
  display: grid;
  grid-auto-flow: column;
  /* Exactly --cards per view: the track width is the rail's content box, so
     the row can never show a sliver of the next card. */
  grid-auto-columns: calc(
    (100% - (var(--cards) - 1) * var(--rail-gap)) / var(--cards)
  );
  gap: var(--rail-gap);
  /* Just enough padding for the cards' hover lift and shadow. */
  padding: 6px 4px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lu-carousel__rail::-webkit-scrollbar {
  height: 0;
}

.lu-carousel__rail > * {
  scroll-snap-align: start;
}

.lu-carousel__nav {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Head row that pairs a link with the carousel arrows. */
.lu-head__aside {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 22px);
  flex-shrink: 0;
}

/* On the dark offers band the arrows need the inverse treatment. */
.lu-cta__actions .lu-carousel__arrow {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  box-shadow: none;
}

.lu-cta__actions .lu-carousel__arrow:hover {
  background: #fff;
  color: var(--primary);
}

.lu-carousel__arrow {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition:
    background 0.16s ease,
    color 0.16s ease,
    opacity 0.16s ease,
    border-color 0.16s ease;
}

.lu-carousel__arrow:hover {
  background: var(--grad-accent);
  border-color: transparent;
  color: #fff;
}

/* Dimmed rather than removed, so the head does not reflow. */
.lu-carousel__arrow[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

.lu-carousel__nav[hidden] {
  display: none;
}

@media (max-width: 1024px) {
  .lu-carousel {
    --cards: 3;
    --rail-gap: 18px;
  }
}

@media (max-width: 760px) {
  .lu-carousel {
    --cards: 2;
    --rail-gap: 16px;
  }
}

@media (max-width: 520px) {
  /* One full card per view on a phone — the arrows and snap points are the
     cue that the row scrolls. */
  .lu-carousel {
    --cards: 1;
    --rail-gap: 14px;
  }
}

/* --------------------------------------------------------------------------
   9. Page hero (inner pages) + breadcrumbs
   -------------------------------------------------------------------------- */
.lu-pagehero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(
      900px 460px at 82% 0%,
      rgba(22, 184, 230, 0.2),
      transparent 62%
    ),
    radial-gradient(
      700px 420px at 6% 100%,
      rgba(47, 123, 224, 0.24),
      transparent 68%
    ),
    var(--grad-primary);
  color: #fff;
  padding: clamp(34px, 4.5vw, 56px) 0 clamp(30px, 4vw, 48px);
  overflow: hidden;
}

/* The header floats over this band, so reserve its height at the top. */
.has-hero .lu-pagehero {
  padding-top: calc(var(--header-h) + clamp(34px, 4.5vw, 56px));
}

.lu-pagehero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 30% 40%, #000 15%, transparent 72%);
  pointer-events: none;
}

.lu-pagehero::after {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  top: -240px;
  right: -120px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(22, 184, 230, 0.26),
    transparent 66%
  );
}

.lu-pagehero__inner {
  position: relative;
  z-index: 2;
}

/* Copy left, supporting CTA right. */
.lu-pagehero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
}

.lu-pagehero__text {
  min-width: 0;
}

/* The shared .text-gradient utility is tuned for light pages; on this dark
   band it needs the light end of the brand ramp. */
.lu-pagehero .text-gradient {
  background: linear-gradient(90deg, #16b8e6, #8dbaf5);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lu-pagehero__eyebrow {
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-cyan);
}

/* At-a-glance facts about whatever list is below. */
.lu-pagehero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.lu-pagehero__facts li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

.lu-pagehero__facts i {
  color: var(--accent-cyan);
  font-size: 0.92rem;
}

.lu-pagehero__actions {
  flex-shrink: 0;
}

.lu-pagehero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
  /* Explicit, because the inherited base stylesheet colours every h1 dark. */
  color: #fff;
  margin: 0 0 10px;
}

.lu-pagehero p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 62ch;
  margin-bottom: 18px;
}

.lu-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  /* font-size: 0.82rem; */
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.lu-crumbs a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.lu-crumbs a:hover {
  color: #fff;
  text-decoration: underline;
}

.lu-crumbs i {
  font-size: 0.7rem;
  opacity: 0.6;
}

/* Breadcrumb bar — its own strip under the hero, never inside it. */
.lu-crumbbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.lu-crumbbar .lu-crumbs {
  margin: 0;
  padding: 13px 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lu-crumbbar .lu-crumbs::-webkit-scrollbar {
  height: 0;
}

.lu-crumbbar .lu-crumbs > * {
  flex-shrink: 0;
}

/* The current page can be long (a full product name) — let it truncate
   rather than push the trail off screen. */
.lu-crumbbar .lu-crumbs > span[aria-current] {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--primary);
}

.lu-crumbs--light {
  color: var(--slate-500);
  margin-bottom: 20px;
}

.lu-crumbs--light a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 2px;
  border-radius: var(--radius-sm);
  transition: color 0.14s ease;
}

.lu-crumbs--light i.bi-house-door {
  font-size: 0.9rem;
}

.lu-crumbs--light a {
  color: var(--slate-600);
}

.lu-crumbs--light a:hover {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   10. Product detail
   -------------------------------------------------------------------------- */
.lu-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* The gallery holds its place while the buy box scrolls past; once the buy
   box runs out, the whole page scrolls on as normal. Sticky sits on the
   column itself — its grid area spans the full row height, so it has travel. */
.lu-pdp__gallery {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  align-self: start;
  max-height: calc(100svh - var(--header-h) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lu-pdp__gallery::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.lu-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.lu-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 13px;
}

.lu-gallery__flags {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 3;
}

/* Thumbnail slider: a scrolling rail flanked by two arrows. */
.lu-gallery__strip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.lu-gallery__thumbs {
  display: flex;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  padding: 3px;
  margin: -3px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lu-gallery__thumbs::-webkit-scrollbar {
  height: 0;
}

.lu-gallery__arrow {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition:
    background 0.16s ease,
    color 0.16s ease,
    opacity 0.16s ease;
}

.lu-gallery__arrow:hover {
  background: var(--grad-accent);
  border-color: transparent;
  color: #fff;
}

/* Dimmed rather than removed, so the rail never shifts width. */
/* display:grid above would otherwise defeat the [hidden] attribute. */
.lu-gallery__arrow[hidden] {
  display: none;
}

.lu-gallery__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.lu-thumb {
  flex: 0 0 clamp(64px, 8vw, 84px);
  aspect-ratio: 1 / 1;
  scroll-snap-align: start;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.lu-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.lu-thumb:hover {
  border-color: var(--accent);
}

.lu-thumb.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 123, 224, 0.18);
}

.lu-pdp__cat {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

.lu-pdp__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--primary);
  margin: 10px 0 14px;
}

.lu-pdp__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--slate-500);
}

.lu-pdp__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 6px;
}

.lu-pdp__price .lu-price {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
}

.lu-pdp__tax {
  font-size: 0.8rem;
  color: var(--slate-500);
  margin: 0 0 20px;
}

.lu-pdp__lead {
  color: var(--slate-600);
  line-height: 1.7;
  margin: 0 0 22px;
}

.lu-pdp__buy {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 20px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: 22px;
}

.lu-qty {
  display: inline-flex;
  align-items: center;
  height: 48px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: #fff;
  overflow: hidden;
}

.lu-qty button {
  width: 42px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.14s ease;
}

.lu-qty button:hover {
  background: var(--accent-soft);
}

.lu-qty input {
  width: 46px;
  height: 100%;
  border: 0;
  outline: none;
  text-align: center;
  font: 700 0.98rem var(--font-sans);
  color: var(--primary);
  /* -moz-appearance: textfield; */
}

.lu-qty input::-webkit-outer-spin-button,
.lu-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.lu-pdp__buy .lu-btn {
  height: 48px;
  flex: 1;
  min-width: 170px;
}

.lu-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.lu-trust__item {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.83rem;
  color: var(--slate-600);
}

.lu-trust__item i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--primary-600);
  font-size: 1.06rem;
  flex-shrink: 0;
}

.lu-tabs__nav {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  /* Stays in reach while a long panel scrolls. */
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  background: #fff;
}

.lu-tabs__nav::-webkit-scrollbar {
  height: 0;
}

/* Reviews block (its own section under the tabs) ------------------------- */
.lu-reviews__score {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.lu-reviews__avg {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
}

.lu-reviews__count {
  font-size: 0.82rem;
  color: var(--slate-500);
}

.lu-reviews {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 6px 22px;
}

.lu-reviews > p {
  padding: 18px 0;
  margin: 0;
  color: var(--slate-500);
}

.lu-tabs__nav::-webkit-scrollbar {
  display: none;
}

.lu-tabs__btn {
  padding: 14px 22px;
  border: 0;
  background: transparent;
  color: var(--slate-500);
  font: 650 0.92rem var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  transition:
    color 0.16s ease,
    border-color 0.16s ease;
}

.lu-tabs__btn:hover {
  color: var(--primary-600);
}

.lu-tabs__btn.is-active {
  color: var(--primary-600);
  border-bottom-color: var(--accent);
}

.lu-tabs__panel {
  padding: 28px 0;
  color: var(--slate-600);
  line-height: 1.75;
}

.lu-tabs__panel[hidden] {
  display: none;
}

.lu-tabs__panel h3 {
  font-family: var(--font-display);
  color: var(--primary);
  margin: 0 0 14px;
  font-size: 1.1rem;
}

.lu-feat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px 26px;
}

.lu-feat-list li {
  position: relative;
  padding-left: 30px;
}

.lu-feat-list li::before {
  content: "\F26E";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--accent);
  font-size: 1.05rem;
}

.lu-spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.lu-spec tr {
  border-bottom: 1px solid var(--slate-100);
}

.lu-spec tr:nth-child(odd) {
  background: var(--bg-soft);
}

.lu-spec th,
.lu-spec td {
  padding: 12px 16px;
  text-align: left;
}

.lu-spec th {
  width: 38%;
  color: var(--primary);
  font-weight: 650;
}

.lu-spec td {
  color: var(--slate-600);
}

/* Reviews ---------------------------------------------------------------- */
.lu-review {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.lu-review:last-child {
  border-bottom: 0;
}

.lu-review:last-child {
  border-bottom: 0;
}

.lu-review__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}

.lu-review__avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  flex-shrink: 0;
}

.lu-review__name {
  font-weight: 650;
  color: var(--primary);
  font-size: 0.92rem;
}

.lu-review__date {
  font-size: 0.76rem;
  color: var(--slate-400);
}

.lu-review__title {
  font-weight: 650;
  color: var(--ink-2);
  margin: 0 0 5px;
}

.lu-review__body {
  color: var(--slate-600);
  margin: 0;
  font-size: 0.92rem;
}

/* --------------------------------------------------------------------------
   11. Cart & checkout
   -------------------------------------------------------------------------- */
.lu-cart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 30px;
  align-items: start;
}

.lu-cart__list {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.lu-line {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--slate-100);
}

.lu-line:last-child {
  border-bottom: 0;
}

.lu-line__img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 8px;
}

.lu-line__name {
  font-weight: 650;
  color: var(--primary);
  text-decoration: none;
  display: block;
  margin-bottom: 5px;
  line-height: 1.4;
}

.lu-line__name:hover {
  color: var(--accent);
}

.lu-line__meta {
  font-size: 0.78rem;
  color: var(--slate-500);
  margin-bottom: 10px;
}

.lu-line__controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.lu-line__right {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.lu-line__total {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--primary);
  font-size: 1.06rem;
}

.lu-line__remove {
  border: 0;
  background: transparent;
  color: var(--slate-400);
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
}

.lu-line__remove:hover {
  color: var(--danger);
}

.lu-qty--sm {
  height: 38px;
}

.lu-qty--sm button {
  width: 34px;
  font-size: 0.95rem;
}

.lu-qty--sm input {
  width: 40px;
  font-size: 0.9rem;
}

.lu-summary {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.lu-summary h3 {
  font-family: var(--font-display);
  color: var(--primary);
  margin: 0 0 18px;
  font-size: 1.15rem;
}

.lu-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  font-size: 0.91rem;
  color: var(--slate-600);
}

.lu-summary__row b {
  color: var(--ink-2);
  font-weight: 650;
}

.lu-summary__row--free b {
  color: var(--ok);
}

.lu-summary__row--off b {
  color: var(--danger);
}

.lu-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 2px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
}

.lu-coupon {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}

.lu-coupon .lu-input {
  height: 42px;
}

.lu-note {
  font-size: 0.78rem;
  color: var(--slate-500);
  text-align: center;
  margin: 14px 0 0;
}

/* --------------------------------------------------------------------------
   12. CTA band + footer
   -------------------------------------------------------------------------- */
.lu-cta {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(
      760px 420px at 88% 0%,
      rgba(22, 184, 230, 0.22),
      transparent 62%
    ),
    radial-gradient(
      620px 380px at 0% 100%,
      rgba(47, 123, 224, 0.26),
      transparent 66%
    ),
    var(--grad-primary);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: clamp(20px, 3.4vw, 44px);
  overflow: hidden;
  display: grid;
  /* 40% copy / 50% step list, the remaining 10% falls between them. */
  grid-template-columns: 30% 65%;
  justify-content: space-between;
  gap: 0;
  align-items: center;
}

.su-cta {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(
      760px 420px at 88% 0%,
      rgba(22, 184, 230, 0.22),
      transparent 62%
    ),
    radial-gradient(
      620px 380px at 0% 100%,
      rgba(47, 123, 224, 0.26),
      transparent 66%
    ),
    var(--grad-primary);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: clamp(20px, 2.4vw, 44px);
  overflow: hidden;
  display: grid;
  /* 40% copy / 50% step list, the remaining 10% falls between them. */
  grid-template-columns: 65% 30%;
  justify-content: space-between;
  gap: 0;
  align-items: center;
}

.su-cta h2 {
  color: white;
}

/* Faint LED-wall grid, matching the hero bands. */
.lu-cta__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 30% 40%, #000 18%, transparent 74%);
  pointer-events: none;
}

.lu-cta__copy {
  position: relative;
  z-index: 1;
}

/* The shared eyebrow is tuned for light sections. */
.lu-cta .lu-eyebrow {
  color: var(--accent-cyan);
}

.lu-cta .lu-eyebrow::before {
  background: var(--accent-cyan);
}

.lu-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(18px, 2.4vw, 20px);
}

.lu-cta__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px !important;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.62) !important;
}

.lu-cta__note i {
  color: var(--accent-cyan);
}

/* Numbered "what to send us" list ---------------------------------------- */
.lu-cta__steps {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ctastep;
}

.lu-cta__steps li {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
}

.lu-cta__steps li:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateX(3px);
}

.lu-cta__step-ico {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(47, 123, 224, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--accent-cyan);
  font-size: 1.15rem;
}

.lu-cta__steps b {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.lu-cta__steps small {
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}

/* Copy plus a single action, rather than the three-step list. */
.lu-cta--simple {
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: stretch;
  gap: clamp(24px, 3vw, 40px);
}

.lu-cta--simple .lu-cta__actions {
  margin-top: 0;
}

@media (max-width: 900px) {
  .lu-cta,
  .lu-cta--simple {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 36px);
  }
}

@media (max-width: 560px) {
  .lu-cta__actions .lu-btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lu-cta__steps li {
    transition: none;
    transform: none;
  }
}

.lu-cta > * {
  position: relative;
  z-index: 2;
}

.lu-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  line-height: 1.24;
  margin: 0 0 12px;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.lu-cta p {
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.7;
  margin: 0;
}

.lu-footer {
  background: linear-gradient(180deg, #06142c 0%, var(--primary-900) 100%);
  color: rgba(255, 255, 255, 0.62);
  padding: clamp(48px, 6vw, 76px) 0 0;
  font-size: 0.89rem;
}

.lu-footer__grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(2, 0.9fr) 1.3fr;
  gap: clamp(24px, 3.6vw, 52px);
  padding-bottom: clamp(30px, 4vw, 44px);
}

/* Column heads carry a short accent rule, as in the reference. */
.lu-footer h4 {
  position: relative;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 22px;
  padding-bottom: 12px;
}

.lu-footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--grad-accent);
}

.lu-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.lu-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.16s ease;
}

.lu-footer a:hover {
  color: var(--accent-cyan);
}

.lu-footer__tag {
  margin: 14px 0 22px;
  line-height: 1.7;
  max-width: 40ch;
}

.lu-footer__note {
  margin: 0;
  line-height: 1.7;
  /* max-width: 34ch; */
}

/* Links with a chevron that steps right on hover. */
.lu-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lu-footer__links a::before {
  content: "\F285"; /* bootstrap-icons chevron-right */
  font-family: bootstrap-icons;
  font-size: 0.72rem;
  color: var(--accent-cyan);
  transition: transform 0.16s ease;
}

.lu-footer__links a:hover::before {
  transform: translateX(3px);
}

/* Contact rows with circular icon badges. */
.lu-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lu-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.6;
}

.lu-footer__ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--accent-cyan);
  font-size: 0.95rem;
}

.lu-social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.lu-social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.02rem;
  transition:
    background 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease;
}

.lu-social a:hover {
  background: var(--grad-accent);
  border-color: transparent;
  transform: translateY(-3px);
  color: #fff;
}

/* Trust strip ------------------------------------------------------------ */
.lu-footer ul.lu-footer__trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 clamp(6px, 1vw, 12px);
  padding: 0;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.lu-footer__trust li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(16px, 1.8vw, 22px) clamp(14px, 1.6vw, 22px);
  min-width: 0;
}

/* Short centred divider rather than a full-height rule. */
.lu-footer__trust li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 1px;
  height: 56%;
  background: rgba(255, 255, 255, 0.12);
}

.lu-footer__trust i {
  flex-shrink: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent-cyan);
}

.lu-footer__trust b {
  display: block;
  color: #fff;
  font-size: 0.92rem;
  margin-bottom: 4px;
}

.lu-footer__trust span {
  display: block;
  font-size: 0.82rem;
  line-height: 1.55;
}

/* The field is the whole control; the button sits inside its right end. */
.lu-newsletter {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

.lu-newsletter:focus-within {
  border-color: var(--accent-cyan);
  background: rgba(255, 255, 255, 0.09);
}

.lu-newsletter input {
  flex: 1;
  min-width: 0;
  height: 48px;
  /* Right padding clears the button. */
  padding: 0 56px 0 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: #fff;
  font: 400 0.88rem var(--font-sans);
  outline: none;
}

.lu-newsletter input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.lu-newsletter .lu-btn {
  position: absolute;
  top: 50%;
  right: 5px;
  translate: 0 -50%;
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.95rem;
  box-shadow: none;
}

.lu-newsletter .lu-btn:hover {
  transform: translateY(0) scale(1.06);
  box-shadow: 0 10px 22px -10px rgba(1, 58, 133, 0.9);
}

.lu-newsletter .lu-btn i {
  /* The paper-plane glyph reads level once nudged. */
  transform: translateX(1px);
  transition: opacity 0.15s ease;
}

.lu-newsletter .lu-btn[disabled] {
  opacity: 1;
  cursor: wait;
}

/* Submitting: the icon fades out and a ring spins in its place, so the
   button neither moves nor changes size. */
.lu-newsletter.is-busy .lu-btn i {
  opacity: 0;
}

.lu-newsletter.is-busy .lu-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  margin: auto;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: luSpin 0.65s linear infinite;
}

@keyframes luSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Result message, directly under the field. */
.lu-newsletter__note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  font-size: 0.8rem;
  font-weight: 600;
  transition:
    opacity 0.24s ease,
    transform 0.24s ease,
    max-height 0.24s ease,
    margin 0.24s ease;
}

.lu-newsletter__note.is-shown {
  max-height: 60px;
  margin-top: 9px;
  opacity: 1;
  transform: translateY(0);
}

.lu-newsletter__note i {
  font-size: 0.95rem;
  line-height: 1;
}

.lu-newsletter__note.is-success {
  color: #4ade80;
}

.lu-newsletter__note.is-error {
  color: #fca5a5;
}

.lu-footer__bar {
  margin-top: clamp(20px, 3vw, 34px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.82rem;
}

.lu-footer__bar nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* The separator between the legal links. */
.lu-footer__bar nav span {
  color: rgba(255, 255, 255, 0.24);
}

/* Floating WhatsApp ------------------------------------------------------ */
.lu-wa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  font-size: 1.7rem;
  z-index: 800;
  box-shadow: 0 12px 30px -8px rgba(37, 211, 102, 0.6);
  text-decoration: none;
  transition: transform 0.2s ease;
}

.lu-wa:hover {
  transform: scale(1.08);
  color: #fff;
}

/* Centred section head (used on the marketing pages). */
.lu-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lu-head--center .lu-head__text {
  max-width: 68ch;
}

.lu-head--center .lu-eyebrow {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */
.lu-about__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(16px, 1.6vw, 22px);
}

/* Fixed three-up row, used where the copy is short and even. */
.lu-about__grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lu-about__card {
  position: relative;
  padding: 26px 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.24s ease,
    border-color 0.24s ease;
}

/* Accent rule that draws across the top edge on hover. */
.lu-about__card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 3px;
  width: 100%;
  background: var(--grad-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Soft tint that fades up from the base. */
.lu-about__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 30%, var(--accent-soft));
  opacity: 0;
  transition: opacity 0.28s ease;
}

.lu-about__card:hover {
  transform: translateY(-6px);
  border-color: rgba(47, 123, 224, 0.32);
  box-shadow: 0 30px 54px -28px rgba(0, 40, 92, 0.42);
}

.lu-about__card:hover::before {
  transform: scaleX(1);
}

.lu-about__card:hover::after {
  opacity: 1;
}

.lu-about__card .lu-usp__icon {
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.28s ease;
}

.lu-about__card:hover .lu-usp__icon {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 16px 30px -14px rgba(1, 58, 133, 0.85);
}

/* Oversized step number, kept behind the content. */
.lu-about__num {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(1, 58, 133, 0.07);
}

.lu-about__card .lu-usp__icon {
  margin-bottom: 16px;
}

.lu-about__card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--primary);
  margin: 0 0 7px;
}

.lu-about__card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--slate-500);
  margin: 0;
}

/* Split: copy left, figures right -------------------------------------- */
.lu-about__split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.lu-about__list {
  list-style: none;
  margin: 22px 0 26px;
  padding: 0;
  display: grid;
  gap: 11px;
}

.lu-about__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--ink-2);
}

.lu-about__list i {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.8rem;
  margin-top: 1px;
}

.lu-about__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Showcase collage ------------------------------------------------------- */
.lu-about__showcase {
  position: relative;
  isolation: isolate;
}

.lu-about__glow {
  position: absolute;
  z-index: -1;
  inset: -12% -8%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 60% 40%,
    rgba(47, 123, 224, 0.22),
    transparent 66%
  );
  filter: blur(20px);
  pointer-events: none;
}

/* One tall lead image with two stacked beside it. */
.lu-about__collage {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
  aspect-ratio: 5 / 4;
}

.lu-about__shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px -34px rgba(0, 40, 92, 0.7);
}

.lu-about__shot.is-lead {
  grid-row: span 2;
}

.lu-about__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lu-about__shot:hover img {
  transform: scale(1.06);
}

/* Figure card sitting over the collage's bottom-left corner. */
.lu-about__badge {
  position: absolute;
  left: -14px;
  bottom: -18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: var(--radius-lg);
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 26px 50px -24px rgba(0, 26, 61, 0.75);
}

.lu-about__badge-num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, #fff, #8dbaf5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lu-about__badge-lbl {
  font-size: 0.76rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.78);
}

/* Strengths — illustrated cards ------------------------------------------ */
.lu-about__strengths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px);
}

.lu-about__strength {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 1.4vw, 22px);
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  transition:
    transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.26s ease,
    border-color 0.26s ease;
}

/* Brand wash that rises from the base on hover. */
.lu-about__strength::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent 35%, var(--accent-soft));
  opacity: 0;
  transition: opacity 0.28s ease;
}

.lu-about__strength:hover {
  transform: translateY(-6px);
  border-color: rgba(47, 123, 224, 0.32);
  box-shadow: 0 32px 56px -30px rgba(0, 40, 92, 0.45);
}

.lu-about__strength:hover::after {
  opacity: 1;
}

/* Ghosted step number in the corner. */
.lu-about__strength-num {
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(1, 58, 133, 0.06);
  transition: color 0.26s ease;
}

.lu-about__strength:hover .lu-about__strength-num {
  color: rgba(1, 58, 133, 0.12);
}

/* Artwork tile — navy line art on a soft brand tint, inverted to white
   when the tile fills with the gradient. */
.lu-about__strength-art {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 22px;
  background: var(--grad-green-soft);
  border: 1px solid rgba(1, 58, 133, 0.08);
  transition:
    background 0.28s ease,
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lu-about__strength-art img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  transition: filter 0.28s ease;
}

.lu-about__strength:hover .lu-about__strength-art {
  background: var(--grad-accent);
  transform: translateY(-3px) scale(1.04);
}

.lu-about__strength:hover .lu-about__strength-art img {
  filter: brightness(0) invert(1);
}

.lu-about__strength h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--primary);
  margin: 0 0 8px;
}

.lu-about__strength p {
  line-height: 1.65;
  color: var(--slate-500);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lu-about__strength,
  .lu-about__strength-art {
    transition: none;
    transform: none;
  }
}

/* Sectors ---------------------------------------------------------------- */
.lu-about__segs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
}

.lu-about__seg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

.lu-about__seg:hover {
  transform: translateY(-4px);
  border-color: rgba(47, 123, 224, 0.32);
  box-shadow: 0 24px 44px -30px rgba(0, 40, 92, 0.55);
}

.lu-about__seg:hover .lu-about__seg-ico {
  background: var(--grad-accent);
  color: #fff;
}

.lu-about__seg-ico {
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.lu-about__seg-ico {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--grad-green-soft);
  color: var(--primary-600);
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.lu-about__seg h3 {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0;
}

.lu-about__seg p {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--slate-500);
  margin: 0;
}

@media (max-width: 900px) {
  .lu-about__split {
    grid-template-columns: 1fr;
  }
  .lu-about__grid--3,
  .lu-about__strengths {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .lu-about__grid--3,
  .lu-about__strengths {
    grid-template-columns: 1fr;
  }

  .lu-about__strength-art {
    width: 68px;
    height: 68px;
    border-radius: 18px;
  }

  .lu-about__strength-art img {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 480px) {
  .lu-about__badge {
    left: 0;
    bottom: -14px;
    padding: 12px 16px;
  }

  .lu-about__badge-num {
    font-size: 1.4rem;
  }
}

/* --------------------------------------------------------------------------
   Order confirmation
   -------------------------------------------------------------------------- */
.lu-oc__band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(
      900px 460px at 50% -10%,
      rgba(22, 184, 230, 0.22),
      transparent 62%
    ),
    radial-gradient(
      700px 420px at 8% 110%,
      rgba(47, 123, 224, 0.24),
      transparent 66%
    ),
    var(--grad-primary);
  padding: calc(var(--header-h) + clamp(30px, 4vw, 52px)) 0
    clamp(30px, 4vw, 48px);
}

.lu-oc__band-inner {
  position: relative;
  z-index: 2;
}

.lu-oc__band h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 10px;
}

.lu-oc__band p {
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}

.lu-oc__band strong {
  color: #fff;
}

.lu-oc__chips {
  justify-content: center;
  margin-top: 22px;
}

/* Animated tick ---------------------------------------------------------- */
.lu-oc__check {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(74, 222, 128, 0.12);
  box-shadow: 0 0 0 10px rgba(74, 222, 128, 0.07);
  animation: luOcPop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.lu-oc__check svg {
  width: 54px;
  height: 54px;
}

.lu-oc__ring {
  stroke: rgba(74, 222, 128, 0.55);
  stroke-width: 3;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: luOcDraw 0.5s ease-out forwards;
}

.lu-oc__tick {
  stroke: #4ade80;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: luOcDraw 0.35s 0.3s ease-out forwards;
}

@keyframes luOcPop {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes luOcDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Fulfilment steps ------------------------------------------------------- */
.lu-oc__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 clamp(22px, 3vw, 34px);
  padding: clamp(18px, 2vw, 24px) clamp(12px, 2vw, 24px);
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  /* box-shadow: var(--shadow-card); */
  counter-reset: step;
}

.lu-oc__steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
  color: var(--slate-400);
}

/* Connector between the markers. */
.lu-oc__steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 21px;
  left: calc(50% + 26px);
  right: calc(-50% + 26px);
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--line);
}

.lu-oc__steps li.is-done::after {
  background: var(--accent);
}

.lu-oc__step-ico {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1.5px solid var(--line);
  color: var(--slate-400);
  font-size: 1.05rem;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.lu-oc__steps li.is-done .lu-oc__step-ico,
.lu-oc__steps li.is-current .lu-oc__step-ico {
  background: var(--grad-accent);
  border-color: transparent;
  color: #fff;
}

.lu-oc__steps li.is-current .lu-oc__step-ico {
  box-shadow: 0 0 0 5px rgba(47, 123, 224, 0.16);
}

.lu-oc__step-name {
  font-size: 0.82rem;
  font-weight: 650;
}

.lu-oc__steps li.is-done,
.lu-oc__steps li.is-current {
  color: var(--primary);
}

/* Cards ------------------------------------------------------------------ */
.lu-oc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(18px, 2vw, 28px);
  align-items: start;
}

.lu-oc__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2vw, 26px);
  /* box-shadow: var(--shadow-card); */
}

.lu-oc__card + .lu-oc__card {
  margin-top: clamp(14px, 1.6vw, 20px);
}

.lu-oc__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.lu-oc__card h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--primary);
  margin: 0;
}

.lu-oc__card h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 0.98rem;
  color: var(--primary);
  margin: 0 0 12px;
}

.lu-oc__card h3 i {
  color: var(--accent);
}

/* Status pills ----------------------------------------------------------- */
.lu-oc__badge {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--primary-600);
  white-space: nowrap;
}

.lu-oc__badge.is-paid,
.lu-oc__badge.is-delivered {
  background: #eafaf1;
  color: #12805a;
}

.lu-oc__badge.is-pending,
.lu-oc__badge.is-processing {
  background: #fff5e6;
  color: #a86a12;
}

.lu-oc__badge.is-failed,
.lu-oc__badge.is-cancelled {
  background: #fdeceb;
  color: #b91c1c;
}

/* Line items ------------------------------------------------------------- */
.lu-oc__item {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.lu-oc__items > .lu-oc__item:last-child {
  border-bottom: 0;
}

.lu-oc__thumb {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  overflow: hidden;
}

.lu-oc__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.lu-oc__item-info {
  min-width: 0;
}

.lu-oc__item-info b {
  display: block;
  font-size: 0.92rem;
  color: var(--primary);
  line-height: 1.4;
}

.lu-oc__item-info small {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  color: var(--slate-500);
}

.lu-oc__item-price {
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

/* Totals ----------------------------------------------------------------- */
.lu-oc__totals {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
}

.lu-oc__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  font-size: 0.92rem;
  color: var(--slate-600);
}

.lu-oc__row--total {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--primary);
}

.lu-oc__free {
  color: var(--ok);
}

.lu-oc__minus {
  color: var(--ok);
}

.lu-oc__pay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-weight: 700;
  color: var(--primary);
}

.lu-oc__addr {
  margin: 0;
  line-height: 1.7;
  font-size: 0.9rem;
  color: var(--slate-600);
}

.lu-oc__addr b {
  color: var(--primary);
}

.lu-oc__phone {
  color: var(--slate-500);
}

.lu-oc__help p {
  margin: 0 0 14px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--slate-500);
}

.lu-oc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 34px);
}

@media (max-width: 900px) {
  .lu-oc__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .lu-oc__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 0;
  }

  /* The connector only makes sense along a single row. */
  .lu-oc__steps li::after {
    display: none;
  }

  .lu-oc__item {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .lu-oc__thumb {
    width: 52px;
    height: 52px;
  }

  .lu-oc__item-price {
    grid-column: 2;
    justify-self: start;
  }

  .lu-oc__actions .lu-btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lu-oc__check,
  .lu-oc__ring,
  .lu-oc__tick {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Customer account
   -------------------------------------------------------------------------- */
/* .account-grid is the older wrapper still used by the other account views;
   both get the same two-column shape. */
.lu-acc,
.account-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: start;
}

/* Sidebar ---------------------------------------------------------------- */
.lu-acc__nav {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  display: grid;
  gap: 4px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  /* box-shadow: var(--shadow-card); */
}

.lu-acc__nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  color: var(--ink-2);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.16s ease,
    color 0.16s ease;
}

.lu-acc__nav a i {
  font-size: 1.05rem;
  color: var(--accent);
  transition: color 0.16s ease;
}

.lu-acc__nav a:hover {
  background: var(--accent-soft);
  color: var(--primary-600);
}

.lu-acc__nav a.is-active {
  background: var(--grad-accent);
  color: #fff;
  /* box-shadow: 0 14px 26px -16px rgba(1, 58, 133, 0.9); */
}

.lu-acc__nav a.is-active i {
  color: #fff;
}

.lu-acc__logout {
  margin-top: 6px;
  padding-top: 14px !important;
  border-top: 1px solid var(--line);
  border-radius: 0 !important;
  color: var(--slate-500) !important;
}

.lu-acc__logout i {
  color: var(--danger) !important;
}

.lu-acc__logout:hover {
  background: transparent !important;
  color: var(--danger) !important;
}

/* Stat tiles ------------------------------------------------------------- */
.lu-acc__stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 16px);
  margin-bottom: clamp(16px, 2vw, 22px);
}

.lu-acc__stat {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  /* box-shadow: var(--shadow-card); */
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.lu-acc__stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 42px -28px rgba(0, 40, 92, 0.5);
}

.lu-acc__stat-ico {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.1rem;
}

.lu-acc__stat-ico.is-amber {
  background: #fff5e6;
  color: #b57415;
}

.lu-acc__stat-ico.is-green {
  background: #eafaf1;
  color: #12805a;
}

.lu-acc__stat-ico.is-cyan {
  background: #e6f8fe;
  color: #0e88ab;
}

.lu-acc__stat > div {
  min-width: 0;
}

.lu-acc__stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.lu-acc__stat span {
  display: block;
  /* font-size: 0.85rem; */
  color: var(--slate-500);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Five tiles on one line: shrink the chrome before the row wraps. */
@media (max-width: 1280px) {
  .lu-acc__stats {
    gap: 10px;
  }

  .lu-acc__stat {
    padding: 12px;
    gap: 9px;
  }

  .lu-acc__stat-ico {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  .lu-acc__stat b {
    font-size: 1.05rem;
  }

  .lu-acc__stat span {
    font-size: 0.78rem;
  }
}

/* Cards ------------------------------------------------------------------ */
.lu-acc__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2vw, 26px);
  /* box-shadow: var(--shadow-card); */
}

.lu-acc__card + .lu-acc__card {
  margin-top: clamp(16px, 2vw, 22px);
}

.lu-acc__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.lu-acc__card-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--primary);
  margin: 0;
}

.lu-acc__card-head h2 i {
  color: var(--accent);
}

/* Profile form ----------------------------------------------------------- */
.lu-acc__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.lu-acc__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.lu-acc__field--full {
  grid-column: 1 / -1;
}

.lu-acc__field > span {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
}

.lu-acc__field small {
  font-weight: 500;
  color: var(--slate-400);
}

.lu-acc__field .lu-input:disabled {
  background: var(--bg-soft);
  color: var(--slate-500);
  cursor: not-allowed;
}

/* Order rows ------------------------------------------------------------- */
.lu-acc__orders {
  display: grid;
  gap: 10px;
}

.lu-acc__order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 16px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.lu-acc__order:hover {
  border-color: rgba(47, 123, 224, 0.35);
  background: var(--accent-soft);
  transform: translateX(2px);
}

.lu-acc__order-no b {
  display: block;
  font-size: 0.9rem;
  color: var(--primary);
}

.lu-acc__order-no small {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--slate-500);
}

.lu-acc__order-total {
  font-weight: 800;
  color: var(--primary);
  white-space: nowrap;
}

.lu-acc__order > i {
  color: var(--slate-400);
}

/* Empty state ------------------------------------------------------------ */
.lu-acc__empty {
  text-align: center;
  padding: 28px 16px 8px;
}

.lu-acc__empty i {
  font-size: 2rem;
  color: var(--slate-300, #cbd5e1);
}

.lu-acc__empty p {
  margin: 12px 0 16px;
  color: var(--slate-500);
}

@media (max-width: 1024px) {
  .lu-acc,
  .account-grid {
    grid-template-columns: 1fr;
  }

  /* Horizontal tab strip once it sits above the content. */
  .lu-acc__nav {
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .lu-acc__nav::-webkit-scrollbar {
    height: 0;
  }

  .lu-acc__logout {
    margin-top: 0;
    padding-top: 11px !important;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

@media (max-width: 1024px) {
  .lu-acc__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .lu-acc__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lu-acc__fields {
    grid-template-columns: 1fr;
  }

  .lu-acc__order {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 8px;
  }

  .lu-acc__order > i {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   13. Reveal-on-scroll
   -------------------------------------------------------------------------- */
.lu-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.lu-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .lu-reveal,
  .lu-hero__slide,
  .lu-hero__slide.is-active img {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .lu-grid--4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .lu-shop {
    grid-template-columns: 1fr;
  }
  /* Stacked layout — nothing to stick to. */
  .lu-shop__side {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .lu-cart {
    grid-template-columns: 1fr;
  }
  .lu-summary {
    position: static;
  }
  /* Stacked hero: copy on top, product below, both centred. */
  .lu-hero {
    text-align: center;
  }
  .lu-hero__inner {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vh, 40px);
  }
  .lu-hero__copy {
    max-width: 720px;
    margin-inline: auto;
  }
  .lu-hero__lead {
    margin-inline: auto;
  }
  .lu-hero__creds,
  .lu-hero__cta,
  .lu-hero__rating {
    justify-content: center;
  }
  .lu-hero__visual {
    flex-direction: column;
    gap: 18px;
  }
  .lu-hero__stage {
    /* Wide banners need the room once the hero stacks into one column. */
    max-width: min(620px, 100%);
  }
  /* The card can no longer overlap the product — it becomes a grid below. */
  .lu-hero__specs {
    position: static;
    translate: none;
    right: auto;
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: left;
  }
  .lu-hero__statbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lu-stat:nth-child(odd) {
    border-left: 0;
  }
  .lu-stat:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .lu-hero__blob {
    opacity: 0.5;
  }
  .lu-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .lu-footer__about {
    grid-column: 1 / -1;
  }
  /* Stays a single row — only the type steps down. */
  .lu-footer__trust b {
    font-size: 0.86rem;
  }
  .lu-footer__trust span {
    font-size: 0.76rem;
  }
  .lu-footer__trust i {
    font-size: 1.3rem;
  }
  .lu-pdp {
    grid-template-columns: 1fr;
  }
  .lu-pdp__gallery {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .lu-cta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  /* Nav + search collapse into the drawer; the header stays one tidy row. */
  .lu-nav,
  .lu-search {
    display: none;
  }

  .lu-burger {
    display: grid;
  }
  .lu-actions {
    margin-left: auto;
  }
  .lu-header__inner {
    gap: 12px;
  }
}

@media (max-width: 900px) {
  .lu-pagehero__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .lu-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  /* Phone hero: one full screen, copy left-aligned across the full width,
     product stage below it. The stat bar moves out of the first screen. */
  .lu-hero {
    text-align: left;
    gap: 18px;
    padding: calc(var(--header-h) + 14px) 0 20px;
  }
  .lu-hero__inner {
    gap: 10px;
    align-items: start;
  }
  /* Copy dissolves into the grid so the CTA can be re-ordered below the
     product stage while everything else keeps its reading order. */
  .lu-hero__copy {
    display: contents;
  }
  /* Headline leads on a phone; the credential chips sit under it. */
  .lu-hero__title {
    order: 1;
  }
  .lu-hero__creds {
    order: 2;
  }
  .lu-hero__lead {
    order: 3;
  }
  .lu-hero__visual {
    order: 4;
  }
  /* Sits last, centred under the button pair. */
  .lu-hero__rating {
    order: 7;
    justify-content: center;
    text-align: center;
  }
  .lu-hero__cta {
    order: 6;
    margin: 0;
  }
  /* Two credentials are enough at this width. */
  .lu-hero__creds li:first-child {
    display: none;
  }
  .lu-hero__title {
    /* font-size: clamp(1.6rem, 7.2vw, 2rem); */
    line-height: 1.2;
    /* margin-bottom: 14px; */
  }
  .lu-hero__lead {
    max-width: none;
    margin-inline: 0;
    /* margin-bottom: 18px; */
  }
  .lu-hero__creds,
  .lu-hero__cta {
    justify-content: flex-start;
  }
  .lu-hero__creds {
    gap: 8px;
    margin-bottom: 14px;
  }
  .lu-hero__stage {
    max-width: 100%;
    /* Let the banner ratio drive the height; the cap is only a safety net for
       tall artwork on short phones. */
    max-height: min(42vh, 340px);
    padding: 6px;
  }
  /* Stats read as a second screen — keep the hero to exactly one. */
  .lu-hero__statwrap {
    display: none;
  }
  .lu-hero__specs {
    grid-template-columns: 1fr;
  }
  .lu-hero__creds li {
    padding: 7px 12px;
    font-size: 0.74rem;
  }
  /* Both CTAs share one row under the product stage. */
  .lu-hero__cta {
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 10px;
  }
  .lu-hero__cta .lu-btn {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
    padding-inline: 14px;
    font-size: 0.85rem;
  }
  .lu-stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 12px;
  }
  .lu-stat__icon {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  /* The supporting line is noise at this width. */
  .lu-stat__text {
    display: none;
  }
  .lu-grid,
  .lu-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .lu-cat__body {
    padding: 14px 14px 16px;
  }
  .lu-cat__name {
    font-size: 0.96rem;
  }
  .lu-cat__tag {
    font-size: 0.78rem;
    margin-bottom: 12px;
  }
  .lu-cat__count {
    font-size: 0.68rem;
    padding: 4px 9px;
  }
  .lu-card__body {
    padding: 12px 13px 14px;
  }
  .lu-card__name {
    font-size: 0.86rem;
  }
  /* Price and availability stack rather than squeezing side by side. */
  .lu-card__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .lu-card__cta {
    padding: 10px 12px;
    font-size: 0.8rem;
  }
  .lu-price {
    font-size: 1.02rem;
  }
  /* Phone: intro and newsletter run full width, the two link lists pair up
     half-and-half so the footer stays short. */
  .lu-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
  }
  .lu-footer__about,
  .lu-footer__grid > .lu-footer__col:last-child {
    grid-column: 1 / -1;
  }
  /* Four columns will not fit a phone, and stacked they push the footer
     far too long — drop the strip entirely. */
  .lu-footer ul.lu-footer__trust {
    display: none;
  }
  .lu-footer__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .lu-line {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .lu-line__img {
    width: 72px;
    height: 72px;
  }
  .lu-line__right {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .lu-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .lu-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .lu-toolbar__right {
    justify-content: space-between;
  }
}

@media (max-width: 420px) {
  /* This block used to end in a dangling selector list with no declarations,
     which is a parse error — the browser then discarded the rule that
     followed it. */
  .lu-grid,
  .lu-grid--4 {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

/* --------------------------------------------------------------------------
   Mobile category bar (shop + category pages)
   Desktop keeps the sidebar; on phones the categories move to a pinned,
   swipeable bar within thumb reach.
   -------------------------------------------------------------------------- */
.lu-catbar {
  display: none;
}

@media (max-width: 900px) {
  .lu-catbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 70;
    display: block;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--line);
  }

  .lu-catbar__scroll {
    display: flex;
    gap: 8px;
    padding: 0 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .lu-catbar__scroll::-webkit-scrollbar {
    display: none;
  }

  .lu-catbar__item {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink-2);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition:
      background 0.16s ease,
      border-color 0.16s ease,
      color 0.16s ease;
  }

  .lu-catbar__item i {
    font-size: 0.95rem;
    color: var(--accent);
  }

  /* Touch feedback: the chip is a link to that category's listing. */
  .lu-catbar__item,
  .lu-catbar__filter {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .lu-catbar__item:active,
  .lu-catbar__filter:active {
    transform: scale(0.97);
  }

  .lu-catbar__item em {
    font-style: normal;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 700;
  }

  .lu-catbar__item.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
  }

  .lu-catbar__item.is-active i,
  .lu-catbar__item.is-active em {
    color: #fff;
  }

  .lu-catbar__item.is-active em {
    background: rgba(255, 255, 255, 0.2);
  }

  /* Room for the bar, plus lift the floating WhatsApp button clear of it. */
  body.has-catbar {
    padding-bottom: 74px;
  }

  body.has-catbar .lu-wa {
    bottom: calc(78px + env(safe-area-inset-bottom));
  }
}

/* --------------------------------------------------------------------------
   Mobile filter sheet — the sidebar's price / availability controls, reachable
   from the category bar.
   -------------------------------------------------------------------------- */
.lu-sheet,
.lu-sheet__scrim {
  display: none;
}

@media (max-width: 900px) {
  /* Bar hides on the way down and returns on the way up, like the header. */
  .lu-catbar {
    transition:
      transform 0.26s ease,
      opacity 0.2s ease;
  }

  .lu-catbar.is-hidden {
    transform: translateY(115%);
    opacity: 0;
    pointer-events: none;
  }

  .lu-catbar__filter {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid rgba(47, 123, 224, 0.35);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
  }

  .lu-catbar__filter i {
    font-size: 0.95rem;
  }

  .lu-catbar__filter em {
    font-style: normal;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.7rem;
  }

  .lu-catbar__filter.is-on {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

  .lu-catbar__filter.is-on em {
    background: rgba(255, 255, 255, 0.24);
  }

  /* ---- sheet ---- */
  /* [hidden] must still win here: an author display:block beats the UA
     hidden rule, which left an invisible scrim swallowing every click. */
  .lu-sheet[hidden],
  .lu-sheet__scrim[hidden] {
    display: none;
  }

  .lu-sheet__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 20, 45, 0.45);
    opacity: 0;
    /* Belt and braces: even mid-transition it must not eat taps. */
    pointer-events: none;
    transition: opacity 0.22s ease;
  }

  .lu-sheet__scrim.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .lu-sheet {
    display: block;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 95;
    max-height: 82vh;
    overflow-y: auto;
    padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
    background: #fff;
    border-radius: 22px 22px 0 0;
    border-top: 1px solid var(--line);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .lu-sheet.is-open {
    transform: translateY(0);
  }

  .lu-sheet__grip {
    width: 42px;
    height: 4px;
    margin: 4px auto 10px;
    border-radius: 999px;
    background: #d6dfeb;
  }

  .lu-sheet__head {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
  }

  .lu-sheet__head h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--primary);
  }

  .lu-sheet__close {
    margin-left: auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--primary);
    cursor: pointer;
  }

  .lu-sheet__group {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }

  .lu-sheet__group h4 {
    margin: 0 0 10px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--slate-500);
  }

  .lu-sheet__row {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .lu-sheet__row .lu-input {
    flex: 1;
    min-width: 0;
  }

  .lu-sheet__row span {
    color: var(--slate-400);
  }

  .lu-sheet__hint {
    margin: 10px 0 0;
    font-size: 0.76rem;
    color: var(--slate-500);
  }

  .lu-sheet__foot {
    display: flex;
    gap: 10px;
    padding-top: 16px;
  }

  .lu-sheet__foot .lu-btn {
    flex: 1;
    justify-content: center;
  }

  /* The sidebar is fully represented by the bar + sheet on mobile. */
  .lu-shop__side {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Offer band (.su-cta) — responsive
   The two-column split is a desktop layout; below it the copy and actions
   stack so the CTA can never be clipped by the fixed 65% / 30% columns.
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .su-cta {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
  }
}

@media (max-width: 640px) {
  .su-cta {
    padding: 24px 20px;
    border-radius: var(--radius-lg);
    /* The offset radial washes read as banding at this width. */
    background: var(--grad-primary);
  }

  .su-cta h2 {
    font-size: 1.42rem;
    line-height: 1.25;
    margin-bottom: 8px;
  }

  .su-cta > div > p:last-child {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .lu-cta__actions {
    width: 100%;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
  }

  .lu-cta__actions .lu-btn {
    flex: 1 1 auto;
    justify-content: center;
    white-space: nowrap;
  }

  .lu-cta__actions .lu-carousel__nav {
    flex: none;
    margin-left: auto;
  }

  .lu-cta__actions .lu-carousel__arrow {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 400px) {
  /* Swipe is the primary gesture at this width; the arrows are redundant. */
  .lu-cta__actions .lu-carousel__nav {
    display: none;
  }

  .lu-cta__actions .lu-btn {
    width: 100%;
  }
}

/* The quote checklist repeats what the copy beside it already says; on a phone
   it just pushes the CTA down the page. */
@media (max-width: 760px) {
  .lu-cta__steps {
    display: none;
  }
}

/* Hero pills tagged is-desk are desktop-only detail — hidden where vertical
   space is scarce (page-hero facts on shop, contact, etc.). */
@media (max-width: 900px) {
  .lu-pagehero__facts .is-desk {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Breadcrumb bar on phones — scrolls edge to edge with a fade hinting at the
   trail continuing past the right edge.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .lu-crumbbar .shell {
    padding-inline: 0;
  }

  .lu-crumbbar .lu-crumbs {
    padding: 11px var(--shell-pad);
    scroll-padding-inline: var(--shell-pad);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    font-size: 0.84rem;
    /* Fade the last few pixels so a cut-off trail reads as scrollable. */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  }

  /* Full label stays readable — scroll to it instead of truncating. */
  .lu-crumbbar .lu-crumbs > span[aria-current] {
    flex-shrink: 0;
    overflow: visible;
    text-overflow: clip;
    padding-right: 6px;
  }
}

/* --------------------------------------------------------------------------
   Product tabs on phones — the bar scrolls edge to edge and pins under the
   header; panels start clear of it.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .lu-tabs__nav {
    gap: 2px;
    margin-inline: calc(var(--shell-pad) * -1);
    padding-inline: var(--shell-pad);
    scroll-padding-inline: var(--shell-pad);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    /* The header hides on scroll-down, so pin to the very top instead. */
    top: 0;
    box-shadow: 0 6px 14px -12px rgba(0, 40, 92, 0.6);
  }

  .lu-tabs__btn {
    padding: 13px 14px;
    font-size: 0.86rem;
  }

  .lu-tabs__panel {
    padding: 20px 0 24px;
    scroll-margin-top: calc(var(--header-h) + 56px);
  }

  .lu-tabs__panel h3 {
    font-size: 1.06rem;
  }
}

/* --------------------------------------------------------------------------
   Category carousel (home) — same rail as the product carousels, with a taller
   media panel so the whole category image is visible rather than cropped.
   -------------------------------------------------------------------------- */
.lu-carousel--cats {
  --cards: 4;
}

.lu-carousel--cats .lu-cat {
  height: 100%;
}

.lu-carousel--cats .lu-cat__media {
  aspect-ratio: 4 / 3;
  background: #f7fafd;
}

.lu-carousel--cats .lu-cat__img {
  /* contain + generous padding: nothing is cut off, whatever the source ratio. */
  object-fit: contain;
  padding: 18px;
  border-radius: 0;
  mix-blend-mode: normal;
}

@media (max-width: 1180px) {
  .lu-carousel--cats {
    --cards: 3;
  }
}

@media (max-width: 860px) {
  .lu-carousel--cats {
    --cards: 2;
  }
}

@media (max-width: 560px) {
  .lu-carousel--cats {
    --cards: 1;
  }

  .lu-carousel--cats .lu-cat__media {
    aspect-ratio: 16 / 10;
  }
}

/* While the products mega menu is open the page behind it stays put — only the
   panel scrolls. The padding swap compensates for the removed scrollbar so the
   header does not jump sideways. */
body.mega-open {
  overflow: hidden;
}