/*** Lead Gear WooCommerce Custom CSS ***/
/* Hide empty product area, but show when Request a Quote form is present (e.g. categories 42, 43, 47 or empty categories) */
.woocommerce.archive .woo-output:not(:has(.products)):not(:has(.form-wrap)) {
    display: none;
}
.woocommerce .f-sidebar .title::before {
    content: '';
    display: block;
    width: 20px;
    height: 48px; /* same as font-size */
    position: absolute;
    top: 0;
    left: -32px;
    background-image: var(--chevron-green);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.woocommerce .woocommerce-info::before {
    color: var(--primary);
}
.woocommerce .product.featured .button::after {
    background-image: var(--chevron-green);
}
.woocommerce {
    & .woocommerce-info {
        border-top-color: var(--primary);
    }

    & #genesis-content {
        max-width: unset;
    }

    /* Shop & Archive Sidebar */
    & .f-sidebar .crosslink p {
        font-size: 28px;
        padding-left: 32px;
    }

    & .f-sidebar .title {
        font-size: 48px;
        position: relative;
    }

    & .f-sidebar a {
        color: inherit;
        position: relative;
        left: 0;
        transition: all 300ms;

        &:hover {
            left: 12px;
        }
    }

    /* Product Card Styling */
    & .products {
        display: grid !important;
        grid-template-columns: repeat(3,1fr);
        gap: 90px 60px;
    }

    & .product {
        float: none !important;
        width: unset !important;
        margin: 0 !important;
        background: none;
        box-shadow: 0 3px 60px rgba(0,0,0,0.08);
        position: relative;
        top: 0;
        transition: all 300ms;

        &:has(a:hover) {
            top: -8px;
            box-shadow: 0 3px 60px rgba(0,0,0,0.16);
        }

        & img {
            position: relative;
            margin-bottom: 0 !important;
            margin-top: -16px !important;
            bottom: -8px;
            border: 0;
            filter: drop-shadow(0 4px 4px rgba(0,0,0,0.4));
        }
    }

    & .product-category .spec-item.main {
        font-size: 50px;
    }

    & .product.featured {
        background-color: var(--primary);
        font-family: 'Bebas Neue Pro';
        font-weight: bold;
        text-transform: uppercase;

        & .product-link {
            background: none;
            color: var(--darkdefault);
            display: flex;
            flex-direction: column;
            height:100%;
        }

        & .small {
            display: block;
            font-size: 40px;
            line-height: 1;
            color: #fff;
            margin-bottom: 8px;
        }

        & .separator {
            margin-top: auto;
        }

        & .large {
            display: block;
            font-size: 80px;
            line-height: 1;
            letter-spacing: 0.225px;
        }

        & .button {
            margin-top: 0 !important;
            margin-bottom: 25px;
            background-color: var(--darkdefault);
            font-size: 32px;
        }
    }

    & .product-specs {
        font-family: 'Bebas Neue Pro';
        text-transform: uppercase;
        margin-bottom: 20px;

        & strong {
            display: inline !important;
        }
    }

    & .spec-item {
        display: block;
        line-height: 1;
        transition: all 300ms;

        &.main {
            font-size: 80px;
            color: var(--darkdefault);
        }

        &.separator {
            font-size: 60px;
            color: var(--primary);
            font-weight: bold;

            & strong {
                display: block !important;
                padding: 12px 0;
                margin: 12px 0;
                font-family: 'Aktiv Grotesk';
                font-size: 24px;
                text-transform: none;
                color: var(--darkdefault);
                border-top: 2px dotted #aaa9a9;
                border-bottom: 2px dotted #aaa9a9;
            }
        }
    }

    & .product-info {
        position: relative;
        z-index: 2;
    }

    & .band {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 50px;
        background-color: var(--primary);
        background-image: url('data:image/svg+xml,<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><line fill="%23fff" stroke="%23fff" stroke-miterlimit="10" y1="100" x2="100"/></svg>');
        background-size: 30px;
        background-position: center;
        transition: all 300ms;
    }

    & .product-link {
        width: 100%;
        padding: 32px 40px;
        background: #fff;
        &:hover {
            & .spec-item.main {
                color: var(--primary);
            }

            & .band {
                background-size: 40px;
            }
        }
    }
    /* Product Page Styling */
    &.single-product #hero {
        position: relative;
    }

    & .hero-inner {
        position: relative;
        z-index: 2;
        justify-content: space-between;
    }

    & .hero-text-wrap .separator {
        display: block;
        margin-bottom: 20px;
    }

    & .hero-content-image-wrap .hero-image img {
        min-width: 500px;
        max-width: 520px;
        position: relative;
        top: -80px;
        filter: drop-shadow(0 4px 4px rgba(0,0,0,0.7));
    }
    &.single-product .add-request-quote-button.button {
        background-color: var(--primary) !important;
        color: #fff !important;
        font-size: 32px;
        padding: 15px 20px;
        border: 0 !important;
        margin: 0;
        &:hover {
            border: 0 !important;
            background-color: var(--darkdefault) !important;
        }
    }

    & .yith_ywraq_add_item_browse_message a {
        color: var(--primary);
        &:hover {
            color: var(--primaryalt);
        }
    }

    & .yith_ywraq_add_item_product_message, .yith_ywraq_add_item_response_message, .yith_ywraq_add_item_browse_message a {
        font-family: 'Bebas Neue Pro';
        text-transform: uppercase;
        font-weight: bold;
        font-size: 32px;
        line-height: 1.2;
    }
    & #product-details-accordion {
        margin-top: 60px;
        & h3 {
            background: var(--darkdefault);
            color: var(--primary);
            font-size: 40px;
            font-weight: bold;
            border: 0;
            border-radius: 0;
            padding: 16px 20px;
            position: relative;
            max-width: 850px;
        }
        &  .ui-accordion-content {
            max-width: 850px;
        }
        & .ui-icon {
            display: none;
        }
    }
    &.single-product .tagline {
        font-size: inherit !important;
        font-family: 'Aktiv Grotesk', sans-serif !important;
        text-transform: none !important;
    }
    & .tagline .hero-phone-cta {
        display: flex;
        align-items: center;
        & > div {
            line-height: 1.265;
        }
        & > div > span {
            color: var(--darkdefault);
            font-size: 20px;
        }
        & .icon {
            background: #fff;
            border-radius: 100%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px;
            transition: all 300ms;
            border: 1px solid var(--cta);
            margin-right: 20px;
            & svg {
                top: 0;
                left: 1px;
                color: var(--darkdefault);
            }
        }
        & a {
            display: flex;
            align-items: center;
            color: var(--darkdefault);
            text-transform: uppercase;
            font-weight: bold;
            font-size: 36px;
            &:hover {
                color: #fff;
            }
        }
    }
}

.woocommerce #product-details-accordion h3::after {
    content: '';
    display: block;
    margin: 0;
    position: absolute;
    top: 50%;
    right: 16px;
    width: 20px;
    height: 30px;
    padding: inherit;
    transform: translateY(-50%);
    background-image: var(--chevron-green);
    background-position: center;
    background-repeat: no-repeat;
    transform-origin: center;
    transition: all 300ms;
}
#product-details-accordion h3:hover::after, #product-details-accordion h3.ui-state-active::after {
    transform: translateY(-50%) rotate(90deg);
}
.woocommerce.single-product #hero::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    pointer-events: none;
    background-color: #000;
    opacity: 0.2;
}
.woocommerce.single-product #hero::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 150px;
    width: 50%;
    height: 100%;
    pointer-events:none;
    background-image: url('/wp-content/uploads/product-hero-chevron.svg');
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Request a Quote Page Styling */
.yith-request-a-quote-page .button:hover::after {
    background-image: var(--chevron-green);
}
.yith-request-a-quote-page {
    & .button {
        font-family: 'Bebas Neue Pro';
        text-transform: uppercase;
        font-weight: bold;
        font-size: 32px !important;
        padding: 15px 20px;
        background: var(--cta) !important;
        &:hover {
            background: var(--darkdefault) !important;
        }
    }

    & .product-name {
        align-content: center;
    }

    & h3.ywraq-form-title {
        display: none;
    }

    & .yith-ywraq-before-table {
        margin-bottom: 32px;
    }

    & #yith-ywraq-form table {
        border: 0;
        /* Reset table styling */
        & tr, & th, & td, & thead, & tbody {
            display: block;
            padding: 0;
            border: 0;
            text-align: left;
        }

        /* Begin new styling */
        & thead {
            display: none;
        }

        & tbody {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px;
        }
        & tr.cart_item {
            display: grid;
            width: fit-content;
            grid-template-areas:
                "image title remove"
                "image quantity quantity"
            ;
            column-gap: 32px;
            box-shadow: 0 3px 60px rgba(0,0,0,0.08);
            width: 100%;
        }

        & td.product-thumbnail {
            grid-area: image;
            & a, & img {
                width: 100%;
            }
        }

        & td.product-name {
            grid-area: title;
            font-family: 'Bebas Neue Pro';
            font-weight: bold;
            text-transform: uppercase;
            font-size: 32px;
            place-self: flex-end;
            width: 100%;
            margin-top: 20px;
            line-height: 1.15;
        }

        & td.product-quantity {
            grid-area: quantity;
            place-self: flex-start;
            margin-bottom: 20px;
        }

        & td.product-remove {
            grid-area: remove;
            width: 100%;
            margin-top: 20px;
            & a {
                place-self: center;
                display: block;
            }
        }
    }
}

/* Breakpoints */
@media only screen and (max-width: 1400px) {
    .woocommerce .product.featured {
        & .large {
            font-size: 60px;
        }

        & .button {
            font-size: 28px;
        }
    }
}

@media only screen and (max-width: 1250px) {
    .woocommerce .products {
        & .spec-item.main {
            font-size: 50px;
        }

        & .spec-item.separator {
            font-size: 36px;
        }

        & .product.featured {
            & .small {
                font-size: 30px;
            }

            & .large {
                font-size: 50px;
            }
        }

        & .button {
            padding: 20px;
            margin-right: 0 !important;
        }
    }

    .woocommerce .products .button::after {
        height: 28px;
    }
}

@media only screen and (max-width: 1200px) {
    .yith-request-a-quote-page #yith-ywraq-form table tbody {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 1165px) {
    .woocommerce .products {
        grid-template-columns: 1fr 1fr;

        & img {
            max-width: 300px;
        }
    }
}

@media only screen and (max-width: 1100px) {
    .woocommerce.single-product #hero {
        min-height: 350px;
        height: auto;
        padding: 40px 5%;

        & .hero-content-image-wrap {
            align-items: center;
        }

        & .hero-image img {
            min-width: unset;
            max-width: 100%;
            width: auto;
            position: static;
        }

        & + .tagline {
            min-height: unset;
        }
    }
}

@media only screen and (max-width: 900px) {
    .woocommerce .products {
        justify-content: center;
        gap: 32px;

        & img {
            max-width: 400px;
        }
    }
}

@media only screen and (max-width: 850px) {
    .woocommerce.single-product #hero .hero-content-image-wrap {
        align-items: flex-start;
    }
}

@media only screen and (max-width: 758px) {
    .woocommerce.single-product #hero .hero-image img {
        width: 250px;
        max-width: 100%;
    }
    .woocommerce.single-product #hero {
        min-height: unset;
    }
    .woocommerce.single-product #hero::after {
        left: 50% !important;
    }
}

@media only screen and (max-width: 750px) {
    .woocommerce .products {
        grid-template-columns: 1fr;

        & .product.featured {
            min-height: 500px;
        }

        & .product {
            max-width: 600px;
        }
    }
}

@media only screen and (max-width: 600px) {
    .yith-request-a-quote-page #yith-ywraq-form table {
        & tr.cart_item {
            display: block;
            box-shadow: none;
            position: relative;
        }

        & td.product-remove {
            position: absolute;
            right: 0;
            top: 20px;
        }
    }
    #yith-ywraq-form .update-list-wrapper {
        justify-content: flex-start !important;
    }
}

@media only screen and (max-width: 500px) {
    .woocommerce .products {
        & .product {
            max-width: 100%;
            width: 100%;
        }

        & .product-link {
            padding: 20px;
        }

        & img {
            max-width: 100%;
        }

        & .spec-item.main {
            font-size: 50px;
        }

        & .spec-item.separator {
            font-size: 36px;
        }
    }

    .woocommerce .products .product.featured span.button::after {
        display: none;
    }

    .woocommerce #hero::before, .woocommerce #hero::after {
        display: none !important;
    }

    .woocommerce #product-details-accordion h3 {
        font-size: 24px;
    }

    .tagline .hero-phone-cta .icon {
        display: none !important;
    }
}

/* Empty Category Page Request Form */
input#gform_submit_button_7 {
    background: var(--cta);
    &:hover{background:var(--darkdefault);}
}