/* Bespoke Cabinets and Doors — shared styles */

/* "Coastal Premium" design system (2026-07-30 client spec) — exact hex
   values as given: white/soft-gray backgrounds, charcoal/slate text,
   Indigo Blue accent with a Deep Indigo hover, sage-green success. */
:root {
  --black: #2F3437;
  --charcoal: #2F3437;
  --charcoal-2: #3a4044;
  --accent: #355C9D;
  --accent-hover: #274A82;
  --text-secondary: #667085;
  --success: #7FAF7A;
  --cream: #ffffff;
  --offwhite: #F5F7F9;
  --white: #ffffff;
  --gray: #667085;
  --line: #E4E7EC;
  --max-w: 1200px;
  --radius: 8px;
  --radius-card: 14px;
  --shadow: 0 18px 45px rgba(47,52,55,.12);
  --shadow-card: 0 4px 20px rgba(47,52,55,.07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  background: var(--cream);
  color: var(--black);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Oswald', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 0 0 .5em;
  line-height: 1.15;
}

p { margin: 0 0 1em; color: #3a3a3a; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  color: var(--accent);
  font-family: 'Oswald', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .8rem;
  font-weight: 600;
  margin-bottom: 12px;
}
/* On dark photo-overlay heroes, the standard dark-indigo eyebrow color reads
   as dark-blue-on-dark-blue and is hard to read — use a light tint instead. */
.hero-inner .eyebrow,
.page-hero-inner .eyebrow {
  color: #A9C0EE;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: var(--radius);
  font-family: 'Oswald', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .9rem;
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
}
.btn-gold {
  background: var(--white);
  color: var(--black);
  border-color: var(--accent);
}
.btn-gold:hover { background: #EEF2F9; border-color: var(--accent-hover); }
.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.5);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-outline-dark {
  background: transparent;
  color: var(--black);
  border-color: var(--black);
}
.btn-outline-dark:hover { border-color: var(--accent); color: var(--accent); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
/* Header sits on its own wider measure than the page body — the nav plus four
   bordered controls simply don't fit inside 1200px without crowding. */
.header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 9px 24px;
  max-width: 1340px;
  margin: 0 auto;
}
.logo-link { display: flex; align-items: center; flex-shrink: 0; }
/* The one-line logo is a wide lockup (~2.9:1), so it runs shorter than the
   old square mark did — 54px tall reads as ~156px wide. */
.logo-link img { height: 54px; width: auto; display: block; }

/* "Made in the USA" — beside the logo on desktop, pinned far-left on mobile
   (see the order/grid rules in the header's max-width:980px block). */
/* Client, 2026-08-25: the wordmark must be BLACK and the frame around it
   clearly visible. It was grey text inside a 1px #E4E7EC pill, which on an
   off-white background is very nearly no frame at all. Both the header pill
   and the footer band below now carry a real 2px charcoal edge, and the
   type is black on white rather than grey on off-white. Applied here in
   styles.css rather than per page, so all 21 pages match — and the mobile
   overrides further down keep the same treatment at small sizes. */
.hdr-usa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 5px 11px 5px 9px;
  border: 2px solid var(--charcoal);
  border-radius: 999px;
  background: var(--white);
}
.hdr-usa .usa-flag {
  width: 24px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(47,52,55,.12);
  flex-shrink: 0;
}
.hdr-usa-text {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: .62rem;
  line-height: 1.25;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #000000;
  font-weight: 500;
  white-space: nowrap;
}
.hdr-usa-text strong { display: block; color: #000000; font-weight: 700; letter-spacing: .12em; }

/* Auto margins on both sides centre the nav in whatever space the brand and
   the controls leave over, so the header stays balanced as labels change. */
.main-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 auto;
}
.main-nav a {
  color: #1a1a1a;
  font-family: 'Oswald', Arial, sans-serif;
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .06em;
  font-weight: 500;
  white-space: nowrap;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.main-nav a:hover,
.main-nav a.active {
  color: var(--accent);
  border-color: var(--accent);
}

.nav-item { position: relative; display: flex; align-items: center; }

/* Chevron marking a menu that has more behind it. Drawn in CSS rather than a
   glyph so it can rotate smoothly and always matches the link colour. */
.dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: 0;
  padding: 0;
  margin-left: 6px;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.dropdown-toggle::before {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.nav-item:hover .dropdown-toggle,
.nav-item:hover > a { color: var(--accent); }
.nav-item:hover .dropdown-toggle::before,
.dropdown-toggle[aria-expanded="true"]::before { transform: translateY(1px) rotate(-135deg); }

.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: -14px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  min-width: 320px;
  max-width: 360px;
  padding: 8px;
  z-index: 1001;
  border-radius: var(--radius-card);
}
/* Invisible bridge across the gap so the menu doesn't close while the pointer
   travels from the link down to the panel. */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -12px; left: 0; right: 0;
  height: 12px;
}
.nav-item:hover .nav-dropdown,
.nav-dropdown.open {
  display: block;
  animation: navDropIn .16s ease-out;
}
@keyframes navDropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-item:hover .nav-dropdown, .nav-dropdown.open { animation: none; }
  .dropdown-toggle::before { transition: none; }
}
.nav-dropdown a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px;
  border-radius: 8px;
  color: var(--charcoal);
  font-size: .84rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  border-bottom: none;
  transition: background .15s, color .15s;
}
.nav-dropdown a:hover { background: #EBF0F9; color: var(--accent); }

/* A quiet section label gives the panel structure without adding clutter —
   the research on menu design is consistent that hierarchy beats volume. */
.nav-dd-label {
  display: block;
  padding: 6px 14px 8px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #98A0A8;
}
.nav-dd-title {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: .92rem;
  letter-spacing: .02em;
  color: inherit;
}
/* The descriptions are the real point of this menu: "Full HDPE" vs
   "Hybrid PVC" means nothing to a first-time visitor, so each line says who
   it's for. Customers self-select instead of guessing. */
.nav-dd-desc {
  font-size: .76rem;
  line-height: 1.4;
  color: #7A828A;
  font-weight: 400;
  white-space: normal;
}
.nav-dropdown a:hover .nav-dd-desc { color: #5A6472; }

.nav-dd-all {
  /* Row, not column — the other items stack a title over a description, but
     this one is a single line with a trailing arrow. */
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  margin-top: 6px;
  padding-top: 12px !important;
  border-top: 1px solid var(--line);
  border-radius: 0 0 8px 8px !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
}
.nav-dd-all::after {
  content: '→';
  margin-left: 6px;
  transition: transform .15s;
  display: inline-block;
}
.nav-dropdown a.nav-dd-all:hover::after { transform: translateX(3px); }
.dealer-tag {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #999;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 2px 6px;
  white-space: nowrap;
}
/* ---------------------------------------------------------------------
   Header controls. One shared .hdr-btn shape so every control in the header
   carries a full border and the same height — the row reads as a set rather
   than four unrelated widgets. Only the colour changes between them.
   --------------------------------------------------------------------- */
.header-cta { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }

.hdr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--charcoal);
  font-family: 'Oswald', Arial, sans-serif;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.hdr-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.hdr-btn:hover { border-color: var(--accent); color: var(--accent); }

.hdr-login { color: var(--text-secondary); }
.hdr-login:hover { border-color: var(--accent); color: var(--accent); background: #F2F6FC; }

.hdr-phone { letter-spacing: .03em; }
.hdr-phone svg { color: var(--accent); }

.hdr-wa {
  width: 40px;
  padding: 0;
  color: #1FA855;
  border-color: #BDE7CE;
  background: #F2FBF6;
}
.hdr-wa svg { width: 19px; height: 19px; }
.hdr-wa:hover { background: #25D366; border-color: #25D366; color: #fff; }

.hdr-quote {
  border-color: var(--accent);
  border-width: 2px;
  color: var(--accent);
  font-weight: 600;
}
.hdr-quote:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Laptop widths: shed the least essential text before anything wraps. The
   phone number goes first (the icon still dials), then the Dealer Portal
   label, then the USA wordmark — each control keeps its border and target
   size throughout, only its label is dropped. */
@media (max-width: 1240px) {
  .header-inner { gap: 14px; }
  .main-nav { gap: 17px; }
  .hdr-phone span { display: none; }
  .hdr-phone { width: 40px; padding: 0; }
}
@media (max-width: 1080px) {
  .hdr-login span { display: none; }
  .hdr-login { width: 40px; padding: 0; }
  .hdr-usa-text { display: none; }
  .hdr-usa { padding: 5px 9px; }
  .main-nav { gap: 14px; }
  .main-nav a { font-size: .78rem; }
}


.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  z-index: 500;
  transition: background .2s, transform .2s;
}
.whatsapp-float:hover { background: #1DA851; transform: scale(1.06); }
.whatsapp-float svg { width: 30px; height: 30px; }
@media (max-width: 720px) {
  .whatsapp-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .whatsapp-float svg { width: 27px; height: 27px; }
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--black);
  margin: 5px 0;
  transition: all .2s;
}

/* Footer */
.site-footer {
  background: var(--white);
  color: #444;
  padding: 60px 0 24px;
  margin-top: 100px;
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.footer-col h4 {
  color: var(--black);
  font-size: 1rem;
  margin-bottom: 18px;
}
.footer-col p, .footer-col a {
  color: #555;
  font-size: .92rem;
  display: block;
  margin-bottom: 10px;
}
.footer-col a:hover { color: var(--accent); }
/* One-line lockup is ~2.9:1 — 64px tall reads as ~185px wide in the footer. */
.footer-logo { height: 64px; margin-bottom: 16px; }
.footer-social { display: flex; gap: 14px; margin-top: 14px; }
.footer-social a {
  display: inline-flex;
  color: var(--text-secondary);
  transition: color .2s ease, transform .2s ease;
}
.footer-social a:hover { color: var(--accent-hover); transform: translateY(-2px); }

/* Google review link — injected into the footer by script.js only when the
   admin has set a review URL, so it may legitimately never render. Sits
   below the social icons rather than inside that flex row, since it's a
   labelled link and not an icon. */
.google-review-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: .85rem;
  color: var(--text-secondary);
  transition: color .2s ease;
}
.google-review-link:hover { color: var(--accent-hover); }
.google-review-link svg { flex-shrink: 0; color: #E8B44A; }

/* Admin creating an order on a contractor's behalf. Deliberately loud and
   pinned to the top of the page — building an order against the wrong
   account is silent and expensive to unpick, so whose order this is must
   never be in doubt. */
.admin-acting-banner {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 24px;
  background: #FFF4D6;
  border-bottom: 2px solid #E8B44A;
  color: #4A3B1A;
  font-size: .88rem;
}
.admin-acting-banner strong { display: block; font-family: 'Oswald', Arial, sans-serif; font-size: 1rem; }
.admin-acting-banner span { display: block; max-width: 760px; margin-top: 2px; }
.admin-acting-banner .btn { flex-shrink: 0; padding: 7px 18px; }

/* Customer order line-item editor */
.co-items-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.co-items-table th {
  text-align: left;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #7A828A;
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.co-items-table td { padding: 6px 8px 6px 0; vertical-align: middle; }
.co-items-table input { width: 100%; margin: 0; }
.co-items-table .co-line-total { font-weight: 600; white-space: nowrap; }
.co-remove-item {
  background: none;
  border: none;
  color: #B3261E;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.co-remove-item:hover { color: #7d1a15; }

.co-totals { margin-top: 16px; max-width: 340px; margin-left: auto; }
.co-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 5px 0;
  font-size: .9rem;
  color: #5A6268;
}
.co-totals .co-grand {
  border-top: 2px solid var(--line);
  margin-top: 6px;
  padding-top: 10px;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 1.15rem;
  color: var(--text-primary);
  font-weight: 600;
}
/* Made in the USA — a real selling point for this business, so it gets its
   own band above the copyright line rather than being tucked into it.
   Identical on desktop and mobile; only the scale changes.

   The flag is hand-drawn SVG, not the 🇺🇸 emoji, for two reasons: Windows
   renders flag emoji as the letters "US" rather than a flag, and the site
   deliberately has no emoji anywhere (they were all replaced by the outline
   icon set in the Coastal Premium redesign). */
/* The footer band. Same client note as .hdr-usa above: black type, and a
   frame you can actually see. It is now a bordered plaque centred in the
   band rather than text floating under a hairline rule. */
.made-in-usa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: fit-content;
  margin: 40px auto 0;
  padding: 12px 22px;
  border: 2px solid var(--charcoal);
  border-radius: 999px;
  background: var(--white);
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #000000;
}
.usa-flag {
  width: 36px;
  height: auto;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.45);
  border-radius: 2px;
  display: block;
}

/* Identical treatment on a phone — only the scale changes. The frame and
   the black type are the point of the change and must not drop away at
   small sizes. */
@media (max-width: 700px) {
  .made-in-usa {
    margin-top: 28px;
    padding: 10px 16px;
    font-size: .92rem;
    letter-spacing: .09em;
    gap: 9px;
  }
  .usa-flag { width: 30px; }
}

.footer-bottom {
  text-align: center;
  font-size: .8rem;
  color: #888;
  padding-top: 24px;
}
.footer-bottom .gold { color: var(--accent); }

/* Hero */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  color: var(--white);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(47,52,55,.82) 25%, rgba(47,52,55,.48) 60%, rgba(47,52,55,.28) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: 100px 24px;
}
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  margin-bottom: .4em;
}
.hero p.lead {
  font-size: 1.15rem;
  color: #e6e6e6;
  max-width: 520px;
}
.hero-actions { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; }

/* Click-to-call sitting alongside the quote button, above the fold */
.hero-call { display: inline-flex; align-items: center; gap: 9px; }
.hero-call svg { width: 17px; height: 17px; }

.hero-secondary {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .92rem;
}
.hero-secondary a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hero-secondary a:hover { color: var(--white); opacity: .8; }
.hero-secondary span { color: rgba(255,255,255,.5); }

@media (max-width: 560px) {
  /* Full-width stacked buttons so both are easy thumb targets */
  .hero-actions { flex-direction: column; gap: 12px; margin-top: 22px; }
  .hero-actions .btn { width: 100%; justify-content: center; min-height: 50px; }
  .hero-secondary { justify-content: center; gap: 10px; font-size: .86rem; margin-top: 16px; }

  /* Tighten the hero so "Get a Free Quote" and the phone number sit above the
     fold on a phone. At full desktop sizing the headline and intro pushed both
     buttons about 100px below the screen, which is the opposite of what a
     mobile visitor needs. */
  .hero { min-height: auto; }
  .hero-inner { padding: 48px 20px 40px; }
  .hero h1 { font-size: clamp(1.85rem, 8vw, 2.3rem); margin-bottom: .3em; }
  .hero p.lead {
    font-size: 1rem;
    line-height: 1.55;
    /* Keep the intro to three lines — the full paragraph is still on the page
       for search engines, it just doesn't crowd out the buttons. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Page hero (interior pages, shorter) */
.page-hero {
  position: relative;
  min-height: 42vh;
  display: flex;
  align-items: center;
  color: var(--white);
  background-size: cover;
  background-position: center;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(47,52,55,.62);
}

/* Hero with no photograph behind it — used where we don't yet have honest
   imagery for the product and won't borrow a photo of something else. The
   brand gradient carries it; the dark scrim is dropped since there's no
   image to darken. */
.page-hero-plain {
  background: linear-gradient(135deg, #2F3437 0%, #355C9D 100%);
  min-height: 34vh;
}
.page-hero-plain::before { display: none; }
.page-hero-inner {
  position: relative;
  z-index: 2;
  padding: 70px 24px;
}
.page-hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.breadcrumb { color: #cfcfcf; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; }
.breadcrumb .gold { color: var(--accent); }

/* Sections */
section { padding: 90px 0; }
.section-dark { background: var(--offwhite); color: var(--black); }
.section-dark h2 { color: var(--black); }
.section-dark p { color: #4a4a4a; }
.section-tight { padding: 60px 0; }

.section-head { max-width: 700px; margin: 0 0 50px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }

/* Grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* Feature cards */
.feature-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 34px 28px;
  box-shadow: var(--shadow-card);
}
.section-dark .feature-card {
  background: var(--white);
  border-color: var(--line);
}
.feature-card .icon {
  color: var(--accent);
  margin-bottom: 16px;
  display: inline-flex;
  transition: color .2s ease;
}
.feature-card:hover .icon { color: var(--accent-hover); }

/* Coastal Premium icon system — consistent outline SVGs (see icons.js).
   Size classes only; color/hover/animation come from the surrounding
   context (.feature-card .icon, .icon-badge, etc. set `color`, which the
   SVGs inherit via stroke="currentColor"). */
.icon-sm { width: 22px; height: 22px; flex-shrink: 0; }
.icon-md { width: 48px; height: 48px; flex-shrink: 0; }
.icon-lg { width: 80px; height: 80px; flex-shrink: 0; }
.icon-svg-wrap { display: inline-flex; align-items: center; justify-content: center; }
.feature-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.feature-card p { font-size: .93rem; margin-bottom: 0; }

/* Product line cards */
.line-card {
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.line-card + .line-card { margin-top: 40px; }
.line-card .line-img { height: 100%; min-height: 340px; background-size: cover; background-position: center; }
.line-card .line-body { padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.line-card h3 { color: var(--black); }
.line-card p { color: #3a3a3a; }
.line-card .badge {
  display: inline-block;
  background: var(--white);
  color: var(--black);
  border: 2px solid var(--accent);
  font-family: 'Oswald', Arial, sans-serif;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 3px;
  margin-bottom: 14px;
  width: fit-content;
}
.line-card ul { margin: 18px 0; padding-left: 20px; color: #3a3a3a; font-size: .93rem; }
.line-card li { margin-bottom: 6px; }
.line-card.reverse { grid-template-columns: 1fr 1fr; }
.line-card.reverse .line-img { order: 2; }
.line-card.reverse .line-body { order: 1; }

/* Gallery grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* Height comes from the padding-bottom ratio trick, NOT `aspect-ratio`.
   These tiles hold an absolutely-positioned image and label, so nothing else
   gives them height — and `aspect-ratio` needs iOS Safari 15+. On an older
   iPhone the tiles collapsed to zero height and the photos vanished entirely.
   padding-bottom works in every browser, so the gallery can't silently
   disappear again. 75% = 4:3. */
.gallery-item {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
  overflow: hidden;
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--offwhite);
  background-size: cover;
  background-position: center;
}
.gallery-item::after {
  content: '';
  /* Explicit offsets rather than `inset`, which needs Safari 14.1+ */
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(transparent 60%, rgba(0,0,0,.65));
  opacity: 0;
  transition: opacity .2s;
  z-index: 1;
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* object-fit is unsupported on very old iOS; the image still fills the tile,
     it just isn't cropped as nicely — visible rather than broken. */
  display: block;
  transition: transform .4s;
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-tag {
  position: absolute;
  bottom: 14px; left: 16px;
  color: var(--white);
  font-family: 'Oswald', Arial, sans-serif;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .2s;
  z-index: 2;
}
.gallery-item:hover .gallery-tag { opacity: 1; }

/* Lightbox */
.lightbox {
  display: none;
  position: fixed; inset: 0;
  background: rgba(10,10,10,.94);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox-close {
  position: absolute; top: 24px; right: 32px;
  color: var(--white); font-size: 2rem; cursor: pointer;
  line-height: 1; background: none; border: none;
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.1); border: none; color: var(--white);
  font-size: 1.6rem; padding: 14px 18px; cursor: pointer; border-radius: 4px;
}
.lightbox-nav:hover { background: rgba(201,162,39,.85); color: var(--black); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }

/* Stats / band */
.stat-band {
  background: var(--offwhite);
  color: var(--black);
  padding: 50px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; gap: 20px; }
.stat-grid .num { font-family: 'Oswald', Arial, sans-serif; font-size: 2.2rem; color: var(--accent); }
.stat-grid .label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #555; }

/* CTA band */
.cta-band {
  background: var(--offwhite);
  color: var(--black);
  text-align: center;
  padding: 80px 0;
  border-top: 1px solid var(--line);
}
.cta-band h2 { color: var(--black); }
.cta-band p { color: #4a4a4a; max-width: 560px; margin: 0 auto 30px; }

/* Forms */
.form-card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 44px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 18px; }
.form-group { margin-bottom: 18px; display: flex; flex-direction: column; }
.form-group label {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
  color: #333;
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: 13px 14px;
  border: 1px solid #d8d3c5;
  border-radius: 4px;
  font-family: inherit;
  font-size: .95rem;
  background: #fdfcf9;
}
.form-group textarea { resize: vertical; min-height: 120px; }
.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  color: #333;
  font-family: 'Poppins', Arial, sans-serif;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}
.checkbox-item input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Content blocks */
.content-block img { border-radius: var(--radius); box-shadow: var(--shadow); }
.pill-list { list-style: none; padding: 0; margin: 0; }
.pill-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  color: #333;
  font-size: .96rem;
}
.pill-list li::before {
  content: '\2713';
  flex-shrink: 0;
  width: 22px; height: 22px;
  background: var(--white);
  color: var(--black);
  border: 2px solid var(--accent);
  border-radius: 50%;
  font-size: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

/* Order builder */
.step-indicator {
  text-align: center;
  margin-bottom: 10px;
  font-family: 'Oswald', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8rem;
  color: #888;
}
.step-indicator strong { color: var(--accent); }

.config-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.config-card {
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color .2s, transform .15s;
}
.config-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.config-card.selected { border-color: var(--accent); background: #eef0f9; }
.config-card .icon { font-size: 2rem; margin-bottom: 10px; }
.config-card h3 { font-size: .95rem; margin-bottom: 6px; }
.config-card p { font-size: .82rem; color: #666; margin-bottom: 0; }

.material-select-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.material-card {
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius-card);
  padding: 32px;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: border-color .2s, transform .15s;
}
.material-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.material-card.selected { border-color: var(--accent); background: #eef0f9; }
.material-card h3 { margin-bottom: 8px; }
.material-card p { font-size: .9rem; color: #555; margin: 12px 0; }
.material-tag {
  display: inline-block;
  font-family: 'Oswald', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  color: var(--black);
  background: var(--white);
  border: 2px solid var(--accent);
  border-radius: 3px;
  padding: 3px 10px;
}
.material-detail { font-size: .85rem; color: #444; margin-top: 10px; line-height: 1.5; }
.material-detail strong { color: var(--black); }

.kb-category-heading {
  font-family: 'Oswald', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 1rem;
  color: var(--accent);
  margin: 36px 0 16px;
}
.kb-category-heading:first-child { margin-top: 0; }

.configurator-panel {
  background: var(--offwhite);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  margin-top: 30px;
  display: none;
}
.configurator-panel.open { display: block; }
.configurator-panel .panel-title { font-size: 1rem; color: #888; margin-bottom: 4px; }
.configurator-panel h3 { margin-bottom: 22px; }
.radio-row { display: flex; gap: 24px; flex-wrap: wrap; }
.radio-item { display: flex; align-items: center; gap: 8px; font-size: .92rem; cursor: pointer; }
.radio-item input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.panel-actions { display: flex; gap: 14px; margin-top: 10px; }

.order-list { margin-top: 40px; }
.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 12px;
}
.order-item .details { font-size: .9rem; color: #444; }
.order-item .details strong {
  display: block;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: .98rem;
  color: var(--black);
  margin-bottom: 2px;
}
.order-item .remove-btn {
  background: none;
  border: none;
  color: #a83232;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  padding: 4px 10px;
  flex-shrink: 0;
}
.order-empty {
  text-align: center;
  color: #888;
  padding: 30px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  font-size: .92rem;
}

.door-style-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.door-style-card {
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  position: relative;
}
.door-style-card img { width: 100%; height: 220px; object-fit: cover; display: block; }
/* The kitchen builder's door-style step and the Styles & Colors page both
   show our own extracted catalog style renders — show the whole image
   uncropped rather than cover-cropping like generic lifestyle photos. */
#kb-doorstyle-grid .door-style-card img,
#style-finishes-doorstyle-grid .door-style-card img { object-fit: contain; background: var(--offwhite); }
.door-style-card .label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.7);
  color: #fff;
  padding: 10px;
  font-family: 'Oswald', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .85rem;
  text-align: center;
}
/* For the uncropped catalog-render grids (see above), the name sits below
   the image in normal flow instead of overlaid on top of it, so the door
   itself is never covered. */
#kb-doorstyle-grid .door-style-card .label,
#style-finishes-doorstyle-grid .door-style-card .label {
  position: static;
  background: var(--white);
  color: var(--black);
  border-top: 1px solid var(--line);
}
.door-style-card.selected { border-color: var(--accent); }

.review-summary {
  background: var(--offwhite);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  margin-top: 20px;
}
.review-summary .review-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
}
.review-summary .review-item:last-child { border-bottom: none; }
.review-summary .review-item strong { font-family: 'Oswald', Arial, sans-serif; }

.demo-note {
  background: #f0ead9;
  color: #6b5a1f;
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: .88rem;
  margin-bottom: 30px;
}

/* Cabinet pricing calculator */
.price-display {
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius);
  padding: 28px 30px;
  margin-top: 30px;
  text-align: center;
}
.price-display .price-label {
  font-family: 'Oswald', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  color: #999;
  margin-bottom: 6px;
}
.price-display .price-value {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 2.6rem;
  /* Light tint, not the base dark-indigo accent — the base accent color is
     too close in darkness to this component's near-black background. */
  color: #A9C0EE;
}
.price-breakdown {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #333;
  text-align: left;
  font-size: .85rem;
  color: #ccc;
}
.price-breakdown .row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}
.checkbox-item-block {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  cursor: pointer;
  margin-bottom: 10px;
}
.checkbox-item-block input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

.toe-kick-note {
  font-size: .88rem;
  color: #4a4a4a;
  background: var(--offwhite);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 12px;
}
/* Was #888 — about 3.5:1 on white, under the 4.5:1 that body text needs.
   These hints carry real instructions in the Manager Portal ("run this
   after any change to the rates", "untick Active to retire a size"), so
   they are not decorative and must not be dim. Darkened 2026-08-25 with
   the rest of the contrast work; the smaller size still keeps them
   subordinate to the label above them. */
.field-hint {
  font-size: .8rem;
  color: #3A4145;
  margin-top: 6px;
}

.construction-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
}
.toggle-side-label {
  font-size: .88rem;
  color: #888;
  transition: color .2s, font-weight .2s;
}
.toggle-side-label.active-label { color: var(--black); font-weight: 600; }
.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #cfcabb;
  border-radius: 28px;
  transition: .2s;
}
.switch .slider::before {
  content: '';
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: var(--white);
  border-radius: 50%;
  transition: .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.switch input:checked + .slider { background-color: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(24px); }

/* Admin dashboard v2 */
.pending-badge {
  background: #a83232;
  color: #fff;
  border-radius: 999px;
  font-size: .72rem;
  padding: 2px 8px;
  margin-left: 6px;
}
.contractor-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .15s;
}
.contractor-card:hover { border-color: var(--accent); }
.contractor-card .name { font-family: 'Oswald', Arial, sans-serif; font-size: 1rem; }
.contractor-card .company { font-size: .85rem; color: #777; margin-top: 2px; }
.contractor-flag {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.contractor-flag.red { background: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.15); }
.contractor-flag.green { background: #3a8a5c; box-shadow: 0 0 0 3px rgba(58,138,92,.15); }

/* auto-fit, not a fixed column count: these cards carry a different number of
   cells depending on the list (the all-orders view adds Contractor and Total),
   and a hardcoded count made the extra cell wrap onto a broken second row. */
.admin-order-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px 16px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin-bottom: 10px;
  cursor: pointer;
  font-size: .88rem;
}
.admin-order-card:hover { border-color: var(--accent); }
.admin-order-card .label { display: block; font-size: .7rem; text-transform: uppercase; color: #999; letter-spacing: .05em; margin-bottom: 2px; }
.admin-order-card > div { min-width: 0; overflow-wrap: anywhere; }

/* The Orders list carries two different kinds of record. Every card leads with
   a full-width tag row saying which it is, and sample requests get a tinted
   left edge on top of that, so the two never read as the same thing. */
.admin-order-card .card-type-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.order-type-badge {
  display: inline-block;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
}
.order-type-badge.cabinet { color: #5A6268; border-color: var(--line); background: var(--offwhite); }
.order-type-badge.sample  { color: #7A5B1E; border-color: #E0C07A; background: #FDF6E6; }
/* Retail customer orders — a third card type, distinct at a glance from both
   cabinet orders and sample requests. */
.order-type-badge.customer { color: #1F5C4A; border-color: #9FCBBA; background: #EAF6F1; }
.order-confirmed-flag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: #2F6B2B;
  padding: 3px 9px;
  border-radius: 999px;
}
.order-new-flag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: #a83232;
  padding: 3px 9px;
  border-radius: 999px;
}
.admin-order-card.is-sample {
  border-left: 4px solid #D9A93C;
  background: #FFFDF7;
}
.admin-order-card.is-sample:hover { border-color: #D9A93C; border-left-color: #D9A93C; }
.sample-status-inline { max-width: 100%; }

/* Flashes the request that was just opened from the Orders list. */
.sample-request-card.sample-highlight {
  border-color: #D9A93C;
  box-shadow: 0 0 0 3px rgba(217, 169, 60, .3);
  transition: box-shadow .3s ease, border-color .3s ease;
}

/* Wide admin tables scroll inside their own box rather than pushing the whole
   page sideways on a phone. */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table { min-width: 520px; }

@media (max-width: 700px) {
  /* On a phone the grid is abandoned entirely: side-by-side columns scatter
     the order details across the screen and nothing lines up. Each field
     becomes its own full-width row with the label on the left and the value
     right-aligned, so the card reads top-to-bottom like a receipt. */
  .admin-order-card {
    display: block;
    padding: 4px 16px 14px;
  }
  .admin-order-card > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: .9rem;
    text-align: right;
  }
  .admin-order-card > div:last-child { border-bottom: none; padding-bottom: 0; }
  .admin-order-card .label {
    margin-bottom: 0;
    flex-shrink: 0;
    text-align: left;
    font-size: .72rem;
  }
  /* Order number leads the card, larger and without a competing label */
  .admin-order-card > div:first-child {
    font-family: 'Oswald', Arial, sans-serif;
    font-size: 1.05rem;
    padding-top: 12px;
  }
  /* Status control gets its own full-width row, easy to hit */
  .admin-order-card > div:last-child {
    display: block;
    text-align: left;
    padding-top: 12px;
  }
  .admin-order-card .order-status-inline,
  .admin-order-card .sample-status-inline {
    width: 100%;
    min-height: 44px;
    margin-top: 6px;
  }
  /* The type tag leads the card on mobile — no label, no divider needed. */
  .admin-order-card .card-type-row {
    border-bottom: none;
    padding-bottom: 2px;
  }
  .admin-order-card .invoice-flag { margin-top: 8px; }

  .contractor-card { flex-wrap: wrap; }
  .admin-toolbar { flex-direction: column; align-items: stretch; }
  .admin-toolbar > .form-group { max-width: none !important; }

  /* Admin forms and action rows stack instead of squeezing side by side */
  .order-detail-grid { grid-template-columns: 1fr !important; }
  .order-detail-actions { flex-direction: column; align-items: stretch; }
  .order-detail-actions .btn,
  .order-detail-actions select,
  .order-detail-actions input { width: 100%; min-height: 44px; }
  .order-detail-header { flex-direction: column; gap: 12px; }
  .order-detail-header > div:last-child { text-align: left !important; }
}
.status-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.status-pill.ordered,
.status-pill.order-placed { background: #e9edf1; color: #3a4a58; }
.status-pill.order-accepted { background: #dde6f5; color: #26457e; }
.status-pill.manufacturing { background: #f3e6cf; color: #8a6a2f; }
.status-pill.ready-for-pickup { background: #dcefe2; color: #2e6b47; }

/* ---------------------------------------------------------------------
   Manager Portal shell — sidebar + content.
   Replaced a flat row of tabs that had grown to 8 buttons and would keep
   growing. Sections are grouped by task, so a new feature joins an existing
   group rather than adding another top-level item.
   --------------------------------------------------------------------- */
.admin-shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.admin-sidebar-inner {
  position: sticky;
  top: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 20px 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.admin-sidebar-brand { padding: 0 10px 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.admin-sidebar-toggle { display: none; }

.admin-nav-group { margin-bottom: 18px; }
.admin-nav-label {
  display: block;
  padding: 0 10px 6px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #98A0A8;
}
.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  margin-bottom: 2px;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: .87rem;
  color: var(--charcoal);
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.admin-nav-item svg { width: 17px; height: 17px; flex-shrink: 0; color: #7A828A; transition: color .15s; }
.admin-nav-item span:not(.pending-badge) { flex: 1; }
.admin-nav-item:hover { background: var(--offwhite); }
.admin-nav-item.active { background: #EBF0F9; color: var(--accent); font-weight: 600; }
.admin-nav-item.active svg { color: var(--accent); }
.admin-logout {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  border-radius: 0;
  color: #7A828A;
}
.admin-logout:hover { background: none; color: #B3261E; }
.admin-logout:hover svg { color: #B3261E; }

.admin-main { min-width: 0; }
.admin-main-head { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.admin-main-head h2 { margin: 0; font-size: 1.5rem; }

@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; gap: 16px; }
  .admin-sidebar-inner { position: static; display: none; }
  .admin-sidebar.open .admin-sidebar-inner { display: block; }
  .admin-sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--charcoal);
    cursor: pointer;
  }
  .admin-sidebar-toggle svg { width: 19px; height: 19px; }
  .admin-nav-item { min-height: 44px; }
}

/* Sample request cards (admin) */
.sample-request-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 12px;
}
.sample-request-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.sample-req-num {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--offwhite);
  font-size: .72rem;
  color: #5A6268;
  letter-spacing: .03em;
}
.sample-status-select {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: inherit;
  font-size: .85rem;
  background: var(--white);
  color: var(--charcoal);
  flex-shrink: 0;
}
.sample-tracking {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.sample-msg:empty { display: none; }
.sample-msg { margin-top: 10px; margin-bottom: 0; }

@media (max-width: 700px) {
  .sample-request-head { flex-direction: column; }
  .sample-status-select { width: 100%; min-height: 44px; }
  .sample-tracking > .form-group { flex: 1 1 100%; min-width: 0 !important; }
  .sample-tracking .btn { width: 100%; min-height: 46px; }
}

/* Search + filter row above a list */
.admin-toolbar {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* ---------------------------------------------------------------------
   Order detail — summary strip, primary actions, collapsible sections.
   Built with native <details>, so open/closed state can't desync from the
   markup and it stays keyboard-accessible for free.
   --------------------------------------------------------------------- */
.od-back { margin-bottom: 18px; }

.od-summary {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  margin-bottom: 14px;
}
.od-summary-main { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.od-summary-main h2 { margin: 0; font-size: 1.5rem; }
.od-summary-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 20px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .92rem;
}
.od-fact-label {
  display: block;
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #98A0A8;
  margin-bottom: 3px;
}
.od-summary-facts strong { font-size: 1.05rem; }

.od-actionbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}
.od-actionbar select,
.od-actionbar input[type="text"] {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: .9rem;
  color: var(--charcoal);
  background: var(--white);
  min-height: 44px;
}
.od-actionbar input[type="text"] { flex: 1 1 240px; min-width: 0; }
.od-actionbar-hint { margin: -12px 0 20px; }

.od-section {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  margin-bottom: 12px;
  overflow: hidden;
}
.od-section > summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 20px;
  cursor: pointer;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: .95rem;
  letter-spacing: .04em;
  color: var(--charcoal);
  list-style: none;
  user-select: none;
}
.od-section > summary::-webkit-details-marker { display: none; }
.od-section > summary svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.od-section > summary span { flex: 1; }
/* Chevron drawn on the summary itself, rotating with the open state */
.od-section > summary::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 2px solid #98A0A8;
  border-bottom: 2px solid #98A0A8;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.od-section[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.od-section > summary:hover { background: var(--offwhite); }
.od-body { padding: 4px 20px 20px; border-top: 1px solid var(--line); padding-top: 18px; }

.od-note {
  font-size: .88rem;
  line-height: 1.6;
  color: #5A6268;
  background: var(--offwhite);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.od-note a { color: var(--accent); text-decoration: underline; }

.od-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.od-controls:last-child { margin-bottom: 0; }
.od-controls select,
.od-controls input[type="number"] {
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: .88rem;
  color: var(--charcoal);
  background: var(--white);
  min-height: 42px;
}
.od-controls input[type="number"] { width: 120px; }
.od-field { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: #5A6268; }

.od-totals { margin-top: 18px; margin-left: auto; max-width: 340px; }
.od-total-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 7px 0;
  font-size: .89rem;
  color: #5A6268;
}
.od-total-row em { font-style: normal; color: #98A0A8; font-size: .84rem; }
.od-total-row.is-total {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--charcoal);
}

/* A collapsed section would otherwise be missing from print/PDF output */
@media print {
  .od-section > *:not(summary) { display: block !important; }
  .od-section > summary::after { display: none; }
}

@media (max-width: 700px) {
  .od-summary { padding: 16px; }
  .od-summary-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .od-actionbar { flex-direction: column; align-items: stretch; }
  .od-actionbar select, .od-actionbar .btn { width: 100%; }
  .od-body { padding: 16px; }
  .od-controls { flex-direction: column; align-items: stretch; }
  .od-controls select, .od-controls input[type="number"], .od-controls .btn { width: 100%; }
  .od-totals { max-width: none; }
}

/* ---------------------------------------------------------------------
   Sample inventory — visual tiles showing the real colour or door style,
   so stock reads at a glance rather than as a list of names.
   --------------------------------------------------------------------- */
.inv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 24px 0 12px; }
.inv-head h4 { margin: 0; }
.inv-summary { font-size: .85rem; color: #7A828A; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-pill { padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; }
.inv-pill.out { background: #FBE9E7; color: #B3261E; }
.inv-pill.low { background: #FDF3E2; color: #8A6A2F; }

.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.inv-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 12px;
  text-align: center;
}
.inv-card.out { border-color: #F0C4BE; }
.inv-card.low { border-color: #EFDCB4; }
.inv-card.is-unavailable { opacity: .62; }

.inv-swatch {
  height: 74px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.12);
  margin-bottom: 10px;
}
.inv-thumb {
  width: 100%;
  height: 74px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--offwhite);
  margin-bottom: 10px;
  display: block;
}
/* Image failed to load — show the plain tile, not a broken-image icon. */
.inv-thumb.is-missing { color: transparent; font-size: 0; }
.inv-name { font-family: 'Oswald', Arial, sans-serif; font-size: .84rem; margin-bottom: 6px; }
.inv-qty-line { display: flex; align-items: baseline; justify-content: center; gap: 5px; margin-bottom: 10px; }
.inv-qty { font-size: 1.35rem; font-weight: 700; line-height: 1; }
.inv-qty.ok { color: #2F6B2B; }
.inv-qty.low { color: #8A6A2F; }
.inv-qty.out { color: #B3261E; }
.inv-qty-label { font-size: .72rem; color: #98A0A8; text-transform: uppercase; letter-spacing: .05em; }
.inv-flag { font-size: .7rem; color: #B3261E; margin-bottom: 8px; }

.inv-controls { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.inv-step {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  color: var(--charcoal);
  font-size: 1rem;
  cursor: pointer;
}
.inv-step:hover { border-color: var(--accent); color: var(--accent); }
.inv-controls .inventory-qty-input {
  width: 100%;
  min-width: 0;
  text-align: center;
  padding: 7px 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font-family: inherit;
  font-size: .9rem;
}

/* Accessory / panel cards in the order wizard's Options step */
.acc-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.acc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.acc-material {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--offwhite);
  border: 1px solid var(--line);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7A828A;
  vertical-align: 2px;
}
.acc-note { font-size: .78rem; color: #7A828A; margin-top: 4px; line-height: 1.5; }
.acc-price { font-family: 'Oswald', Arial, sans-serif; font-size: 1.05rem; white-space: nowrap; color: var(--accent); }
.acc-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.acc-field {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  color: #5A6268;
}
.acc-field select, .acc-field input {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: .86rem;
  color: var(--charcoal);
  background: var(--white);
  min-height: 40px;
}
.acc-field input[type="number"] { width: 84px; }
@media (max-width: 700px) {
  .acc-head { flex-direction: column; gap: 8px; }
  .acc-controls { flex-direction: column; align-items: stretch; }
  .acc-field { justify-content: space-between; }
  .acc-field select, .acc-field input[type="number"] { width: 130px; }
}

/* Per-order status dropdown in the admin order list */
.order-status-inline {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: .82rem;
  font-family: inherit;
  color: var(--charcoal);
  background: var(--white);
  max-width: 100%;
}
.order-status-inline:disabled { opacity: .6; }
.invoice-flag {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .72rem;
  white-space: nowrap;
}
.invoice-flag.sent { background: #dcefe2; color: #2e6b47; }

.order-detail-actions { display: flex; gap: 12px; margin: 20px 0; }
.order-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--black);
  margin-bottom: 20px;
}
.order-detail-header h2 { margin-bottom: 4px; }
.order-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.order-detail-grid .field-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: #888; margin-bottom: 2px; }
.order-detail-items { width: 100%; border-collapse: collapse; margin-top: 10px; }
.order-detail-items th, .order-detail-items td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.order-detail-items th { font-family: 'Oswald', Arial, sans-serif; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: #888; }

@media print {
  .site-header, .site-footer, .no-print { display: none !important; }
  body { background: #fff; }
  .order-detail-header { border-bottom-color: #000; }
}

/* Kitchen builder */
.kb-sticky-total {
  position: sticky;
  top: 96px;
  z-index: 500;
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius);
  padding: 14px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  font-family: 'Oswald', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .95rem;
  box-shadow: var(--shadow);
}
.kb-sticky-total span:last-child { color: #A9C0EE; font-size: 1.2rem; }

.icon-grid { grid-template-columns: repeat(4, 1fr); }
.icon-grid .config-card { padding: 28px 20px; }
.icon-grid .config-card .icon-svg {
  width: 92px;
  height: 116px;
  margin: 0 auto 16px;
  color: #1a1a1a;
}
.icon-grid .config-card .icon-svg svg { width: 100%; height: 100%; display: block; }
.icon-grid .config-card .icon-svg img { width: 100%; height: 100%; object-fit: contain; display: block; }

.step-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.color-swatch-card { cursor: pointer; border: 3px solid transparent; border-radius: var(--radius); padding: 4px; transition: border-color .2s; position: relative; }
.color-swatch-card.selected { border-color: var(--accent); }
.color-swatch-card .chip { pointer-events: none; }
.color-swatch-card.out-of-stock { cursor: not-allowed; opacity: .45; }
.color-swatch-card.out-of-stock .chip { filter: grayscale(1); }
.out-of-stock-label {
  text-align: center;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #b3261e;
  margin-top: 4px;
}

@media (max-width: 900px) {
  .icon-grid { grid-template-columns: repeat(3, 1fr); }
  .kb-sticky-total { top: 70px; flex-direction: column; gap: 4px; text-align: center; }
}
@media (max-width: 560px) {
  .icon-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Process steps */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.step-card { text-align: center; }
.step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 auto 18px;
}
.step-card h3 { font-size: 1rem; margin-bottom: 8px; }
.step-card p { font-size: .88rem; }
.step-connector { display: none; }

/* Portal card */
.portal-card {
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-card);
  padding: 44px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.portal-card .icon-badge {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--white);
  color: var(--black);
  border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}
.portal-card h3 { color: var(--white); font-size: 1.3rem; }
.portal-card p { color: #c7c7c7; }

/* Passcode input */
.passcode-input {
  letter-spacing: .5em;
  font-size: 1.2rem !important;
  text-align: center;
  font-family: 'Oswald', Arial, sans-serif !important;
}
.form-note {
  font-size: .85rem;
  text-align: center;
  margin-top: 16px;
  padding: 12px;
  border-radius: 4px;
  display: none;
}
.form-note.show { display: block; }
.form-note.info { background: #f0ead9; color: #6b5a1f; }
.form-note.error { background: #f6dede; color: #8a2c2c; }
/* Every success message carries a green tick, so a completed action is
   recognisable at a glance rather than needing the text to be read. */
.form-note.success {
  background: #EEF6ED;
  color: #2F6B2B;
  border: 1px solid var(--success);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500;
}
.form-note.success::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
}
/* Info notes get a matching neutral marker so the two read as a set */
.form-note.info { display: flex; align-items: flex-start; gap: 10px; }

.field-invalid { border-color: #b3261e !important; background: #fdf5f5 !important; }
.field-invalid-msg { color: #b3261e; font-size: .8rem; margin-top: 4px; display: block; }

/* Swatches */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 30px;
}
.swatch { text-align: center; }
.swatch .chip {
  height: 70px;
  border-radius: 4px;
  margin-bottom: 10px;
  border: 1px solid rgba(0,0,0,.1);
}
.swatch .name { font-family: 'Oswald', Arial, sans-serif; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.swatch-note { font-size: .82rem; color: #777; margin-top: 20px; }

/* ---------------------------------------------------------------------
   Mobile navigation overlay (.mnav)
   Built by script.js and attached directly to <body>, so no ancestor can
   interfere with its positioning. Three regions: a fixed head, a scrolling
   middle, and a fixed foot. The call-to-action lives in the foot, outside
   the scroll area, which is what makes it impossible to clip.
   --------------------------------------------------------------------- */
.mnav[hidden] { display: none; }
.mnav {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 3000;
}
.mnav-backdrop {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(20,26,32,.45);
  opacity: 0;
  transition: opacity .2s ease;
}
.mnav.is-open .mnav-backdrop { opacity: 1; }

.mnav-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(88%, 400px);
  background: var(--white);
  display: flex;
  flex-direction: column;      /* head / scroll / foot */
  box-shadow: -8px 0 32px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.32,.72,0,1);
}
.mnav.is-open .mnav-panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .mnav-panel, .mnav-backdrop { transition: none; }
}

.mnav-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
}
.mnav-title {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #98A0A8;
}
.mnav-close {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--charcoal);
  cursor: pointer;
  padding: 0;
}
.mnav-close svg { width: 20px; height: 20px; }
.mnav-close:active { background: var(--offwhite); }

/* The only scrolling region. min-height:0 is required for a flex child to
   actually scroll rather than stretch its parent. */
.mnav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 18px;
}

.mnav-link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 10px 4px;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--charcoal);
  border-bottom: 1px solid var(--line);
}
.mnav-link.active { color: var(--accent); }
.mnav-link:active { color: var(--accent); }

.mnav-row { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.mnav-row .mnav-link { flex: 1; border-bottom: none; }
.mnav-expand {
  width: 48px; height: 48px;
  flex: 0 0 48px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
}
.mnav-expand svg { width: 20px; height: 20px; transition: transform .2s ease; }
.mnav-expand[aria-expanded="true"] svg { transform: rotate(180deg); }

.mnav-sub { padding: 6px 0 12px 4px; }
.mnav-sublink {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 14px;
  margin-bottom: 6px;
  border-radius: 10px;
  background: var(--offwhite);
  border: 1px solid var(--line);
  color: var(--charcoal);
}
.mnav-sublink:active { border-color: var(--accent); }
.mnav-subtitle { font-family: 'Oswald', Arial, sans-serif; font-size: .92rem; }
.mnav-subdesc { font-size: .76rem; line-height: 1.4; color: #7A828A; }
.mnav-sublink-plain { font-size: .9rem; font-weight: 600; color: var(--accent); }

/* Pinned foot — never scrolls, so nothing here can ever be clipped. */
.mnav-foot {
  flex: 0 0 auto;
  padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--white);
}
.mnav-quote {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  font-size: .95rem;
}
/* Language switcher — EN | ES pill. Small and quiet: it matters enormously
   to the visitors who need it and should be invisible to everyone else. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--white);
  flex-shrink: 0;
}
.lang-option {
  border: none;
  background: none;
  cursor: pointer;
  padding: 5px 11px;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: #7A828A;
  transition: background .18s ease, color .18s ease;
}
.lang-option:hover { color: var(--accent); }
.lang-option.active { background: var(--accent); color: #fff; }

@media (max-width: 900px) {
  /* The desktop header is already tight on tablets; the mobile menu carries
     the switcher from here down. */
  .header-cta .lang-switch { display: none; }
}

.mnav-lang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.mnav-lang-label {
  font-size: .8rem;
  color: #7A828A;
}
.mnav-lang .lang-option { padding: 8px 16px; font-size: .8rem; }

/* Dealer/contractor login. Full width and clearly a button, but outlined so
   the gold quote button stays the primary action for the public. */
.mnav-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 50px;
  margin-top: 10px;
  padding: 8px 14px;
  border: 2px solid var(--accent);
  border-radius: 10px;
  background: var(--white);
  color: var(--accent);
  font-family: 'Oswald', Arial, sans-serif;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.mnav-login svg { width: 19px; height: 19px; flex-shrink: 0; }
.mnav-login:active { background: var(--offwhite); }

.mnav-contacts { display: flex; gap: 10px; margin-top: 12px; }
.mnav-contact {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--offwhite);
  color: var(--accent);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}
.mnav-contact svg { width: 16px; height: 16px; flex-shrink: 0; }
.mnav-contact:active { border-color: var(--accent); }
.mnav-social { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.mnav-social a {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--charcoal);
}
.mnav-social svg { width: 18px; height: 18px; }
.mnav-social a:active { border-color: var(--accent); color: var(--accent); }

/* Responsive */
@media (max-width: 900px) {
  /* backdrop-filter makes an element the containing block for any position:fixed
     descendant — so with it on, the menu below anchored itself to the 104px-tall
     header instead of the viewport and collapsed to ~41px. The header background
     is already 97% opaque, so dropping the blur on mobile costs nothing visually
     and lets the menu position against the screen as intended. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--white); }

  /* Mobile header is three columns: badge far-left, logo dead-centre, menu
     button right. The outer columns are equal-width (1fr) so the logo centres
     against the header itself, not against whatever the badge happens to
     measure. `order` overrides the DOM sequence, which is logo-then-badge for
     desktop reading order. */
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
  }
  .main-nav, .header-cta { display: none; }
  .nav-toggle { display: block; order: 3; justify-self: end; }
  .hdr-usa { order: 1; justify-self: start; padding: 4px 10px 4px 8px; }
  /* Re-shown here: the laptop rules drop this label to save room for the nav,
     but on mobile the nav is gone and the badge is the point. */
  .hdr-usa-text { display: block; font-size: .58rem; }
  .logo-link { order: 2; justify-self: center; }
  .logo-link img { height: 42px; }
  /* Pinned to the viewport with top AND bottom rather than sized by a height
     calculation. Every unit that measures viewport height (vh, and dvh on
     older iOS) is unreliable on an iPhone because Safari's address bar and
     toolbar are counted inconsistently — which is what kept clipping the
     "Get a Quote" button. With bottom:0 the panel simply cannot extend past
     the bottom of the screen, whatever Safari is doing with its chrome, and
     anything taller scrolls inside. */
  /* `top` and `max-height` are set in pixels by script.js from the real header
     height and visualViewport — see sizeMobileMenu(). The values below are only
     a pre-JS fallback; they are deliberately NOT `bottom:0`, because that would
     force a height and override what the script measures. */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .line-card, .line-card.reverse { grid-template-columns: 1fr; }
  .line-card .line-img { min-height: 240px; order: 1 !important; }
  .line-card .line-body { order: 2 !important; padding: 30px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .form-row { grid-template-columns: 1fr; }
  .swatch-grid { grid-template-columns: repeat(3, 1fr); }
  .config-grid, .door-style-grid, .steps-grid, .material-select-grid { grid-template-columns: repeat(2, 1fr); }
  section { padding: 60px 0; }
  .nav-item { flex-wrap: wrap; width: 100%; gap: 8px; }

  /* Collapsed until tapped. The label still navigates to the Cabinets page;
     the chevron beside it expands the lines — so one row does both jobs
     without hijacking the link. */
  .nav-item > a { flex: 1; }
  .dropdown-toggle {
    display: inline-flex;
    width: 46px;
    height: 46px;
    margin-left: 0;
    flex: 0 0 46px;
    border: 1.5px solid var(--accent);
    border-radius: 8px;
    color: var(--accent);
    background: var(--white);
  }
  .dropdown-toggle::before { width: 9px; height: 9px; border-width: 2.5px; }
  .dropdown-toggle[aria-expanded="true"] { background: var(--accent); color: #fff; }

  .nav-dropdown {
    display: none;
    flex-direction: column;
    gap: 8px;
    position: static;
    border: none;
    box-shadow: none;
    padding: 0 0 0 16px;
    margin-top: 2px;
    width: 100%;
    flex-basis: 100%;
    border-left: 2px solid var(--line);
    min-width: 0;
    max-width: none;
  }
  /* Flex (not the desktop rule's `block`) so the 8px gap between lines applies */
  .nav-dropdown.open { display: flex; }
  .nav-dropdown a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--charcoal);
    font-size: .92rem;
    background: var(--offwhite);
  }
  .nav-dropdown a:active { border-color: var(--accent); color: var(--accent); }
  /* The section label is redundant on mobile — the indent already shows these
     belong to Cabinets, and every row saved is a row less scrolling. */
  .nav-dd-label { display: none; }
  .nav-dd-title { font-size: .9rem; }
  .nav-dd-desc { font-size: .74rem; line-height: 1.35; }
  .nav-dd-all {
    border-top: none;
    padding-top: 10px !important;
    margin-top: 0;
    background: var(--white) !important;
    justify-content: center;
    align-items: center !important;
  }
}
@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .swatch-grid { grid-template-columns: repeat(2, 1fr); }
  .config-grid, .door-style-grid, .steps-grid, .material-select-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Scroll-reveal + hover animations
   `.reveal`/`.in-view` are only ever added by script.js when the visitor
   has not requested reduced motion (see the IntersectionObserver setup),
   so a no-JS visitor and a reduced-motion visitor both just see the final
   state immediately — no flash, no waiting.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .reveal.in-view { opacity: 1; transform: translateY(0); }

  .btn { transition: all .2s ease, transform .2s ease; }
  .btn:hover { transform: translateY(-2px); }

  .feature-card, .line-card, .step-card, .contractor-card, .config-card, .material-card, .door-style-card {
    transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
  }
  .feature-card:hover, .step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
  .feature-card .icon { display: inline-block; transition: transform .25s ease; }
  .feature-card:hover .icon { transform: scale(1.12); }

  .gallery-item { transition: transform .3s ease; }
  .gallery-item:hover { transform: scale(1.03); }
}

/* Narrowest phones — the "Made in the USA" wordmark is the first thing to go,
   the flag stays. Kept below 344px so ordinary 375px phones still show it. */
@media (max-width: 344px) {
  .hdr-usa-text { display: none; }
  .header-inner { padding: 8px 10px; }
}

/* =====================================================================
   HOMEPAGE — opening photo, intro, cabinet lines, Google reviews
   Rebuilt 2026-08-19. The opening image carries nothing on top of it, so
   the headline and calls to action live in .home-intro directly below.
   ===================================================================== */

/* Zero padding overrides the global `section` rule — this one runs edge to
   edge, straight under the header, with no band of white around it. */
.hero-photo {
  position: relative;
  display: block;
  line-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--offwhite);
}
/* The source photo is 4:3 and this band is much wider than that, so `cover`
   always crops top and bottom. The taller cap and the 62% vertical anchor
   keep the crop centred on the cabinets rather than on the sky — without
   them, a wide monitor cuts the bottom off the run of cabinets. Revisit both
   numbers if the photograph is ever replaced with a different crop. */
.hero-photo img {
  display: block;
  height: clamp(300px, 46vw, 720px);
  object-fit: cover;
  object-position: center 62%;
}
/* The photo is 1448px wide natively. Stretching it full-bleed on wide
   monitors made it soft, so past 1600px the sharp image stops growing and
   stays centred — its upscale never exceeds ~10% — while the blurred copy
   behind it carries the composition to the edges. */
.hero-photo-main {
  position: relative;
  z-index: 1;
  width: min(100%, 1600px);
  margin: 0 auto;
}
/* Written as `.hero-photo img.hero-photo-backdrop` on purpose: the shared
   `.hero-photo img` rule above sets `display: block` at class+element
   specificity, which silently beats a lone class selector — a bare
   `.hero-photo-backdrop { display: none }` never applies. */
.hero-photo img.hero-photo-backdrop { display: none; }
@media (min-width: 1601px) {
  .hero-photo img.hero-photo-backdrop {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: blur(26px) saturate(1.05) brightness(.88);
    /* Pushed past the edges so the blur doesn't fade to transparent at the
       section boundary. */
    transform: scale(1.08);
  }
}

.home-intro {
  text-align: center;
  padding: 54px 0 8px;
}
.home-intro h1 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin: 6px 0 .45em;
  text-wrap: balance;
}
.home-intro .lead {
  font-size: 1.08rem;
  color: var(--text-secondary);
  max-width: 660px;
  margin: 0 auto;
}
.home-intro-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.home-intro-actions .hero-call { display: inline-flex; align-items: center; gap: 9px; }
.home-intro-actions .hero-call svg { width: 17px; height: 17px; }

/* --- Cabinet lines ------------------------------------------------- */

.section-lines { padding-top: 56px; }
.lines-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.line-tile {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  color: inherit;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.line-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}
.line-tile-img {
  display: block;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
}
.line-tile-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 22px 22px 24px;
  flex: 1;
}
.line-tile-title {
  display: block;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.2;
}
.line-tile-desc {
  display: block;
  font-size: .95rem;
  color: var(--text-secondary);
  line-height: 1.6;
  flex: 1;
}
.line-tile-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}
.line-tile-more::after { content: '\2192'; transition: transform .2s ease; }
.line-tile:hover .line-tile-more::after { transform: translateX(4px); }

.lines-foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 34px;
  font-size: .95rem;
}
.lines-foot a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.lines-foot span { color: var(--line); }

/* --- Google reviews ------------------------------------------------ */

.section-reviews { background: var(--offwhite); }

.reviews-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: -10px 0 34px;
}
.reviews-score {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--charcoal);
}
.review-stars { display: inline-flex; gap: 2px; }
.review-stars svg { width: 19px; height: 19px; color: #F0A500; }
.reviews-count { font-size: .95rem; color: var(--text-secondary); }
.reviews-count a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.reviews-grid:empty { display: none; }
.review-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-card);
}
.review-card .review-stars svg { width: 16px; height: 16px; }
.review-text { margin: 0; color: #4a5260; line-height: 1.65; font-size: .96rem; flex: 1; }
.review-author {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.review-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: .9rem;
  flex-shrink: 0;
}
.review-name { font-weight: 600; color: var(--charcoal); font-size: .92rem; }
.review-when { font-size: .82rem; color: var(--text-secondary); }

.reviews-actions { display: flex; justify-content: center; margin-top: 34px; }
.reviews-actions:empty, .reviews-actions > div:empty { display: none; }

@media (max-width: 900px) {
  .lines-grid { grid-template-columns: 1fr; gap: 20px; }
  .home-intro { padding-top: 40px; }
  .hero-photo img { height: clamp(280px, 72vw, 420px); }
}
@media (max-width: 560px) {
  .home-intro-actions { flex-direction: column; }
  .home-intro-actions .btn { width: 100%; justify-content: center; min-height: 50px; display: inline-flex; align-items: center; }
}

/* Kept clear of the homepage's opening photograph — script.js toggles this
   while .hero-photo is on screen. Still clickable everywhere else. */
.whatsapp-float.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: scale(.85) translateY(8px);
  pointer-events: none;
}

/* =====================================================================
   DEALER PORTAL dashboard (2026-08-23)
   All classes are `dp-` prefixed and additive — nothing here overrides
   an existing rule, so no other page can be affected by them.
   ===================================================================== */

.dp-welcome { text-align: center; margin-bottom: 26px; }
.dp-welcome h2 { margin: 0 0 6px; }
.dp-welcome .dp-sub { color: var(--text-secondary); margin: 0; }

.dp-level { margin-bottom: 30px; }

.dp-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 34px;
}

.dp-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-align: left;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px 22px 22px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #c9d6ea; }
.dp-card-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.dp-card-primary .dp-desc { color: #dbe5f5; }
.dp-card-primary .dp-go { color: #fff; }
.dp-card-primary .dp-icon { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); color: #fff; }

.dp-icon {
  width: 46px; height: 46px;
  border-radius: 11px;
  background: #EEF2F9;
  border: 1px solid #d5dfef;
  color: var(--accent);
  display: grid;
  place-items: center;
}
.dp-icon svg { width: 23px; height: 23px; }

.dp-title {
  font-family: 'Oswald', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1.05rem;
  font-weight: 600;
}
.dp-desc { color: var(--text-secondary); font-size: .87rem; }
.dp-go {
  margin-top: auto;
  padding-top: 6px;
  font-family: 'Oswald', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent);
}

.dp-panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.dp-panel-head h3 { margin: 0; }
.dp-back {
  background: none;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  color: var(--accent);
  font-family: 'Oswald', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .82rem;
  font-weight: 600;
}
.dp-back:hover { color: var(--accent-hover); }

.dp-footer-actions { margin-top: 30px; text-align: center; }

@media (max-width: 640px) {
  .dp-sections { grid-template-columns: 1fr; gap: 14px; }
  .dp-card { padding: 20px 18px; }
}

/* =====================================================================
   PUBLIC CABINET CATALOG — Cabinet Sizes & Configurations (2026-08-23)
   All `pc-` prefixed and additive. No price is rendered anywhere here;
   see public-catalog.js for why that is structural rather than a
   display choice.
   ===================================================================== */

.pc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 28px 0 18px;
}
.pc-filter {
  padding: 9px 16px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Oswald', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .76rem;
  font-weight: 600;
  color: var(--charcoal);
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.pc-filter:hover { border-color: var(--accent); color: var(--accent); }
.pc-filter[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.pc-count {
  text-align: center;
  color: var(--text-secondary);
  font-size: .84rem;
  margin: 0 0 18px;
}

.pc-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 760px;
  margin: 0 auto 28px;
  padding: 12px 16px;
  background: #EEF2F9;
  border: 1px solid #d5dfef;
  border-radius: var(--radius);
  font-size: .82rem;
  line-height: 1.6;
  color: #3d4a5c;
}
.pc-note svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent); margin-top: 1px; }

.pc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
}

.pc-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.pc-media { background: var(--offwhite); border-bottom: 1px solid var(--line); }

.pc-view {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  aspect-ratio: 1 / 1;
}
.pc-view:active { cursor: grabbing; }
.pc-track { display: flex; height: 100%; transition: transform .28s ease; }
.pc-slide { flex: 0 0 100%; display: grid; place-items: center; padding: 14px; }
.pc-slide img { max-width: 100%; max-height: 100%; object-fit: contain; }

.pc-code {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 8px;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--accent);
}
.pc-caption {
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  background: rgba(47,52,55,.82);
  color: #fff;
  border-radius: 999px;
  padding: 3px 11px;
  font-size: .68rem;
  white-space: nowrap;
  pointer-events: none;
}
.pc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.94);
  color: var(--charcoal);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  display: grid;
  place-items: center;
}
.pc-arrow.prev { left: 8px; }
.pc-arrow.next { right: 8px; }
.pc-arrow:disabled { opacity: .3; cursor: default; }
.pc-arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }

.pc-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.pc-name { margin: 0; font-size: 1rem; }
.pc-desc { margin: 0; font-size: .85rem; color: var(--text-secondary); line-height: 1.6; }

.pc-specs {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  font-size: .82rem;
}
.pc-specs dt {
  font-family: 'Oswald', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .68rem;
  color: var(--text-secondary);
  padding-top: 2px;
  white-space: nowrap;
}
.pc-specs dd { margin: 0; }

.pc-note-sm {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: .78rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.pc-cta { text-align: center; margin-top: 40px; }
.pc-cta p { color: var(--text-secondary); margin-bottom: 16px; }
.pc-cta .btn { margin: 0 5px 8px; }

@media (max-width: 640px) {
  .pc-grid { grid-template-columns: 1fr; gap: 16px; }
  .pc-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .pc-filter { flex: 0 0 auto; }
}

/* =====================================================================
   MANAGER PORTAL — Cabinet Catalog tables and the size editor
   (2026-08-25)

   `.price-table` was already being emitted by the catalog publisher but
   had never been given any styling, so those two tables rendered as bare
   browser default. Styled here alongside the new size editor so the whole
   Cabinet Catalog screen reads as one thing.

   All type is black rather than the site's grey secondary, matching the
   contrast pass applied to the Order Builder and the PDFs on the same
   date at the client's request.
   ===================================================================== */
.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  color: #000000;
}
.price-table th {
  text-align: left;
  font-family: 'Oswald', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .7rem;
  font-weight: 600;
  color: #000000;
  padding: 8px 10px;
  border-bottom: 2px solid var(--charcoal);
  white-space: nowrap;
}
.price-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.price-table tbody tr:last-child td { border-bottom: 0; }

/* ---- One cabinet in the size list ---- */
.size-row {
  border: 2px solid var(--charcoal);
  border-radius: var(--radius);
  background: var(--white);
  margin-bottom: 8px;
  overflow: hidden;
}
.size-row.open { box-shadow: var(--shadow-card); }

/* The whole header is the toggle, so it is a button — but it has to lay
   out like a table row, hence the grid. On a phone it stacks instead:
   five columns in 375px would be unreadable. */
.size-row-head {
  display: grid;
  grid-template-columns: 92px minmax(0, 1.4fr) minmax(0, 1.6fr) minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--white);
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: #000000;
}
.size-row-head:hover { background: var(--offwhite); }
.size-row-code {
  font-family: 'Oswald', Arial, sans-serif;
  font-weight: 600;
  letter-spacing: .05em;
  font-size: .82rem;
}
.size-row-name { font-size: .88rem; }
.size-row-widths {
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
}
.size-row-widths em { font-style: normal; font-weight: 600; color: var(--danger, #B4483F); }
.size-row-meta { font-size: .76rem; }
.size-row-caret {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  line-height: 1;
}

.size-editor {
  padding: 4px 14px 16px;
  border-top: 1px solid var(--line);
}
.size-table { max-width: 520px; }
.size-table input[type="number"] {
  width: 100%;
  max-width: 130px;
  padding: 8px 10px;
  border: 2px solid var(--charcoal);
  border-radius: 6px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: #000000;
}
/* Big enough to hit accurately with a thumb — these are the controls that
   decide what a dealer can order. */
.size-table input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--accent);
  cursor: pointer;
}
.btn-tiny {
  padding: 5px 10px;
  font-size: .68rem;
  letter-spacing: .05em;
}

.size-custom {
  margin-top: 18px;
  padding: 12px 14px;
  border: 2px solid var(--charcoal);
  border-radius: var(--radius);
  background: var(--offwhite);
}
.size-custom-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: .88rem;
  color: #000000;
}
.size-custom-toggle input { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }
.size-custom-range { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.size-custom-range label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 600;
  color: #000000;
}
.size-custom-range input {
  width: 90px;
  padding: 8px 10px;
  border: 2px solid var(--charcoal);
  border-radius: 6px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: #000000;
}

.size-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}
.size-msg { font-size: .84rem; font-weight: 600; }
.size-msg.ok  { color: #2F6B2B; }
.size-msg.err { color: var(--danger, #B4483F); }

@media (max-width: 760px) {
  /* Stacked, with the caret pinned to the right of the first line so the
     row still reads as expandable. */
  .size-row-head {
    grid-template-columns: 1fr 28px;
    row-gap: 4px;
    align-items: start;
  }
  .size-row-code { grid-column: 1; }
  .size-row-caret { grid-column: 2; grid-row: 1; }
  .size-row-name,
  .size-row-widths,
  .size-row-meta { grid-column: 1 / -1; }
  .size-table input[type="number"] { max-width: 100%; }
  .size-actions .btn { flex: 1 1 auto; }
}

/* =====================================================================
   MANAGER PORTAL — Customers  (2026-08-26)

   The customer profile is the way into a retail order: pick or create
   the customer, check their details, then build. These styles cover the
   list, the profile header and the shared validation classes, which are
   deliberately the same class names the Order Builder uses so the two
   screens behave and look identical when a field is wrong.
   ===================================================================== */
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.cust-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, .8fr) 22px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 15px;
  margin-bottom: 8px;
  border: 2px solid var(--charcoal);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: #000000;
}
.cust-row:hover { background: var(--offwhite); border-color: var(--accent); }
.cust-name { font-weight: 600; font-size: .95rem; }
.cust-co {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border: 1.5px solid var(--charcoal);
  border-radius: 3px;
  font-family: 'Oswald', Arial, sans-serif;
  font-size: .64rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.cust-contact,
.cust-where,
.cust-orders { font-size: .84rem; }
.cust-go { font-size: 1.3rem; text-align: right; line-height: 1; }

.cp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 24px;
}

/* Shared with the Order Builder — same names, same behaviour, so a
   required field looks the same wherever the office meets one. */
.req { color: #B4483F; font-weight: 700; }

.admin-view input.is-invalid,
.admin-view select.is-invalid,
.admin-view textarea.is-invalid {
  border-color: #B4483F !important;
  background: #FDF3F2;
  box-shadow: 0 0 0 3px rgba(180, 72, 63, .14);
}
.admin-view .field-error {
  display: block;
  margin: 6px 0 0;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.45;
  color: #B4483F;
}

@media (max-width: 820px) {
  /* Stacked on a phone — five columns in 375px is unreadable. The chevron
     stays pinned to the first line so the row still reads as tappable. */
  .cust-row {
    grid-template-columns: 1fr 22px;
    row-gap: 4px;
  }
  .cust-name { grid-column: 1; }
  .cust-go { grid-column: 2; grid-row: 1; }
  .cust-contact,
  .cust-where,
  .cust-orders { grid-column: 1 / -1; }
  .cp-head .btn { flex: 1 1 auto; }
}