/* ==========================================================================
   SHOWROOM PAGE (850) — /cabinet-showroom-las-vegas/
   See the header of showroom.php for why the page is built this way, and
   specifically why there is no stats strip, no numbering and no eyebrow
   labels: those were the version the owner rejected as AI-looking.

   Everything is scoped to .sage-sr, which each [section] carries.

   Contrast, on the grounds these rules actually paint:
     headings  --olive-900 on bone / linen / sage-100   > 11:1
     body      --stone 6.12 bone / 5.61 linen / 4.69 sage-100
     captions  --stone, italic, never below 0.875rem
   Gold is hairlines and the status dot only — never text on a light ground.
   ========================================================================== */

.sage-sr {
  --sr-pad: clamp(5rem, 10vw, 9rem);
  color: var(--ink);
}
/* !important: Flatsome writes each section's padding into an #section_<id>
   rule, and an ID beats any class. The first section's top padding still
   yields to header.css's header clearance (also !important, more specific). */
.sage-sr.section { padding: var(--sr-pad) 0 !important; }

/* style.css rounds every img to 8px; this page is square-cornered. */
.sage-sr img { border-radius: 0; }

.sage-sr h1,
.sage-sr h2,
.sage-sr h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--olive-900);
}
.sage-sr h2 {
  font-size: clamp(2.1rem, 3.3vw, 3rem);
  line-height: 1.08;
  margin: 0;
}
.sage-sr h3 {
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 2.6rem 0 0.6rem;
}
.sage-sr p { color: var(--stone); line-height: 1.8; }
.sage-sr p strong { color: var(--ink); font-weight: 600; }

/* Body links: underlined olive, not Flatsome's bold. */
.sage-sr p a:not(.sage-pd-btn) {
  color: var(--olive-700);
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: var(--greige);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.25s ease;
}
.sage-sr p a:not(.sage-pd-btn):hover { text-decoration-color: var(--olive-700); }

.sage-sr-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.6rem;
  margin: 2rem 0 0 !important;
}
.sage-sr .sage-pd-btn { padding: 1rem 2rem; letter-spacing: 0.02em; }
.sage-sr p a.sage-sr-tel {
  color: var(--olive-900);
  font-family: var(--font-display);
  font-size: 1.2rem;
  text-decoration: none;
  border-bottom: 1px solid var(--greige);
  padding-bottom: 2px;
}
.sage-sr p a.sage-sr-tel:hover { border-color: var(--olive-700); }

.sage-sr-caption {
  font-size: 0.9rem !important;
  font-style: italic;
  line-height: 1.7 !important;
}

/* --------------------------------------------------------------------------
   HERO — the title, and a wall of real doors
   -------------------------------------------------------------------------- */
.sage-sr-hero.section { padding-bottom: clamp(4rem, 8vw, 7rem) !important; }
.sage-sr-hero h1 {
  font-size: clamp(3rem, 6.2vw, 6rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 11ch;
}
.sage-sr-lede { margin: 0 !important; font-size: var(--text-base); }
.sage-sr-hero .sage-visit-note { color: var(--stone); margin-top: 1.2rem; }

.sage-sr-open {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0 0 !important;
  font-size: 0.8125rem !important;
  color: var(--olive-700) !important;
}
.sage-sr-open-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--greige);
  flex: none;
}
.sage-sr-open.is-open .sage-sr-open-dot {
  background: var(--olive-500);
  box-shadow: 0 0 0 4px var(--olive-500-a15);
}
.sage-sr-open.is-closed .sage-sr-open-dot { background: var(--gold-500); }

.sage-sr-wall-row { margin-top: clamp(3.5rem, 7vw, 6rem) !important; }

/* The rail: a gold hairline the doors hang under, the doors grouped into the
   catalogue's three families (sage_products_style_groups), each family as wide
   as its door count. On a phone the whole rail scrolls sideways instead of
   shrinking eleven doors to stamps. */
.sage-sr-wall {
  --door-gap: clamp(0.6rem, 1.2vw, 1.25rem);
  position: relative;
  border-top: 1px solid var(--gold-500);
}
.sage-sr .sage-sr-fams,
.sage-sr .sage-sr-wall-doors,
.sage-sr .sage-sr-fins {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sage-sr .sage-sr-fams {
  display: flex;
  gap: clamp(1.25rem, 2.6vw, 2.75rem);
}
/* restyle.css turns every .entry-content <li> into a linen pill with a gold
   bar (::before). Out-specify and zero it. */
.sage-sr .sage-sr-fams li,
.sage-sr .sage-sr-fins li,
.sage-sr .sage-sr-slabs li {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  display: block;
}
.sage-sr .sage-sr-fams li::before,
.sage-sr .sage-sr-fins li::before,
.sage-sr .sage-sr-slabs li::before { content: none; }

/* Base width = the family's own gaps, then free space shared by door count:
   every door on the wall ends up exactly the same width, so the same height. */
.sage-sr .sage-sr-fams > .sage-sr-fam {
  flex: var(--n) 1 calc((var(--n) - 1) * var(--door-gap));
  min-width: 0;
  /* Column, with the doors stretching: the floor line under every family
     lands at the tallest family's floor, however many lines a name wraps to. */
  display: flex !important;
  flex-direction: column;
}
.sage-sr .sage-sr-fam > .sage-sr-wall-doors { flex: 1; }
.sage-sr-fam-name {
  margin: 0 0 1.25rem !important;
  padding-top: 0.9rem;
  font-size: 0.6875rem !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--olive-700) !important;
  line-height: 1 !important;
}
.sage-sr .sage-sr-wall-doors {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--door-gap);
  align-items: start;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--greige);
}

/* Doors and colour tiles are <button>s, and Flatsome styles every button --
   min-height, padding, uppercase, a radius, a background. Unset it all on our
   own classes; the radius needs !important, as on the visualizer's zoom pill. */
.sage-sr .sage-sr-door,
.sage-sr .sage-sr-fin,
.sage-sr .sage-sr-panel-x {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  cursor: pointer;
  border-radius: 0 !important;
  min-height: 0 !important;
  text-transform: none !important;
  letter-spacing: normal;
}
.sage-sr-door-frame { display: block; position: relative; }
.sage-sr-door-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 2;
  object-fit: cover;
  object-position: top;
  /* drop-shadow, not box-shadow: a door-only swatch (fetch_cnc_page_swatches.py)
     is transparent above the door, and a box-shadow would outline the empty
     space where the drawer front sits on every other swatch. */
  filter: drop-shadow(0 1px 1px rgba(28, 28, 24, 0.10)) drop-shadow(0 8px 9px rgba(28, 28, 24, 0.16));
  transition: transform 0.5s var(--ease-out), filter 0.5s var(--ease-out);
}
.sage-sr-door:hover .sage-sr-door-img,
.sage-sr-door:focus-visible .sage-sr-door-img,
.sage-sr-door[aria-expanded="true"] .sage-sr-door-img {
  transform: translateY(-10px);
  filter: drop-shadow(0 1px 1px rgba(28, 28, 24, 0.10)) drop-shadow(0 18px 14px rgba(28, 28, 24, 0.22));
}
.sage-sr-door.is-swapped .sage-sr-door-img { animation: sage-sr-settle 0.5s var(--ease-out); }
@keyframes sage-sr-settle {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}
.sage-sr-door:focus-visible .sage-sr-door-img { outline: 2px solid var(--olive-500); outline-offset: 4px; }

/* Fixed height for a two-line name plus the count, so every family's floor
   line sits at the same height whether or not its names wrap. */
.sage-sr-tag { display: block; margin-top: 0.9rem; line-height: 1.3; min-height: 4.1rem; }
.sage-sr-tag-fin {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  color: var(--olive-900);
}
.sage-sr-tag-line {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--stone);
}
.sage-sr-door:hover .sage-sr-tag-line,
.sage-sr-door[aria-expanded="true"] .sage-sr-tag-line { color: var(--olive-700); }
/* The open door's tag gets a gold underline: which door the panel belongs to. */
.sage-sr-door[aria-expanded="true"] .sage-sr-tag-fin {
  text-decoration: underline;
  text-decoration-color: var(--gold-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.sage-sr-wall-note {
  margin: 0 0 1.4rem !important;
  font-size: 0.9375rem !important;
  font-style: italic;
}

/* --- The colour panel ----------------------------------------------------- */
.sage-sr-panel {
  margin-top: 2rem;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  background: var(--linen);
  animation: sage-sr-open 0.45s var(--ease-out);
}
.sage-sr-panel[hidden] { display: none; }
@keyframes sage-sr-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.sage-sr-panel-hd {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem 2rem;
  align-items: start;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--greige);
}
.sage-sr-panel-hd h3 { margin: 0 0 0.4rem; font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
.sage-sr-panel-hd p { margin: 0; font-size: var(--text-sm); max-width: 44rem; }
.sage-sr-panel-now { font-size: 0.8125rem !important; white-space: nowrap; padding-top: 0.6rem; }
.sage-sr-panel-now span { color: var(--olive-900); font-weight: 500; }
.sage-sr .sage-sr-panel-x {
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  font-size: 1.6rem;
  line-height: 2.5rem;
  color: var(--olive-800);
  border: 1px solid var(--greige);
}
.sage-sr .sage-sr-panel-x:hover { border-color: var(--olive-700); }
.sage-sr .sage-sr-panel-x:focus-visible { outline: 2px solid var(--olive-500); outline-offset: 2px; }

.sage-sr-pl-line { padding-top: 1.75rem; }
.sage-sr-pl-line + .sage-sr-pl-line { margin-top: 0.5rem; border-top: 1px solid var(--greige); }
.sage-sr-pl-line-hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.sage-sr-pl-line-hd h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--olive-900);
}
.sage-sr-pl-line-hd h4 span {
  margin-left: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--stone);
}
.sage-sr .sage-sr-pl-line-hd a {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--olive-700);
  text-decoration: underline;
  text-decoration-color: var(--greige);
  text-underline-offset: 4px;
}
.sage-sr .sage-sr-pl-line-hd a:hover { text-decoration-color: var(--olive-700); }

.sage-sr .sage-sr-fins {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
  gap: 1.25rem 0.9rem;
}
.sage-sr-fin-img {
  display: block;
  aspect-ratio: 1 / 2;
  transition: transform 0.3s var(--ease-out);
}
.sage-sr-fin-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  filter: drop-shadow(0 1px 2px rgba(28, 28, 24, 0.16));
}
.sage-sr-fin:hover .sage-sr-fin-img { transform: translateY(-4px); }
/* Selected: a rule under the door and a bold name, not an outline -- an
   outline would frame the empty space above a door-only swatch. */
.sage-sr-fin[aria-pressed="true"] .sage-sr-fin-img { box-shadow: 0 5px 0 -1px var(--olive-800); }
.sage-sr-fin[aria-pressed="true"] .sage-sr-fin-name { font-weight: 600; color: var(--olive-900); }
.sage-sr-fin:focus-visible .sage-sr-fin-img { outline: 2px solid var(--olive-500); outline-offset: 3px; }
.sage-sr-fin-name {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--ink);
}
/* No door photograph exists for this finish: say so, never borrow one. */
.sage-sr-fin.is-noimg { display: block; cursor: default; }
.sage-sr-fin.is-noimg .sage-sr-fin-img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 1px dashed var(--greige);
  box-shadow: none;
  text-align: center;
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--stone);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   THE ESSAY — heading in the margin, prose in the column
   -------------------------------------------------------------------------- */
.sage-sr-essay-head .col-inner { position: sticky; top: 150px; }
.sage-sr-essay-body { margin-left: auto; }
.sage-sr-intro {
  margin: 0 !important;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.7vw, 1.6rem) !important;
  line-height: 1.5 !important;
  color: var(--olive-900) !important;
}
.sage-sr-essay-body h3:first-child { margin-top: 0; }
.sage-sr-essay-body p { margin: 0; }

/* MSI samples laid in a row under the countertop paragraph. */
.sage-sr .sage-sr-slabs {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
}
.sage-sr-slab {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(28, 28, 24, 0.12);
}
.sage-sr-slab img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sage-sr-slab-name {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: var(--stone);
}

/* The photograph, with the pull quote set beside it at the foot. */
.sage-sr-plate { margin-top: clamp(5rem, 10vw, 8rem) !important; align-items: flex-end; }
.sage-sr-plate-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 62%;
}
.sage-sr-plate-quote .col-inner { padding-left: clamp(0rem, 2vw, 1.5rem); }
.sage-sr .sage-sr-quote {
  margin: 0 0 2rem;
  padding: 0;
  border: 0;
  font-size: inherit;
}
.sage-sr .sage-sr-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.3vw, 2.2rem);
  line-height: 1.25;
  color: var(--olive-900);
}
.sage-sr-plate-quote .sage-sr-caption {
  margin: 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--gold-500);
}

.sage-sr-essay--insides { margin-top: clamp(5rem, 10vw, 8rem) !important; }
.sage-sr-cutaway img {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 18px 22px rgba(28, 28, 24, 0.14));
}

/* --------------------------------------------------------------------------
   THE INVITATION — the page's one accent band
   -------------------------------------------------------------------------- */
.sage-sr-invite {
  background: var(--bone);
  padding: clamp(2rem, 4vw, 3.25rem);
  outline: 1px solid var(--gold-500);
  outline-offset: -10px;
  box-shadow: 0 30px 60px -40px rgba(28, 28, 24, 0.35);
}
.sage-sr-invite-kicker {
  margin: 0 0 1rem !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--olive-700) !important;
}
.sage-sr-invite h2 { font-size: clamp(2rem, 2.8vw, 2.6rem); }
.sage-sr-invite p { margin: 0 0 1rem; font-size: var(--text-sm); }
.sage-sr-invite-addr {
  margin: 1.5rem 0 0.4rem !important;
  font-family: var(--font-display);
  font-size: 1.3rem !important;
  line-height: 1.4 !important;
  color: var(--olive-900) !important;
}
.sage-sr-hours {
  margin: 0 0 1.4rem !important;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--greige);
  font-style: italic;
}
.sage-sr-invite .sage-sr-cta { margin: 1.6rem 0 1.6rem !important; }
.sage-sr-invite-fine {
  margin: 0 !important;
  font-size: 0.8125rem !important;
  line-height: 1.7 !important;
}

.sage-sr-map-col .col-inner { padding-left: clamp(0rem, 2vw, 1.5rem); }
.sage-sr-map {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--sage-200);
}
.sage-sr-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Google's palette, pulled toward the page's: desaturated and warmed. */
  filter: grayscale(0.85) sepia(0.18) contrast(0.95);
  transition: filter 0.4s ease;
}
.sage-sr-map:hover iframe { filter: none; }
.sage-sr-map-col .sage-sr-caption { margin: 1rem 0 0; }

/* --------------------------------------------------------------------------
   BEFORE YOU COME + FAQ
   -------------------------------------------------------------------------- */
.sage-sr-before h2 { font-size: clamp(1.8rem, 2.4vw, 2.3rem); }
.sage-sr-before p { margin: 1.2rem 0 0; font-size: var(--text-sm); }
.sage-sr-faq-col { margin-left: auto; }
.sage-sr-faq-col h2 { margin-bottom: 1.6rem; }
.sage-sr-faq .accordion { border-top: 1px solid var(--greige); }
.sage-sr-faq .accordion-item { border-bottom: 1px solid var(--greige); }
.sage-sr-faq .accordion-title {
  border: 0 !important;
  padding: 1.35rem 2.5rem 1.35rem 0 !important;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--olive-900) !important;
  background: none !important;
  position: relative;
}
.sage-sr-faq .accordion-title .toggle {
  left: auto !important;
  right: 0;
  color: var(--olive-600);
}
.sage-sr-faq .accordion-inner { padding: 0 2.5rem 1.6rem 0 !important; }
.sage-sr-faq .accordion-inner p { margin: 0; }

/* --------------------------------------------------------------------------
   PHONES AND TABLETS
   -------------------------------------------------------------------------- */
@media (max-width: 849px) {
  .sage-sr-hero h1 { max-width: none; margin-bottom: 1.5rem; }

  /* The wall becomes a rail you swipe along, doors at a readable size. */
  .sage-sr-wall { margin-right: -15px; }
  .sage-sr .sage-sr-fams {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    padding: 0 15px 0 0;
    scrollbar-width: none;
  }
  .sage-sr .sage-sr-fams::-webkit-scrollbar { display: none; }
  .sage-sr .sage-sr-fams > .sage-sr-fam { flex: none; scroll-snap-align: start; }
  .sage-sr .sage-sr-wall-doors { grid-auto-columns: 6.75rem; padding-top: 12px; }
  .sage-sr-panel-hd { grid-template-columns: 1fr auto; }
  .sage-sr-panel-now { grid-row: 2; white-space: normal; padding-top: 0; }
  .sage-sr .sage-sr-fins { grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); }

  .sage-sr-essay-head .col-inner { position: static; margin-bottom: 1.5rem; }
  .sage-sr .sage-sr-slabs { grid-template-columns: repeat(3, 1fr); }
  .sage-sr-plate-quote { margin-top: 1.5rem; }
  .sage-sr-essay--insides .sage-sr-cutaway { margin-bottom: 1.5rem; }
  .sage-sr-cutaway img { max-width: 15rem; }
  .sage-sr-map-col { margin-top: 1.5rem; }
  .sage-sr-faq-col { margin-top: 2.5rem; }
}