/* Fonts */

@font-face {
    font-family: 'Ernest and Emily Caps';
    src: url('fonts/ErnestandEmilyCaps.woff') format('woff'), url('fonts/ErnestandEmilyCaps.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

@font-face {
    font-family: 'Ernest and Emily';
    src: url('fonts/ErnestandEmily.woff') format('woff'), url('fonts/ErnestandEmily.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Tyopgraghy */

.product-info-wrapper h2, .banner-wrapper span, .top-banner span {
    font-family: 'Ernest and Emily';
    display: block;
    font-size: 4rem;
    line-height: 1.5em;
}

strong {
    font-weight: 600;
}

/* Installation Disclaimer */

.installation-disclaimer {
    border: 3px solid #E8E7F0;
    padding: 2rem;
    margin-bottom: 1rem;
}

.quiz-result .installation-disclaimer a {
    display: inline;
}

.installation-disclaimer h3 {
    margin: 0 0 1rem 0;
}

.installation-disclaimer p {
    margin: 0;
}


/* Progress bar */

.progress-container .progress-bar {
    background: rgba(20,88,145, .6);
}

/* Split panel banner */

.banner-wrapper h1 {
    font-weight: normal;
    font-size: 2.4rem;
    margin-bottom: 1.8rem;
    line-height: 1.2;
}

.banner-wrapper ol {
    counter-reset: step-counter;
    list-style: none;
    padding-left: 3.5rem;
    margin-top: 2rem;
}

.banner-wrapper ol li {
    margin: 0 0 0.5rem 0;
    counter-increment: step-counter;
    position: relative;
}

.banner-wrapper ol li::before {
    content: counter(step-counter);
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: normal;
    position: absolute;
    --size: 2.4rem;
    left: calc(-1 * var(--size) - 10px);
    line-height: var(--size);
    width: var(--size);
    height: var(--size);
    top: 0;
    background: var(--color-branding-primary);
    border-radius: 50%;
    border: 1px solid var(--color-branding-primary);
    text-align: center;
}

/* Launcher banner */


#maincontent .pa-launcher-wrapper {
    display: none;
}


svg {
    background: #ffffff;
    padding: .5rem;
    border-radius: 8px;
}

.pa-launcher-copy {
    padding: 1rem 0;
}

.pa-launcher-copy h3 {
    font-weight: bold;
    line-height: 1.4;
}

a.quiz_launcher {
    font-weight: bold;
}

@media only screen and (min-width: 768px) {

    .pa-launcher-copy {
        padding: 1rem 4rem;
    }

}

/* Why Buy block */

@media only screen and (min-width: 768px) {

    .why-buy-wrapper {
        background: var(--color-branding-primary);
        background: linear-gradient(180deg, var(--color-branding-primary) 0%, var(--color-branding-primary) 70%, rgba(255,255,255,1) 70%, rgba(255,255,255,1) 100%);
    }

    .why-buy-reasons {
        display: flex;
        gap: 2rem;
        flex-direction: row;
        padding: 0 2rem;
        margin-top: 3rem;
    }

    .why-buy-reasons > * {
        background: #fff;
        width: 100%;
        padding: 2rem;
        -webkit-box-shadow: 10px 10px 32px 0px rgba(0,0,0,0.31);
        -moz-box-shadow: 10px 10px 32px 0px rgba(0,0,0,0.31);
        box-shadow: 10px 10px 32px 0px rgba(0,0,0,0.31);
    }

    .why-buy-wrapper .inner-wrapper {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        margin-bottom: 3rem;
    }

    .why-buy-header h2 {
        color: #ffffff;
        padding-top: 3rem;
    }
    
    
}

/* All blocks */


.product-info-wrapper h2, .banner-wrapper span {
    font-size: 4rem;
}

/* Custom banner */

.top-banner {
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--color-branding-primary);
    padding-bottom: 2rem;
}

.top-banner h1 {
    margin: 1.5rem;
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 1.2;
}

.top-banner h1 span {
    font-weight: normal;
}


.top-banner .cards {
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

.circle-number {
    display: inline-block;
    min-width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: var(--color-branding-primary);
    color: white;
    text-align: center;
    line-height: 4rem;
    font-size: 2rem;
    font-weight: bold;
}

.top-banner .card .copy {
    text-align: center;
    margin: 2rem 0;
}

.top-banner p.topline {
    color: var(--color-branding-primary);
    margin: 0;
    font-weight: bold;
}

.top-banner .card .copy {
    text-align: center;
    margin: 0 1.5rem;
    color: var(--color-dark-gray);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.top-banner .card .copy strong {
    color: #000;
}

.top-banner .card .copy a {
   text-decoration: underline;
   color: var(--color-dark-gray);
}

.top-banner .copy-inner-wrap {
    text-align: left;
}

.top-banner .card img {
  display: none;
  width: 100%;
}

.top-banner .card:first-child img {
    display: block;
    margin-bottom: 2rem;
}

@media only screen and (min-width: 768px) {

    .top-banner {
        margin-bottom: 0;
        border-bottom: unset;
        padding-bottom: 0;
    }

    .top-banner .card img {
        display: block;
    }
    
    .top-banner .card {
        display: flex;
    }

    .top-banner .card > *, .top-banner .card img {
        width: 50%;
    }

    .top-banner .card .copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .top-banner .copy-inner-wrap {
        text-align: center;
    }

    .top-banner .card:first-child img {
        margin-bottom: 0;
    }

    .top-banner .card:nth-child(2) {
        display: flex;
        flex-direction: row-reverse;
    }

    .top-banner span {
        display: inline;
        padding-right: 1rem;
    }

    .top-banner .cards {
        gap: 0;
    }
}

@media only screen and (min-width: 1024px) {

    .top-banner {
        max-width: var(--width-content-max);
        width: calc(100% - 4rem);
        margin: 5rem auto;
    }

    .top-banner .cards {
        display: flex;
        flex-direction: row;
        gap: 2rem;
    }

    .top-banner .card:nth-child(2),
    .top-banner .card {
        display: flex;
        flex-direction: column;
        -webkit-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.4);
        -moz-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.4);
        box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.4);
        width: 100%;
    }

    .top-banner .card > *, .top-banner .card img {
        width: 100%;
    }

    .top-banner .card .copy {
        width: calc(100% - 4rem);
        margin: 2rem;
    }

    #maincontent .pa-launcher-wrapper {
        display: block;
    }

    

}


/* Accordion */

.product-info-wrapper h2.copy-title::after {
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 3rem;
}

/* Product page */

.price-box.price-final_price::before {
    content: 'Including $900 Pacific Power discount';
    display: block;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.product-info-main .page-title-wrapper .page-title {
    line-height: 1.2;
}

.product-info-main .page-title-wrapper .page-title {
    line-height: 1.2;
    font-size: var(--text-size-h2);
}

.product-info-main .price-box .old-price .price-wrapper .price,
.old-price #old-price-1 {
    font-size: 1.6rem;
    color: red;
}

.old-price #old-price-1 {
    text-decoration: line-through;
}

.old-price span.price-container.price-final_price.tax.weee {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

span.old-price.sly-old-price.no-display {
    display: block;
}

/* Cart */

.checkout-cart-index h1.page-title {
    margin-bottom: 2rem;
}

.checkout-cart-index .product-item-name a {
    display: inline;
    line-height: normal;
}

div[name="shippingAddress.bss_custom_field[checkbox_tc]"] {
    padding-top: 2rem;
}

div[name="shippingAddress.bss_custom_field[checkbox_tc]"] .control p {
 margin: 0 0 0 .5rem; 
}

div.field._required[name="shippingAddress.bss_custom_field[checkbox_tc]"] > label.label[data-bind*="element.uid"],
div.field._required[name="shippingAddress.bss_custom_field[hpwh_tc]"] > label.label[data-bind*="element.uid"]{
    display: none;
}


td.col-carrier {
    width: 6rem;
    font-weight: 600;
}

.minicart-items .product-item-name {
    font-weight: 400;
    margin: 0 0 10px;
    display: inline;
    line-height: normal;
}

.table-checkout-shipping-method tbody td {
    border-top: unset;
    padding-bottom: 0;
    padding-top: 2rem;
}

td.col.col-custom {
    border-bottom: 1px solid #cecece;
    margin-bottom: 2rem;
}

input[name="street[0]"] {
    margin-bottom: 2rem
 }

.no-quiz-disclaimer h3 {
    margin-top: 0;
    font-weight: 600;
}

.no-quiz-disclaimer {
    border: 1px solid #cecece;
    background: #fff;
    padding: 2rem;
}

.no-quiz-disclaimer ol {
    padding: 0 0 1rem 2rem;
}

.fieldset > .field[name="shippingAddress.bss_custom_field[data_sharing_consent]"]:not(.choice) > .label {
    text-align: left;
}

/* Header */

@media only screen and (min-width: 1024px) {

    .preheader {
        display: none;
    }

}


/* Top banners */

.catalog-product-view .top-container {
    margin: 0 auto 2rem;
}

.catalog-product-view h1 {
    font-size: 1.6rem;
    text-transform: uppercase;
    font-weight: bold;
    line-height: normal;
    text-wrap: pretty;
}


.catalog-product-view .hp-top-banner h1 span {
    font-size: 50px;
    text-transform: lowercase;
    font-family: 'Ernest and Emily';
    src: url('fonts/ErnestandEmily.woff') format('woff'), url('fonts/ErnestandEmily.ttf') format('truetype');
    font-weight: 400;
    display: block;
    font-style: normal;
    line-height: normal;
}

.catalog-product-view .card.hp-top-banner.inline-img {
    background: unset;
}

.catalog-product-view .banner-grid .card-set {
    gap: 4rem;
}

.catalog-product-view .banner-grid .card-set > .card {
    -webkit-box-shadow: 0px 0px 15px 4px rgba(0,0,0,0.36); 
    box-shadow: 0px 0px 15px 4px rgba(0,0,0,0.36);
}

.banner-grid h2.as-h3 {
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 0;
}

.card.hp-top-banner.inline-img.pa-launch {
    background: var(--color-branding-secondary);
    color: #fff;
}


.product.description .pa-launch h2 {
    font-weight: bold;
    text-wrap: pretty;
    margin: 0;
}

.product.description .pa-launch p {
    font-size: 2rem;
    margin: 2rem 0;
}

.pa-launcher-button {
    width: fit-content;
    background: var(--color-link-dark-background);
    padding: 2rem;
}

.pa-launch .copy {
    padding: 2rem 0 4rem;
}

@media only screen and (min-width: 768px) {

    .catalog-product-view .top-container {
        margin: 5rem auto;
    }

    .catalog-product-view h1 {
        font-size: 2rem;
    }

    .catalog-product-view .hp-top-banner h1 span {
        font-size: 90px;
    }

    .catalog-product-view .card.hp-top-banner.inline-img {
        margin-bottom: 4rem;
    }

    .pa-launch .copy {
        padding: 8rem;
    }

    .product.description .pa-launch p {
        margin: 4rem 0;
    }


}


/* Gate */

.gate .copy p {
    margin-bottom: 1rem;
}

.gate .form .radio-group > span, 
.gate .form > label {
    font-weight: bold;
    margin-bottom: .5rem;
    margin-top: 2rem;
    line-height: 1.3;
    display: block;
}

.radio-wrapper {
    display: flex;
    gap: 2rem;
}

.gate h1 {
    font-size: 2.5rem;
}

.gate h2 {
    margin-top: 2rem;
    font-weight: bold;
    font-size: var(--text-size-h3);
    line-height: 1.2;
    margin-bottom: 0;
}

.gate input.submit {
    padding: 2rem;
    font-weight: 600;
    color: var(--color-button-text);
    background: var(--color-button-background);
    border: none;
    width: fit-content;
    margin: 3rem auto 0;
}

.zip-custom-error {
    padding: .5rem;
}

@media only screen and (min-width: 768px) {

    .gate .copy {
        border-right: 1px solid var(--color-mid-gray);
        padding-right: 3rem;
    }

}