/* ---- from template-parts/content/image_text_block_new.php (inline <style>) ---- */
    .dc-image-text-box-new{
        margin: 70px 0px;
    }
    .dc-image-text-box-new > .inner{
        max-width: 1480px;
        margin:auto;
        padding-left: 30px;
        padding-right: 30px;
        display: flex;
        gap: 20px;
    }
    .dc-image-text-box-new.image_bottom > .inner{
        flex-direction: column;
        max-width: 1040px;
    }
    
    .dc-image-text-box-new.image_left > .inner{
        flex-direction: row-reverse;
    }
    .dc-image-text-box-new > .inner > .left, .dc-image-text-box-new > .inner > .right{
        width: 50%;
    }
    .dc-image-text-box-new.image_bottom > .inner > .left, .dc-image-text-box-new.image_bottom > .inner > .right{
        width: 100%;
    }
    .dc-image-text-box-new > .inner > .right .image-wrapper img{
        border-radius: 8px;
    }
    .dc-image-text-box-new .links{
        line-height: 50px;
        display: flex;
    }
    .button-wrapper{
        display: flex;
        text-transform: uppercase;
        
    }
    .button-wrapper .dc-btn-new{
        padding: 12px 30px;
        /* margin: 14px 0; */
        border: 1px solid #45547A;
        border-radius: 4px;
        font-size: 16px;
        letter-spacing: 2px;
        font-weight: 500;
        line-height: 1.5;
    }
    .button-wrapper .dc-btn-new:hover{
        background-color: #FCD21F;
        border-color: #FCD21F;
        color: #45557A;
    }
    .button-wrapper .dc-btn-new-outline{
        padding: 14px 30px;
        position: relative;
        font-size: 16px;
        letter-spacing: 2px;
        font-weight: 500;
        line-height: 1.5;
    }
    .button-wrapper .dc-btn-new-outline:hover{
        color: #45547A;
        text-decoration: underline;
    }
    .button-wrapper .dc-btn-new-outline:hover:after{
        transform: translateX(5px);
    }
    .button-wrapper .dc-btn-new-outline:after{
        content: "";
        background: url("/wp-content/uploads/2024/07/arrow.svg");
        position: absolute;
        height: 10px;
        width: 20px;
        right: 0px;
        top: 50%;
        margin-top: -5px;
        transition: transform 0.3s ease;
    }
    .woocommerce div.product .woocommerce-tabs .wc-tab{
        max-width: 1920px;
        padding: 0;
        margin: 0px !important;
    }
    @media only screen and (max-width: 849px) {
        .dc-image-text-box-new > .inner{
            flex-direction: column !important;
        }
        .dc-image-text-box-new > .inner > .left, .dc-image-text-box-new > .inner > .right{
            width: 100%;
        }
        .dc-image-text-box-new > .inner > .left{
            order: 2;
        }
        .dc-image-text-box-new > .inner > .right{
            order: 1;
        }
    }

/* ---- from template-parts/content/four_cards_icon_and_text.php (inline <style>) ---- */
    .dc-four-card-icon-text{
        margin: 50px 0px;
    }
    .dc-four-card-icon-text > .inner{
        max-width: 1480px;
        margin:auto;
		padding-left: 30px;
        padding-right: 30px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    .dc-four-card-icon-text > .inner > .dc-four-card-icon-text-box{
        border-radius: 8px;
        background-color: #92A8DF;
        padding: 20px;
        flex: 0 0 calc(25% - 10px);
    }
    .dc-four-card-icon-text > .inner > .dc-four-card-icon-text-box h4{
        margin-bottom: 0;
    }
    @media only screen and (max-width: 849px) {
        .dc-four-card-icon-text > .inner > .dc-four-card-icon-text-box{
            flex: 1 1 calc(50% - 10px);
        }
    }

/* ---- from template-parts/content/how_it_works_section.php (inline <style>) ---- */
    .dc-how-it-works-section{
        margin: 50px 0px;
    }
    .dc-how-it-works-section > .inner{
        max-width: 1480px;
        margin:auto;
		padding-left: 30px;
        padding-right: 30px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    .dc-how-it-works-section > .inner > h2{
        margin-bottom: 0;
    }
    .dc-how-it-works-section > .inner > .dc-how-it-works-section-box{
        flex: 0 0 calc(33.33% - 10px);
    }
    .dc-how-it-works-section > .inner > .dc-how-it-works-section-box h4{
        margin-top: 20px;
        margin-bottom: 10px;
    }
    @media only screen and (max-width: 768px) {
        .dc-how-it-works-section > .inner > .dc-how-it-works-section-box{
            flex: 0 0 100%;
        }
    }

/* ---- from template-parts/content/product_features_grid.php (inline <style>) ---- */
    .dc-product-features{
        margin: 70px 0px;
    }
    .dc-product-features  > .inner{
        max-width: 1480px;
        margin: auto;
        padding-left: 30px;
        padding-right: 30px;
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
    }
    .dc-product-features > .inner > h2{
        text-align: center;
    }
    .dc-product-features > .inner > .subtext{
        text-align: center;
        max-width: 800px;
        margin: auto;
    }
    .dc-product-features > .inner.flex-column{
        flex-direction:column;
        gap: 0;
        margin-bottom: 20px;
    }
    .dc-product-features > .inner .feature-box{
        text-align: center;
        padding-top: 40px;
        display: flex !important;
        flex-direction: column;
    }
    .dc-product-featuers-slider{
        width: 100%;
    }
    /* @media only screen and (max-width: 849px) {
        .dc-product-features > .inner .feature-box{
            flex: 1 1 calc(50% - 20px);
        }
    }
    @media only screen and (max-width: 649px) {
        .dc-product-features > .inner .feature-box{
            flex: 1 1 calc(100% - 20px);
        }
    } */
    .dc-product-features > .inner .feature-box img{
        margin: 0 auto 20px auto;
        max-width: 64px;
    }
    .dc-product-features > .inner .feature-box h4{
        margin-bottom: 15px;
        font-size: 18px;
        letter-spacing: 1.25px;
        text-transform: uppercase;
    }
    .slick-dots li button:after{
        height: 10px !important;
        width: 10px !important;
        border-radius: 10px;
        background-color: #CDC7C0;
	}
	.slick-dots li.slick-active button:after,
	.slick-dots li button:hover:after {
	    background-color: #2B2926 !important;
	}
	button.slick-arrow{
		display: block !important;
		border: 0;
	}
	button.slick-arrow.slick-next{
		right: -22px !important;
		top: calc(50% - 14px);
		height: 50px;
		width: 50px;
	}
	button.slick-arrow.slick-prev{
		left: -18px !important;
		height: 50px;
		width: 50px;
	}
	.slick-prev:before{
		content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.5' height='21' transform='scale(-1, 1)' viewBox='0 0 7 12'%3E%3Cpath d='M1.5 1.5L6 6L1.5 10.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
	}
	.slick-next:before{
		content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.5' height='21' viewBox='0 0 7 12'%3E%3Cpath d='M1.5 1.5L6 6L1.5 10.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
	}

/* ---- from template-parts/content/cta_new.php (inline <style>) ---- */
    .text-center{
        text-align: center;
    }
    .dc-cta.cta_style_1.dc-cta-new .inner .content{
        margin-right:0 !important;
    }
    .dc-cta>.inner>.content>.text{
        margin-bottom: 20px;
        max-width: 800px;
    }
    .dc-cta>.inner>.content>.text>p{
        font-size: 18px;
    }
    .dc-cta.cta_style_1.dc-cta-new .inner .content .title-wrapper{
        margin-bottom: 20px;
    }
    .dc-cta.cta_style_1.dc-cta-new .inner .content .button-wrapper{
        margin-top: 10px;
        justify-content: center;
    }
    .dc-cta.cta_style_1.dc-cta-new .inner .content .button-wrapper .dc-btn{
        border-radius: 4px;
    }
    .dc-cta.cta_style_3{
        margin: 0;
        background: #92A8DF;
    }
    .dc-cta.cta_style_3>.inner>.content>.title-wrapper{
        margin-bottom: 10px;
    }
    .dc-cta.cta_style_3>.inner>.content>.text{
        margin-bottom: 20px;
    }
	.section.dc-cta > .inner{
		justify-content: center;
	}



/* West Coast Hifi: TV installation page. Scoped styles (prefix wchf-ti). Tokens match the live site:
   yellow #FCD21F, navy #283046, slate #45547A, charcoal #2B2926, body grey #6E6A67, light blue #E4E9F7,
   mid blue #92A8DF, page grey #F7F7F7, border #D1D1D0. Headings inherit Milo W04 Bold, body inherits Ubuntu. */

/* ---- image placeholders (replaced by the six AI images later) ---- */
.wchf-ti-ph { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 8px; padding: 24px; box-sizing: border-box; width: 100%; background: repeating-linear-gradient(135deg, #E4E9F7 0 14px, #D8DFF2 14px 28px); border: 2px dashed #45547A; border-radius: 8px; color: #283046; }
.wchf-ti-ph span { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; color: #45547A; }
.wchf-ti-ph strong { font-size: 18px; line-height: 1.3; max-width: 32ch; }
.wchf-ti-ph em { font-size: 14px; font-style: normal; color: #6E6A67; }
.wchf-ti-ph--hero { aspect-ratio: 16 / 9; min-height: 300px; height: 100%; border-color: #FCD21F; background: repeating-linear-gradient(135deg, #3A4A70 0 14px, #45547A 14px 28px); color: #fff; border-radius: 0; }
.wchf-ti-ph--hero span { color: #FCD21F; } .wchf-ti-ph--hero em { color: #C3CBDA; }
.wchf-ti-ph--43 { aspect-ratio: 4 / 3; }
.wchf-ti-ph--32 { aspect-ratio: 3 / 2; border-radius: 8px 8px 0 0; border-bottom: 0; }

/* ---- hero tweaks: keep the theme title box, let the right half hold the placeholder ---- */
.wchf-ti-hero .image-wrapper, .wchf-ti-hero .image-inner-wrapper { display: flex; }
.wchf-ti-hero .image-inner-wrapper { width: 100%; }
.wchf-ti-hero .text { max-width: 560px; font-size: 20px; line-height: 1.4; margin-bottom: 28px; }
.wchf-ti-hero .button-wrapper { display: flex; flex-wrap: wrap; gap: 12px; }
.wchf-ti-hero .button-wrapper .dc-btn { min-width: 0; }

/* ---- generic section + heading ---- */
.wchf-ti-section > .inner { max-width: 1480px; margin: 0 auto !important; padding: 0 30px; box-sizing: border-box; }
.wchf-ti-section { padding: 70px 0; }
.wchf-ti-section--grey { background: #F7F7F7; }
.wchf-ti-section--navy { background: #283046; color: #fff; }
.wchf-ti-section--navy h2, .wchf-ti-section--navy h3, .wchf-ti-section--navy p, .wchf-ti-section--navy li { color: #fff; }
.wchf-ti-heading { max-width: 820px; margin: 0 0 40px; }
.wchf-ti-heading h2 { margin-bottom: 16px; }
.wchf-ti-heading p { font-size: 20px; line-height: 1.4; margin: 0; }
.wchf-ti-note { font-size: 16px; color: #6E6A67; margin: 20px 0 40px; }

/* ---- four reassurance cards: inline SVG icons instead of images ---- */
.wchf-ti-cards4 .dc-four-card-icon-text-box svg { width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; display: block; margin: 0 auto 16px; }
.wchf-ti-cards4 .dc-four-card-icon-text-box h4 { font-size: 22px; line-height: 1.25; margin: 0; }

/* ---- what we install: three cards ---- */
.wchf-ti-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wchf-ti-card { background: #fff; border: 1px solid #D1D1D0; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.wchf-ti-card__body { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.wchf-ti-card__body h3 { font-size: 28px; margin: 0 0 12px; }
.wchf-ti-card__body p { font-size: 18px; line-height: 1.4; margin: 0 0 14px; }
.wchf-ti-from { margin-top: auto !important; color: #283046; font-size: 18px; }
.wchf-ti-from strong { font-size: 32px; font-family: "Milo W04 Bold", Arial, sans-serif; font-weight: 700; margin-left: 4px; }
.wchf-ti-card__body .button-wrapper { margin-top: 18px; display: flex; }

/* ---- how it works: four numbered steps on the theme block ---- */
.wchf-ti-steps .inner:first-child p { font-size: 20px; max-width: 820px; }
.wchf-ti-steps .dc-how-it-works-section-box { flex: 0 0 calc(25% - 18px); max-width: calc(25% - 18px); }
.wchf-ti-step-num { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #FCD21F; color: #283046; font-family: "Milo W04 Bold", Arial, sans-serif; font-size: 26px; font-weight: 700; margin-bottom: 20px; }
.wchf-ti-steps .dc-how-it-works-section-box h4 { font-size: 26px; margin: 0 0 10px; }
.wchf-ti-steps .dc-how-it-works-section-box p { font-size: 18px; line-height: 1.4; }



/* ---- pricing tiers ---- */
.wchf-ti-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wchf-ti-tier { background: #fff; border: 1px solid #D1D1D0; border-radius: 8px; padding: 32px 28px 28px; }
.wchf-ti-tier__size { display: flex; align-items: flex-end; gap: 18px; min-height: 92px; margin-bottom: 20px; border-bottom: 1px solid #E6E6E6; padding-bottom: 20px; }
.wchf-ti-tier__size h3 { font-size: 30px; margin: 0; }
.wchf-ti-tier__screen { display: inline-block; background: #283046; border: 3px solid #45547A; border-radius: 3px; box-sizing: border-box; }
.wchf-ti-tier__screen--s { width: 64px; height: 40px; }
.wchf-ti-tier__screen--m { width: 96px; height: 58px; }
.wchf-ti-tier__screen--l { width: 128px; height: 76px; }
.wchf-ti-tier dl { margin: 0; display: grid; grid-template-columns: 1fr auto; row-gap: 12px; column-gap: 16px; align-items: baseline; }
.wchf-ti-tier dt { font-size: 18px; color: #2B2926; }
.wchf-ti-tier dd { margin: 0; font-family: "Milo W04 Bold", Arial, sans-serif; font-weight: 700; font-size: 28px; color: #283046; }

/* ---- service tables (pricing, add-ons) ---- */
.wchf-ti-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #D1D1D0; border-radius: 8px; overflow: hidden; margin: 0 0 48px; }
.wchf-ti-table thead th { background: #283046; color: #fff; font-family: Ubuntu, Arial, sans-serif; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500; text-align: left; padding: 16px 24px; }
.wchf-ti-table thead th + th { text-align: right; white-space: nowrap; width: 12%; }
.wchf-ti-table tbody th { padding: 22px 24px; border-top: 1px solid #E6E6E6; vertical-align: top; text-align: left; }
.wchf-ti-table td { padding: 22px 24px; border-top: 1px solid #E6E6E6; vertical-align: top; text-align: right; font-family: "Milo W04 Bold", Arial, sans-serif; font-weight: 700; font-size: 26px; color: #283046; white-space: nowrap; width: 12%; }
.wchf-ti-table tbody th strong { display: block; font-family: "Milo W04 Bold", Arial, sans-serif; font-weight: 700; font-size: 22px; color: #283046; margin-bottom: 6px; }
.wchf-ti-table tbody th span { display: block; font-size: 17px; line-height: 1.45; color: #6E6A67; font-weight: 300; max-width: 70ch; }
.wchf-ti-table--list td { font-size: 24px; }

/* ---- two columns of text ---- */
.wchf-ti-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.wchf-ti-twocol h3 { font-size: 28px; margin: 0 0 12px; }
.wchf-ti-twocol p { font-size: 18px; line-height: 1.45; }
.wchf-ti-twocol--wide { gap: 80px; align-items: start; }
.wchf-ti-twocol--wide h2 { margin-bottom: 20px; }
.wchf-ti-twocol--wide .dc-btn { margin-top: 10px; display: inline-block; }
.wchf-ti-arrowlink { display: inline-block; margin-top: 6px; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; color: #45547A; text-decoration: none; }
.wchf-ti-arrowlink::after { content: "\2192"; margin-left: 10px; }
.wchf-ti-arrowlink:hover { color: #283046; }
.wchf-ti-list { margin: 0; padding-left: 22px; }
.wchf-ti-list li { font-size: 18px; line-height: 1.45; margin-bottom: 12px; }

/* ---- what's included comparison ---- */
.wchf-ti-includes { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #D1D1D0; border-radius: 8px; overflow: hidden; }
.wchf-ti-includes thead th { background: #283046; color: #fff; font-family: Ubuntu, Arial, sans-serif; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500; padding: 16px 24px; text-align: left; }
.wchf-ti-includes thead th + th { text-align: center; width: 22%; }
.wchf-ti-includes tbody th { text-align: left; font-weight: 400; font-size: 18px; color: #2B2926; padding: 16px 24px; border-top: 1px solid #E6E6E6; }
.wchf-ti-includes td { text-align: center; padding: 16px 24px; border-top: 1px solid #E6E6E6; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; font-weight: 500; }
.wchf-ti-includes td.yes { color: #283046; }
.wchf-ti-includes td.yes::before { content: "\2713"; display: inline-block; width: 26px; height: 26px; line-height: 26px; border-radius: 50%; background: #FCD21F; color: #283046; font-weight: 700; margin-right: 10px; font-size: 16px; }
.wchf-ti-includes td.no { color: #9398A1; }
.wchf-ti-notincluded { margin-top: 40px; max-width: 820px; }
.wchf-ti-notincluded h3 { font-size: 26px; margin: 0 0 14px; }
.wchf-ti-notincluded li { font-size: 18px; line-height: 1.45; margin-bottom: 10px; }
.wchf-ti-notincluded a { color: #45547A; text-decoration: underline; }



/* ---- home theatre price list inside the split block ---- */
.wchf-ti-pricelist { margin: 24px 0 8px; display: grid; grid-template-columns: 1fr auto; column-gap: 24px; row-gap: 0; border-top: 1px solid #E6E6E6; }
.wchf-ti-pricelist dt, .wchf-ti-pricelist dd { padding: 12px 0; border-bottom: 1px solid #E6E6E6; margin: 0; font-size: 17px; line-height: 1.35; }
.wchf-ti-pricelist dd { font-family: "Milo W04 Bold", Arial, sans-serif; font-weight: 700; color: #283046; font-size: 20px; text-align: right; white-space: nowrap; }
.wchf-ti-theatre .text p { font-size: 20px; }

/* ---- FAQ: native details, styled like the site's FAQ page ---- */
.wchf-ti-faq { max-width: 980px; }
.wchf-ti-faq details { border-bottom: 1px solid #D1D1D0; }
.wchf-ti-faq details:first-child { border-top: 1px solid #D1D1D0; }
.wchf-ti-faq summary { cursor: pointer; list-style: none; padding: 22px 56px 22px 0; position: relative; font-family: "Milo W04 Bold", Arial, sans-serif; font-weight: 700; font-size: 24px; line-height: 1.25; color: #283046; }
.wchf-ti-faq summary::-webkit-details-marker { display: none; }
.wchf-ti-faq summary::after { content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 1px solid #45547A; color: #45547A; text-align: center; line-height: 34px; font-size: 24px; font-family: Ubuntu, Arial, sans-serif; font-weight: 300; }
.wchf-ti-faq details[open] summary::after { content: "\2212"; background: #45547A; color: #fff; }
.wchf-ti-faq details p { margin: 0 0 24px; font-size: 18px; line-height: 1.5; max-width: 80ch; }

/* ---- consultation band + form ---- */
#consultation.dc-cta { margin-bottom: 0; }
.wchf-ti-formsection { padding-top: 56px; background: #F7F7F7; }
.wchf-ti-form { max-width: 860px; margin: 0 auto; background: #fff; border: 1px solid #D1D1D0; border-radius: 8px; padding: 40px; }
.wchf-ti-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; margin-bottom: 28px; }
.wchf-ti-form label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 500; color: #283046; }
.wchf-ti-form__full { grid-column: 1 / -1; }
.wchf-ti-form input, .wchf-ti-form select, .wchf-ti-form textarea { font-family: Ubuntu, Arial, sans-serif; font-size: 17px; font-weight: 300; color: #2B2926; padding: 14px 16px; border: 1px solid #C9CDD6; border-radius: 4px; background: #fff; width: 100%; box-sizing: border-box; }
.wchf-ti-form input:focus, .wchf-ti-form select:focus, .wchf-ti-form textarea:focus { outline: 2px solid #FCD21F; outline-offset: 1px; border-color: #45547A; }
.wchf-ti-form .dc-btn { border: 0; cursor: pointer; font-family: "Milo W04 Medium", Arial, sans-serif; }
.wchf-ti-form__note { margin: 18px 0 0; font-size: 15px; color: #6E6A67; }

/* ---- fine print ---- */
.wchf-ti-fineprint { padding: 40px 0 10px; }
.wchf-ti-fineprint p { font-size: 14px; line-height: 1.5; color: #6E6A67; max-width: 1100px; margin: 0; }

/* ---- responsive ---- */
@media (max-width: 1099px) {
  .wchf-ti-steps .dc-how-it-works-section-box { flex: 0 0 calc(50% - 12px); max-width: calc(50% - 12px); }
  .wchf-ti-cards, .wchf-ti-tiers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .wchf-ti-section { padding: 48px 0; }
  .wchf-ti-section > .inner { padding: 0 25px; }
  .wchf-ti-heading p, .wchf-ti-hero .text, .wchf-ti-steps .inner:first-child p, .wchf-ti-theatre .text p { font-size: 18px; }
  .wchf-ti-cards, .wchf-ti-tiers, .wchf-ti-twocol, .wchf-ti-form__grid { grid-template-columns: 1fr; }
  .wchf-ti-twocol--wide { gap: 40px; }
  .wchf-ti-steps .dc-how-it-works-section-box { flex: 0 0 100%; max-width: 100%; }
  .wchf-ti-table thead { display: none; }
  .wchf-ti-table, .wchf-ti-table tbody, .wchf-ti-table tr, .wchf-ti-table th, .wchf-ti-table td { display: block; width: auto; text-align: left; }
  .wchf-ti-table tr { border-top: 1px solid #E6E6E6; padding: 16px 0; }
  .wchf-ti-table tbody th { border: 0; padding: 4px 20px 10px; }
  .wchf-ti-table td { border: 0; padding: 6px 20px; font-size: 22px; white-space: normal; display: flex; justify-content: space-between; align-items: baseline; }
  .wchf-ti-table td::before { content: attr(data-label); font-family: Ubuntu, Arial, sans-serif; font-weight: 300; font-size: 16px; color: #6E6A67; }
  .wchf-ti-includes thead th + th { width: 30%; padding: 12px 8px; font-size: 12px; }
  .wchf-ti-includes tbody th, .wchf-ti-includes td { padding: 12px 10px; font-size: 15px; }
  .wchf-ti-includes td { font-size: 0; }
  .wchf-ti-includes td::before { font-size: 15px; margin: 0; }
  .wchf-ti-includes td.no::before { content: "\2013"; display: inline-block; width: 26px; height: 26px; line-height: 26px; border-radius: 50%; background: #E6E6E6; color: #6E6A67; font-size: 15px; }
  .wchf-ti-form { padding: 28px 22px; }
  .wchf-ti-faq summary { font-size: 20px; }
  .wchf-ti-ph--hero { min-height: 220px; }
}

/* ---- form submit: the theme styles a.dc-btn only, so the button gets the same look here ---- */
.wchf-ti-form button.dc-btn { display: inline-block; background: #FCD21F; color: #283046; font-family: "Milo W04 Medium", Arial, sans-serif; font-size: 18px; letter-spacing: 1px; line-height: 20px; text-transform: uppercase; text-align: center; padding: 15px 32px; min-width: 216px; border: 0; border-radius: 4px; cursor: pointer; transition: background .2s, color .2s; }
.wchf-ti-form button.dc-btn:hover, .wchf-ti-form button.dc-btn:focus-visible { background: #283046; color: #fff; }
.wchf-ti-form button.dc-btn:active { transform: translateY(1px); }
.wchf-ti-form button.dc-btn:focus-visible { outline: 2px solid #FCD21F; outline-offset: 2px; }

/* ---- mobile: the service table already lists every price by size, so the tier cards step aside ---- */
@media (max-width: 767px) {
  .wchf-ti-tiers, .wchf-ti-note { display: none; }
  .wchf-ti-table { margin-bottom: 40px; }
}

/* ---- the real images (they replace the dashed placeholders) ---- */
.wchf-ti-img, .wchf-ti-img img { display: block; width: 100%; height: auto; }
.wchf-ti-img--hero, .wchf-ti-img--hero img { height: 100%; object-fit: cover; }
.wchf-ti-img--43 img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.wchf-ti-img--32 img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px 8px 0 0; }
@media (max-width: 767px) { .wchf-ti-img--43 img, .wchf-ti-img--hero img { aspect-ratio: 4 / 5; } }

/* ---- where we install: the van photo beside the text ---- */
.wchf-ti-where__sub { margin-top: 40px !important; font-size: 24px !important; }
.wchf-ti-where__photo .wchf-ti-img { border-radius: 8px; }
.wchf-ti-where__photo .wchf-ti-ph { aspect-ratio: 3 / 2; border-color: #FCD21F; background: repeating-linear-gradient(135deg, #3A4A70 0 14px, #45547A 14px 28px); color: #fff; }
.wchf-ti-where__photo .wchf-ti-ph span { color: #FCD21F; } .wchf-ti-where__photo .wchf-ti-ph em { color: #C3CBDA; }
.wchf-ti-caption { margin: 14px 0 0 !important; font-size: 16px !important; color: #C3CBDA !important; }
@media (max-width: 767px) { .wchf-ti-where__photo { order: -1; } }

/* ---- hero crop: keep the installer at the right of the photo fully in the panel on 1440 px screens ---- */
.wchf-ti-hero .wchf-ti-img--hero img { object-position: 72% 50%; }
@media (max-width: 767px) { .wchf-ti-hero .wchf-ti-img--hero img { object-position: 50% 50%; } }

/* Closing tiles under the FAQ (brackets, delivery information, FAQs), as on Retravision */
.wchf-ti-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.wchf-ti-tile { display:block; background:#E4E9F7; border-radius:8px; padding:28px 28px 24px; text-decoration:none; color:#283046; transition:background .2s; }
.wchf-ti-tile:hover, .wchf-ti-tile:focus-visible { background:#C9D3EF; color:#283046; }
.wchf-ti-tile span { display:block; font-family:"Milo W04 Bold",Arial,sans-serif; font-size:22px; line-height:1.2; margin-bottom:10px; }
.wchf-ti-tile strong { display:inline-block; font-family:"Milo W04 Medium",Arial,sans-serif; font-size:14px; letter-spacing:1px; text-transform:uppercase; color:#45547A; }
@media (max-width:767px){ .wchf-ti-tiles { grid-template-columns:1fr; gap:14px; margin-top:32px; } }

/* Hero "See the prices" (dc-btn black-btn): preserve the colour swap on hover.
   The theme's .dc-titlebox button rule is more specific than a.dc-btn.black-btn:hover
   and pins the text yellow, so on the yellow hover background the label disappears.
   Scope to the hero and restore the intended swap: dark text on the yellow hover. */

/* Hero "See the prices" (dc-btn black-btn): keep the colour swap on hover.
   A general .dc-titlebox .content .button-wrapper a.dc-btn rule pins the label yellow and
   out-specifies a.dc-btn.black-btn:hover, so on the yellow hover the text vanishes. Scope to the
   hero titlebox and force the dark label (the colour and background simply switch on hover). */
.dc-titlebox.wchf-ti-hero .button-wrapper a.dc-btn.black-btn:hover,
.dc-titlebox.wchf-ti-hero .button-wrapper a.dc-btn.black-btn:focus-visible {
  color: #141414 !important;
  background: #FCD21F;
}

/* "Find your store" (dc-btn) in the navy Where-we-install band: on hover the background goes
   white and the label keeps its resting colour (#283046); the theme's default hover would turn
   the text white and make it vanish on white. */
.wchf-ti-section--navy .wchf-ti-twocol a.dc-btn:hover,
.wchf-ti-section--navy .wchf-ti-twocol a.dc-btn:focus-visible {
  background: #fff;
  color: #283046;
}


/* ==== ACF builder wrapper neutraliser (installation page) — added 08-10 ====
   The theme wraps every text_block_section in .dc-text-block > .inner (max-width 1230px + padding),
   which boxed our full-width bands. Collapse those wrappers on this page only so the wchf-ti / dc-*
   sections render edge-to-edge exactly as designed — each already self-constrains its own .inner. */
body.tv-installation .dc-text-block { padding: 0 !important; margin: 0 !important; background: none !important; }
body.tv-installation .dc-text-block > .inner,
body.tv-installation .dc-text-block > .inner > .items,
body.tv-installation .dc-text-block > .inner > .items > .item { display: contents !important; }

/* ==== Theme-layout two-column sections ====
   On native builder pages the theme prints the flex <style> inline per layout; our page carries the
   markup inside a wysiwyg so that inline style is absent and the base flex loses. Force it here. */
body.tv-installation .dc-image-text-box-new > .inner { display: flex !important; flex-wrap: nowrap; gap: 20px; align-items: center; }
body.tv-installation .dc-image-text-box-new.image_left > .inner { flex-direction: row-reverse !important; }
body.tv-installation .dc-image-text-box-new > .inner > .left,
body.tv-installation .dc-image-text-box-new > .inner > .right { width: 50% !important; box-sizing: border-box; }
@media only screen and (max-width: 849px) {
  body.tv-installation .dc-image-text-box-new > .inner { flex-direction: column !important; }
  body.tv-installation .dc-image-text-box-new > .inner > .left,
  body.tv-installation .dc-image-text-box-new > .inner > .right { width: 100% !important; }
}

/* Hero: content left, image right */
body.tv-installation .dc-titlebox.wchf-ti-hero > .inner { display: flex !important; gap: 40px; align-items: center; }
body.tv-installation .dc-titlebox.wchf-ti-hero > .inner > .content { flex: 1 1 50%; max-width: 50%; }
body.tv-installation .dc-titlebox.wchf-ti-hero > .inner > .image-wrapper { flex: 1 1 50%; max-width: 50%; margin: 0; }
@media only screen and (max-width: 849px) {
  body.tv-installation .dc-titlebox.wchf-ti-hero > .inner { flex-direction: column !important; }
  body.tv-installation .dc-titlebox.wchf-ti-hero > .inner > .content,
  body.tv-installation .dc-titlebox.wchf-ti-hero > .inner > .image-wrapper { max-width: 100%; }
}

/* ==== Shortcode price tables (wchf_install_prices) ==== */
body.tv-installation .wchf-ti-sc-table { width: 100%; border-collapse: collapse; margin: 24px 0; background: #fff; font-size: 16px; }
body.tv-installation .wchf-ti-sc-table thead th { background: #283046; color: #fff; text-align: left; padding: 14px 18px; font-weight: 600; }
body.tv-installation .wchf-ti-sc-table tbody th[scope="row"] { text-align: left; font-weight: 600; color: #283046; padding: 14px 18px; border-bottom: 1px solid #e8e8e8; }
body.tv-installation .wchf-ti-sc-table td { padding: 14px 18px; border-bottom: 1px solid #e8e8e8; color: #283046; }
body.tv-installation .wchf-ti-sc-table tbody tr:last-child th,
body.tv-installation .wchf-ti-sc-table tbody tr:last-child td { border-bottom: 0; }