.elementor-kit-6{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#332F20;--e-global-color-text:#454545;--e-global-color-accent:#E0021D;--e-global-color-2998da7:#EFEFEF;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-size:35px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.25em;--e-global-typography-secondary-font-family:"Roboto";--e-global-typography-secondary-font-size:40px;--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-size:20px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-accent-line-height:1.4em;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:var( --e-global-color-accent );font-family:"Roboto", Sans-serif;font-size:20px;font-weight:700;color:var( --e-global-color-primary );border-radius:38px 38px 38px 38px;padding:13px 27px 13px 27px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* === Section heading parity: shortcode-rendered related products ==========
   "You May Also Like..." is built two different ways on this site. Dorm and
   SOHO use an Elementor heading widget (35px / 500 / #332F20). Business and
   Education render it from the hw-related-products shortcode as an <h3> at
   40px / 700 / #1A1A1A, which is why the two looked like different fonts.
   The plugin markup is left untouched; this normalises it to the same
   section-heading treatment wherever the component appears.
   Added 2026-08-14. */
.hw-related-products__title{
  font-family: "Roboto", sans-serif !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: #332F20 !important;
  letter-spacing: normal !important;
  margin: 12px 0 10px 26px !important;
}
/* === One font family ======================================================
   Audit 2026-08-14 found three families live: Roboto (247 instances), Poppins
   (6) and -apple-system (6). Poppins comes in on the Blogs page and the
   "Load More" button on the furniture listing; -apple-system is unstyled
   theme/plugin markup on Find a Dealer and the Resources sub-pages.
   Roboto is the site font, so these are pulled back to it. Scoped to the
   .elementor-kit-6s the audit actually flagged rather than a global wildcard. */
.elementor-heading-title,
.elementor-post__title,
.elementor-button,
.entry-title,
[class*="hw-dealer-locator"],
[class*="hw-related-products"],
[class*="hw-load-more"]{
  font-family: "Roboto", sans-serif !important;
}
/* === Layout detail pages + H1 normalisation ==============================
   Audit of /layout/levels-layout-22-hdl/ found 26 distinct text styles,
   14 font sizes and 12 colours on one page - the worst on the site.
   The hw-layout-* components are plugin-rendered, so they are normalised
   here rather than by editing plugin files.
   Added 2026-08-14. */

/* H1 to the scale step. Live values were 44px on layout pages and 65px on
   Blogs, so this removes two off-scale sizes site-wide as well. */
h1.elementor-heading-title{
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #332F20 !important;
}
@media (max-width: 1024px){ h1.elementor-heading-title{ font-size: 34px !important; } }
@media (max-width: 767px){  h1.elementor-heading-title{ font-size: 30px !important; } }

/* Section heading on layout pages - was 40px/700 #111, the only 40px heading
   of its kind, against 32/400 #332F20 everywhere else. */
.series-examples-heading{
  font-size: 32px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: #332F20 !important;
  margin: 0 0 20px !important;
}

/* Breadcrumb. Was font-family "HW Sans", which is not defined anywhere on
   the site and silently fell back to a system sans - it was a placeholder
   alias from a mock-up, never a real family. */
.hw-layout-breadcrumb{
  font-family: "Roboto", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.04em !important;
  color: #6B6B6B !important;
  margin: 0 0 10px !important;
}

/* Component group: 8 sizes and 5 greys collapse to 3 of each. */
.hw-layout-products__title{
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: #332F20 !important;
  margin: 0 !important;
}
.hw-layout-products__name,
.series-example-title{
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #332F20 !important;
  margin: 0 0 4px !important;
}
.hw-layout-products__sku,
.hw-layout-products__count{
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #6B6B6B !important;
}

/* Brochure button. Label and format badge both sat at line-height 1.0. */
.hw-layout-brochure__label{
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #332F20 !important;
}
.hw-layout-brochure__format{
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #6B6B6B !important;
}
/* --- Layout example thumbnails: image fills its container ----------------
   Measured: img 411x308 inside a 411x320 wrapper. The 12px shortfall is the
   inline-image baseline gap - the <img> is inline, so line-height reserves
   space under it, leaving a strip of background at the bottom of every card.
   object-fit was already cover; the container was the problem, not the fit.
   display:block removes the gap, and the wrapper takes the aspect ratio so
   every thumb is identical regardless of the source ratio (some renders are
   600x417, others 600x462). overflow:hidden stops a covering image spilling. */
.series-example-thumb-wrap{
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  line-height: 0;
}
.series-example-thumb-wrap img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center center !important;
}
/* --- kicker + heading are one group -------------------------------------
   Measured 64px between "LEVELS SERIES" and "Levels Layout Examples", and
   the same 64px between the page breadcrumb and the H1. Both came from my
   section rhythm being applied to the heading, which pushed the eyebrow
   label away from the heading it belongs to.
   The label now sits 10px under its heading, and the section space goes
   above the WRAPPER instead - .series-examples-header already sits in a
   section carrying margin-top:40px, so 24px here totals 64px above the
   group rather than inside it. */
.series-examples-header{
  margin-top: 24px !important;
  margin-bottom: 28px !important;
}
/* --- Products In This Space: four visible, rest scrolls -------------------
   Measured pitch is exactly 105px per item and the list was capped at 520px,
   which showed 4.95 items - the part-row read as a rendering fault rather
   than an affordance. 4 x 105 = 420px lands on a clean boundary.
   The list already has overflow-y:auto, so the scrollbar remains the cue.
   Added 2026-08-14. */
.hw-layout-products__list{
  max-height: 420px !important;
}
/* --- products header: tighten -------------------------------------------
   Measured 35px between "Products In This Space" and the list: a 20px bottom
   margin on the title plus 14px header padding plus the 1px rule. The title
   is a flex child, so that margin was only making the header taller rather
   than spacing the group - removed, leaving padding + rule to do the work.
   Baseline alignment sits "7 components" on the title's baseline instead of
   floating against a 31px-tall flex item.
   Header 66px -> 46px. Added 2026-08-14. */
.hw-layout-products__header{
  align-items: baseline !important;
  padding-bottom: 14px !important;
}
/* --- layout example modal: natural size, not full screen ------------------
   My thumbnail rule above originally read
       .series-example-thumb-wrap img, .series-example-item img { ... }
   and the modal image also lives inside .series-example-item, so it inherited
   width:100% / height:100% / object-fit:cover. Inside a position:fixed overlay
   that stretches the render across the whole viewport and crops it.
   The rule is now scoped to the thumbnail only, and the modal shows the image
   at its natural size, capped so a large render cannot overflow the screen.
   contain rather than cover so nothing is ever cropped in the modal.
   Fixes the item on Nikki's list: "Fix large images filling the whole screen
   by setting height and width for image modal". Added 2026-08-14. */
.series-example-preview img{
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: min(90vw, 1200px) !important;
  max-height: 85vh !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  margin: 0 auto;
}
/* --- related products: match the widget rhythm ---------------------------
   "You May Also Like" is built two ways. Business and Education render it
   from the hw-related-products shortcode; Dorm and SOHO use an Elementor
   heading widget. When the heading margins were reduced for Nikki, only the
   widget version was updated, leaving the shortcode pages at 88/54/4 against
   the widget pages' 36/40/20.
   Measured offsets: the shortcode heading sits 24px inside its section and
   the first card sits 30px below the heading box, so 12px and 10px margins
   land on the same 36 / 40 visible gaps. The 16px below closes the 4px vs
   20px difference under the last card. Added 2026-08-14. */
.hw-related-products{
  padding-bottom: 16px !important;
}
/* NOTE: .elementor-kit-6s below are deliberately two classes deep. The plugin emits
   an inline <style> with the identical single-class .elementor-kit-6 and !important
   on every declaration, so a one-class rule loses on source order no matter
   how many !important flags it carries. */
/* --- related products arrows -------------------------------------------
   These were literal < and > text characters at 22px/700 in a square box.
   Everywhere else on the site (banner sliders) uses a chevron SVG. The
   markup is plugin-rendered, so the glyph is hidden with font-size:0 and a
   chevron is drawn with two borders on ::before - crisp at any zoom, no icon
   font or asset to go missing. Circular to match the site's pill buttons.
   Added 2026-08-14. */
.hw-related-products .hw-related-products__arrow{width:40px;height:40px;display:inline-flex !important;align-items:center;justify-content:center;font-size:0 !important;line-height:0;padding:0;border:1px solid #E8E5DE !important;border-radius:50% !important;background:#fff;cursor:pointer;transition:border-color .18s ease,background-color .18s ease}
.hw-related-products .hw-related-products__arrow::before{content:'';display:block;width:8px;height:8px;border-right:2px solid #332F20;border-bottom:2px solid #332F20;transition:border-color .18s ease}
/* a rotated square sits visually off-centre, hence the 3px nudge */
.hw-related-products .hw-related-products__arrow--next::before{transform:rotate(-45deg);margin-left:-3px}
.hw-related-products .hw-related-products__arrow--prev::before{transform:rotate(135deg);margin-right:-3px}
.hw-related-products .hw-related-products__arrow:hover{border-color:#332F20 !important;background:#FAF9F7}
.hw-related-products .hw-related-products__arrow:hover::before{border-color:#332F20}
.hw-related-products .hw-related-products__arrow:focus-visible{outline:2px solid #332F20;outline-offset:2px}
.hw-related-products .hw-related-products__arrow:disabled,.hw-related-products .hw-related-products__arrow[aria-disabled='true']{opacity:.3;cursor:default}
.hw-related-products .hw-related-products__arrow:disabled:hover{border-color:#E8E5DE !important;background:#fff}

/* --- layout page header block -------------------------------------------
   The header section is a flex column with gap:40px and padding:50/50, so the
   breadcrumb sat 50px above the H1 (40px gap + the 10px margin on the
   breadcrumb itself). A breadcrumb is a kicker for the heading beneath it, not
   a separate block, so 14px total is the relationship; the section padding
   carries the separation from the header above and the content below.
   Measured before: 50px breadcrumb->H1, 95px H1->content.
   Added 2026-08-14. */
.elementor-element-382ddf9 > .e-con-inner{gap:4px !important;padding-top:40px !important;padding-bottom:28px !important}

/* --- filter page titles: one treatment ---------------------------------
   The furniture filter page showed its category at 28px/600 uppercase while
   the layouts filter page used 32px/700 with no transform - Nikki's note that
   one was tiny and the other large. Both are the same thing: the page's
   'what am I looking at' label. Unified on 32/600 uppercase, the larger of
   the two at the scale's weight.
   Two classes deep because plugin components on this site ship inline styles
   with !important on a single class. Added 2026-08-14. */
body .hw-layout-filter-title{font-size:20px !important;font-weight:700 !important;line-height:1.3 !important;text-transform:uppercase !important;letter-spacing:.04em !important;color:#332F20 !important;margin:0 !important}
@media (max-width:767px){}

/* --- furniture category banner ------------------------------------------
   The plugin renders the image as an absolutely-positioned background
   (z-index:-1) inside a 360px band with overflow:hidden, so text can be
   centred over it. A 2560x645 source therefore lost 124px at 1920.
   Giving the BAND the image's own 2560/645 ratio makes it 484px at 1920,
   which the cover image fills exactly - nothing cropped at any width, and
   the overlay/centring behaviour is left intact. Do not set height:auto
   here: the image is absolute, so the band would collapse to zero.
   Kit rather than container Custom CSS - the container version was lost
   when the container was edited in the panel. Added 2026-08-14. */
@media (min-width:1024px){
  .furniture-banner-dynamic{height:auto !important;min-height:0 !important;aspect-ratio:2560/645}
  .furniture-banner-dynamic img{position:absolute !important;top:0 !important;left:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;object-position:center center !important}
}


/* --- layouts market slider ------------------------------------------------
   The slider ships with margin-bottom:24px, which lands inside the slider
   widget between the image and the filter title. That made the Layouts
   title band 90px with 49.6px above the caps and 26.2px below, while the
   Furniture archive - which has no such margin - sat at a symmetric 66px.
   Zeroing it lets the title widget's own 20/20 padding set the band on both
   templates, so the two stay in step. Added 2026-08-14. */
.hw-market-slider{margin-bottom:0 !important}


/* --- furniture categories hero -------------------------------------------
   FURNITURE.jpg is 2560x645 (3.969). The container was pinned to 300px with
   background-size:cover, so at 1905 wide it discarded 180px - 90 off the top
   and 90 off the bottom. Giving the box the image's own ratio makes cover fill
   it exactly, so nothing is cropped at any width and no per-breakpoint
   background-position nudging is needed. Kit rather than the container's own
   Custom CSS, which gets wiped when the container is edited in the panel.
   Added 2026-08-17. */
.elementor-element-eddddaf{aspect-ratio:2560/645;min-height:0 !important;height:auto !important}/* End custom CSS */