/* =========================================================================
   Akua Mosaics — styles
   Aesthetic: luxury-minimal (inspired by anthologytile.com)
   Palette: pulled from akuamosaics.com —
     brand blue #0095eb, darker blue #007cc3, near-black #161922.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --ink: #231f20;          /* logo wordmark near-black / dark sections */
  --ink-soft: #4a4647;
  --blue: #00b5cb;         /* Akua logo cyan (primary accent) */
  --blue-dark: #0094a7;    /* darker cyan for hover */
  --blue-2: #5987c6;       /* Akua logo wave blue (secondary) */
  --bg: #ffffff;
  --bg-alt: #f7f7f7;       /* light gray section background */
  --surface: #ffffff;
  --muted: #6a6c74;
  --line: #e6e7ea;
  --good: #2f8f6b;
  --good-bg: #eaf4ef;
  --warn: #b07a2e;
  --warn-bg: #f7efe3;
  --shadow: 0 18px 50px rgba(22, 25, 34, 0.10);
  --radius: 4px;
  --maxw: 1280px;
  --display: "Jost", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
/* The browser hides [hidden] with a UA rule, which ANY author display rule
   silently beats -- so `el.hidden = true` on something styled display:flex
   does nothing at all. Settle it once here rather than per component. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; transition: color .15s; }
a:hover { color: var(--blue); }
img { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); line-height: 1.15; font-weight: 400; letter-spacing: -0.01em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0; }
.section.tight { padding: 56px 0; }
.section.alt { background: var(--bg-alt); }
.muted { color: var(--muted); }
.center { text-align: center; }

/* ---- Eyebrow / kicker ---- */
.eyebrow {
  display: inline-block; font-family: var(--body); font-size: 12px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--blue); margin-bottom: 20px;
}

/* ---- Buttons — squared, letter-spaced, understated ---- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 30px; border-radius: var(--radius); cursor: pointer; transition: .2s;
  font-family: var(--body); font-size: 12.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; border: 1px solid transparent; text-decoration: none; line-height: 1;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-sm { padding: 10px 18px; font-size: 11px; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Header / nav — white, minimal, sticky ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
/* On pages where a hero follows the header, let the scroller show through */
.site-header:has(+ .hero), .site-header.over-hero {
  position: absolute; top: 0; left: 0; right: 0;
  background: transparent; backdrop-filter: none; border-bottom: 0;
}
/* Dark gradient behind the overlay header so the logo + links stay readable
   no matter how bright the rotating photo behind them is. */
.site-header:has(+ .hero)::before, .site-header.over-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,0) 100%);
}
/* Over a photo: swap to the white-wordmark logo, use white nav text */
.brand-logo.on-dark { display: none; }
.site-header:has(+ .hero) .brand-logo.on-light, .site-header.over-hero .brand-logo.on-light { display: none; }
.site-header:has(+ .hero) .brand-logo.on-dark, .site-header.over-hero .brand-logo.on-dark { display: block; }
.site-header:has(+ .hero) .nav-links a, .site-header.over-hero .nav-links a { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.site-header:has(+ .hero) .nav-links a:hover,
.site-header:has(+ .hero) .nav-links a.active,
.site-header.over-hero .nav-links a:hover,
.site-header.over-hero .nav-links a.active { color: var(--blue); }
.site-header:has(+ .hero) .nav-cta,
.site-header.over-hero .nav-cta {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.85); text-shadow: none;
}
.site-header:has(+ .hero) .nav-cta:hover,
.site-header.over-hero .nav-cta:hover { background: #fff; color: var(--ink); border-color: #fff; }
.site-header:has(+ .hero) .nav-toggle, .site-header.over-hero .nav-toggle { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.nav { display: flex; align-items: center; gap: 32px; height: 88px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); flex: 0 0 auto; }
.brand:hover { color: var(--ink); }
.brand-logo { height: 46px; width: auto; max-width: 240px; object-fit: contain; display: block; }
.nav-links { display: flex; gap: 30px; margin-left: auto; align-items: center; }
.nav-links a { color: #000; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.nav-links a:hover, .nav-links a.active { color: var(--blue); }
.nav-contact { display: flex; flex-direction: row; gap: 22px; align-items: center; margin: 0 auto; }
.nav-contact a { color: #000; font-size: 13px; font-weight: 500; letter-spacing: .02em; text-transform: none; }
.nav-contact a:hover { color: var(--blue); }
.nav-cta { margin-left: 6px; background: #fff; color: #000; border-color: #000; }
.nav-cta:hover { background: #000; color: #fff; border-color: #000; }
.nav-cta .quote-count { background: #000; color: #fff; }
.nav-toggle { display: none; background: none; border: 0; color: var(--ink); font-size: 26px; cursor: pointer; margin-left: auto; }

/* ---- Hero — full-bleed rotating room scenes ---- */
.hero {
  position: relative; color: #fff; min-height: 82vh; display: flex; align-items: center; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease;
}
.hero-slide.active { opacity: 1; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(35,31,32,.78) 0%, rgba(35,31,32,.42) 58%, rgba(35,31,32,.18) 100%);
}
.hero .wrap { position: relative; z-index: 2; padding-top: 168px; padding-bottom: 80px; }

/* Collection page: shorter hero band with rotating scenes */
.collection-hero { min-height: 44vh; }
.collection-hero h1 { font-size: clamp(32px, 4vw, 52px); margin: 0; }
.hero .eyebrow { color: #fff; opacity: .9; }
.hero h1 { color: #fff; font-weight: 300; font-size: clamp(38px, 5.5vw, 70px); margin: 0 0 22px; max-width: 16ch; letter-spacing: -0.02em; }
.hero h1.nowrap { white-space: nowrap; max-width: none; }
@media (max-width: 760px) { .hero h1.nowrap { white-space: normal; font-size: clamp(30px, 8vw, 44px); } }
.hero p { font-size: 18px; color: rgba(255,255,255,.9); max-width: 56ch; margin: 0 0 36px; font-weight: 300; }
.hero .actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---- Stat strip ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { text-align: center; padding: 0 12px; }
.stat .num { font-family: var(--display); font-size: 40px; font-weight: 300; color: var(--ink); letter-spacing: -0.02em; }
.stat .lbl { color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; }

/* ---- Section headings ---- */
.head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.head h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 300; margin: 0 0 14px; letter-spacing: -0.02em; }
.head p { color: var(--muted); font-size: 17px; margin: 0; font-weight: 300; }

/* ---- Generic grids / cards ---- */
.grid { display: grid; gap: 28px; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--surface); padding: 8px 4px; }
.card .ico { font-size: 26px; color: var(--blue); }
.card h3 { margin: 16px 0 10px; font-size: 20px; font-weight: 500; }
.card p { margin: 0; color: var(--muted); font-size: 15px; font-weight: 300; line-height: 1.7; }

/* ---- Catalog toolbar ---- */
.toolbar { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
/* Direct children only — the facet menus live in here too, and their
   checkboxes must not inherit the search field's sizing. */
.toolbar > input, .toolbar > select {
  padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 14px; background: #fff; color: var(--ink); font-family: var(--body);
}
.toolbar > input { flex: 1; min-width: 240px; }
.toolbar > input:focus, .toolbar > select:focus { outline: none; border-color: var(--blue); }
.toolbar #result-count { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* ---- Facet menus (material / shape / color) ----
   Three multi-select menus that sit in the toolbar alongside the series
   and sort selects, so the whole filter row reads as one set of controls.
   Each panel holds checkboxes, so several values can be ticked without
   the menu closing between them.                                       */
.facet-menus { display: flex; gap: 10px; flex-wrap: wrap; }
.menu { position: relative; }

.menu-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink); cursor: pointer;
  font-family: var(--body); font-size: 14px; line-height: 1.2;
  transition: border-color .15s, background .15s, color .15s;
}
.menu-toggle:hover { border-color: var(--blue); }
.menu-toggle:focus-visible { outline: none; border-color: var(--blue); }
.menu.active .menu-toggle { background: var(--ink); border-color: var(--ink); color: #fff; }
.menu-caret {
  width: 0; height: 0; flex: none;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .55;
}
.menu[data-open] .menu-caret { transform: rotate(180deg); }

.menu-panel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  min-width: 250px; max-height: min(420px, 60vh); overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 6px;
}

.menu-option {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius); cursor: pointer;
  font-size: 13.5px; line-height: 1.3;
}
.menu-option:hover { background: var(--bg-alt); }
.menu-option input { accent-color: var(--blue); margin: 0; flex: none; cursor: pointer; }
.menu-option.empty { opacity: .35; cursor: default; }
.menu-option.empty:hover { background: none; }
.menu-text { flex: 1; }
.menu-count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.menu-swatch {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 1px solid rgba(35, 31, 32, .2);
}

.menu-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 4px; padding: 10px 10px 6px; border-top: 1px solid var(--line);
}
.menu-foot .btn { margin-left: auto; }

.facet-summary {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 28px; font-size: 13px;
}
.linkish {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--body); font-size: 13px; color: var(--blue-dark);
  text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--ink); }

@media (max-width: 760px) {
  .facet-menus { width: 100%; }
  .menu { flex: 1; min-width: 0; }
  /* Tighter padding buys a few more characters before the label clips;
     the "Filtered by ..." line underneath names the choices in full. */
  .menu-toggle { width: 100%; justify-content: space-between; padding: 13px 11px; gap: 6px; }
  .menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Keep a panel on screen when its button sits at the right edge. */
  .menu:last-child .menu-panel { left: auto; right: 0; }
  .menu-panel { min-width: 220px; }
}

/* ---- Product card ---- */
.product-card {
  position: relative;
  background: var(--surface); display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: .25s;
}
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.product-card .thumb {
  height: 230px; padding: 0; border: 0; cursor: pointer; display: block; width: 100%;
  background: var(--bg-alt); overflow: hidden;
}
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.product-card .thumb:hover img { transform: scale(1.06); }
.product-card .body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.series-tag {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue);
}
.product-card h3 { font-size: 19px; font-weight: 500; margin: 8px 0 6px; }
.product-card .spec { font-size: 13px; color: var(--muted); margin: 0 0 8px; font-weight: 300; }
/* Facet line takes the slack so the button still pins to the card foot. */
.facet-meta {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11.5px; letter-spacing: .04em; color: var(--muted);
  margin: 0 0 18px; flex: 1; font-weight: 400;
}
.facet-meta .dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(35, 31, 32, .18); flex: none;
}
.facet-meta .dot + .dot { margin-left: -4px; }   /* overlap into a small stack */
.facet-meta span:last-child { margin-left: 2px; }
.card-actions { display: flex; gap: 10px; }
.card-actions .btn { flex: 1; justify-content: center; }

/* ---- Pills ---- */
.pill {
  display: inline-block; font-size: 10.5px; font-weight: 600; padding: 4px 11px; letter-spacing: .08em;
  text-transform: uppercase; border-radius: 100px; background: var(--good-bg); color: var(--good);
}
.pill.low { background: var(--warn-bg); color: var(--warn); }
.pill.gray { background: #f0f0f1; color: var(--muted); }
.pill.preorder { background: var(--warn-bg); color: var(--warn); }

/* Corner flag over a card photo. The card/cover is the positioning context;
   the flag sits outside the .thumb button so it stays a label, not a control. */
.card-flag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--surface); color: var(--warn);
  box-shadow: 0 2px 10px rgba(22, 25, 34, 0.16);
}

/* ---- Series cards (home) ---- */
.series-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.series-card {
  display: flex; flex-direction: column; background: var(--surface); overflow: hidden; color: var(--ink); transition: .25s;
}
.series-card:hover { color: var(--ink); transform: translateY(-4px); }
.series-cover { position: relative; height: 220px; overflow: hidden; background: var(--bg-alt); border-radius: var(--radius); }
.series-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.series-card:hover .series-cover img { transform: scale(1.06); }
.series-meta { padding: 18px 2px 4px; display: flex; flex-direction: column; gap: 4px; }
.series-meta h3 { font-size: 20px; font-weight: 500; margin: 0; }
.series-meta h3::after { content: " \2192"; color: var(--blue); opacity: 0; transition: .2s; }
.series-card:hover .series-meta h3::after { opacity: 1; }
.series-meta span { font-size: 13px; color: var(--muted); font-weight: 300; }

/* ---- CTA band ---- */
.cta-band {
  background: var(--ink); color: #fff; padding: 80px 48px; text-align: center; border-radius: var(--radius);
}
.cta-band h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); font-weight: 300; margin: 0 0 14px; }
.cta-band p { color: rgba(255,255,255,.82); margin: 0 0 30px; font-size: 17px; font-weight: 300; }

/* ---- Footer ---- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.72); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding: 76px 0 44px; }
.site-footer .brand { color: #fff; }
.footer-logo { height: 56px; width: auto; display: block; margin-bottom: 16px; }
.site-footer h4 { color: #fff; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 18px; font-family: var(--body); font-weight: 600; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 11px; }
.site-footer a { color: rgba(255,255,255,.72); font-size: 14px; font-weight: 300; }
.site-footer a:hover { color: var(--blue); }
.site-footer p { font-weight: 300; font-size: 14px; line-height: 1.7; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding: 24px 0; font-size: 12px; letter-spacing: .04em;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: rgba(255,255,255,.6);
}
.footer-bottom a { color: rgba(255,255,255,.85); }
.footer-bottom a:hover { color: var(--blue); }

/* ---- Auth / login ---- */
.auth-wrap { min-height: calc(100vh - 84px); display: grid; place-items: center; padding: 56px 24px; background: var(--bg-alt); }
.auth-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); width: 100%; max-width: 440px; padding: 48px; }
.auth-card h1 { font-size: 28px; font-weight: 400; margin: 0 0 6px; }
.auth-card .sub { color: var(--muted); margin: 0 0 30px; font-size: 15px; font-weight: 300; }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.field input { width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 15px; font-family: var(--body); }
.field input:focus { outline: none; border-color: var(--blue); }
.demo-note { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; font-size: 13px; color: var(--muted); margin-top: 26px; }
.demo-note b { color: var(--ink); }
.demo-note code { background: #fff; padding: 2px 7px; border-radius: 3px; font-size: 12.5px; border: 1px solid var(--line); }
.error-msg { background: #fdeceb; color: #b4291f; border-radius: var(--radius); padding: 12px 15px; font-size: 14px; margin-bottom: 20px; display: none; }
.error-msg.show { display: block; }

/* ---- Portal dashboard ---- */
.portal-bar { background: #fff; border-bottom: 1px solid var(--line); }
.portal-bar .wrap { display: flex; align-items: center; gap: 20px; height: 66px; }
.portal-tabs { display: flex; gap: 4px; margin-right: auto; flex-wrap: wrap; }
.portal-tabs button {
  background: none; border: 0; padding: 10px 18px; border-radius: var(--radius); cursor: pointer;
  font-family: var(--body); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.portal-tabs button.active { background: var(--ink); color: #fff; }
.portal-tabs button:hover:not(.active) { color: var(--blue); }
.acct-chip { font-size: 13px; color: var(--muted); text-align: right; font-weight: 300; }
.acct-chip b { color: var(--ink); display: block; font-weight: 500; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 32px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.kpi .lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.kpi .val { font-family: var(--display); font-size: 30px; font-weight: 300; color: var(--ink); margin-top: 8px; }
.kpi .sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; font-weight: 300; }

.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 28px; }
.panel-head { padding: 20px 24px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.panel-head h2 { font-size: 16px; font-weight: 500; margin: 0; }
.panel-body { padding: 8px 24px 20px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 14px 10px; font-size: 14px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
tr:last-child td { border-bottom: 0; }
.num-cell { text-align: right; font-variant-numeric: tabular-nums; }
.status { display: inline-block; padding: 4px 11px; border-radius: 100px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.status.delivered, .status.paid, .status.won { background: var(--good-bg); color: var(--good); }
.status.processing, .status.open, .status.quoted, .status.pending { background: var(--warn-bg); color: var(--warn); }

.tier-badge {
  display: inline-block; padding: 5px 14px; border-radius: 100px; font-family: var(--body);
  font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--blue);
}

.hidden { display: none !important; }

/* ---- Toast ---- */
.toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 15px 26px; border-radius: var(--radius);
  box-shadow: var(--shadow); font-size: 14px; opacity: 0; pointer-events: none; transition: .25s; z-index: 300; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Quote count badge ---- */
.quote-count {
  display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 6px;
  border-radius: 100px; background: #fff; color: var(--blue); font-size: 11px; font-weight: 700; margin-left: 7px;
}
.quote-count.hidden { display: none; }

/* ---- Product modal ---- */
.modal {
  position: fixed; inset: 0; z-index: 400; background: rgba(22,25,34,.6);
  display: none; align-items: center; justify-content: center; padding: 24px; overflow-y: auto;
}
.modal.show { display: flex; }
.modal-card { background: #fff; border-radius: var(--radius); max-width: 920px; width: 100%; position: relative; box-shadow: 0 30px 80px rgba(0,0,0,.4); margin: auto; }
.modal-card-sheet { max-width: 720px; overflow: hidden; }
.spec-sheet { display: block; width: 100%; height: auto; border-radius: var(--radius); }

/* ---- Room scene lightbox: large, clean photo ---- */
.modal-card-room {
  max-width: min(1500px, 94vw); background: #fff; overflow: hidden;
}
.room-photo {
  display: block; width: 100%; height: auto;
  max-height: 84vh; object-fit: contain; background: #000;
}
.room-caption {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 22px; flex-wrap: wrap;
}
.room-caption h3 { margin: 2px 0 0; font-size: 20px; font-weight: 500; }
.room-caption .pill { margin-left: 8px; vertical-align: 1px; }
@media (max-width: 560px) {
  .room-caption { padding: 14px 16px; }
  .room-caption .btn { width: 100%; justify-content: center; }
}
.modal-close {
  position: absolute; top: 14px; right: 16px; z-index: 2; border: 0; background: rgba(255,255,255,.92);
  width: 40px; height: 40px; border-radius: 50%; font-size: 24px; cursor: pointer; color: var(--ink); box-shadow: var(--shadow); line-height: 1;
}
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; }
.modal-media { position: relative; background: var(--bg-alt); border-radius: var(--radius) 0 0 var(--radius); overflow: hidden; min-height: 360px; }
.modal-media > img:first-child { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-thumb { position: absolute; bottom: 16px; left: 16px; width: 92px; height: 92px; object-fit: cover; border-radius: var(--radius); border: 3px solid #fff; box-shadow: var(--shadow); }
.modal-info { padding: 38px; }
.modal-info h2 { font-size: 30px; font-weight: 400; margin: 8px 0 2px; }
.modal-info .sku-line { font-size: 12px; letter-spacing: .08em; margin: 0 0 16px; }
.modal-info p { font-size: 14.5px; color: var(--ink-soft); font-weight: 300; line-height: 1.75; }
.spec-table { width: 100%; margin: 18px 0 16px; }
.spec-table th, .spec-table td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.spec-table th { color: var(--muted); font-weight: 500; width: 38%; text-transform: none; letter-spacing: 0; }
.uses-row { display: flex; flex-wrap: wrap; gap: 7px; }

/* ---- Dealer locator ---- */
.dealer-wrap { max-width: 780px; }
.dealer-search { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.dealer-search input {
  flex: 1; min-width: 180px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--radius); font-size: 16px; font-family: var(--body); color: var(--ink);
}
.dealer-search input:focus { outline: none; border-color: var(--blue); }
.dealer-status { font-size: 14px; margin: 0 0 20px; color: var(--muted); }
.dealer-status.error { color: #b4291f; }
.dealer-status.hidden { display: none; }
.dealer-results-head {
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 28px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.dealer-results-head:empty { display: none; }
.dealer-list { display: flex; flex-direction: column; gap: 14px; }
/* Fixed columns (details | supplier mark | button) so those land in the same
   place on every card, whatever the dealer name and address run to. */
.dealer-card {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px auto;
  align-items: center; gap: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
}
.dealer-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dealer-card h3 { font-size: 18px; font-weight: 500; margin: 0; }
.dealer-dist {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #fff; background: var(--blue);
  padding: 3px 10px; border-radius: 100px; white-space: nowrap;
}
.dealer-addr { margin: 8px 0 4px; color: var(--muted); font-size: 14.5px; font-weight: 300; line-height: 1.5; }
.dealer-phone { margin: 0; font-size: 14.5px; }
.dealer-main { grid-column: 1; min-width: 0; }
/* Column 3 is named explicitly so the button still lines up on cards with no mark */
.dealer-card .btn { grid-column: 3; }
/* Supplier mark, centred in its own column between the dealer details and the button */
.dealer-brand { grid-column: 2; justify-self: center; max-width: 100%; height: 50px; object-fit: contain; }
@media (max-width: 560px) {
  .dealer-card { grid-template-columns: 1fr; align-items: start; gap: 10px; }
  .dealer-main, .dealer-brand, .dealer-card .btn { grid-column: 1; }
  .dealer-card .btn { width: 100%; justify-content: center; margin-top: 6px; }
  .dealer-brand { justify-self: start; height: 34px; }
}

/* ---- Bill & Pay payment band (portal invoices tab) ---- */
.paynow-band {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: var(--ink); color: #fff; border-radius: var(--radius); padding: 26px 30px; margin-bottom: 26px;
}
.paynow-band h2 { color: #fff; font-size: 20px; font-weight: 500; margin: 0 0 6px; }
.paynow-band p { margin: 0; color: rgba(255,255,255,.8); font-size: 14.5px; font-weight: 300; max-width: 60ch; }
.paynow-band .btn { flex: 0 0 auto; }
@media (max-width: 620px) {
  .paynow-band { padding: 22px; }
  .paynow-band .btn { width: 100%; justify-content: center; }
}

/* ---- Quote builder input ---- */
.qty-input { width: 66px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; font-family: var(--body); }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .cols-4, .series-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .stats, .kpis { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cols-3 { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-contact { display: none; }
  .nav-toggle { display: block; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; position: absolute; top: 88px; left: 0; right: 0;
    background: #fff; padding: 22px 32px; gap: 18px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .nav.open .nav-links .nav-cta { margin: 4px 0 0; }
  /* mobile dropdown is white — force dark text even over a hero */
  .site-header:has(+ .hero) .nav.open .nav-links a,
  .site-header.over-hero .nav.open .nav-links a { color: var(--ink); text-shadow: none; }
  .site-header:has(+ .hero) .nav.open .nav-links .nav-cta,
  .site-header.over-hero .nav.open .nav-links .nav-cta { color: var(--ink); border-color: var(--ink); }
  .modal-grid { grid-template-columns: 1fr; }
  .modal-media { border-radius: var(--radius) var(--radius) 0 0; min-height: 240px; max-height: 280px; }
}
@media (max-width: 560px) {
  .cols-4, .series-grid, .stats, .kpis, .product-grid.cols-4 { grid-template-columns: 1fr; }
  .auth-card { padding: 32px; }
  .wrap { padding: 0 22px; }
  .cta-band { padding: 56px 26px; }
  .brand-logo { height: 40px; }
}