/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Aug 11 2026 | 15:16:58 */
:root {
  --flush-font: inherit;              /* point at your theme font stack */
  --flush-black: #000000;
  --flush-ink: #000000;
  --flush-muted: #6b6b6b;
  --flush-line: #000000;
  --flush-light: #ffffff;
  --flush-bg-soft: #f5f4f2;
  --flush-max: 1320px;



  --flush-img-advice: url("https://flushbathrooms.co.za/wp-content/uploads/2026/08/expert-bathroom-advice.jpg");
  --flush-img-kitchen: url("https://flushbathrooms.co.za/wp-content/uploads/2026/08/expert-bathroom-advice.jpg");
 
  --flush-img-inspo: url("https://flushbathrooms.co.za/wp-content/uploads/2026/08/Clifton-bathroom.jpg");



/* ---------- shared ------------------------------------------------ */
	
	table#brandbtns {
		width: 100%;
		border: 1px solid #000000;
		margin: 30px 0 30px 0;
	}
	
	table#brandbtns td{
		width: 20%;
		border: 1px solid #000000;
		padding: 10px;
		text-align: center;
		font-size: 0.8em;
		font-weight: 600;
	}
	
	table#brandbtns td:hover{
		color: #ffffff;
		background: #8A785C;
	}
	
	article.flush-categories__tile .flush-btn--tile {
        
        background: #949699;
       
    }
	
	.paddingright {
		padding-right: 5%;
	}
	
	.withpadding {
		padding-left: 20%;
		padding-right: 20%;
	}
	
	.quotedtext {
		font-size: 2.2em !important;
		line-height: 1.5em;
		font-style: italic;
		font-weight: 600;
	}
	
	.bigger {
		font-size: 1.2em !important;
		line-height: 1.5em;
	}
	
	p.lead {
		font-size: 1.6em !important;
		line-height: 1.3em;
	}
	
	.outline {
		border: 1px solid #000000;
	}
	
	.iconimage {
		width: 23px;
		height: 23px;
	}
	
	.fullwidth {
		width: 100%;
		text-align: center !important;
		
	}
	
	p.videotext {
		text-align: center !important;
		text-transform: uppercase;
		color: #ffffff !important;
		font-size: 0.8em !important;
		line-height: 1.2em !important;
		margin: auto;
		padding-top: 7px;
	}
	
div.spacer {
	min-height: 30px;
	}
	
p.whitetext {
color: #ffffff !important;
}

.flush-hero,
.flush-intro,
.flush-kitchen-hero,
.flush-bestsellers-bar,
.flush-categories,
.flush-sanitaryware,
.flush-reviews,
.flush-projects,
.flush-quote {
  font-family: var(--flush-font);
}

/* WPBakery adds a bottom margin to every text block — remove it here */
.flush-hero .wpb_text_column,
.flush-intro .wpb_text_column,
.flush-kitchen-hero .wpb_text_column,
.flush-bestsellers-bar .wpb_text_column,
.flush-categories .wpb_text_column,
.flush-sanitaryware .wpb_text_column,
.flush-reviews .wpb_text_column,
.flush-projects .wpb_text_column,
.flush-quote .wpb_text_column {
  margin-bottom: 0;
}

.flush-btn {
  display: inline-block;
  padding: 12px 26px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.flush-btn:hover { opacity: 0.85; }

.flush-btn--light { background: var(--flush-light); color: var(--flush-black); }
.flush-btn--dark  { background: var(--flush-black); color: var(--flush-light); }

.flush-btn--outline {
  display: block;
  text-align: center;
  background: rgba(255, 255, 255, 0);
  color: var(--flush-black);
  border: 1px solid var(--flush-line);
  margin: 0 auto 10px;
  max-width: 280px;
}
.flush-btn--outline-dark {
  border: 1px solid var(--flush-line);
  color: var(--flush-ink);
  background: transparent;
}
.flush-btn--tile {
  display: block;
  text-align: center;
  background: var(--flush-bg-soft);
  color: var(--flush-ink);
  border-top: 1px solid var(--flush-line);
  padding: 12px 8px;
  font-size: 10px;
}

/* ---------- 1. flush-hero ----------------------------------------- */


.flush-hero__title {
  color: var(--flush-light);
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 400;
  line-height: 1.12;
  margin: 0 0 28px;
}

/* ---------- 2. flush-intro ---------------------------------------- */


.flush-intro > .vc_column_container > .vc_column-inner { height: 100%; }
.flush-intro .vc_column-inner > .wpb_wrapper { height: 100%; }

	.flush-intro__card { height: 100%; }
.flush-intro__card > .wpb_wrapper {
  display: flex;
  flex-direction: column;
  min-height: 590px;
  padding: 32px 28px;
}

.flush-intro__card--photo {
  position: relative;
  background-image: var(--flush-img-advice);
  background-size: cover;
  background-position: center;
  color: var(--flush-light);
}
.flush-intro__card--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0) 100%);
}
.flush-intro__card--photo > .wpb_wrapper {
  position: relative;
  z-index: 1;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.flush-intro__photo-title {
  color: var(--flush-light);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  margin: 20px 0 0;
}

.flush-intro__card--dark { background: var(--flush-black); }
.flush-intro__card--dark,
.flush-intro__card--dark p,
.flush-intro__card--dark h2 { color: var(--flush-light); }
.flush-intro__card--dark p {
  font-size: 14px;
  line-height: 1.75;
  margin: 0 0 14px;
	color: #ffffff !important;
}
.flush-intro__card-cta { margin-top: auto; align-self: center; text-align: center; margin-left: 20%; }

.flush-intro__card--bordered {
  border: 1px solid var(--flush-line);
  background: var(--flush-light);
}

.flush-intro__heading {
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  margin: 0 0 22px;
}
.flush-intro__heading--dark { color: var(--flush-ink); }

.flush-intro__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.flush-intro__list li {
  background: var(--flush-black);
  color: var(--flush-light);
  font-size: 12px;
  text-align: center;
  padding: 11px 14px;
}

.flush-intro__form input[type="text"],
.flush-intro__form input[type="email"],
.flush-intro__form input[type="tel"],
.flush-intro__form select,
.flush-intro__form textarea {
  width: 100%;
  border: 1px solid var(--flush-line);
  background: var(--flush-light);
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 10px;
  border-radius: 0;
}
.flush-intro__form textarea { min-height: 110px; resize: vertical; }
.flush-intro__form input[type="submit"],
.flush-intro__form button[type="submit"] {
  display: block;
  margin: 8px auto 0;
  background: var(--flush-black);
  color: var(--flush-light);
  border: 0;
  padding: 12px 34px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.flush-intro__form .wpcf7 { width: 100%; }

/* ---------- 3. flush-kitchen-hero --------------------------------- */

.flush-kitchen-hero {
  
  background-size: cover;
  background-position: center;
  display: flex;
  min-height: 640px;
}
.flush-kitchen-hero > .vc_column_container { display: flex; }
.flush-kitchen-hero .vc_column-inner { width: 100%; display: flex; }
.flush-kitchen-hero .vc_column-inner > .wpb_wrapper { width: 100%; }

.flush-kitchen-hero__copy .vc_column-inner > .wpb_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  padding: 48px;
}
.flush-kitchen-hero__title {
  color: var(--flush-light);
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 24px;
	text-align: center;
}

.flush-kitchen-hero__brands .vc_column-inner {
  background: rgba(245, 244, 242, 0.82);
}
.flush-kitchen-hero__brands .vc_column-inner > .wpb_wrapper {
  padding: 70px 34px;
  text-align: center;
}
.flush-kitchen-hero__brands-title {
  font-size: 22px;
  font-weight: 400;
  color: var(--flush-ink);
  margin: 0 0 24px;
}

/* ---------- 4. flush-bestsellers-bar ------------------------------ */

.flush-bestsellers-bar { background: var(--flush-black); }
.flush-bestsellers-bar__title {
  color: var(--flush-light);
  text-align: center;
  font-size: 26px;
  font-weight: 400;
  margin: 0;
  padding: 26px 16px;
}

/* ---------- 5. flush-categories ----------------------------------- */

.flush-categories { padding: 34px 0; }
.flush-categories__grid > .wpb_wrapper {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
}
.flush-categories__tile {
  border: 1px solid var(--flush-line);
  background: var(--flush-light);
  display: flex;
  flex-direction: column;
}
.flush-categories__label {
  background: #9a9a9a;
  color: var(--flush-light);
  font-size: 15px;
  font-weight: 400;
  margin: 0 auto;
	width: 100%;
	text-align: center;
  padding: 10px 12px;
}
.flush-categories__media {
  flex: 1 1 auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.flush-categories__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- 6. flush-sanitaryware --------------------------------- */

.flush-sanitaryware {
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: var(--flush-img-bath);
  background-size: cover;
  background-position: center;
}
.flush-sanitaryware > .vc_column_container,
.flush-sanitaryware .vc_column-inner { width: 100%; }
.flush-sanitaryware__inner > .wpb_wrapper {
  text-align: center;
  padding: 60px 24px;
}
.flush-sanitaryware__title {
  color: var(--flush-light);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 400;
  line-height: 1.18;
  margin: 0 0 28px;
}



/* ---------- 8. flush-projects ------------------------------------- */

.flush-projects { padding: 0; }
.flush-projects .vc_column-inner { padding: 0; }

.flush-projects__inspo .vc_column-inner {
  position: relative;
  min-height: 560px;
  height: 100%;
  background-image: var(--flush-img-inspo);
  background-size: cover;
  background-position: center;
}
.flush-projects__inspo-title {

  text-align: center;
  z-index: 2;
  font-size: 26px;
  font-weight: 400;
  color: #ffffff;
  margin: 0;
  background-color: #000000;
}


.flush-projects__title {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  
  color: var(--flush-ink);
	
}
.flush-projects__lead {
  
 
}


/* ---------- 9. flush-quote ---------------------------------------- */

.flush-quote { padding: 22px 24px 32px; }
.flush-quote__body {
  text-align: center;
  font-size: 14px;
  font-style: italic;
  color: var(--flush-ink);
  border: 0;
  margin: 0 0 6px;
  padding: 0;
  background: none;
}
.flush-quote__author {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--flush-ink);
  margin: 0;
}

/* ---------- responsive -------------------------------------------- */

@media (max-width: 1200px) {
  .flush-categories__grid > .wpb_wrapper { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flush-reviews__grid > .wpb_wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
  .flush-hero { margin-bottom: 0; }
  .flush-hero__inner > .wpb_wrapper { text-align: center; }

  .flush-intro__card > .wpb_wrapper { min-height: 240px; }
  .flush-intro__col { margin-bottom: 0px; margin-top: 0px; padding-top: 0 !important; }

  .flush-kitchen-hero { flex-direction: column; min-height: 0; }
  .flush-kitchen-hero__copy .vc_column-inner > .wpb_wrapper {
    padding: 40px 24px;
    align-items: center;
    text-align: center;
  }
  .flush-kitchen-hero__brands .vc_column-inner > .wpb_wrapper { padding: 16px 12px; }

  .flush-projects__inspo .vc_column-inner { min-height: 240px; }
  .flush-projects__panel .vc_column-inner > .wpb_wrapper { padding: 6px 20px; }
	
	.withpadding {
		padding-left: 0px;
		padding-right: 0px;
	}
	
}

@media (max-width: 640px) {
  .flush-categories__grid > .wpb_wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flush-reviews__grid > .wpb_wrapper { grid-template-columns: 1fr; }
  .flush-projects__videos > .wpb_wrapper { grid-template-columns: 1fr; }
  .flush-projects__actions > .wpb_wrapper { flex-direction: column; align-items: stretch; text-align: center; }
  .flush-sanitaryware { min-height: 420px; }
  .flush-bestsellers-bar__title,
  .flush-reviews__title { font-size: 21px; }
	
	.paddingright {
		padding-right: 0;
	}
	
}
	
	@media (max-width: 768px) {
  /* 1. Force the main table to act like a standard block element */
  #brandbtns {
    display: block;
    width: 100%;
  }

  /* 2. Turn the body into a strict 2-column grid */
  #brandbtns tbody {
    display: grid;
    grid-template-columns: 50% 50%; /* Using exact percentages often works better */
    width: 100%;
  }

  /* 3. Strip away the row wrappers */
  #brandbtns tr {
    display: contents; 
  }

  /* 4. Make the cells standard blocks */
  #brandbtns td {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    padding: 10px;
    /* Adding a border temporarily helps you see if the grid is working */
    border: 1px solid #eee; 
  }
		
		.quotedtext {
		font-size: 1.5em !important;
		line-height: 1.4em;
		
	}
		
}