/* Alteco shared chrome — nav, loader, footer, reset.
   These rules are the visual chrome shared across every page on the site.
   They are NOT auto-generated; they are hand-maintained.
   extract_shared_css.py is configured to APPEND its auto-extracted rules
   below the "AUTO-EXTRACT" marker rather than overwrite this header. */

/* ----- reset & html base ----- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}

/* ----- loader ----- */
.loader-text{font-family:'Outfit';font-size:2rem;font-weight:200;color:var(--gold);letter-spacing:0.3em}
/* The .loader element itself is declared in each page's inline <style> with a
   `transition: opacity 0.8s` that doesn't always fire reliably in iframed/sandboxed
   contexts. Use !important to win the cascade and a hard rule (no transition) so
   the loader always disappears once JS adds the class. */
.loader.hidden{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;transition:none !important}

/* ----- nav (logo, links, dropdown, burger) ----- */
.nav-logo{display:flex;align-items:center;gap:0.6rem;text-decoration:none}
.nav-logo-icon{width:auto;height:38px}
.nav-logo-text{font-family:'Outfit';font-size:1.4rem;font-weight:200;color:var(--gold);letter-spacing:0.2em}
.nav-links{display:flex;align-items:center;gap:0;list-style:none}
.nav-links>li>a{text-decoration:none;color:var(--text-body);font-size:0.7rem;font-weight:400;
  letter-spacing:0.18em;text-transform:uppercase;padding:0.5rem 1.2rem;transition:color 0.3s;white-space:nowrap}
.nav-links>li>a:hover{color:var(--gold)}
.nav-dropdown{position:relative}
.dropdown-menu{position:absolute;top:calc(100% + 14px);left:0;min-width:210px;
  background:rgba(250,247,240,0.98);backdrop-filter:blur(20px);
  border:1px solid rgba(0,0,0,0.05);padding:0.5rem 0;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:all 0.3s}
.nav-dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu a{display:block;padding:0.5rem 1.4rem;font-size:0.68rem!important;
  color:var(--text-mid)!important;text-decoration:none;transition:all 0.2s;white-space:nowrap}
.dropdown-menu a:hover{color:var(--gold)!important;padding-left:1.6rem}
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px}
.nav-burger span{display:block;width:22px;height:1px;background:var(--gold);transition:all 0.3s}
/* Collapse the horizontal nav to the hamburger overlay below 1100px.
   The nav (logo + links on the left, search pushed right) runs out of room
   below ~1100px: the links wrap and collide with the search box. Rather than
   cram them, we hide the inline links, show the burger, and reuse the
   full-screen overlay menu (same look as the old ≤768 mobile menu) up to
   1100px. This MUST live here (last-loaded sheet) so it wins over the base
   .nav-links{display:flex}/.nav-burger{display:none} and the per-page inline
   mobile blocks; scoped to #mainNav + !important for the same reason. */
/* Something sets the nav links to absolute-centered at runtime, which takes
   them out of flow and makes them overlap the search box at laptop widths
   (~1100-1360px). Instead keep them in flow and centre them with flexbox:
   flex:1 lets the list fill the space between the logo and the search cluster,
   and justify-content:center centres the links within it — centred, but it can
   never overlap because it is a real flex item that shrinks. !important +
   #mainNav beat the runtime centring; the ≤1100 overlay below still wins for
   the open mobile menu (higher specificity). */
#mainNav .nav-links{position:static !important;transform:none !important;left:auto !important;top:auto !important;flex:1 1 auto !important;justify-content:center !important}
@media(max-width:1100px){
  #mainNav .nav-burger{display:flex !important}
  #mainNav .nav-links{display:none !important}
  /* The nav has a backdrop-filter, which makes it a containing block that would
     trap the fixed-position overlay (clipping it to the bar height). Drop it
     while the menu is open so the overlay can fill the viewport. */
  body.menu-open #mainNav{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;transition:none !important}
  body.menu-open #mainNav .nav-links{
    display:flex !important;flex-direction:column !important;align-items:stretch !important;
    position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
    background:var(--cream,#faf7f0) !important;padding:6.5rem 1.75rem 6rem !important;margin:0 !important;
    z-index:90 !important;overflow-y:auto !important;list-style:none !important;gap:0 !important;
    transform:none !important;pointer-events:auto !important}
  body.menu-open #mainNav .nav-links li{width:100% !important;border-bottom:1px solid rgba(0,0,0,0.06) !important;padding:0 !important}
  body.menu-open #mainNav .nav-links li:last-child{border-bottom:none !important}
  body.menu-open #mainNav .nav-links li>a{display:block !important;padding:1rem 0.25rem !important;font-family:'Cormorant Garamond',serif !important;font-size:1.5rem !important;font-weight:300 !important;color:var(--text-dark,#2a2724) !important;letter-spacing:0.01em !important;line-height:1.1 !important;position:relative !important;text-transform:none !important;white-space:normal !important}
  body.menu-open #mainNav .nav-dropdown>a::after{content:'+' !important;position:absolute !important;right:0.25rem !important;top:1rem !important;font-size:1.5rem !important;font-weight:300 !important;color:var(--gold,#b89d5e) !important}
  body.menu-open #mainNav .nav-dropdown.is-open>a::after{content:'\2212' !important}
  body.menu-open #mainNav .dropdown-menu{display:none !important;position:static !important;opacity:1 !important;visibility:visible !important;transform:none !important;background:transparent !important;border:none !important;box-shadow:none !important;padding:0 0 1rem 0.25rem !important;min-width:0 !important}
  body.menu-open #mainNav .nav-dropdown.is-open .dropdown-menu{display:block !important}
  body.menu-open #mainNav .dropdown-menu a{display:block !important;padding:0.5rem 0 !important;font-family:'Outfit',sans-serif !important;font-size:0.85rem !important;color:var(--text-mid,#7a7268) !important;letter-spacing:0.06em !important;text-transform:none !important;white-space:normal !important}
}

/* ----- nav search (desktop chrome; mobile behavior is controlled per-page) ----- */
.nav-search{display:flex;align-items:center;gap:0.5rem;padding:0.42rem 0.95rem;border:1px solid rgba(184,157,94,0.32);border-radius:99px;background:transparent;transition:border-color 0.3s,background 0.3s;margin-left:auto}
.nav-search:focus-within{border-color:var(--gold);background:rgba(184,157,94,0.05)}
.nav-search-icon{display:flex;align-items:center;justify-content:center;color:var(--gold);width:14px;height:14px;flex-shrink:0}
.nav-search-icon svg{width:100%;height:100%}
.nav-search input{border:none;outline:none;background:transparent;font-family:'Outfit',sans-serif;font-size:0.65rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-dark,#2a2724);width:120px;padding:0}
.nav-search input::placeholder{color:var(--text-light,#a39891);letter-spacing:0.18em;text-transform:uppercase;font-size:0.6rem}
.nav-search input:focus::placeholder{opacity:0.5}

/* ----- footer ----- */
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:3rem;max-width:1250px;margin:0 auto}
/* Responsive collapse — defined here (last-loaded sheet) so it wins over the
   base 5-col rule above; per-page inline @media rules load earlier and lose. */
@media(max-width:1100px){.footer-grid{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr;gap:2rem}.footer-bottom{flex-direction:column;gap:0.5rem;text-align:center}}
/* Full-bleed door-collection hero uses negative side margins for desktop bleed;
   on mobile the panel padding is smaller, so the bleed overshoots the viewport
   and adds horizontal overflow. Neutralize the side bleed on small screens. */
@media(max-width:768px){.md-col-hero{margin-left:0 !important;margin-right:0 !important}}
/* Door-model prev/next sibling nav is a single non-wrapping flex row; let it
   wrap on mobile so the links don't overflow the viewport. */
@media(max-width:768px){.sib-nav{flex-wrap:wrap;gap:0.75rem 1rem}}
.footer-brand .nav-logo-text{font-size:1.5rem;margin-bottom:0.8rem;display:block}
.footer-tagline{font-size:0.78rem;color:var(--text-mid);font-weight:300;line-height:1.75;max-width:260px}
.footer-col h5{font-size:0.58rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4rem}
.footer-col a{display:block;color:var(--text-mid);text-decoration:none;font-size:0.78rem;font-weight:300;margin-bottom:0.55rem;transition:color 0.3s}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{max-width:1250px;margin:3.5rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(0,0,0,0.04);
  display:flex;justify-content:space-between;align-items:center}
.footer-bottom p{font-size:0.68rem;color:var(--text-light);font-weight:300}

/* ----- pre-launch: hide DND configurator pricing -----
   Pricing is being withheld until full price sheets are finalized. Sample
   swatches (store grid) are unaffected — their prices come from data attrs,
   not from these elements. Remove this block to bring DND pricing back. */
.dh-price,.dh-price-breakdown{display:none!important}

/* ===== AUTO-EXTRACT (extract_shared_css.py appends below this line) =====

/* door-a mark */
#mainNav .nav-logo-icon{width:auto !important}
.loader-mark{height:110px;width:auto;margin-bottom:1.4rem}