/* =============================================================================
   Jamari Homes design system: typography, components and interface states.

   Loaded after site.css, so a component is defined once, here, and wins. site.css
   keeps page layout. Tokens live in tokens.css; nothing below uses a raw colour
   where a semantic token exists. Introduced in Phase 2 of the premium redesign.
   ========================================================================== */

/* ---------------------------------------------------------------- Typography */
body{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text);background:var(--surface)}
h1,h2,h3,h4{font-family:var(--jh-font-display);font-weight:var(--fw-display);color:var(--text);line-height:var(--lh-heading);letter-spacing:-.005em;text-wrap:balance}
h2{font-size:var(--fs-h2-scale)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}
p{text-wrap:pretty}
.lead{font-size:var(--fs-lead-scale);line-height:1.6;color:var(--text-muted)}
/* The approved homepage hero keeps its tuned composition. */
.hero h1{font-weight:600}
.hero .lead{font-size:var(--jh-fs-lead)}
.eyebrow{font-size:var(--fs-eyebrow);color:var(--text-eyebrow)}
.price,.cat-price,.ap-price{font-variant-numeric:tabular-nums lining-nums}
blockquote,.f-tag{font-style:italic}

/* A 12px floor for everything a visitor has to read (it was 10.5px in fifteen places). */
.mega-h,.mf-eyebrow,.pref-note,.sold-flag,.ap-code,.order-ref-label,.order-meta span,
.acct-orders th,.order-note-back span,.foot-edit .eyebrow,.tb-cta,.meta-list li span:first-child{font-size:.75rem}
.oi-code,.order-track li{font-size:.8125rem}
.card-jh .cap{font-size:var(--fs-small);color:var(--text-muted)}

/* ---------------------------------------------------------------- Layout */
.section{padding-block:var(--section-y)}
.measure{max-width:var(--jh-measure)}

/* ---------------------------------------------------------------- Buttons */
.btn-jh{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 28px;
  font:500 .875rem/1.15 var(--jh-font-body);letter-spacing:.08em;text-transform:uppercase;text-align:center;
  border:1px solid var(--border-control);border-radius:var(--jh-radius);background:transparent;color:var(--text);
  text-decoration:none;cursor:pointer;
  transition:background-color var(--dur-2) var(--jh-ease),color var(--dur-2) var(--jh-ease),border-color var(--dur-2) var(--jh-ease)}
.btn-jh:hover{border-color:var(--text)}
/* Primary: black with ivory text, charcoal with a gold hairline on hover. Ghost: an ink outline on
   the light ground, an ivory outline on dark bands (below). */
.btn-jh.primary{background:var(--jh-black);border-color:var(--jh-black);color:var(--text-inverse)}
.btn-jh.primary:hover{background:var(--jh-charcoal);border-color:var(--jh-gold-500)}
.btn-jh.ghost{border-color:var(--text);color:var(--text)}
.btn-jh.ghost:hover{background:var(--surface-sunken)}
.btn-jh.quiet{border-color:transparent;padding:0 2px;min-height:44px;text-decoration:underline;text-decoration-color:var(--rule-gold);text-underline-offset:6px}
.btn-jh.sm{min-height:40px;padding:0 18px;font-size:.8125rem}
.btn-jh.lg{min-height:56px;padding:0 36px}
.btn-jh:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.btn-jh[disabled],.btn-jh[aria-disabled="true"],.btn-jh.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
/* Loading: the label stays for assistive technology; a small rule-weight spinner replaces it visually. */
.btn-jh.is-loading{position:relative;color:transparent !important;pointer-events:none}
.btn-jh.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--text-muted);border-top-color:transparent;animation:jh-spin .8s linear infinite}
.btn-jh.primary.is-loading::after{border-color:var(--text-inverse);border-top-color:transparent}
@keyframes jh-spin{to{transform:rotate(360deg)}}
/* On dark bands a black button would disappear into the ground: the primary is gold with black text. */
:where(.on-dark,.dark,.page-hero.with-img) .btn-jh.primary{background:var(--jh-gold-500);border-color:var(--jh-gold-500);color:var(--jh-black)}
:where(.on-dark,.dark,.page-hero.with-img) .btn-jh.primary:hover{background:var(--jh-gold-300);border-color:var(--jh-gold-300);color:var(--jh-black)}
:where(.on-dark,.dark,.page-hero.with-img) .btn-jh.ghost{color:var(--text-inverse);border-color:var(--text-inverse)}
:where(.on-dark,.dark,.page-hero.with-img) .btn-jh.ghost:hover{background:rgba(250,247,240,.08);border-color:var(--jh-gold-300)}
:where(.on-dark,.dark,.page-hero.with-img) .btn-jh:not(.primary):not(.ghost){color:var(--text-inverse);border-color:var(--text-inverse-muted)}
:where(.on-dark,.dark,.page-hero.with-img) .btn-jh:focus-visible{outline-color:var(--focus-inverse)}

/* ---------------------------------------------------------------- Fields */
:where(main) :is(input:not([type=checkbox],[type=radio],[type=hidden],[type=submit],[type=button],[type=file],[type=range],[type=color]),select,textarea){
  min-height:48px;padding:0 14px;border:1px solid var(--border-control);border-radius:var(--jh-radius);
  background:var(--surface-raised);color:var(--text);font:400 1rem/1.4 var(--jh-font-body);
  transition:border-color var(--dur-1) var(--jh-ease),box-shadow var(--dur-1) var(--jh-ease)}
:where(main) textarea{padding:12px 14px;line-height:1.55;min-height:132px}
:where(main) :is(input,select,textarea)::placeholder{color:var(--text-muted);opacity:1}
:where(main) :is(input,select,textarea):hover{border-color:var(--text-muted)}
:where(main) :is(input,select,textarea):focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
:where(main) :is(input,select,textarea)[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
:where(main) :is(input[type=checkbox],input[type=radio]){accent-color:var(--jh-black);width:18px;height:18px}
.field-error{display:block;margin-top:6px;color:var(--err);font-size:var(--fs-meta)}
.field-help{display:block;margin-top:6px;color:var(--text-muted);font-size:var(--fs-meta)}

/* ---------------------------------------------------------------- Chips (filters) */
.filter-chips a,.cat-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--border-strong);
  border-radius:var(--jh-radius);background:transparent;color:var(--text);font:500 .8125rem/1.2 var(--jh-font-body);
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  transition:border-color var(--dur-2) var(--jh-ease),background-color var(--dur-2) var(--jh-ease),color var(--dur-2) var(--jh-ease)}
.filter-chips a:hover,.cat-chip:hover{border-color:var(--text)}
.filter-chips a.on,.cat-chip.on,.cat-chip.is-on,.cat-chip[aria-current]{background:var(--jh-black);border-color:var(--jh-black);color:var(--text-inverse)}
.filter-chips a:focus-visible,.cat-chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------------------------------------------------------------- Badges */
.badge-jh,.sold-flag,.order-status{font:600 .75rem/1 var(--jh-font-body);letter-spacing:.08em;text-transform:uppercase;border-radius:var(--jh-radius)}
.badge-jh{padding:6px 10px;background:var(--surface-raised);border:1px solid var(--border-strong);color:var(--text-accent)}
.order-status{padding:7px 12px}
.order-status.s-paid,.order-status.s-delivered{background:var(--ok-bg);color:var(--ok)}
.order-status.s-cancelled,.order-status.s-payment_failed{background:var(--err-bg);color:var(--err)}
.nav-cart-n{min-width:20px;height:20px;border-radius:10px;font-size:.75rem}
/* The count beside a filter label. It was dimmed with opacity to 3.10:1; the muted token keeps
   it quieter than the label and still readable (6.18:1), and it inverts on the active chip. */
.chip-count{color:var(--text-muted);font-variant-numeric:tabular-nums}
.filter-chips a.on .chip-count{color:var(--text-inverse-muted)}

/* ---------------------------------------------------------------- Messages */
.shop-note,.notice,.verify-banner{margin:16px 0;padding:14px 18px;background:var(--surface-sunken);border:0;
  border-left:3px solid var(--rule-gold);border-radius:var(--jh-radius);color:var(--text);font-size:var(--fs-small);line-height:1.55}
.shop-note.is-error,.notice.is-error{background:var(--err-bg);border-left-color:var(--err);color:var(--err)}
.shop-note.is-success,.notice.is-success{background:var(--ok-bg);border-left-color:var(--ok);color:#1F4A2B}
.shop-note.is-warning,.notice.is-warning{background:var(--warn-bg);border-left-color:#B7860B;color:var(--warn)}

/* ---------------------------------------------------------------- Breadcrumb */
.crumbs{font:500 var(--fs-meta)/1.4 var(--jh-font-body);letter-spacing:.03em;text-transform:none;color:var(--text-muted);margin:0 0 18px}
.crumbs a{color:var(--text-accent);text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.page-hero.with-img .crumbs{color:var(--text-inverse-muted)}
.page-hero.with-img .crumbs a{color:var(--text-inverse-accent)}

/* ---------------------------------------------------------------- Surfaces (no pure white on ivory) */
.pd-rail{background:var(--surface-raised);border-color:var(--border)}
.pd-media,.ap-media,.quote-card{background:var(--surface-raised)}
.mega-thumbs a:hover{background:var(--surface-raised)}
.pref-menu a:hover{background:var(--surface-sunken)}

/* ---------------------------------------------------------------- Empty states */
.empty-note{padding-top:8px}
.empty-note .lead{font-family:var(--jh-font-display);font-size:var(--fs-h3);line-height:1.25;color:var(--text);margin-bottom:10px}
.empty-note p{color:var(--text-muted);max-width:60ch}

/* ---------------------------------------------------------------- Inner page heroes
   A warm neutral ground with dark text is the default; black is kept for accent bands and the
   footer. Heroes that carry a photograph show it at full strength under a gradient that keeps
   the text at AA or better. */
.page-hero:not(.with-img){background:var(--surface-sunken);border-bottom:1px solid var(--border);padding:clamp(56px,4vw + 32px,96px) 0 clamp(44px,3vw + 24px,72px)}
.page-hero h1{font-size:var(--fs-display);font-weight:var(--fw-display);line-height:1.08}
.page-hero:not(.with-img) h1{color:var(--text)}
.page-hero:not(.with-img) .eyebrow{color:var(--text-eyebrow)}
.page-hero:not(.with-img) .eyebrow::before{background:var(--rule-gold)}
.page-hero:not(.with-img) p.lead{color:var(--text-muted)}
.page-hero:not(.with-img) .btn-jh.ghost{color:var(--text);border-color:var(--rule-gold)}
.page-hero:not(.with-img) .btn-jh.ghost:hover{background:var(--surface)}
.page-hero.with-img{background:var(--jh-black)}
.page-hero.with-img .bg{opacity:1}
.page-hero.with-img::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(11,11,11,.9) 0%,rgba(11,11,11,.66) 45%,rgba(11,11,11,.22) 100%)}

/* ---------------------------------------------------------------- Hit areas (WCAG 2.2 target size) */
.pref-btn{min-height:32px;padding:0 10px}
/* Sizing only above 900px: below it tokens.css hides these links, and setting display here
   brought them back on phones, where they overflowed the top bar. */
@media (min-width:901px){
  .topbar .util>a{display:inline-flex;align-items:center;min-height:32px}
  .tb-cta{min-height:32px}
}
/* A long eyebrow wraps on narrow screens; pin its gold rule to the first line rather than
   letting it float between the two. */
.eyebrow{align-items:flex-start}
.eyebrow::before{margin-top:.5em}
.nav-account,.nav-cart{min-height:44px;min-width:44px;justify-content:center}
#footer .cols > div > a:not(.brand){display:flex;align-items:center;min-height:32px;margin-bottom:2px}
.foot-legal a{display:inline-flex;align-items:center;min-height:32px}
.acct-tabs a,.acct-signout button{min-height:44px;display:inline-flex;align-items:center}

/* ---------------------------------------------------------------- Motion and reveal
   Nothing a page is about is ever held back for an animation: page heroes and the product's own
   image and details are visible from the first frame. Elements already on screen when a page
   loads are shown at once (app.js marks them is-immediate). */
.js .hero .reveal,.js .page-hero .reveal,.js .pd .reveal,.js .pd-rail.reveal,.js .pd-media.reveal{opacity:1;transform:none;transition:none}
.reveal.is-immediate{transition:none !important}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .world:hover .world-media .ph,.card-jh:hover .media .ph,.art-piece:hover .ap-media img{transform:none !important}
}

/* ---------------------------------------------------------------- Print */
@media print{
  .js .reveal{opacity:1 !important;transform:none !important}
  .site-masthead,.mobile-menu,.ft-cta,.ft-social,.skip-link,.jh-zoom,.ft-form,.nav-toggle{display:none !important}
  body{background:#fff;color:#000}
  .page-hero,.section.dark,.hero,#footer{background:none !important;color:#000 !important;min-height:0 !important}
  .page-hero .bg,.hero-media,.page-hero.with-img::after{display:none !important}
  a{color:#000;text-decoration:underline}
}

/* =============================================================================
   Global shell (Phase 3): top bar, sticky navigation, mega menus, search, Bag,
   mobile menu. The header sticks as a whole, and the top bar is allowed to scroll
   out above the viewport, so only the navigation stays in view.
   ========================================================================== */
:root{--topbar-h:40px}
@media (max-width:900px){:root{--topbar-h:36px}}
.site-masthead{position:sticky;top:calc(-1 * var(--topbar-h));z-index:var(--z-sticky)}
.topbar{height:var(--topbar-h);font-size:.8125rem}
.topbar .container{height:100%;padding-top:0;padding-bottom:0;align-items:center}
.tb-addr{white-space:nowrap}
.topbar .util{gap:20px}
.topbar .tb-link{margin-left:0;color:var(--jh-gold-300);text-decoration:none;white-space:nowrap}
.topbar .tb-link:hover{color:var(--jh-ivory)}
.topbar .tb-link:focus-visible,.pref-btn:focus-visible{outline:2px solid var(--focus-inverse);outline-offset:2px}
@media (max-width:1279px){.topbar .tb-addr{display:none}.topbar .container{justify-content:flex-end}}

.nav-jh{position:relative;background:var(--surface);border-bottom:1px solid var(--border);transition:box-shadow var(--dur-2) var(--jh-ease)}
/* Child combinator: the mega panels contain a .container of their own, which must keep its natural height. */
.nav-jh > .container{height:76px;gap:28px}
.nav-jh.is-scrolled > .container{height:64px}
.nav-jh.is-scrolled{box-shadow:0 12px 30px -26px rgba(31,36,33,.45)}
.nav-links{gap:24px}
.nav-links > li > a,.mega-btn{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0;
  font:500 .875rem/1 var(--jh-font-body);letter-spacing:.03em;text-transform:none;color:var(--text);background-image:none}
.nav-links > li > a::after,.mega-btn::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:var(--rule-gold);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-2) var(--jh-ease)}
.mega-btn .chev{width:10px;height:7px;opacity:.6}
.nav-links > li > a:hover::after,.nav-links > li > a.active::after,.mega-btn:hover::after,.mega-btn.active::after,.mega-btn[aria-expanded="true"]::after{transform:scaleX(1)}
.mega-btn:hover,.mega-btn.active{color:var(--text)}
.nav-links > li > a:focus-visible,.mega-btn:focus-visible,.nav-search:focus-visible,.nav-account:focus-visible,.nav-cart:focus-visible,.brand:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.nav-actions{display:flex;align-items:center;gap:4px;margin-left:auto;padding-left:0;border-left:0}
.nav-search,.nav-account,.nav-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0 8px;
  color:var(--text);text-decoration:none;font:500 .8125rem/1 var(--jh-font-body);letter-spacing:.03em;text-transform:none;background:none;border:0;cursor:pointer}
.nav-search:hover,.nav-account:hover,.nav-cart:hover{color:var(--text-accent)}
.nav-cart .nav-cart-n{position:absolute;top:4px;right:0}
.nav-cta{margin-left:12px;white-space:nowrap}
.brand{margin-right:12px}
.nav-links{margin-right:auto}
/* Measured: brand, six sections, three utilities and the consultation button need 1,174px of the
   1,200px content width. Utility labels would add about 120px, so they stay as accessible names
   (the Bag keeps its count badge), and below 1280px the row gives way to the menu button. */
.nav-actions .nav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav-cta{letter-spacing:.04em;padding:0 16px}
@media (max-width:1279.98px){.nav-links{display:none}.nav-toggle{display:flex}}
@media (max-width:1279.98px){
  .nav-jh > .container{height:64px;gap:12px}
  .nav-jh.is-scrolled > .container{height:58px}
  .brand{margin-right:auto}
}
@media (max-width:700px){.nav-cta{display:none}}
/* Phones: the menu button and utilities keep 44px targets; Account moves into the menu. */
.nav-toggle,.nav-actions > *{flex:none}
@media (max-width:600px){.nav-jh > .container{gap:6px}.nav-actions .nav-account{display:none}}
/* Below 380px the 20px wordmark plus three 44px targets no longer fit inside the gutters, and the
   page scrolled sideways (measured 16px over at 320). The wordmark scales with the viewport. */
@media (max-width:379.98px){
  .nav-jh .brand{font-size:clamp(14px,4.8vw,19px);letter-spacing:.08em}
  .nav-jh > .container{gap:4px}
}
/* The notch on phones held sideways (the viewport is viewport-fit=cover): gutters never fall
   inside the safe area. */
.container{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}

/* Mega menu as a disclosure: it opens on click or hover, never merely because focus passed
   through it, so Tab moves from one section to the next instead of through every panel link. */
.has-mega:focus-within .mega:not(.open){opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px)}
.has-mega:focus-within .mega:not(.open) .m-anim{opacity:0;transform:translateY(13px)}
.mega{border-top:1px solid var(--border);box-shadow:0 36px 64px -34px rgba(31,36,33,.38);
  /* A short desktop window (or a laptop with the window snapped half-height) used to clip the
     bottom of the panel with no way to reach it; the panel now scrolls inside itself. */
  max-height:calc(100vh - 128px);max-height:calc(100dvh - 128px);overflow-y:auto;overscroll-behavior:contain}
@media (max-height:700px){.nav-jh .mega-inner{padding:26px 0 30px}.mega-feature{min-height:220px}}
/* Opening flips visibility at once (closing still fades), so focus can move into a panel the
   moment it opens; a transitioning visibility is still 'hidden' on its first frame. */
.mega.open{transition:opacity .3s var(--jh-ease),transform .3s var(--jh-ease),visibility 0s}
.mega::before{background:var(--rule-gold)}
.mega-spine{border-right-color:var(--border)}
.mega-line{color:var(--text)}
.mega-h{color:var(--text-muted)}
.mega-viewall{color:var(--text-accent);font-size:.75rem}
.mega-links a{min-height:40px;display:flex;align-items:center;padding:0}
/* site.css keeps top-row labels on one line with .nav-links a{white-space:nowrap}; the panels sit
   inside .nav-links, so their links must wrap again or the feature card title is clipped. */
.mega a{white-space:normal;background-image:none}
/* tokens.css styles every .nav-links a as a 13px uppercase label with line-height 1 and a gold underline;
   the panel links and feature card set their own type, so those inherited label traits are undone here. */
.mega-links a,.mega-thumbs a,.mega .mega-feature{text-transform:none;letter-spacing:normal}
.mega-links a{line-height:1.35}
.mega .mega-feature{padding-bottom:0}
.mega a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mega-feature:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* Search */
.search-panel{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--border);
  box-shadow:0 36px 64px -34px rgba(31,36,33,.38);padding:18px 0;z-index:var(--z-mega)}
/* A quiet 48px bar on warm ivory: ink text, a charcoal button with ivory text, gold on focus. */
.search-form{display:flex;gap:10px;align-items:center;max-width:var(--container-narrow);margin:0 auto}
.search-form input[type=search]{flex:1;min-width:0;min-height:48px;padding:0 16px;border:1px solid var(--border-control);border-radius:var(--jh-radius);
  background:var(--surface-raised);font:400 1rem/1.4 var(--jh-font-body);color:var(--text)}
.search-form .btn-jh.primary{min-height:48px;padding:0 22px;background:var(--jh-charcoal);border-color:var(--jh-charcoal);color:var(--text-inverse)}
.search-form .btn-jh.primary:hover{background:var(--jh-black);border-color:var(--jh-gold-500)}
.search-form input[type=search]::placeholder{color:var(--text-muted);opacity:1}
.search-form input[type=search]:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.search-close{flex:none;width:44px;height:44px;border:0;background:none;font-size:30px;line-height:1;color:var(--text-muted);cursor:pointer}
.search-close:hover{color:var(--text)}
.search-close:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Phones: the panel runs edge to edge as its own full-width bar rather than squeezing into the navigation. */
@media (max-width:600px){
  .search-panel{padding:12px 0}
  .search-panel > .container{padding-left:12px;padding-right:12px}
  .search-form{gap:8px;max-width:none}
  .search-form .btn-jh{padding:0 14px}
  .search-close{width:40px}
}

/* Mobile menu: a modal dialog with its own search. site.css gives the panels display:flex,
   which would otherwise override the hidden attribute and show every section expanded. */
.mm-panel[hidden]{display:none}
.mm-search{display:flex;gap:10px;margin:4px 0 20px}
.mm-search input[type=search]{flex:1;min-width:0;min-height:48px;padding:0 14px;border:1px solid rgba(250,247,240,.5);border-radius:var(--jh-radius);
  background:rgba(255,255,255,.06);color:var(--text-inverse);font:400 1rem/1.4 var(--jh-font-body)}
.mm-search input[type=search]::placeholder{color:rgba(250,247,240,.74);opacity:1}
.mobile-menu .mm-search .btn-jh{font-family:var(--jh-font-body);font-size:.8125rem;min-height:48px;padding:0 16px;display:inline-flex;color:var(--text-inverse);border-color:var(--jh-gold-300)}
.mobile-menu :is(a,button,input):focus-visible{outline:2px solid var(--focus-inverse);outline-offset:2px}

/* Anchored sections clear the sticky navigation. */
[id]{scroll-margin-top:96px}

/* ---------------------------------------------------------------- Search results page */
.search-page .search-form{margin:0 0 36px;max-width:none}
.sr-summary{color:var(--text-muted);margin:0 0 30px}
.sr-group{margin:44px 0 18px;font-size:var(--fs-h3)}
.sr-group:first-of-type{margin-top:0}
.sr-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px 28px}
.sr-item{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border);text-decoration:none;color:inherit}
.sr-item:hover .sr-title{text-decoration:underline;text-decoration-color:var(--rule-gold);text-underline-offset:4px}
.sr-item:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr-thumb{width:96px;aspect-ratio:4/3;background:var(--surface-sunken);overflow:hidden}
.sr-thumb img{width:100%;height:100%;object-fit:cover}
.sr-meta{display:block;font-size:var(--fs-meta);color:var(--text-muted);letter-spacing:.02em}
.sr-title{display:block;font-family:var(--jh-font-display);font-size:1.25rem;line-height:1.25;color:var(--text);margin-top:2px}
.sr-sub{display:block;font-size:var(--fs-small);color:var(--text-muted);margin-top:4px}
.sr-suggest{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}

/* =============================================================================
   Homepage (Phase 4). The approved hero keeps its composition; its former inline
   styles live here unchanged. Editorial rows reuse .world from tokens.css.
   ========================================================================== */
.hero-title{color:var(--jh-ivory);margin:18px 0 22px}
.hero-lead{max-width:44ch}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}

/* Brand introduction, then the three worlds under one quiet ruled label. */
.home-intro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(32px,6vw,96px);align-items:end}
.home-intro h2{margin:14px 0 0;max-width:15ch}
.home-intro .lead{margin:0;color:var(--text);max-width:58ch}
.home-intro .link-jh{display:inline-block;margin-top:18px}
@media (max-width:900px){.home-intro{grid-template-columns:1fr;align-items:start}}
.home-worlds-title{display:flex;align-items:center;gap:18px;margin:clamp(48px,6vw,72px) 0 28px;
  font:500 .8125rem/1.3 var(--jh-font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.home-worlds-title::after{content:"";flex:1;height:1px;background:var(--border)}
.home-worlds .card-jh .link-jh{display:inline-block;margin-top:14px}

/* Editorial rows: featured collection, heritage feature, featured project. */
.world-copy .eyebrow + h2{margin-top:14px}
.world-copy .measure{margin-top:18px}
.world-copy h2 + .hp-meta{margin-top:10px}
.home-links{display:flex;gap:14px 26px;flex-wrap:wrap;align-items:center;margin-top:28px}
.home-piece{margin-top:26px;padding-top:18px;border-top:1px solid var(--border)}
.hp-name{display:block;margin:0;font-family:var(--jh-font-display);font-size:1.3rem;line-height:1.25;color:var(--text)}
.hp-meta{display:block;margin:6px 0 0;font-size:var(--fs-meta);color:var(--text-muted);letter-spacing:.02em}
.home-piece .price{margin:10px 0 0;color:var(--text)}
/* An artwork is shown whole on a quiet ground, never cropped to fill the frame. */
.home-art .world-media{background:var(--surface-sunken)}
.home-art .world-media img.ph{object-fit:contain;padding:clamp(18px,3vw,36px)}
.home-pieces{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--border)}
.home-pieces a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--border);text-decoration:none;color:var(--text)}
.home-pieces a:hover .hp-name{text-decoration:underline;text-decoration-color:var(--rule-gold);text-underline-offset:4px}
.home-pieces a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.home-pieces .hp-name{font-size:1.15rem}
.home-pieces .price{white-space:nowrap}

/* Section heads with an optional link at the right. */
.home-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,44px)}
.home-head h2{margin:14px 0 0}

/* Private client services: four ruled columns, each one link. */
.home-services-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 32px}   /* six pathways, two full rows (Phase 8e) */
.home-services-list li{border-top:1px solid var(--rule-gold)}
.home-services-list a{display:flex;flex-direction:column;height:100%;padding:24px 0 6px;text-decoration:none;color:var(--text)}
.hs-title{font-family:var(--jh-font-display);font-size:var(--fs-h3);line-height:1.2}
.hs-line{flex:1;margin-top:10px;color:var(--text-muted);font-size:var(--fs-small);line-height:1.6}
.hs-go{margin-top:18px;font:500 .8125rem/1.3 var(--jh-font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--text-accent)}
.home-services-list a:hover .hs-title{text-decoration:underline;text-decoration-color:var(--rule-gold);text-decoration-thickness:1px;text-underline-offset:5px}
.home-services-list a:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
@media (max-width:1100px){.home-services-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px}}
@media (max-width:600px){.home-services-list{grid-template-columns:1fr}}

/* =============================================================================
   Commerce (Phase 5): acquisition calls to action and artwork pages
   ========================================================================== */
.pd-actions{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.pd-actions > .btn-jh{width:100%}
.add-cart-row .btn-jh{flex:1}
.pd-actions .add-cart > .btn-jh{width:100%}
.art-title{font-size:clamp(1.7rem,2.6vw,2.2rem);margin:10px 0 8px}
.art-price{font-size:1.6rem;margin:16px 0 0}
.art-note{margin:16px 0 0;color:var(--text-muted);font-size:var(--fs-small)}
.art-media img{width:100%;height:auto}
.art-story,.art-about{margin-top:44px}
.art-story h2,.art-about h2{font-size:var(--fs-h3);margin:0 0 12px}
.art-more{margin-top:clamp(64px,8vw,96px)}
.art-card{display:block;text-decoration:none;color:inherit}
.art-card .ap-media{display:block}
.art-card .ap-code{display:block;margin-top:15px}
.art-card .ap-title{display:block;font-family:var(--jh-font-display);font-size:1.3rem;line-height:1.25;color:var(--text)}
.art-card .ap-meta{display:block;margin-top:4px}
.art-card .ap-price{display:block;margin-top:8px}
.art-card:hover .ap-title,.ap-link:hover,.hp-name a:hover{text-decoration:underline;text-decoration-color:var(--rule-gold);text-underline-offset:4px}
.art-card:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.ap-link,.hp-name a{color:inherit;text-decoration:none}
/* Detail pages with grid areas: image and text on the left, the rail on the right spanning both;
   on phones image, rail, then text, so a visitor sees the piece before its price and actions. */
.pd.pd-areas{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"media rail" "body rail";column-gap:56px;row-gap:0}
.pd.pd-areas > .pd-media{grid-area:media}
.pd.pd-areas > .pd-rail{grid-area:rail;align-self:start}
.pd.pd-areas > .pd-body{grid-area:body;min-width:0}
@media (max-width:900px){.pd.pd-areas{grid-template-columns:minmax(0,1fr);grid-template-areas:"media" "rail" "body";row-gap:28px}}
/* site.css pins the rail's last block to the bottom of a phone screen. With the image first and
   the rail straight after it, that stack only covered the title and price, so grid-area pages keep
   their actions in place. (The product page gets a compact buy bar in the next commerce slice.) */
@media (max-width:768px){
  .pd.pd-areas .pd-rail > div:last-of-type{position:static;padding:0;background:none;box-shadow:none;z-index:auto}
}

/* =============================================================================
   Commerce (Phase 5b): product page anatomy, gallery, phone buy bar, VAT lines
   ========================================================================== */
.section.pd-page{padding-top:clamp(32px,5vw,56px)}
.pd-page .crumbs{margin:0 0 26px}
.pd.pd-areas > .pd-visual{grid-area:media;min-width:0}
.pd-title{font-size:clamp(1.7rem,2.6vw,2.1rem);margin:10px 0 6px}
.pd-descriptor{margin:0 0 12px;color:var(--text-muted);font-size:1.02rem;line-height:1.5}
.pd-price{font-size:1.6rem;margin:16px 0 4px}
.pd-price s{margin-left:8px;color:var(--text-muted);font-size:.62em;font-weight:400}
.pd-vat{margin:0;color:var(--text-muted);font-size:var(--fs-meta)}
.pd-body .pd-specs{margin-top:40px}
.pd-craft{margin-top:40px}
.pd-craft h2{margin:12px 0 0;font-size:1.5rem}
.pd-related{margin-top:clamp(64px,8vw,96px)}
.pd-related .card-jh h3{font-size:1.1rem}
/* Gallery: thumbnails are buttons that switch the main image. */
.pd-gallery{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.pd-thumb{padding:0;border:1px solid var(--border);background:var(--surface-raised);line-height:0;cursor:pointer;border-radius:var(--jh-radius)}
.pd-gallery .pd-thumb img{width:98px;height:74px;object-fit:cover;display:block;border:0;cursor:pointer}
.pd-thumb[aria-pressed="true"]{border-color:var(--rule-gold);box-shadow:0 0 0 1px var(--rule-gold)}
.pd-thumb:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Phone buy bar: appears only once the page's own actions have scrolled out of view above. */
.pd-buybar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sticky);display:flex;align-items:center;gap:12px;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);
  border-top:1px solid var(--border);box-shadow:0 -12px 28px -22px rgba(31,36,33,.5)}
.pd-buybar .pb-text{flex:1;min-width:0}
.pb-name{display:block;font-family:var(--jh-font-display);font-size:1.05rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-price{display:block;margin-top:2px;font-size:var(--fs-small);color:var(--text-muted);font-variant-numeric:tabular-nums}
.pd-buybar .btn-jh{flex:none;min-height:44px;padding:0 16px}
@media (min-width:769px){.pd-buybar{display:none !important}}
body.has-buybar #footer{padding-bottom:calc(40px + 76px)}
/* VAT is information inside the subtotal, not a charge on top. */
.co-totals .co-vat dt,.co-totals .co-vat dd,.order-totals .muted dt,.order-totals .muted dd{color:var(--text-muted);font-size:var(--fs-small)}
/* The bar's display:flex would otherwise override the hidden attribute and show it on load. */
.pd-buybar[hidden]{display:none}
.pd-buybar .btn-jh{max-width:58%;white-space:normal;line-height:1.2;text-align:center}
/* site.css keeps .pd-rail sticky at every width, and a sticky item is bounded by its grid, not its
   row: on phones the rail rode down over the story and specifications. It sticks on desktop only. */
@media (max-width:900px){.pd.pd-areas > .pd-rail{position:static}}

/* =============================================================================
   Catalogue (Phase 5c): the one product card
   ========================================================================== */
.pcard .eyebrow{margin:0 0 6px}
.pcard .pcard-name{font-size:1.15rem;margin:0}
.pcard-meta{margin:6px 0 0;color:var(--text-muted);font-size:var(--fs-small)}
.pcard-price{margin:8px 0 12px}
.pcard-price .price{font-size:1.02rem;color:var(--text)}
.pcard-price s{margin-left:6px;color:var(--text-muted);font-size:.85em}
.cat-empty-links{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* =============================================================================
   The Bag (Phase 5d): page states and the drawer
   ========================================================================== */
.section.cart-page{padding-top:clamp(32px,5vw,52px)}
.cart-page h1{margin:8px 0 6px}
.cart-page .cart-empty-cta{margin-top:18px}
.cart-checkout.is-disabled{display:flex;cursor:not-allowed}
.cart-confirm{margin:16px 0;padding:18px 20px;border:1px solid var(--err);border-radius:var(--jh-radius);background:var(--err-bg)}
.cart-confirm p{margin:0 0 12px;color:var(--text)}
.cart-confirm .cc-actions{display:flex;gap:12px 20px;flex-wrap:wrap;align-items:center}
.cart-clear-link{display:inline-block;margin-top:10px}

/* Drawer: a panel from the right on wider screens, a sheet from the bottom on phones. */
.bag-backdrop{position:fixed;inset:0;z-index:var(--z-drawer);background:rgba(20,26,24,.42)}
.bag-drawer{position:fixed;top:0;right:0;bottom:0;z-index:calc(var(--z-drawer) + 1);width:min(420px,100%);display:flex;flex-direction:column;
  background:var(--surface);box-shadow:-24px 0 60px -30px rgba(20,26,24,.55);padding:calc(22px + env(safe-area-inset-top,0px)) 24px calc(22px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain}
.bag-backdrop[hidden],.bag-drawer[hidden]{display:none}
.bag-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.bag-head h2{margin:0;font-size:var(--fs-h3)}
.bag-close{width:44px;height:44px;border:0;background:none;font-size:28px;line-height:1;color:var(--text-muted);cursor:pointer}
.bag-close:hover{color:var(--text)}
.bag-close:focus-visible,.bag-drawer .btn-jh:focus-visible,.bag-drawer a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.bag-item{display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:center;padding:18px 0;border-bottom:1px solid var(--border)}
.bag-item img{width:88px;height:70px;object-fit:cover;background:var(--surface-sunken)}
.bag-name{display:block;font-family:var(--jh-font-display);font-size:1.15rem;line-height:1.25;color:var(--text)}
.bag-meta{display:block;margin-top:4px;color:var(--text-muted);font-size:var(--fs-small);font-variant-numeric:tabular-nums}
.bag-msg{margin:18px 0 0}
.bag-total{display:flex;justify-content:space-between;gap:12px;padding:16px 0;font-variant-numeric:tabular-nums}
.bag-total dt{color:var(--text-muted)}
.bag-total dd{margin:0;font-weight:600}
.bag-actions{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.bag-actions .btn-jh{width:100%}
.bag-actions .link-jh{align-self:center;margin-top:4px}
@media (max-width:600px){
  .bag-drawer{top:auto;left:0;width:100%;max-height:88vh;border-radius:var(--jh-radius) var(--jh-radius) 0 0;box-shadow:0 -24px 60px -30px rgba(20,26,24,.55)}
}
body.bag-open{overflow:hidden}
/* A button styled as a link (Continue browsing, Update, Save) keeps no browser button chrome. */
button.link-jh{background:none;border:0;padding:6px 0;font:inherit;color:var(--text);cursor:pointer}
button.link-jh:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* =============================================================================
   Checkout (Phase 5d-2): field errors, terms, the place button
   ========================================================================== */
.section.checkout-page{padding-top:clamp(32px,5vw,52px)}
.checkout-page h1{margin:8px 0 18px}
.co-field .field-error{margin-top:6px;letter-spacing:0}
.co-field input[aria-invalid="true"],.co-field select[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
.co-accept{display:flex;gap:10px;align-items:flex-start;margin:18px 0 6px;font-size:var(--fs-small);color:var(--text);line-height:1.5}
.checkout-summary .co-accept input[type=checkbox]{width:18px;height:18px;min-height:0;margin:2px 0 0;padding:0;flex:none;accent-color:var(--jh-black)}
.co-accept input[aria-invalid="true"]{outline:2px solid var(--err);outline-offset:2px}
.co-accept a{color:inherit;text-decoration:underline;text-decoration-color:var(--rule-gold);text-underline-offset:3px}
.checkout-summary > .field-error{margin:0 0 10px}
.co-place{width:100%;margin-top:12px}
/* Link-styled buttons keep the gold underline that .link-jh draws with a background gradient. */
button.link-jh{background-image:linear-gradient(var(--jh-gold-500),var(--jh-gold-500));background-repeat:no-repeat;background-position:0 100%;background-size:0 1px}

/* =============================================================================
   Enquiry forms and the account (Phase 5e)
   ========================================================================== */
.visit-fields{margin:0;padding:0;border:0;min-width:0}
.visit-fields[hidden]{display:none}
.visit-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}
@media (max-width:600px){.visit-row{grid-template-columns:1fr}}
.visit-fields .field-help{margin-top:10px}
.form-jh .field-error{margin-top:6px}
.section.acct-page{padding-top:clamp(32px,5vw,52px)}
.acct-narrow{max-width:820px}
.acct-page h1{margin:8px 0 14px}
.acct-page h2{font-family:var(--jh-font-display);margin:26px 0 12px}
.addr-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.addr-card.is-default{border-color:var(--rule-gold)}
.addr-actions{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin-top:10px}
.addr-inline{display:inline}
.addr-form-actions{display:flex;gap:12px 20px;align-items:center;flex-wrap:wrap;margin-top:6px}

/* =============================================================================
   Interiors studio and About (Phase 6a)
   ========================================================================== */
.stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 24px}
.stage{border-top:1px solid var(--rule-gold);padding-top:18px}
.stage-n{display:block;margin-bottom:12px;font:500 .8125rem/1 var(--jh-font-body);letter-spacing:.08em;color:var(--text-accent);font-variant-numeric:tabular-nums}
.stage h3{font-size:1.25rem;margin:0 0 8px}
.stage p{margin:0;color:var(--text-muted);font-size:var(--fs-small);line-height:1.6}
@media (max-width:1000px){.stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}}
@media (max-width:600px){.stages{grid-template-columns:1fr}}
.studio-services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.studio-service{padding:28px;background:var(--surface-raised);border:1px solid var(--border)}
.studio-service h3{font-size:1.4rem;margin:0 0 10px}
.studio-service p{margin:0 0 18px;color:var(--text-muted)}
@media (max-width:760px){.studio-services{grid-template-columns:1fr}}
.room-card .cap{margin-top:6px}
.studio-cta .container{text-align:center}
.studio-cta h2{margin:14px 0 0}
.studio-cta .hero-actions{justify-content:center}
.about-next{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin:40px 0 0}

/* =============================================================================
   Case studies, provenance and artisans (Phase 6b)
   ========================================================================== */
.section.case-page{padding-top:clamp(32px,5vw,52px)}
.case-narrow{max-width:880px}
.case-page .crumbs{margin:0 0 26px}
.case-meta{max-width:420px;margin-bottom:34px}
.case-block{margin-bottom:34px}
.case-palette{margin:14px 0 0;color:var(--text-muted);font-size:var(--fs-small)}
.case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:10px 0 44px}
.case-gallery figure{margin:0}
.case-gallery .media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--surface-sunken)}
.case-gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-gallery figcaption{margin-top:8px;font-size:var(--fs-meta);color:var(--text-muted)}
@media (max-width:640px){.case-gallery{grid-template-columns:1fr}}
.case-pieces{margin-top:clamp(40px,6vw,64px);margin-bottom:clamp(40px,6vw,64px)}
.case-art{margin-top:32px}
.case-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:44px}
.case-related{margin-top:80px}
.case-related .grid-3{margin-top:26px}
.case-related .card-jh h3{font-size:1.05rem}
.art-provenance,.art-artisan{margin-top:44px}
.art-provenance h2,.art-artisan h2{font-size:var(--fs-h3);margin:0 0 12px}
.art-artisan-card{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;align-items:start;padding:22px;border:1px solid var(--border);background:var(--surface-raised)}
.art-artisan-card.no-portrait{grid-template-columns:minmax(0,1fr)}
.art-artisan-card img{width:120px;height:150px;object-fit:cover}
@media (max-width:500px){.art-artisan-card{grid-template-columns:minmax(0,1fr)}}
.section.artisan-page{padding-top:clamp(32px,5vw,52px)}
.artisan-page .crumbs{margin:0 0 26px}
.artisan-head{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:start;margin-bottom:clamp(48px,6vw,72px)}
.artisan-head.no-portrait{grid-template-columns:minmax(0,1fr)}
.artisan-portrait{aspect-ratio:4/5;overflow:hidden;background:var(--surface-sunken)}
.artisan-portrait img{width:100%;height:100%;object-fit:cover}
.artisan-head h1{margin:10px 0 6px}
.artisan-bio{margin-top:18px}
@media (max-width:760px){.artisan-head{grid-template-columns:minmax(0,1fr)}}

/* ---- Journal article (Phase 7b) ---------------------------------------------------------------------------
   Byline, dates and reading time sit above the text as one quiet line; the pieces, next step and related
   articles reuse the case-study blocks. */
.post-page .post-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 26px;color:var(--text-muted);font-size:var(--fs-small);letter-spacing:.02em}
.post-page .post-body .lead{max-width:60ch}
.post-page .case-actions{margin-top:36px}

/* ---- Concierge enquiries (Phase 8a; brief item 48) -------------------------------------------------------------
   One question, eight quiet cards, then only the questions the chosen pathway needs. */
.concierge{margin-bottom:44px}
.concierge-ask{margin:0 0 8px}
.concierge .lead{margin:0 0 26px;max-width:60ch}
.concierge-paths{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.concierge-path{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px 18px 20px;border:1px solid var(--border);background:var(--surface-raised);text-decoration:none;color:var(--text);transition:border-color .2s var(--jh-ease)}
.concierge-path:hover{border-color:var(--text)}
.concierge-path:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.concierge-path.on{border-color:var(--jh-black);box-shadow:inset 0 0 0 1px var(--jh-black)}
.concierge-path .cp-title{font-family:var(--jh-font-display);font-size:1.2rem;line-height:1.2}
.concierge-path .cp-line{font-size:var(--fs-small);line-height:1.5;color:var(--text-muted)}
.concierge-path .cp-go{margin-top:auto;padding-top:8px;font-size:var(--fs-small);color:var(--text-muted);text-decoration:underline;text-underline-offset:4px}
@media (max-width:1100px){.concierge-paths{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.concierge-paths{grid-template-columns:minmax(0,1fr)}}
.concierge-prompt{color:var(--text-muted);max-width:52ch;margin:0}
.path-fields{margin:0;padding:0;border:0;min-width:0}
.path-fields legend{font-family:var(--jh-font-display);font-size:1.15rem;margin:30px 0 0;padding:0}
.path-fields[hidden],.form-jh[hidden],.concierge-prompt[hidden]{display:none}
.form-jh .check-row{display:flex;gap:10px;align-items:center;margin-top:22px}
.form-jh .check-row input{width:20px;height:20px}
.form-jh .check-row label{margin:0;text-transform:none;letter-spacing:0;font:400 15px/1.4 var(--jh-font-body);color:var(--text)}

/* ---- The Showroom page (Phase 8b; brief item 51) ----------------------------------------------------------------
   Typographic rather than photographic until the showroom itself is photographed. */
.visit-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.visit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
.visit-grid h2{margin:0 0 16px}
.visit-grid h3{font-size:1.2rem;margin:26px 0 8px}
.visit-links{margin:18px 0 0}
.visit-options{list-style:none;margin:18px 0 0;padding:0}
.visit-options li{border-top:1px solid var(--border);padding:14px 0}
.visit-options a{font-family:var(--jh-font-display);font-size:1.15rem;color:var(--text);text-decoration:none}
.visit-options a:hover{text-decoration:underline;text-decoration-color:var(--rule-gold);text-underline-offset:5px}
.visit-options a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.visit-options span{display:block;margin-top:4px;font-size:var(--fs-small);color:var(--text-muted)}
.visit-virtual{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;border-top:1px solid var(--rule-gold);padding-top:36px}
.visit-virtual h2{margin:8px 0 12px}
@media (max-width:860px){.visit-grid,.visit-virtual{grid-template-columns:minmax(0,1fr)}}

/* ---- The Gifting Atelier (Phase 8c; brief item 41) ---------------------------------------------------------------- */
.gift-lead{max-width:60ch;margin:8px 0 26px}
.gift-occasions{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gift-occasion{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:0 20px;border:1px solid var(--border);background:var(--surface-raised);font-family:var(--jh-font-display);font-size:1.2rem;color:var(--text);text-decoration:none;transition:border-color .2s var(--jh-ease)}
.gift-occasion::after{content:"\2192";font-family:var(--jh-font-body);font-size:1rem;color:var(--text-muted)}
.gift-occasion:hover{border-color:var(--text)}
.gift-occasion:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:560px){.gift-occasions{grid-template-columns:minmax(0,1fr)}}

/* ---- Target sizes (Phase 9; WCAG 2.2 2.5.8) ------------------------------------------------------------------------
   Breadcrumb links measured 19px tall and form checkboxes kept the browser's 13px box. */
.crumbs a{display:inline-block;padding-block:4px}
main input[type=checkbox]{width:20px;height:20px;accent-color:var(--jh-black);flex:none}
/* In the Bag, a piece's name measured 22px tall and its remove button 12 by 20px (Phase 9b desktop audit). The button
   fills the 30px column the line already reserves for it. */
.cart-name{display:inline-block;padding-block:2px}
.cart-remove button{width:30px;height:30px;padding:0;display:inline-grid;place-items:center}
/* With width and height attributes in place, the image reserves its space before it loads; height:auto keeps the
   declared height from stretching it once it has (E-17). */
.pd-media img,.masonry img{height:auto}

/* --- Continue with Google (customer sign-in and registration) ---------------------------
   A white button carrying the official mark, which is what Google's brand terms ask for and
   which also reads correctly as the secondary route beside the gold primary action. The mark
   is inline SVG: the Content-Security-Policy admits no third-party images, and pulling a logo
   from Google on every sign-in page would announce our visitors to them before anyone has
   chosen to use it. */
.google-form{margin:0 0 4px}
.btn-google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:48px;
  padding:13px 18px;background:#fff;color:#1f1f1f;border:1px solid var(--border);border-radius:2px;
  font:500 14px/1 var(--jh-font-body);letter-spacing:.02em;cursor:pointer;
  transition:background-color var(--dur-2) var(--jh-ease),box-shadow var(--dur-2) var(--jh-ease)}
.btn-google:hover{background:#f6f6f6;box-shadow:0 8px 20px -14px rgba(31,36,33,.5)}
.btn-google:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.btn-google .g-mark{width:18px;height:18px;flex:none}
/* The "or" divider: one rule with the word sitting inside it. */
.auth-or{display:flex;align-items:center;gap:14px;margin:18px 0;color:var(--text-muted);
  font:500 11px/1 var(--jh-font-body);letter-spacing:.14em;text-transform:uppercase}
.auth-or::before,.auth-or::after{content:"";flex:1 1 auto;height:1px;background:var(--border)}

/* --- Cookie choice banner -----------------------------------------------------------------
   Accept and Decline are the same size, weight and place, side by side, and become equal-width
   on a phone. A prominent Accept beside a quiet Decline is read by regulators as consent that
   was not freely given, and it is not how we want to ask. Server rendered, so it works with
   scripts blocked and needs no CSP exception. */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-toast,80);
  background:var(--jh-black);color:var(--jh-ivory);border-top:1px solid rgba(230,200,105,.35);
  padding:16px max(20px,env(safe-area-inset-left)) calc(16px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -18px 40px -28px rgba(0,0,0,.6)}
.consent-inner{max-width:var(--container,1280px);margin:0 auto;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:14px 28px}
.consent-copy{flex:1 1 380px;min-width:0}
.consent h2{font:600 12px/1 var(--jh-font-body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--jh-gold-300);margin:0 0 7px}
.consent p{margin:0;font-size:13.5px;line-height:1.55;max-width:76ch}
.consent a{color:var(--jh-gold-300)}
.consent-actions{display:flex;gap:10px;flex:0 0 auto}
.consent-actions form{margin:0}
.consent-actions .btn-jh{white-space:nowrap}
.consent .btn-jh.ghost{color:var(--jh-ivory);border-color:rgba(230,200,105,.6)}
@media (max-width:560px){
  .consent-actions{width:100%}
  .consent-actions form{flex:1 1 0;min-width:0}
  .consent-actions .btn-jh{width:100%}
}

/* --- Share row (analytics Phase 5) -----------------------------------------------------------
   Quiet by design: text buttons, no network logos. A logo from each network would either be
   fetched from that network, telling it about every reader, or copied into the site against most
   networks' brand terms. The words are enough, and they keep the page's own voice. */
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:22px 0 0;padding-top:16px;
  border-top:1px solid var(--border)}
.share-label{font:600 11px/1 var(--jh-font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);
  margin-right:6px}
.share-btn{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--border);
  border-radius:2px;background:transparent;color:var(--text);font:500 13px/1 var(--jh-font-body);text-decoration:none;
  cursor:pointer;transition:border-color var(--dur-2) var(--jh-ease),color var(--dur-2) var(--jh-ease)}
.share-btn:hover{border-color:var(--rule-gold);color:var(--text-accent)}
.share-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.share-status{flex-basis:100%;font-size:13px;color:var(--text-muted);min-height:1em;word-break:break-all}
@media (max-width:480px){ .share-btn{min-height:44px} }

/* --- Signed-in browsers (account) ------------------------------------------------------------- */
.br-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.br-item{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--border)}
.br-name{font-weight:500;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.br-meta{color:var(--text-muted);font-size:14px}

/* --- Card labels (review 2026-09-23) --------------------------------------------------------
   Card titles are inline so their gold underline can follow a wrapped line; the label above
   them was inline-flex, so the two ran together ("INTERIORS Spaces curated…"). The label is
   its own line now, and in the narrow product columns it is set tighter so a range name such
   as "Executive Collection" stays on one line instead of breaking around the rule. */
.card-jh > .eyebrow{display:flex;margin:0 0 8px}
.pcard > .eyebrow{flex-wrap:wrap;row-gap:4px;font-size:11px;letter-spacing:.14em;gap:.5rem}
.pcard > .eyebrow::before{width:16px}

/* --- Forms inside the auth card (hospitality quotation, account) ---------------------------- */
.auth-card textarea{display:block;width:100%;min-height:120px;margin-top:5px;border:1px solid var(--border-control);border-radius:2px;padding:11px 13px;font:inherit;color:var(--jh-ink);background:#fff;resize:vertical}
.auth-card textarea:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.auth-card .check-row{display:flex;align-items:center;gap:10px;flex-direction:row}
.auth-card .check-row input{width:auto;margin:0}
.auth-links a{color:var(--text-accent);text-decoration:underline;text-underline-offset:3px}
.auth-links a:hover{color:var(--jh-ink)}

/* Showroom map, loaded on request (includes/map_slot.php). The panel holds the frame's height so
   nothing below it moves when the map arrives. The faint street grid is decoration only. */
.map-slot{display:grid;place-items:center;min-height:440px;padding:56px var(--gutter);text-align:center;
  background-color:var(--jh-black);
  background-image:radial-gradient(ellipse at 50% 50%,rgba(11,11,11,0) 0,rgba(11,11,11,.9) 72%),
    repeating-linear-gradient(28deg,rgba(230,200,105,.08) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(-62deg,rgba(230,200,105,.06) 0 1px,transparent 1px 92px),
    repeating-linear-gradient(90deg,rgba(250,247,240,.035) 0 2px,transparent 2px 150px)}
.map-slot-inner{max-width:580px;display:grid;justify-items:center;gap:14px}
.map-slot .map-slot-addr{margin:0;font-family:var(--jh-font-display);font-weight:500;font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem);line-height:1.15;text-wrap:balance}
.map-slot .map-slot-note{margin:0;max-width:48ch;font-size:var(--fs-small);color:var(--text-inverse-muted)}
.map-slot-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:10px}
.map-slot .btn-jh.primary{background:var(--jh-gold-500);color:var(--jh-black);border-color:var(--jh-gold-500)}
.map-slot .btn-jh.primary:hover{background:var(--jh-gold-300);border-color:var(--jh-gold-300)}
.map-slot .btn-jh:focus-visible{outline:2px solid var(--focus-inverse);outline-offset:3px}
.map-slot [data-map-load][hidden]{display:none}
.map-slot.is-loaded{display:block;min-height:0;padding:0;background:none}
.map-slot iframe{display:block;width:100%;height:440px;border:0}
@media (max-width:640px){.map-slot{min-height:380px;padding-block:44px}.map-slot iframe{height:380px}}