/* ==========================================================================
   Furniture Outlet & More — Catalog stylesheet
   Visual identity inherited from reference/option-1.html (approved design).
   Palette, typography, radius, shadow and button styles are copied verbatim;
   catalog-specific components (product grid, gallery, specs) are built on top
   using the same tokens.
   ========================================================================== */

:root{
  --cream:#FBF3E7;
  --cream-2:#F5E9D8;
  --rust:#C1502E;
  --rust-dark:#A43F22;
  --walnut:#3E2723;
  --walnut-70:#5A4038;
  --gold:#E8A33D;
  --white:#FFFFFF;
  --radius:18px;
  --shadow: 0 10px 30px rgba(62,39,35,0.12);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Mulish',sans-serif;
  background:var(--cream);
  color:var(--walnut);
  line-height:1.6;
}
h1,h2,h3,h4{
  font-family:'Fraunces',serif;
  color:var(--walnut);
  line-height:1.15;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 24px;}
.eyebrow{
  display:inline-block;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  font-size:.78rem;color:var(--rust);margin-bottom:12px;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;
  border-radius:999px;font-weight:800;font-size:.98rem;cursor:pointer;border:2px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--rust);color:var(--white);box-shadow:0 8px 20px rgba(193,80,46,.35);}
.btn-primary:hover{background:var(--rust-dark);}
.btn-outline{background:transparent;border-color:var(--walnut);color:var(--walnut);}
.btn-outline:hover{background:var(--walnut);color:var(--cream);}
.btn-sm{padding:11px 20px;font-size:.88rem;}
.btn-block{width:100%;}
.btn-on-dark.btn-outline{border-color:var(--cream);color:var(--cream);}
.btn-on-dark.btn-outline:hover{background:var(--cream);color:var(--walnut);}

/* ---------- HEADER ---------- */
header{
  position:sticky;top:0;z-index:50;background:rgba(251,243,231,0.92);
  backdrop-filter:blur(6px);border-bottom:1px solid rgba(62,39,35,0.08);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1180px;margin:0 auto;}
.logo{display:inline-flex;align-items:center;gap:10px;}
.logo-badge{
  position:relative;background:var(--rust);color:var(--cream);padding:8px 16px 8px 22px;
  border-radius:6px 14px 14px 6px;font-family:'Fraunces',serif;font-weight:700;line-height:1.05;
}
.logo-badge::before{
  content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--cream);
}
.logo-badge .main{display:block;font-size:1.05rem;}
.logo-badge .sub{display:block;font-size:.68rem;font-family:'Mulish',sans-serif;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);}
nav ul{display:flex;gap:26px;font-weight:700;font-size:.92rem;}
nav a:hover{color:var(--rust);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.phone-pill{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--walnut);font-size:.95rem;}
.phone-pill svg{flex-shrink:0;}
@media (max-width:1020px){
  nav{display:none;}
  .phone-pill span{display:none;}
}

/* ---------- CATALOG HERO ---------- */
.cat-hero{position:relative;overflow:hidden;background:var(--walnut);}
.cat-hero-bg{position:absolute;inset:0;}
.cat-hero-bg img{width:100%;height:100%;object-fit:cover;}
.cat-hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(62,39,35,0.94) 38%, rgba(62,39,35,0.55));
}
.cat-hero-content{position:relative;z-index:2;max-width:640px;color:var(--cream);padding:78px 0;}
.cat-hero-content .eyebrow{color:var(--gold);}
.cat-hero-content h1{color:var(--cream);font-size:clamp(2rem,4.2vw,3.1rem);margin-bottom:18px;}
.cat-hero-content h1 span{color:var(--gold);}
.cat-hero-content p{color:#EAD9C6;font-size:1.08rem;max-width:520px;}
.cat-hero-badges{display:flex;gap:22px;margin-top:28px;flex-wrap:wrap;}
.cat-hero-badge{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.9rem;color:#EAD9C6;}
.cat-hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex-shrink:0;}

/* ---------- SECTIONS ---------- */
.section{padding:80px 0;}
.section-head{text-align:center;max-width:640px;margin:0 auto 46px;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.4rem);}
.section-head p{color:var(--walnut-70);margin-top:14px;font-size:1.05rem;}

/* ---------- PRODUCT GRID ---------- */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.product-card{
  background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;transition:transform .18s ease, box-shadow .18s ease;
}
.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(62,39,35,0.18);}
.product-card-img{
  aspect-ratio:4/3;background:var(--white);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid rgba(62,39,35,0.07);
}
/* contain, not cover: furniture cut-outs must not be cropped */
.product-card-img img{width:100%;height:100%;object-fit:contain;}
.product-card-body{padding:22px 24px 24px;flex:1;display:flex;flex-direction:column;}
.product-flag{
  display:inline-block;align-self:flex-start;background:var(--rust);color:var(--cream);font-size:.68rem;
  font-weight:800;padding:5px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;
}
.product-card-body h3{font-size:1.08rem;margin-bottom:8px;}
.product-card-body h3 a:hover{color:var(--rust);}
.product-meta{font-size:.86rem;color:var(--walnut-70);margin-bottom:16px;flex:1;}
.product-price{display:flex;align-items:baseline;gap:8px;margin-bottom:16px;}
.product-price .amount{font-size:1.5rem;font-weight:800;color:var(--rust);font-family:'Fraunces',serif;}
.product-price .label{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--walnut-70);}
.product-card-actions{display:flex;gap:10px;flex-wrap:wrap;}
.product-card-actions .btn{flex:1;}
@media (max-width:980px){.product-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.product-grid{grid-template-columns:1fr;}}

/* ---------- BREADCRUMB ---------- */
.breadcrumb{padding:26px 0 0;font-size:.86rem;color:var(--walnut-70);font-weight:600;}
.breadcrumb a:hover{color:var(--rust);}
.breadcrumb .sep{opacity:.5;margin:0 8px;}

/* ---------- PRODUCT DETAIL ---------- */
.product-detail{padding:34px 0 80px;}
.product-detail-inner{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:start;}

.gallery-main{
  background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:18px;
}
.gallery-main img{width:100%;height:100%;object-fit:contain;}
.gallery-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:14px;}
.gallery-thumb{
  background:var(--white);border:2px solid rgba(62,39,35,0.12);border-radius:10px;overflow:hidden;
  aspect-ratio:1/1;cursor:pointer;padding:4px;transition:border-color .15s ease, transform .15s ease;
}
.gallery-thumb img{width:100%;height:100%;object-fit:contain;}
.gallery-thumb:hover{transform:translateY(-2px);border-color:var(--rust);}
.gallery-thumb.is-active{border-color:var(--rust);}
.gallery-thumb:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.gallery-count{font-size:.8rem;color:var(--walnut-70);margin-top:12px;font-weight:600;}
@media (max-width:520px){.gallery-thumbs{grid-template-columns:repeat(4,1fr);}}

.product-info .eyebrow{margin-bottom:10px;}
.product-info h1{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:16px;}
.product-price-lg{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;}
.product-price-lg .amount{font-family:'Fraunces',serif;font-size:2.4rem;font-weight:800;color:var(--rust);}
.product-price-lg .label{font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--walnut-70);}
.price-note{font-size:.8rem;color:var(--walnut-70);opacity:.85;font-style:italic;margin-bottom:24px;}
.product-desc{color:var(--walnut-70);font-size:1rem;margin-bottom:28px;}
.product-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:32px;}

.spec-table{width:100%;border-collapse:collapse;background:var(--white);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);}
.spec-table caption{
  text-align:left;font-family:'Fraunces',serif;font-weight:700;font-size:1.1rem;
  color:var(--walnut);margin-bottom:12px;
}
.spec-table th,.spec-table td{padding:13px 18px;text-align:left;font-size:.92rem;border-bottom:1px solid rgba(62,39,35,0.08);}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:none;}
.spec-table th{font-weight:800;color:var(--walnut);width:44%;}
.spec-table td{color:var(--walnut-70);}
@media (max-width:900px){.product-detail-inner{grid-template-columns:1fr;gap:36px;}}

/* ---------- RELATED ---------- */
.related-section{background:var(--cream-2);}

/* ---------- FOOTER ---------- */
footer{padding:50px 0 30px;}
.footer-simple{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;
  padding-bottom:28px;border-bottom:1px solid rgba(62,39,35,0.12);
}
.footer-links{display:flex;gap:26px;flex-wrap:wrap;font-weight:700;font-size:.92rem;}
.footer-links a:hover{color:var(--rust);}
.footer-contact{text-align:right;}
.footer-contact div{font-size:.92rem;color:var(--walnut-70);}
.footer-contact a{font-weight:800;color:var(--walnut);}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;padding-top:22px;
  font-size:.85rem;color:var(--walnut-70);flex-wrap:wrap;gap:10px;
}
@media (max-width:700px){.footer-simple{flex-direction:column;align-items:flex-start;}.footer-contact{text-align:left;}}

/* ==========================================================================
   ADDITIONS — catalog navigation, category toolbar, package placeholders.
   Everything above this line is unchanged from the approved design; nothing
   existing is edited here, only new selectors are appended.
   ========================================================================== */

/* ---------- HEADER: general polish ----------
   Buttons and the logo lockup must never wrap their text mid-phrase — that
   was producing the ragged multi-line "Book Appointment" / "Furniture
   Outlet" seen at busy header widths. New, later rules win the cascade
   without editing the original .btn / .logo-badge declarations above. */
.btn{white-space:nowrap;}
.logo{flex-shrink:0;}
.logo-badge .main,.logo-badge .sub{white-space:nowrap;}
.phone-pill{flex-shrink:0;}
.header-inner{gap:16px;}
.nav-cta{flex-wrap:nowrap;}

.btn.is-disabled{opacity:.5;cursor:default;pointer-events:none;}

/* Product card CTAs were reading heavy/too tall — trims just this pair,
   without changing .btn-sm anywhere else it's already used (header, etc). */
.product-card-actions .btn{padding:10px 14px;font-size:.84rem;}

/* ---------- HEADER: "Catalog" mega menu ----------
   Built on <details>/<summary> — native tap-to-toggle on mobile, no JS
   required to open or close. The base rules below are the *unenhanced*
   fallback: a plain, compact list under the toggle, safe with no JS at all.

   nav.js progressively enhances this into the real mega menu by stamping
   `js` onto <html> (swapping the default `no-js`) the instant it runs; every
   full-width/full-screen rule below is scoped under `html.js` so a no-JS
   visitor only ever sees the plain list, never an unstyled full-bleed panel. */
.nav-dropdown{position:relative;}
.nav-dropdown-toggle{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-weight:700;font-size:.92rem;color:var(--walnut);padding:10px 6px;user-select:none;
}
.nav-dropdown-toggle::-webkit-details-marker{display:none;}
.nav-dropdown-toggle::marker{content:"";}
.nav-dropdown-toggle:hover{color:var(--rust);}
.nav-dropdown-toggle .chevron{transition:transform .15s ease;flex-shrink:0;}
.nav-dropdown[open] .nav-dropdown-toggle .chevron{transform:rotate(180deg);}

.nav-megamenu-panel{
  position:absolute;top:calc(100% + 10px);left:0;min-width:300px;background:var(--white);
  border-radius:14px;box-shadow:var(--shadow);padding:14px;z-index:60;
  max-height:70vh;overflow-y:auto;
}
.nav-megamenu-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px 10px;}
.nav-megamenu-title{font-family:'Fraunces',serif;font-weight:700;font-size:1rem;color:var(--walnut);}
.nav-megamenu-close{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;
  background:none;border:none;border-radius:8px;color:var(--walnut-70);cursor:pointer;padding:0;
}
.nav-megamenu-close:hover{background:var(--cream);color:var(--rust);}
.nav-megamenu-grid{display:flex;flex-direction:column;gap:2px;}
.mega-item > a,.mega-item > div{
  display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:10px;position:relative;
}
.mega-item > a:hover{background:var(--cream);}
.mega-item.is-disabled > div{opacity:.55;}
.mega-thumb{
  width:44px;height:44px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--cream-2);
}
.mega-thumb img{width:100%;height:100%;object-fit:cover;}
.mega-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.mega-name{font-weight:700;font-size:.92rem;color:var(--walnut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mega-count{font-size:.76rem;color:var(--walnut-70);white-space:nowrap;}
.mega-badge{
  display:inline-block;align-self:flex-start;margin-top:3px;font-size:.62rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;color:var(--rust);background:rgba(193,80,46,.1);
  padding:3px 9px;border-radius:999px;white-space:nowrap;
}

/* JS-enhanced: full-width panel dropping below the header on desktop. */
html.js .nav-megamenu-panel{
  position:fixed;left:0;right:0;top:var(--header-h,72px);width:100%;
  max-height:none;border-radius:0;padding:0;min-width:0;
  box-shadow:0 24px 48px rgba(62,39,35,.18);border-top:1px solid rgba(62,39,35,0.08);
}
html.js .nav-megamenu-inner{max-width:1180px;margin:0 auto;padding:32px 24px 44px;}
html.js .nav-megamenu-head{padding:0 0 20px;margin-bottom:20px;border-bottom:1px solid rgba(62,39,35,0.08);}
html.js .nav-megamenu-title{font-size:1.3rem;}
html.js .nav-megamenu-close{width:38px;height:38px;}
html.js .nav-megamenu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 24px;}
@media (max-width:1100px){html.js .nav-megamenu-grid{grid-template-columns:repeat(3,1fr);}}

/* JS-enhanced: full-screen takeover on mobile/tablet, one column, easy tap.
   The header stays visible above the panel (top:var(--header-h)), so the
   Catalog toggle itself remains reachable to close it, in addition to the
   explicit close button, outside-tap and Escape. */
@media (max-width:900px){
  /* height (not bottom:0) — a fixed element with top+bottom both set fails to
     auto-stretch correctly as a <details> descendant in Chromium; an explicit
     height sidesteps it. */
  html.js .nav-megamenu-panel{top:var(--header-h,64px);height:calc(100vh - var(--header-h,64px));border-radius:0;}
  html.js .nav-megamenu-inner{padding:22px 20px 40px;}
  html.js .nav-megamenu-grid{grid-template-columns:1fr;gap:4px;}
  html.js .mega-thumb{width:52px;height:52px;}
  html.js .mega-item > a,html.js .mega-item > div{padding:13px 8px;}
}
body.nav-megamenu-open{overflow:hidden;}

/* ---------- HEADER: fitting the row at every width ----------
   Measured minimum widths for the header row, below 1020px where
   .primary-nav and the phone number text are already hidden:

       full labels ....................................... 652px
       "Catalog" text dropped + "Book Appointment" -> "Book" ... 493px
       + smaller logo and tighter gaps ................... 434px

   The shortening used to start at 480px while the hamburger appeared at
   1020px, so nothing at all shrank between those two points: the row needed
   652px and got less, pushing the page into horizontal scroll everywhere
   below that — 375px overflowed by 34px, not just the 481-620px band it was
   first spotted in.

   Each tier below now engages before the next one's minimum is reached, and
   the last one lets the row wrap rather than shrink, so the small end is
   guaranteed by layout instead of by a pixel budget that has to stay correct. */
.btn-label-short{display:none;}

/* Tier 1 — full labels need 652px, so shorten them well before that. The gap
   up to 700px is deliberate headroom: those 652px are mostly text, and text
   gets wider when the web fonts fail to load and a system fallback stands in. */
@media (max-width:700px){
  .nav-dropdown-label{display:none;}
  .nav-dropdown-toggle{padding:10px 4px;}
  .btn-label-full{display:none;}
  .btn-label-short{display:inline;}
}

/* Tier 2 — the shortened row needs 493px. */
@media (max-width:520px){
  .nav-cta{gap:8px;}
  .header-inner .btn-primary.btn-sm{padding:10px 14px;}
  .logo-badge{padding:6px 13px 6px 18px;}
  .logo-badge .main{font-size:.92rem;}
  .logo-badge .sub{font-size:.62rem;}
}

/* Tier 3 — the tightest single-row form still needs 434px, so below that the
   row wraps instead of being squeezed further: logo on its own line, controls
   centred underneath. Nothing is hidden and nothing shrinks again — the phone
   icon in particular stays tappable, which matters most on the smallest
   screens. Because the widest single item (the logo badge, ~153px) is far
   narrower than the viewport, there is no width from 320px up where this can
   overflow. In practice the wrap only kicks in under ~396px; between there and
   440px this just trims the padding.

   nav.js re-measures --header-h on every resize, so the full-screen Catalog
   and search panels still start below the header once it is two rows tall. */
@media (max-width:440px){
  .header-inner{flex-wrap:wrap;justify-content:center;gap:10px;padding:12px 14px;}
  .nav-cta{flex-wrap:wrap;justify-content:center;}
}

/* ---------- CATEGORY PAGE: sort toolbar ---------- */
.catalog-toolbar{
  display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px;
  margin-bottom:30px;padding:18px 22px;background:var(--white);border-radius:14px;box-shadow:var(--shadow);
}
.catalog-field{
  display:flex;flex-direction:column;gap:6px;font-size:.75rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;color:var(--walnut-70);
}
.catalog-field select{
  font-family:'Mulish',sans-serif;font-size:.92rem;font-weight:700;color:var(--walnut);
  padding:9px 14px;border-radius:10px;border:2px solid rgba(62,39,35,0.15);background:var(--cream);
  cursor:pointer;
}
.catalog-toolbar-count{font-size:.88rem;font-weight:700;color:var(--walnut-70);}
.catalog-loadmore{text-align:center;margin-top:40px;}

/* Cards beyond the current page are hidden by catalog.js only — the full
   grid is always present in the HTML, so nothing disappears without JS. */
.product-card.is-hidden{display:none;}

/* ==========================================================================
   RESTORED MOCKUP SECTIONS — Hero, Deals, Steps, Financing, Owner,
   Reviews, Checklist, Visit/Map. Copied verbatim from reference/option-1.html
   (the approved design); these selectors were not carried over in the first
   build pass, which used a simplified custom hero/grid instead. index.html
   now renders the literal mockup markup for these sections, so their CSS
   belongs here, unedited from the source.
   ========================================================================== */

/* HERO - full bleed showroom photo */
.hero{position:relative;min-height:82vh;display:flex;align-items:center;overflow:hidden;}
.hero-bg{position:absolute;inset:0;}
.hero-bg img{width:100%;height:100%;object-fit:cover;}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(62,39,35,0.92) 35%, rgba(62,39,35,0.45));
}
.hero-content{position:relative;z-index:2;max-width:620px;color:var(--cream);padding:70px 0;}
.hero-content .eyebrow{color:var(--gold);}
.hero-content h1{color:var(--cream);font-size:clamp(2.2rem,4.6vw,3.4rem);margin-bottom:20px;}
.hero-content h1 span{color:var(--gold);}
.hero-content p{color:#EAD9C6;font-size:1.1rem;margin-bottom:32px;max-width:500px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}
.hero-badges{display:flex;gap:22px;margin-top:32px;flex-wrap:wrap;}
.hero-badge{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.9rem;color:#EAD9C6;}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex-shrink:0;}

/* THIS WEEK'S DEALS */
.deals-section{background:var(--walnut);}
.deals-section .eyebrow{color:var(--gold);}
.deals-section .section-head h2{color:var(--cream);}
.deals-section .section-head p{color:#D9C7B8;}
.deals-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.deal-card{background:var(--cream);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:block;}
.deal-img{aspect-ratio:4/3;overflow:hidden;}
.deal-img img{width:100%;height:100%;object-fit:cover;}
.deal-body{padding:24px;}
.deal-flag{
  display:inline-block;background:var(--rust);color:var(--cream);font-size:.7rem;font-weight:800;
  padding:5px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;
}
.deal-body h3{font-size:1.15rem;margin-bottom:12px;}
.deal-price{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;}
.deal-price .was{font-size:1rem;color:var(--walnut-70);text-decoration:line-through;opacity:.7;}
.deal-price .now{font-size:1.6rem;font-weight:800;color:var(--rust);font-family:'Fraunces',serif;}
.deal-save{font-size:.85rem;color:var(--walnut-70);font-weight:700;}
.deal-fine{font-size:.72rem;color:var(--walnut-70);opacity:.7;font-style:italic;margin-top:14px;}
.deals-cta{text-align:center;margin-top:40px;}
@media (max-width:900px){.deals-grid{grid-template-columns:1fr;}}

/* HOW WE KEEP PRICES LOW */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.step-card{text-align:center;padding:0 10px;}
.step-num{
  width:56px;height:56px;border-radius:50%;background:var(--rust);color:var(--cream);
  display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;
  font-weight:700;font-size:1.4rem;margin:0 auto 18px;
}
.step-card h3{font-size:1.15rem;margin-bottom:10px;}
.step-card p{font-size:.94rem;color:var(--walnut-70);}
@media (max-width:900px){.steps-grid{grid-template-columns:1fr;}}

/* SHOP BY CATEGORY - built on the mockup's "Furnish a Whole Room" package
   card component (that section itself was removed from the home page —
   Shop by Category is its replacement, covering all real categories
   instead of three illustrative room bundles). */
.package-section{background:var(--white);}
.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.package-card{
  background:var(--cream);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.package-img{aspect-ratio:16/10;overflow:hidden;}
.package-img img{width:100%;height:100%;object-fit:cover;}
.package-body{padding:26px;flex:1;display:flex;flex-direction:column;}
.package-body h3{font-size:1.25rem;margin-bottom:6px;}
.package-price{font-family:'Fraunces',serif;font-weight:800;color:var(--rust);font-size:1.3rem;margin-bottom:14px;}
.package-price span{display:block;font-family:'Mulish',sans-serif;font-weight:600;font-size:.75rem;color:var(--walnut-70);}
@media (max-width:900px){.package-grid{grid-template-columns:1fr;}}

/* FINANCING MATH */
.financing-section{background:var(--cream-2);}
.math-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:36px;}
.math-card{
  background:var(--white);border-radius:var(--radius);padding:32px 24px;text-align:center;box-shadow:var(--shadow);
}
.math-item{font-size:1rem;color:var(--walnut-70);font-weight:700;margin-bottom:10px;}
.math-equals{font-size:1.5rem;color:var(--walnut-70);margin:8px 0;}
.math-result{font-family:'Fraunces',serif;font-size:2.2rem;font-weight:800;color:var(--rust);}
.math-result span{display:block;font-family:'Mulish',sans-serif;font-size:.85rem;font-weight:600;color:var(--walnut-70);margin-top:4px;}
.math-fine{text-align:center;font-size:.78rem;color:var(--walnut-70);opacity:.8;font-style:italic;max-width:560px;margin:0 auto 30px;}
.financing-cta{text-align:center;}
@media (max-width:900px){.math-grid{grid-template-columns:1fr;}}

/* MEET THE OWNER */
.owner-inner{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center;}
/* Real photo, replacing the mockup's dashed placeholder panel. 4:3, not the
   mockup's 3/4 portrait: assets/images/owner.webp is 1360x1020, so this slot
   matches the file exactly and `cover` crops nothing. */
.owner-photo{
  aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
  background:var(--cream-2);box-shadow:var(--shadow);
}
.owner-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.owner-quote{
  font-family:'Fraunces',serif;font-size:1.5rem;font-weight:600;line-height:1.4;
  color:var(--walnut);margin-bottom:22px;
}
.owner-quote::before{content:"\201C";color:var(--rust);}
.owner-quote::after{content:"\201D";color:var(--rust);}
.owner-name{font-weight:800;font-size:1.02rem;}
.owner-title{font-size:.88rem;color:var(--walnut-70);margin-bottom:18px;}
.owner-bio{color:var(--walnut-70);font-size:.96rem;}
@media (max-width:900px){.owner-inner{grid-template-columns:1fr;}.owner-inner .owner-photo{order:-1;max-width:420px;margin:0 auto;}}

/* REVIEWS - featured + small */
.reviews-section{background:var(--white);}
.featured-review{
  max-width:760px;margin:0 auto 50px;text-align:center;padding:0 20px;
}
.featured-review .stars{color:var(--gold);font-size:1.3rem;letter-spacing:3px;margin-bottom:20px;}
.featured-review p{
  font-family:'Fraunces',serif;font-size:1.6rem;font-weight:600;color:var(--walnut);line-height:1.4;margin-bottom:20px;
}
.featured-review .testi-name{font-weight:800;}
.featured-review .testi-loc{font-size:.88rem;color:var(--walnut-70);}
.small-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1000px;margin:0 auto;}
.small-testi-card{background:var(--cream);border-radius:var(--radius);padding:24px;}
.small-testi-card .stars{color:var(--gold);font-size:.9rem;letter-spacing:2px;margin-bottom:10px;}
.small-testi-card p{font-size:.9rem;font-style:italic;color:var(--walnut-70);margin-bottom:14px;}
.small-testi-card .testi-name{font-weight:800;font-size:.9rem;}
.small-testi-card .testi-loc{font-size:.8rem;color:var(--walnut-70);}
@media (max-width:900px){.small-testi-grid{grid-template-columns:1fr;}}

/* BEFORE YOU VISIT */
.checklist-section{background:var(--cream-2);}
.checklist{max-width:720px;margin:0 auto;}
.checklist-item{
  display:flex;gap:16px;align-items:flex-start;background:var(--white);border-radius:14px;
  padding:20px 24px;margin-bottom:14px;box-shadow:var(--shadow);
}
.checklist-icon{
  width:34px;height:34px;border-radius:50%;background:var(--rust);color:var(--cream);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-weight:800;
}
.checklist-item h4{font-size:1.02rem;margin-bottom:4px;}
.checklist-item p{font-size:.9rem;color:var(--walnut-70);}

/* MAP & DIRECTIONS */
.visit-section{background:var(--walnut);color:var(--cream);border-radius:28px;margin:0 24px;padding:60px;}
.visit-inner{max-width:1132px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;}
.visit-inner h2{color:var(--cream);font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:18px;}
.visit-info p{color:#E6D9CC;margin-bottom:22px;}
.info-row{display:flex;gap:14px;margin-bottom:16px;align-items:flex-start;}
.info-row svg{flex-shrink:0;margin-top:3px;color:var(--gold);}
.info-row b{display:block;}
.info-row span{color:#E6D9CC;font-size:.95rem;}
.parking-note{
  background:rgba(251,243,231,0.08);border:1px solid rgba(251,243,231,0.2);border-radius:12px;
  padding:16px 18px;margin:20px 0;font-size:.9rem;color:#E6D9CC;
}
.parking-note b{color:var(--gold);}
.visit-actions{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap;}
/* "Hours" is its own heading (.info-row b) with the days below it as a two
   column grid — day in the left column, time in the right — so the times line
   up in a single edge instead of running on after the label. `auto` sizes the
   day column to the widest day name once, for all rows. */
.hours-list{display:grid;grid-template-columns:auto 1fr;gap:3px 20px;margin:6px 0 0;}
.hours-list dt{color:#E6D9CC;font-size:.95rem;}
.hours-list dd{color:var(--cream);font-size:.95rem;font-weight:700;margin:0;}

/* Real Google Maps embed, in the slot the mockup's dashed panel occupied —
   same 1/1 square and same corner radius, so the section's proportions are
   unchanged. overflow:hidden is what makes the iframe's own square corners
   take the container's radius. */
.visit-map{
  border-radius:var(--radius);aspect-ratio:1/1;overflow:hidden;
  background:#4A322C;border:1px solid rgba(251,243,231,0.2);
}
.visit-map iframe{display:block;width:100%;height:100%;border:0;}
@media (max-width:900px){
  .visit-inner{grid-template-columns:1fr;}
  .visit-section{padding:40px 26px;margin:0 14px;}
}

/* ---------- PRODUCT PAGE: piece list (grouped/multi-piece listings) ----------
   Replaces the spec table on a group's page. Each row doubles as a gallery
   thumbnail (shares data-gallery-thumb with the small strip under the hero
   image, see gallery.js) so clicking a piece swaps the main photo with no
   new JavaScript. */
.piece-list{
  background:var(--white);border-radius:14px;box-shadow:var(--shadow);
  overflow:hidden;
}
.piece-list-heading{
  font-family:'Fraunces',serif;font-weight:700;font-size:1.05rem;color:var(--walnut);
  padding:18px 20px;border-bottom:1px solid rgba(62,39,35,0.08);
}
.piece-list-items{display:flex;flex-direction:column;}
.piece-row{
  display:flex;align-items:center;gap:14px;padding:14px 20px;cursor:pointer;
  border-bottom:1px solid rgba(62,39,35,0.08);transition:background .15s ease;
}
.piece-list-items .piece-row:last-child{border-bottom:none;}
.piece-row:hover{background:var(--cream);}
.piece-row.is-active{background:var(--cream-2);}
.piece-row:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;}
.piece-thumb{
  width:56px;height:56px;flex-shrink:0;border-radius:10px;overflow:hidden;
  background:var(--cream-2);display:flex;align-items:center;justify-content:center;
}
.piece-thumb img{width:100%;height:100%;object-fit:cover;}
.piece-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.piece-sku{font-size:.72rem;font-weight:800;letter-spacing:.04em;color:var(--rust);text-transform:uppercase;}
.piece-name{font-size:.92rem;font-weight:700;color:var(--walnut);}
.piece-price{
  flex-shrink:0;font-family:'Fraunces',serif;font-weight:800;font-size:1.02rem;color:var(--walnut);
  white-space:nowrap;
}
@media (max-width:520px){
  .piece-row{padding:12px 16px;gap:10px;}
  .piece-thumb{width:46px;height:46px;}
}

/* ---------- PRODUCT PAGE: group meta row (SKU + dimensions) ----------
   Sits under the description on a group's page — the spec table is replaced
   by the piece list there, so this is the only place SKU/dimensions for the
   currently-shown piece are visible. Synced by gallery.js on click. */
.product-meta-row{
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  margin-top:-14px;margin-bottom:24px;font-size:.88rem;color:var(--walnut-70);
}
.product-meta-sku{font-weight:700;}
.product-meta-sku span{font-weight:800;color:var(--walnut);}
.product-meta-dims{font-weight:600;}

/* Picking a piece from "Available Pieces" scrolls back up to the main
   image/name/price — this keeps that scroll from landing under the sticky
   header. --header-h is measured by nav.js on every page. */
.product-detail{scroll-margin-top:var(--header-h,80px);}

/* ---------- CATALOG GRID + CATEGORY TILES: uniform image slots ----------
   Listing thumbnails only. The supplier's photos come in whatever crop the
   manufacturer shot them in (measured on Occasional: aspect ratios 0.82 to
   1.78 against a 4:3 slot), and the inherited rule renders them with
   object-fit:contain. In a grid that reads as broken alignment — every photo
   sits at a different size inside its card with uneven white margins around
   it, so the cards look ragged even though the slots themselves are
   identical.

   Filling the slot instead makes every card present the same rectangle. The
   trade is that the edges of an off-ratio photo are cropped: on Occasional
   that is a median 11% / p90 18%, with the worst case 39% on the four tall
   "3 Pk nesting table" stacks. Nothing is lost that the customer cannot see
   in full — the product page still shows the whole photo untouched, which is
   why this override is scoped to the two listing surfaces and deliberately
   does NOT touch .gallery-main / .gallery-thumb.

   Overrides (does not edit) the inherited `.product-card-img img` rule. */
.product-card-img img,
.package-img img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* The slot's own backdrop. Pure white left a visible seam where a photo's own
   white studio background stopped; the faint cream tone matches the page and
   reads as part of the card while a lazy image is still arriving. */
.product-card-img,
.package-img{background:var(--cream-2);}

/* ---------- HEADER: mobile "Visit Us / Contact" menu ----------
   Replaces `.mobile-toggle`, a hamburger button carried over from the
   approved mockup that never had a `display:none` base rule or a mobile
   media-query override — it showed at every viewport including desktop, and
   had no JS behind it at all, so tapping it did nothing.

   That button existed because `.primary-nav` (Visit Us / Contact, still
   just above this in the markup) is hidden below 1020px, same as the
   original design. On mobile there is otherwise no way to reach "Visit Us"
   — the footer shows the address as plain text, not a link to the map/hours
   section, and "Contact" is redundant with the always-visible phone-pill
   icon, but Visit Us has no equivalent. Confirmed by checking the footer
   markup before making this change, rather than assuming.

   Fixed as a second <details data-nav-dropdown>, deliberately built the
   same way as the Catalog mega menu right above it in the markup: nav.js
   already drives any element matching [data-nav-dropdown] generically (open
   state, aria-expanded, outside-tap/Escape close, closing sibling dropdowns)
   with no changes needed here. Hidden entirely above 1020px, where
   .primary-nav is already visible inline and this would be redundant. */
.nav-mobile-menu{display:none;}
@media (max-width:1020px){
  .nav-mobile-menu{display:block;position:relative;}
}
.nav-mobile-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;font-size:1.4rem;line-height:1;
  cursor:pointer;list-style:none;color:var(--walnut);user-select:none;
}
.nav-mobile-toggle::-webkit-details-marker{display:none;}
.nav-mobile-toggle::marker{content:"";}
/* No `display` set here on purpose — a native <details> already applies
   `display:none` to every non-summary child while closed, and authoring a
   `display` on this rule would out-specificity that and force the panel
   visible even when collapsed (caught in testing: it rendered permanently
   open). `[open] .nav-mobile-panel` below supplies `display:flex` only once
   the browser's own collapse is no longer in effect. Same technique
   `.nav-megamenu-panel` above uses for the same reason. */
.nav-mobile-panel{
  position:absolute;top:calc(100% + 10px);right:0;min-width:180px;
  background:var(--white);border-radius:14px;box-shadow:var(--shadow);
  padding:8px;z-index:60;flex-direction:column;gap:2px;
}
.nav-mobile-menu[open] .nav-mobile-panel{display:flex;}
.nav-mobile-panel a{
  padding:11px 14px;border-radius:10px;font-weight:700;font-size:.92rem;
  color:var(--walnut);white-space:nowrap;
}
.nav-mobile-panel a:hover{background:var(--cream);}

/* ---------- HEADER: global product search ----------
   Same <details data-nav-dropdown> pattern as the Catalog and mobile menus
   above — nav.js drives open/close, aria-expanded, outside-tap/Escape close
   and closing sibling dropdowns generically, with no changes needed there.
   search.js owns only what's specific to this one: reading window.SEARCH_
   INDEX, filtering as the visitor types, and rendering results.

   `display` is deliberately absent from `.nav-search-panel`'s own rule, for
   the same reason documented above `.nav-mobile-panel`: a native <details>
   already hides every non-summary child while closed, and setting `display`
   in the base rule would out-specificity that and leave the panel visible
   even when collapsed. `[open] .nav-search-panel` supplies `display:flex`
   only once the collapse is no longer in effect. */
.nav-search-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;cursor:pointer;list-style:none;
  color:var(--walnut);user-select:none;
}
.nav-search-toggle::-webkit-details-marker{display:none;}
.nav-search-toggle::marker{content:"";}
.nav-search-toggle:hover{color:var(--rust);}

.nav-search-panel{
  position:absolute;top:calc(100% + 10px);right:0;width:380px;max-width:calc(100vw - 32px);
  background:var(--white);border-radius:14px;box-shadow:var(--shadow);
  padding:14px;z-index:60;flex-direction:column;gap:10px;
}
.nav-search[open] .nav-search-panel{display:flex;}
.nav-search-input{
  font-family:'Mulish',sans-serif;font-size:.95rem;font-weight:600;color:var(--walnut);
  padding:11px 14px;border-radius:10px;border:2px solid rgba(62,39,35,0.15);
  background:var(--cream);width:100%;
}
.nav-search-input:focus{outline:none;border-color:var(--rust);}
.nav-search-input::-webkit-search-cancel-button{cursor:pointer;}

.nav-search-results{max-height:60vh;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.nav-search-result{
  display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:10px;
}
.nav-search-result:hover,.nav-search-result:focus-visible{background:var(--cream);}
.nav-search-thumb{
  width:44px;height:44px;border-radius:8px;overflow:hidden;flex-shrink:0;
  background:var(--cream-2);display:flex;align-items:center;justify-content:center;
}
.nav-search-thumb img{width:100%;height:100%;object-fit:cover;}
.nav-search-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.nav-search-name{
  font-weight:700;font-size:.9rem;color:var(--walnut);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.nav-search-meta{font-size:.76rem;color:var(--walnut-70);white-space:nowrap;}
.nav-search-meta .nav-search-price{color:var(--rust);font-weight:700;margin-left:6px;}
.nav-search-empty{font-size:.88rem;color:var(--walnut-70);text-align:center;padding:18px 8px;}

/* JS-enhanced: full-screen takeover on mobile/tablet, same treatment and
   same reasoning as the Catalog mega menu at this breakpoint — a small
   anchored dropdown is too cramped to type and scan results in on a phone. */
@media (max-width:900px){
  html.js .nav-search-panel{
    position:fixed;left:0;right:0;top:var(--header-h,64px);width:100%;max-width:none;
    height:calc(100vh - var(--header-h,64px));border-radius:0;
    box-shadow:0 24px 48px rgba(62,39,35,.18);border-top:1px solid rgba(62,39,35,0.08);
    padding:20px;
  }
  html.js .nav-search-input{font-size:1rem;padding:13px 16px;}
}

/* ---------- BOOKING PAGE: embedded GoHighLevel form ----------
   `height`, not `min-height`: GHL's form_embed.js measures the real form and
   writes the result to the iframe's *inline* style, which outranks any rule
   here. A min-height would therefore not be a floor — it would fight that
   measurement and hold the frame too tall once the script had shrunk it.
   These values are the fallback shown before form_embed.js answers, and the
   permanent height if it never loads at all: the form's own declared height
   (data-height="858") on desktop, taller on a phone where every field and
   label stacks into its own row. Either way the frame is tall enough that the
   form never scrolls inside itself. */
.book-embed{
  max-width:820px;margin:0 auto;background:var(--white);border-radius:16px;
  box-shadow:var(--shadow);padding:18px;
}
.book-embed iframe{display:block;width:100%;height:858px;border:none;border-radius:8px;}
.book-nojs{font-size:.95rem;color:var(--walnut-70);text-align:center;padding:28px 8px;}
.book-nojs a{color:var(--rust);font-weight:700;}
.book-sku-note{
  font-size:.9rem;font-weight:700;color:var(--rust);background:var(--cream);
  border-radius:10px;padding:11px 14px;margin-bottom:14px;
}
@media (max-width:700px){
  .book-embed{padding:10px;border-radius:12px;}
  .book-embed iframe{height:1180px;}
}