div.pp_woocommerce div.ppt {
 display: none !important;
}

.woocommerce .button, .woocommerce .button.checkout {
    background-image: -webkit-linear-gradient(top, rgb(81, 185, 18) 0%, red 0%) !important;
}
.woocommerce-page .woocommerce-message {
    border-top: 5px solid #101666;
}
.woocommerce #content div.product .woocommerce-tabs ul.tabs li:hover a, .woocommerce #content div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce div.product .woocommerce-tabs ul.tabs li:hover a, .woocommerce div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li:hover a, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce-page div.product .woocommerce-tabs ul.tabs li:hover a, .woocommerce-page div.product .woocommerce-tabs ul.tabs li.active a {
    /* background-color: #101666; */
    background-color: #333f48;
    color: #fff;
}
.woocommerce ul.products li.product a, .woocommerce ul.products li.product .price {
    color: #FFF;
}

body {
    font-family: Quattrocento !important;
    font-weight: normal;
}
h1,h2,h3,h4,h5,h6 {
    font-family: Quattrocento !important;
    font-weight: bold;
}

.click_more_each_categories {
	display: none!important;
}
.woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce #content input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce-page #content input.button.alt, .woocommerce-page #respond input#submit.alt, .woocommerce-page a.button.alt, .woocommerce-page button.button.alt, .woocommerce-page input.button.alt {
    text-transform: none;
}

woocommerce .related h2, .woocommerce-page .related h2, .woocommerce .upsells h2, .woocommerce-page .upsells h2 {
    font-size: 1.8em;
    font-family: 'Quattrocento', sans-serif;
    font-weight: bold;
    letter-spacing: -0.007em;
}

.product .count {
  background-color:  #fff !important;
}
.woocommerce .widget_layered_nav ul li.chosen a:before, .woocommerce .widget_layered_nav_filters ul li a:before {
     color: #fff;
}
.widgettitle:before {
    content: none;
}
.woocommerce .widget_layered_nav ul.yith-wcan-label li a:hover, .woocommerce-page .widget_layered_nav ul.yith-wcan-label li a:hover, .woocommerce .widget_layered_nav ul.yith-wcan-label li.chosen a, .woocommerce-page .widget_layered_nav ul.yith-wcan-label li.chosen a {
    color: #fff !important;
    background-color: #101666;
   }
.widget li {
    margin: 0;
    padding-top: 0.2em;
    padding-right: 0px;
    padding-bottom: 0.2em;
    padding-left: 0px;
    list-style: none;
    clear: both;
}
.four-grid {
  max-width: 24% !important;
float: left !important;
margin-right: 1% !important;
min-height: 200px !important;
font-size: 0.8em !important;
}
.four-grid h5 {
   margin-bottom: 0.2em !important;
}
.four-grid a {
   color: #101666 !important;
}
@media screen and (max-width: 600px){
.search-filter-results .four-grid{
max-width: 100% !important;
float: none !important;
margin-left: 25% !important;
}
}
@media screen and (max-width: 1024px){
.search-filter-results .four-grid a {
    font-size: 13px !important;
}}
@media (max-width: 800px) {
#themify_builder_content-67843 .themify_builder_row {
    padding-top: 26%;
}}
@media (max-width: 800px) {
.woocommerce-page #body {
    padding-top: 20%;
}}
.single-product #sidebar{
display: none;
}
.single-product #content{
width: 100%;
}
.category-title-overlay {
    background-color: #101666;
    opacity: 0.7;
}
.page-category-title-wrap {
padding-top: 2%;
    padding-right: 5%;
    padding-bottom: 2%;
    padding-left: 5%;
}

#content {
    display: flex !important;
    flex-direction: column !important;
}
.woocommerce ul.products {
    order: 1 !important;
}
.term-description {
    order: 2 !important;
}
#main-nav {
    padding-top: 0px !important;
}
#main-nav {
    margin-top: -25px;
 }
#site-logo {
    margin-top: 0.1em !important;
    margin-bottom: 0.1em !important;
}
#pagewrap {
padding-top: 100px !important;
}

.single-product .related.products{
  clear:both;
}

.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2{
	float:none;
	width:100%;
}
/* HPD Cost Widget – boxed background highlight */
.hpd-cost-widget {
  --bg:#fff8ec;        /* background colour – change to taste */
  --border:#ffe2b8;    /* border colour */
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* Optional: tighten spacing a touch inside the box on small screens */
@media (max-width: 640px) {
  .hpd-cost-widget { padding: 14px 14px; }
}

/* Optional: add a subtle header bar */
.hpd-cost-widget .hpd-summary h3 {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.08); /* light blue tint */
  margin: .25rem 0 .5rem 0;
}
.woocommerce div.product form.cart {
    margin-bottom: 0.5em;
}
main.checkoutwc input[type=checkbox] {
display: inline-block !important;
}
/* Even, fluid side gutters for full-width band sections */
.wp-block-group.alignfull {
  padding-left: clamp(1.5rem, 5vw, 5rem);
  padding-right: clamp(1.5rem, 5vw, 5rem);
}
/* Guidance & Resource cards */
.hpd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:1.25rem;}
.hpd-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #e7e7e1;border-radius:12px;padding:22px;text-decoration:none;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.hpd-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:#f7931e;transform:scaleX(0);transform-origin:left;transition:transform .25s ease;}
.hpd-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(51,63,72,.10);border-color:#dcdcd4;}
.hpd-card:hover::before{transform:scaleX(1);}
.hpd-card__icon{width:46px;height:46px;border-radius:10px;background:#fdecd6;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.hpd-eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#f7931e;margin-bottom:6px;}
.hpd-card__title{font-size:16px;font-weight:600;line-height:1.35;color:#333f48;}
.hpd-card__desc{font-size:13.5px;line-height:1.55;color:#4d4d4d;margin-top:6px;}
.hpd-arrow{margin-top:auto;padding-top:14px;display:inline-flex;color:#333f48;transition:color .18s ease;}
.hpd-arrow svg{transition:transform .18s ease;}
.hpd-card:hover .hpd-arrow{color:#f7931e;}
.hpd-card:hover .hpd-arrow svg{transform:translateX(4px);}
._df_thumb {
    width: 600px;
}
/* ==========================================================================
   HOUSEPLANSDIRECT — SERVICES PAGE CSS
   Paste this ENTIRE file into Appearance > Customize > Additional CSS
   (or a custom-CSS/code-snippet plugin), then click Publish/Save.
   ========================================================================== */

/* Brand colour classes — skip any your theme.json already defines */
.has-hpd-slate-color { color: #333f48; }
.has-hpd-grey-color { color: #4d4d4d; }
.has-hpd-orange-background-color { background-color: #f7931e; }
.has-hpd-offwhite-background-color { background-color: #f7f5f2; }
.has-hpd-slate-background-color { background-color: #333f48; }

/* Eyebrow label above the H1 */
.hpd-eyebrow {
	color: #f7931e;
	font-weight: 700;
	letter-spacing: 0.12em;
	font-size: 0.8rem;
	margin-bottom: 8px;
}

/* Decorative shape behind the hero image */
.hpd-hero-image-wrap {
	position: relative;
}
.hpd-hero-image-wrap::before {
	content: "";
	position: absolute;
	top: -16px;
	right: -16px;
	width: 90%;
	height: 90%;
	background: #f7931e;
	opacity: 0.15;
	border-radius: 10px;
	z-index: 0;
}
.hpd-hero-image {
	position: relative;
	z-index: 1;
	margin: 0;
}
.hpd-hero-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}

/* Service card grid */
.hpd-card-body {
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.hpd-card-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #f7931e;
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	margin-bottom: 10px;
}
.hpd-card-list { margin-bottom: 14px; }
.hpd-card-body .wp-block-buttons { margin-top: auto; padding-top: 8px; }

/* Signpost pills */
.hpd-signpost-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	max-width: 1100px;
	margin: 0 auto;
}
.hpd-signpost-item {
	border-radius: 8px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 130px;
}
.hpd-pill-orange { background: #fdece0 !important; }
.hpd-pill-slate { background: #e7eaec !important; }
.hpd-signpost-q {
	color: #333f48;
	font-weight: 600;
	font-size: 1.05rem;
	margin-bottom: 14px;
}
.hpd-pill-btn .wp-block-button__link {
	background: #333f48 !important;
	color: #fff !important;
	border-radius: 4px;
	font-size: 0.9rem;
}

/* Closing CTA */
.hpd-cta-copy { opacity: 0.9; }
.hpd-btn-outline-white .wp-block-button__link {
	color: #fff !important;
	border-color: #fff !important;
}

/* Mobile */
@media (max-width: 782px) {
	.hpd-signpost-grid {
	grid-template-columns: 1fr;
}
	.hpd-hero-columns {
		flex-direction: column;
	}
	.hpd-hero-columns .wp-block-column {
		flex-basis: 100% !important;
	}
	.hpd-hero-image-wrap::before {
		display: none;
	}
	.wp-block-buttons .wp-block-button__link {
		width: 100%;
		text-align: center;
		padding-top: 14px;
		padding-bottom: 14px;
	}
}
.hpd-signpost-grid > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}
.hpd-services-grid {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 28px;
	max-width: 1140px;
	margin: 0 auto;
}
.hpd-services-grid > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}
.hpd-service-card {
	flex: 0 1 calc(33.333% - 19px);
	max-width: calc(33.333% - 19px);
	background: #fff;
	border: 1px solid #ece8e2;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.hpd-card-image {
	height: 260px !important;
	overflow: hidden !important;
	margin: 0 !important;
}
.hpd-card-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}
.hpd-build-cost-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.7fr) minmax(500px, 1.3fr);
    gap: 36px;
    align-items: stretch;
    max-width: 1200px;
    margin: 0 auto;
}

.hpd-build-cost-intro {
    padding: 30px;
    background: #F7F5F1;
    border-left: 4px solid #F7931E;
    color: #4D4D4D;
}

.hpd-build-cost-intro h2 {
    margin-top: 0;
    color: #333F48;
}

.hpd-build-cost-intro ol {
    padding-left: 22px;
}

.hpd-build-cost-note {
    margin-top: 24px;
    font-size: 0.9em;
}

@media (max-width: 900px) {
    .hpd-build-cost-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .hpd-build-cost-intro {
        padding: 22px;
    }
}
.hpd-build-cost-calculator button,
.hpd-build-cost-calculator input[type="submit"] {
    background: #F7931E;
    border-color: #F7931E;
    color: #FFFFFF;
}

.hpd-build-cost-calculator button:hover,
.hpd-build-cost-calculator input[type="submit"]:hover {
    background: #333F48;
    border-color: #333F48;
}
.hpd-build-cost-signpost {
    margin-top: 14px;
}

.hpd-build-cost-signpost a {
    color: #F7931E;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hpd-build-cost-signpost a:hover {
    color: #333F48;
}
.single-product .hpd-house-design-only {
    display: none !important;
}

.single-product.hpd-house-design-product
.hpd-house-design-only {
    display: block !important;
}
/* ============================================================
   Hero search panel — colour & life
   Add the class  hpd-herosearch  to the search COLUMN,
   and  hpd-herosearch__title  to the heading above the form.
   Paste this into Appearance > Customize > Additional CSS.
   Styles only this panel; nothing else on the site is touched.
   ============================================================ */

.hpd-herosearch{
  --hpd-orange:#f7931e;
  --hpd-slate:#333f48;

  max-width:520px;              /* keeps it compact … */
  margin:0 auto 0 0;            /* … and pinned to the LEFT of its column on desktop */
  background:#ffffff;
  border:1px solid #e7e7e1;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(51,63,72,.08);
  padding:22px 22px 24px;
  box-sizing:border-box;
}

/* heading (native Heading block with class hpd-herosearch__title) */
.hpd-herosearch__title{
  font-size:1.15rem !important;
  line-height:1.25;
  color:var(--hpd-slate) !important;
  margin:0 0 18px !important;
  position:relative;
  padding-bottom:12px;
}
.hpd-herosearch__title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:40px; height:3px; background:var(--hpd-orange); border-radius:2px;
}

/* two groups side by side: Bedrooms | Type */
.hpd-herosearch .formGrid{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
@media (max-width:460px){
  .hpd-herosearch .formGrid{ grid-template-columns:1fr; }
}

/* reset the default fieldset chrome (no border here) */
.hpd-herosearch fieldset{
  border:0; margin:0; padding:0; min-width:0;
}

/* group titles (Bedrooms / Type) — sentence case, left-aligned, with the orange rule */
.hpd-herosearch .formGrid legend{
  display:block !important; width:100% !important; box-sizing:border-box;
  text-align:left;
  font-size:1rem; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--hpd-slate);
  margin:0 0 14px; padding:0 0 10px;
  border-bottom:3px solid #f7931e !important;
}

/* each option becomes a soft, tappable pill */
.hpd-herosearch fieldset > div{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; margin-bottom:8px;
  border:1px solid #e2e2dc; border-radius:8px; background:#fff;
  transition:border-color .15s ease, background-color .15s ease;
}
.hpd-herosearch fieldset > div:hover{ border-color:#cfd3d2; background:#faf9f6; }

/* highlight the whole pill when its box is ticked (modern browsers) */
.hpd-herosearch fieldset > div:has(input:checked){
  border-color:var(--hpd-orange); background:#fff7ef;
}

.hpd-herosearch label{
  flex:1; cursor:pointer; text-align:left;      /* keep option text hard-left in both columns */
  font-size:.9rem; color:var(--hpd-slate); line-height:1.2;
}
.hpd-herosearch input[type="checkbox"]{
  order:-1;                     /* box sits on the left of the label */
  width:17px; height:17px; margin:0;
  accent-color:var(--hpd-orange);   /* orange tick when selected */
  cursor:pointer; flex:0 0 auto;
}

/* submit button — set its COLOUR to slate in the block settings;
   this handles size, shape and hover. */
.hpd-herosearch .hero-search-section-wrapper button,
.hpd-herosearch button[type="submit"]{
  width:100%; margin-top:6px; padding:13px 20px;
  border:0; border-radius:6px;
  font-size:.95rem; font-weight:600; cursor:pointer;
  transition:filter .15s ease;
}
.hpd-herosearch .hero-search-section-wrapper button:hover,
.hpd-herosearch button[type="submit"]:hover{
  filter:brightness(0.92);      /* gentle darken, works whatever colour you set */
}
.hpd-herosearch label{
  flex:1; cursor:pointer; text-align:left;
  font-size:clamp(.82rem, 2.4vw, .9rem);   /* was .9rem */
  color:var(--hpd-slate); line-height:1.2;
  white-space:nowrap;
}
}
.hpd-heroblurb{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-left:clamp(1rem, 3vw, 2.5rem);
}
.hpd-heroblurb p{
  color:#4d4d4d; line-height:1.7; font-size:1.02rem;   /* calmer, more readable */
}
.hpd-heroblurb a{
  color:#333f48; text-decoration:none;
  border-bottom:1px solid rgba(247,147,30,.45);   /* subtle orange underline */
  transition:border-color .15s ease, color .15s ease;
}
.hpd-heroblurb a:hover{
  color:#f7931e; border-bottom-color:#f7931e;
}
.hpd-herosearch__title{ margin-bottom:4px !important; }
.hpd-herosearch .hero-search-section{ margin-top:0; }
.hpd-herosearch .formGrid{ margin-top:0; padding-top:0; }
.hpd-herosearch .hero-search-section-wrapper{ padding-top:0; margin-top:0; }
.hpd-svc__btn{ box-sizing:border-box; max-width:100%; }
[class*="hpd-"] a[class*="__btn"],
[class*="hpd-"] button{ box-sizing:border-box; max-width:100%; }