:root {
	--wd-text-font: "Source Sans Pro", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #023c40;
	--wd-text-font-size: 16px;
	--wd-title-font: "Source Serif Pro", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: #023c40;
	--wd-entities-title-font: "Source Sans Pro", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Source Code Pro", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Source Serif Pro", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Source Sans Pro", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 14px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: #f28320;
	--wd-alternative-color: #76c7d3;
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: #f28320;
	--btn-accented-bgcolor-hover: #f27100;
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: #f28320;
	--wd-link-color-hover: #242424;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 280px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: #037880;
	background-image: none;
}
:is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) {
	background-color: #eef0f0;
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) {
	background-color: #eef0f0;
	background-image: none;
}
.single-product :is(.wd-page-content, .whb-header) {
	background-color: #eef0f0;
	background-image: none;
}
.woodmart-archive-blog :is(.wd-page-content, .whb-header) {
	background-color: #eef0f0;
	background-image: none;
}
.single-post :is(.wd-page-content, .whb-header) {
	background-color: #eef0f0;
	background-image: none;
}
.woodmart-archive-portfolio :is(.wd-page-content, .whb-header) {
	background-color: #eef0f0;
	background-image: none;
}
.single-portfolio :is(.wd-page-content, .whb-header) {
	background-color: #eef0f0;
	background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1160px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-bottom-active: -1px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
--btn-accented-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15);
--wd-brd-radius: 0px;
}

@media (min-width: 1160px) {
[data-vc-full-width]:not([data-vc-stretch-content]),
:is(.vc_section, .vc_row).wd-section-stretch {
padding-left: calc((100vw - 1160px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
padding-right: calc((100vw - 1160px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
}
}


.wd-page-title {
background-color: #eeeeee;
}

/* ============================================================
   Ringway Bathrooms — local page sections
   Coffee Media, Oct 2026
   All rules are prefixed .rb- so nothing leaks into the shop.
   Paste into: WoodMart > Theme Settings > Custom CSS
   ============================================================ */

:root{
  --rb-ink:#0d2426;
  --rb-teal:#023c40;
  --rb-teal-mid:#0a5055;
  --rb-orange:#f28320;
  --rb-orange-dk:#c9650c;
  --rb-sky:#76c7d3;
  --rb-shell:#f5f2ed;
  --rb-line:#dcd4c9;
  --rb-muted:#5e6c6d;
}

/* ---------- full-width bands ---------- */
.rb-sec{
  padding-block:clamp(40px,6vw,68px);
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px));
  margin-bottom:0;
}
.rb-sec > *{max-width:1120px;margin-left:auto;margin-right:auto}
.rb-white{background:#fff}
.rb-shell{background:var(--rb-shell)}
.rb-dark{background:var(--rb-teal);color:#dff0f1}
.rb-hero{background:var(--rb-teal);color:#fff}
.rb-dark .rb-h2,.rb-hero .rb-h1,.rb-dark .rb-h3{color:#fff}
.rb-dark .rb-lede,.rb-hero .rb-lede{color:#bfdbdd}

/* ---------- type ---------- */
.rb-eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rb-orange-dk);margin-bottom:.4em;
}
.rb-dark .rb-eyebrow,.rb-hero .rb-eyebrow{color:var(--rb-sky)}
.rb-h1{font-size:clamp(2rem,5.2vw,3.35rem);font-weight:800;line-height:1.08;letter-spacing:-.02em;text-wrap:balance;margin:0 0 .35em}
.rb-h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:700;line-height:1.12;letter-spacing:-.015em;text-wrap:balance;margin:0 0 .5em}
.rb-h3{font-size:1.12rem;font-weight:700;line-height:1.25;margin:0 0 .4em}
.rb-lede{font-size:1.1rem;line-height:1.6;color:var(--rb-muted);max-width:62ch}
.rb-hero .rb-lede{max-width:none}

/* ---------- hero / split rows ---------- */
.rb-split{gap:34px;align-items:center}
.rb-split .wp-block-column{min-width:0}

/* ---------- trust strip ---------- */
.rb-trust{background:var(--rb-teal-mid);padding-block:14px}
.rb-trust-line{color:#cde4e6;font-size:.9rem;margin:0;text-align:center}
.rb-trust-line strong{color:#fff}

/* ---------- cards ---------- */
.rb-cards{gap:20px}
.rb-cards .wp-block-column{
  background:var(--rb-shell);border:1px solid var(--rb-line);border-radius:4px;
  padding:24px;min-width:0;
}
.rb-shell .rb-cards .wp-block-column{background:#fff}
.rb-cards p{color:var(--rb-muted);font-size:.95rem;margin:0}

/* ---------- numbered steps ---------- */
.rb-steps{gap:18px;counter-reset:rbstep}
.rb-steps .wp-block-column{
  counter-increment:rbstep;background:#fff;border:1px solid var(--rb-line);
  border-radius:4px;padding:22px;min-width:0;
}
.rb-steps .wp-block-column::before{
  content:counter(rbstep);display:block;
  font-size:1.5rem;font-weight:800;line-height:1;color:var(--rb-orange);margin-bottom:10px;
}
.rb-steps p{color:var(--rb-muted);font-size:.95rem;margin:0}

/* ---------- quotes ---------- */
.rb-quotes{gap:20px}
.rb-quotes .wp-block-column{
  background:#fff;border:1px solid var(--rb-line);border-left:3px solid var(--rb-orange);
  border-radius:4px;padding:22px;min-width:0;
}
.rb-quote-by{font-size:.85rem;font-weight:600;color:var(--rb-muted);margin:12px 0 0}

/* ---------- buttons ---------- */
.rb-cta{gap:10px;margin-top:4px}
.rb-cta .wp-block-button__link{
  border-radius:3px;font-weight:700;font-size:.92rem;padding:13px 22px;border:2px solid transparent;
}
.rb-btn-pri .wp-block-button__link{background:var(--rb-orange);color:#231000;border-color:var(--rb-orange)}
.rb-btn-pri .wp-block-button__link:hover{background:var(--rb-orange-dk);border-color:var(--rb-orange-dk);color:#fff}
.rb-btn-ghost .wp-block-button__link{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.rb-btn-ghost .wp-block-button__link:hover{background:#fff;color:var(--rb-teal)}

/* ---------- photo placeholders (delete these rules once real images are in) ---------- */
.rb-ph{
  background:repeating-linear-gradient(135deg,#e4ded5 0 10px,#ded7cc 10px 20px);
  border:1px dashed #b5aa9a;border-radius:4px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:18px;max-width:100%;
}
.rb-ph p{
  font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#6d6153;line-height:1.4;margin:0;
}
.rb-ph-wide{aspect-ratio:16/10}
.rb-ph-sq{aspect-ratio:1/1;margin-bottom:12px}
.rb-ph-grid{gap:12px}
.rb-hero .rb-ph{background:repeating-linear-gradient(135deg,#0a4a4f 0 10px,#083f44 10px 20px);border-color:#2b6e72}
.rb-hero .rb-ph p{color:#8fc0c4}

/* ---------- phone ---------- */
@media (max-width:781px){
  .rb-split,.rb-cards,.rb-steps,.rb-quotes,.rb-ph-grid{gap:16px}
  .rb-trust-line{text-align:left}
}

/* ============================================================
   Ringway — full-bleed sections
   Append this to the END of the Global custom CSS box,
   below everything already in there.

   WoodMart wraps page content in:
     .wd-page-content.main-page-wrapper
       > main#main-content.container
         > .wd-content-area.site-content
           > article.entry-content

   The :has() selectors mean this only ever applies to pages that
   actually use .rb- sections, so the shop is untouched and it will
   keep working when this content moves to the real front page.
   ============================================================ */

/* 1. Drop the container constraint on pages using our sections */
#main-content.container:has(.rb-sec){
  max-width:100%;
  width:100%;
  padding-left:0;
  padding-right:0;
}
.wd-content-area:has(.rb-sec){
  padding:0;
  width:100%;
  max-width:100%;
}
.main-page-wrapper:has(.rb-sec){
  padding-top:0;
  padding-bottom:0;
  background:#fff;
  overflow-x:clip;        /* clip, not hidden — doesn't break sticky elements */
}
.entry-content:has(.rb-sec){
  margin:0;
}

/* 2. Stretch each band to the full viewport width.
      The side padding already on .rb-sec keeps the gutter,
      and .rb-sec > * keeps the content at 1120px. */
.rb-sec{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:auto;
  max-width:none;
}

/* 3. First band flush under the header, last flush to the footer */
.rb-sec:first-child{margin-top:0}
.rb-sec:last-child{margin-bottom:0}

/* ============================================================
   Ringway — section spacing and alignment fixes
   Append to the END of the Global custom CSS box, below the
   full-bleed block.
   ============================================================ */

/* 1. Kill the gaps between bands.
      WordPress adds block-gap margins between sibling blocks;
      two classes beats the theme's single-class rule. */
.entry-content > .rb-sec,
.entry-content > .rb-sec + .rb-sec{
  margin-top:0;
  margin-bottom:0;
}

/* 2. Close the white strip above the footer and below the header */
.main-page-wrapper:has(.rb-sec) #main-content,
.main-page-wrapper:has(.rb-sec) .wd-content-area,
.main-page-wrapper:has(.rb-sec) .entry-content{
  margin-top:0;
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
}

/* 3. Align everything to one left edge.
      Previously each child was centred inside 1120px, so anything
      narrower than that (the intro paragraphs) drifted inwards.
      Now the band itself holds the gutter and children sit flush. */
.rb-sec{
  padding-left:max(20px, calc(50% - 560px));
  padding-right:max(20px, calc(50% - 560px));
}
.rb-sec > *{
  max-width:none;
  margin-left:0;
  margin-right:0;
}
.rb-sec > .rb-lede{max-width:62ch}
.rb-hero .rb-lede{max-width:none}

/* ============================================================
   Ringway — alignment corrections
   Append to the END of the Global custom CSS box.

   WordPress's constrained-layout rules set margin-left/right to
   auto with !important on every child of a group, which centres
   anything narrower than the content width. These override it.
   ============================================================ */

/* 1. Everything inside a band aligns to the same left edge */
.rb-sec.is-layout-constrained > *,
.rb-sec > *{
  margin-left:0 !important;
  margin-right:0 !important;
  max-width:none;
}
.rb-sec > .rb-lede{max-width:62ch}
.rb-hero .rb-lede,
.rb-dark .rb-lede{max-width:70ch}

/* 2. Two-column rows sit centred against each other instead of
      leaving the shorter column stranded at the top */
.rb-split.wp-block-columns{
  align-items:center;
}
.rb-split > .wp-block-column{
  align-self:center;
}

/* 3. Equal-height cards so the row reads as one band */
.rb-cards.wp-block-columns,
.rb-steps.wp-block-columns,
.rb-quotes.wp-block-columns{
  align-items:stretch;
}
.rb-cards > .wp-block-column,
.rb-steps > .wp-block-column,
.rb-quotes > .wp-block-column{
  align-self:stretch;
}

/* ============================================================
   Ringway — showroom page: the address / hours fact list
   Append to the END of Theme settings > Custom CSS > Global.
   ============================================================ */

.rb-fact{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:4px 18px;
  padding:11px 0;
  margin:0;
  border-bottom:1px solid var(--rb-line);
  font-size:.97rem;
}
.rb-fact:first-of-type{border-top:1px solid var(--rb-line)}
.rb-fact strong{
  font-weight:600;
  color:var(--rb-teal);
}

@media (max-width:600px){
  .rb-fact{grid-template-columns:1fr;gap:2px;padding:9px 0}
}

.rb-hero-img img{border-radius:4px;display:block;width:100%;height:auto}
.rb-hero-img{margin:0}

.rb-img,.rb-hero-img{margin:0}
.rb-img img,.rb-hero-img img{border-radius:4px;display:block;width:100%;height:auto}

/* ============================================================
   Ringway — image sizing
   Append to the END of Theme settings > Custom CSS > Global.

   The photos come in at mixed aspect ratios, which makes the
   homepage grid ragged and knocks the showroom card headings out
   of line. These crop each image to a consistent shape for its
   slot, centred, without squashing anything.
   ============================================================ */

/* Wide images — hero, and the photo beside the address list */
.rb-hero-img img,
.rb-split .rb-img img{
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:center;
}

/* The 2x2 grid on the homepage — square crops, evenly spaced */
.rb-ph-grid .rb-img img{
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:center;
}
.rb-ph-grid .wp-block-column{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Card images — 4:3 so every heading in the row starts at the
   same height */
.rb-cards .rb-img img{
  aspect-ratio:4/3;
  object-fit:cover;
  object-position:center;
}
.rb-cards .rb-img{margin-bottom:14px}

/* Keep the rounding and stop any stray inline spacing */
.rb-img img,
.rb-hero-img img{
  border-radius:4px;
  display:block;
  width:100%;
  height:auto;
}

.rb-cards .rb-h3{min-height:2.5em}
@media (max-width:781px){.rb-cards .rb-h3{min-height:0}}

/* ---------- embedded maps and forms ---------- */
.rb-embed{line-height:0;border-radius:4px;overflow:hidden;border:1px solid var(--rb-line)}
.rb-embed iframe{display:block;width:100%;border:0}
.rb-map iframe{height:clamp(300px,42vw,460px)}
.rb-form iframe{height:860px}
@media (max-width:600px){.rb-form iframe{height:980px}}