/* Override WooCommerce styles */

/* Search form */

.searchform button {
    outline: none;
    border: none;
    background: var(--secondary);
    color: var(--light);
    padding: 0.4rem 1rem;
    border-radius: var(--border-radius);
    transition: var(--main-transition);
}

.searchform button:hover,
.searchform button:active {
    background: var(--secondary);
}

/* Shop page */

.woocommerce.columns-4 {
    padding: 7rem 0;
}

.woocommerce ul.products li.product a img {
    border-radius: var(--border-radius);
    height: 220px;
    object-fit: cover;
}

.woocommerce ul.products li.product a {
    text-align: center;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.1rem;
    color: var(--gray-dark);
    font-weight: 400;
}

.woocommerce ul.products li.product .price {
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    text-transform: uppercase;
    color: var(--primary);
    background-color: var(--lightgray);
    width: fit-content;
    margin: 0 auto;
    transition: var(--main-transition);
}

.woocommerce ul.products li.product .button {
    display: none;
}

.woocommerce .woocommerce-ordering select {
    border: 1px solid var(--light);
    border-radius: var(--border-radius);
    background-color: var(--darkwhite);
    outline: none;
    color: var(--gray);
    padding: 0.3rem 1rem;
    cursor: pointer;
}

.woocommerce span.onsale {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--danger);
    height: 4rem;
    width: 4rem;
}

.woocommerce-breadcrumb,
.woocommerce-products-header {
    display: none;
}

ul.products.columns-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    list-style: none;
    text-align: center;
    padding-left: 0;
    margin: 2rem 0;
    border-top: 1px solid var(--lightgray);
    padding-top: 3rem;
}

@media screen and (min-width: 768px) {
    ul.products.columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1400px) {
    ul.products.columns-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

ul.products.columns-4 li.product {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    height: fit-content;
    transition: var(--main-transition);
}

ul.products.columns-4 li.product:hover {
    transform: translateY(-.2rem);
}

ul.products.columns-4 li.product a img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

ul.products.columns-4 li.product a h2.woocommerce-loop-product__title {
    margin-bottom: 0;
    padding: 1.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--secondary);
}

ul.products.columns-4 li.product a span.price {
    display: block;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    text-transform: uppercase;
    color: var(--primary);
    background-color: var(--lightgray);
    transition: var(--main-transition);
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 1.5rem;
}

ul.products.columns-4 li.product .button {
    display: none !important;
}

ul.products.columns-4 li.product .button:hover {
    background-color: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
}

ul.products.columns-4 li.product .onsale,
.product .onsale {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--danger);
    color: var(--white);
    padding: .3rem .7rem;
    border-radius: var(--border-radius);
    margin: .3rem;
    font-size: .8rem;
    text-transform: uppercase;
}

p.woocommerce-result-count,
form.woocommerce-ordering {
    text-align: center;
}

form.woocommerce-ordering {
    margin-bottom: 1rem;
}

form.woocommerce-ordering select.orderby {
    border: 1px solid var(--light);
    border-radius: var(--border-radius);
    background-color: var(--darkwhite);
    outline: none;
    padding: .3rem 1rem;
}

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

    p.woocommerce-result-count,
    form.woocommerce-ordering {
        text-align: left;
    }

    p.woocommerce-result-count {
        display: inline-block;
        margin-right: 1rem;
    }

    form.woocommerce-ordering {
        display: inline-block;
    }
}

/* Pagination */
.woocommerce-pagination {
    display: flex;
    justify-content: center;
}

.woocommerce-pagination .page-numbers {
    list-style: none;
    padding: .5rem 1rem;
    margin: 1rem 0;
    color: var(--dark);
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .2rem;
    border-radius: var(--border-radius);
    transition: var(--main-transition);
}

.woocommerce-pagination a.page-numbers {
    border: 1px solid #ccc;
}

.woocommerce-pagination .page-numbers li a:hover {
    background-color: var(--lightgray);
}

.woocommerce-pagination .page-numbers .current {
    background-color: var(--primary);
    color: var(--white);
}

/* Widget Sidebar */

#sidebar .wp-block-heading {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

#sidebar ul {
    list-style: none;
    padding-left: 0;
}

#sidebar>ul {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

#sidebar ul>div ul li {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    margin: .5rem 0;
    background-color: var(--lightgray);
    font-weight: 700;
    transition: var(--main-transition);
}

#sidebar ul>div ul li:hover,
#sidebar ul>div ul li:active {
    background-color: var(--light);
    transform: translateX(.5rem);
}

#sidebar ul>div ul li a {
    width: 80%;
    display: inline-flex;
    padding: 1rem;
    color: var(--dark);
    transition: var(--main-transition);
}

.wp-block-woocommerce-product-categories {
    margin-left: 1rem;
}

.wp-block-woocommerce-product-categories img {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover !important;
    border-radius: 50%;
}

.wc-block-product-categories-list--has-images .wc-block-product-categories-list-item__image {
    border: none !important;
}

#sidebar ul>div .wc-block-components-filter-reset-button {
    display: block;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    color: var(--primary);
    background-color: var(--lightgray);
    width: fit-content;
    transition: var(--main-transition);
}

#sidebar ul>div .wc-block-components-filter-reset-button:hover {
    background-color: var(--light);
}

/* Single product page */

.product .woocommerce-product-gallery__wrapper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.product .woocommerce-product-gallery__wrapper>div.woocommerce-product-gallery__image:first-child {
    grid-column: 1/6;
    height: auto;
    object-fit: cover;
    overflow: hidden;
}

.product .woocommerce-product-gallery__wrapper>div.woocommerce-product-gallery__image:first-child img {
    height: auto;
    transition: var(--main-transition);
}

.product .woocommerce-product-gallery__wrapper>div.woocommerce-product-gallery__image:first-child img:hover {
    transform: scale(1.05);
}

.product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
    width: 100%;
    height: 60px;
    box-shadow: var(--box-shadow);
    object-fit: cover;
    border-radius: var(--border-radius);
}

@media screen and (min-width: 992px) {
    .product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
        height: 80px;
        transition: var(--main-transition);
    }

    .product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img:hover {
        transform: translateY(-5px);
    }
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    background: var(--white);
    transition: var(--main-transition);

    &:hover {
        background: var(--lightgray);
    }
}

.summary.entry-summary p.price .woocommerce-Price-amount.amount {
    font-weight: 700;
    font-size: 2rem;
}

.summary.entry-summary .variations_form {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1rem;
}

.summary.entry-summary .variations_form .label label {
    margin-bottom: 0;
}

.summary.entry-summary .variations_form .value .reset_variations {
    margin-left: 1rem;
}

.summary.entry-summary .woocommerce-variation-add-to-cart.variations_button {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.variations select {
    border: 1px solid var(--light);
    border-radius: var(--border-radius);
    background-color: var(--darkwhite);
    outline: none;
    color: var(--gray);
    padding: 0.3rem 1rem;
    cursor: pointer;
}

.woocommerce .quantity .qty,
.summary.entry-summary .input-text.qty.text {
    width: 6rem;
    margin-bottom: .5rem;
}

.summary.entry-summary .single_add_to_cart_button {
    padding: .5rem 1rem;
    font-weight: 700;
    background-color: var(--primary);
    color: var(--white);
    border: none;
    outline: none;
    border-radius: var(--border-radius);
}

.summary.entry-summary .single_add_to_cart_button::before {
    content: '\f07a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 700;
    margin-right: .8rem;
    font-size: .8rem;
}

/* Original price (Not in sale) */
.price del .woocommerce-Price-amount {
    margin-left: .5rem;
    color: var(--gray);
    opacity: .3;
    margin-right: 1rem;

    bdi {
        text-decoration: line-through !important;
    }
}

.summary.entry-summary {
    span.price {
        padding: .5rem 0 1rem 0;
        font-weight: 700;
        font-size: 1.5rem;
    }
}

.woocommerce div.product form.cart .button {
    background-color: var(--primary);
}

.pswp__zoom-wrap img {
    border-radius: var(--border-radius);
}

.pswp__bg {
    background-color: var(--darktransparent);
}

.pswp__caption {
    display: none;
}

.summary.entry-summary .product_meta {
    border-top: 1px solid var(--light);
    margin-top: 2rem;
    padding-top: 2rem;
    display: flex;
    gap: 1rem;
}

.summary.entry-summary .product_meta span {
    font-weight: 700;
}

.summary.entry-summary .product_meta span>span,
.summary.entry-summary .product_meta span>a {
    font-weight: 400;
}

/* Single products tabs */

.woocommerce-tabs {
    padding: 2rem 0 0;
}

.woocommerce-tabs ul.tabs {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    border-bottom: 1px solid var(--lightgray);
}

.woocommerce-tabs ul.tabs li {
    flex: 1;
}

.woocommerce-tabs ul.tabs li a {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 1rem 0;
    font-weight: 700;
    border-bottom: 3px solid transparent;
    transition: all 0.25s ease-in-out;
}

.woocommerce-tabs ul.tabs li.active a {
    border-bottom-color: var(--primary);
}

.woocommerce-tabs .woocommerce-Tabs-panel.woocommerce-Tabs-panel--description,
.woocommerce-tabs .woocommerce-Tabs-panel.woocommerce-Tabs-panel--additional_information {
    padding: 2rem 0 0;
}

.woocommerce-tabs div.woocommerce-Tabs-panel {
    border-top: none;
}

.woocommerce-tabs div.woocommerce-Tabs-panel h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.woocommerce-tabs div.woocommerce-Tabs-panel table {
    width: 100%;
    border-collapse: collapse;
    border-radius: var(--border-radius);
}

.woocommerce-tabs div.woocommerce-Tabs-panel th,
.woocommerce-tabs div.woocommerce-Tabs-panel td {
    padding: 1rem;
    border: 1px solid #ddd;
}

.woocommerce-tabs div.woocommerce-Tabs-panel td p {
    margin-bottom: 0;
}

.woocommerce-tabs div.woocommerce-Tabs-panel ol.commentlist {
    list-style: none;
    padding-left: 0;
}

/* Reviews tab */

.woocommerce-tabs div.woocommerce-Tabs-panel ol.commentlist .comment-text {
    font-weight: 400;
}

.woocommerce-tabs div.woocommerce-Tabs-panel .comment-reply-title {
    font-size: 1.5rem;
}

.woocommerce-tabs div.woocommerce-Tabs-panel .comment-form-rating .stars a {
    padding: .5rem 1rem;
    margin: .5rem 0 0 0;
    color: var(--dark);
    border: 1px solid var(--light);
    border-radius: var(--border-radius);
    transition: var(--main-transition);
    display: inline-block;
}

.woocommerce-tabs div.woocommerce-Tabs-panel .comment-form-rating .stars a:hover {
    background-color: var(--lightgray);
}

/* Cart page */

.wp-block-woocommerce-cart.alignwide {
    padding: 7rem 0 0;
}

.editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__header,
table.wc-block-cart-items .wc-block-cart-items__header span,
.is-large.wc-block-cart .wc-block-cart__totals-title {
    font-size: 1rem !important;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img {
    border-radius: var(--border-radius);
}

.editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link,
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
    background: var(--danger) !important;
    color: var(--white) !important;
    border-radius: 20px !important;
    padding: 0.4rem 2rem !important;
    text-decoration: none !important;
    transition: var(--main-transition) !important;

    &:hover {
        background: var(--gray-dark) !important;
    }
}

.is-large.wc-block-cart .wc-block-components-sidebar {
    background-color: var(--lightgray);
    border-radius: var(--border-radius);
    padding: 1rem;
}

.wc-block-cart__submit {
    background: var(--success);
    border-radius: var(--border-radius);
    transition: var(--main-transition);

    a {
        color: var(--white) !important;

    }

    &:hover {
        background: var(--gray-dark);
    }
}

/* Checkout page */

.wp-block-woocommerce-checkout {
    padding: 7rem 0 !important;
    
    .wc-block-must-login-prompt {
        a {
            font-weight: 700;
        }
    }
}

.wc-block-components-form input,
.wc-block-components-form textarea {
    border-color: var(--light) !important;
}

.wc-block-checkout__actions_row button,
.wc-block-components-totals-coupon__content button {
    outline: none !important;
    border: none !important;
    background-color: var(--success) !important;
    color: var(--white) !important;
    border-radius: 20px !important;
    padding: .4rem 2rem !important;
    transition: var(--main-transition) !important;

    &:hover,
    &:active {
        background-color: var(--dark) !important;
    }
}

/* After checkout */

.woocommerce-order {
    padding: 7rem 0;
}

.woocommerce-order .woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
    font-size: 2rem;
    text-align: center;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--light);
}

.woocommerce-order-details {
    margin-bottom: 0 !important;
    padding: 2rem 0 !important;
}

.woocommerce-customer-details {
    padding: 2rem 0;
}

.woocommerce-column--billing-address,
.woocommerce-column--shipping-address {
    max-width: 100%;
    margin-bottom: 2rem;
}

.woocommerce .woocommerce-customer-details address {
    border: none;
}

/* Related products section */

section.related.products {
    padding: 0;
    padding-top: 5rem;
    text-align: center;
}

section.related.products ul {
    list-style: none;
    padding-left: 0;
    margin: 3rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

section.related.products ul li {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    width: 100%;
    transition: var(--main-transition);

    &:hover {
        transform: translateY(-.2rem);
    }
}

section.related.products ul img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

section.related.products ul li h2 {
    padding: 1.5rem;
    margin-bottom: 0;
}

section.related.products .button {
    display: none;
}

section.related.products .onsale {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--danger);
    color: var(--white);
    padding: .3rem .7rem;
    border-radius: var(--border-radius);
    margin: .3rem;
    font-size: .8rem;
    text-transform: uppercase;
}

section.related.products .price {
    display: block;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    text-transform: uppercase;
    color: var(--primary);
    background-color: var(--lightgray);
    transition: var(--main-transition);
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 1.5rem;
}

section.related.products ul .woocommerce-loop-product__title {
    margin-bottom: 0;
    padding: 1.5rem 1.5rem 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--secondary);
}

@media screen and (min-width: 992px) {
    section.related.products ul {
        flex-direction: row;
    }
}

/* New in store section (Cart empty) */

ul.wc-block-grid__products {
    margin-top: 3rem;
}

ul.wc-block-grid__products .wc-block-grid__product-link {
    width: 80%;
}

ul.wc-block-grid__products .wc-block-grid__product-link .wc-block-grid__product-image {
    width: 100%;
}

ul.wc-block-grid__products .wc-block-grid__product-image img {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    width: 100%;
    object-fit: cover;
}

ul.wc-block-grid__products .wc-block-grid__product-link .wc-block-grid__product-title {
    font-size: .9rem;
    color: var(--gray-dark);
    font-weight: 400;
    padding-bottom: 1.5rem;
    margin-bottom: 0;
}

ul.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-price.price span.woocommerce-Price-amount.amount {
    display: block;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    text-transform: uppercase;
    color: var(--primary);
    background-color: var(--lightgray);
    transition: var(--main-transition);
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 1.5rem;
}

ul.wc-block-grid__products .wc-block-grid__product .wp-block-button.wc-block-grid__product-add-to-cart {
    display: none;
}

@media screen and (min-width: 1200px) {
    ul.wc-block-grid__products .wc-block-grid__product-image img {
        height: 300px;
    }

    ul.wc-block-grid__products .wc-block-grid__product-link .wc-block-grid__product-title {
        font-size: 1.2rem;
        padding: 1.5rem;
    }
}

/* My account page */

nav.woocommerce-MyAccount-navigation {
    padding: 4rem 0;

    ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 0;

        li {
            padding: 0.3rem 1rem;
            margin: .5rem 0;
            display: flex;
            align-items: center;

            &::before {
                content: '\f054';
                font-family: 'Font Awesome 6 Free';
                font-weight: 700;
                margin-right: .8rem;
                font-size: .8rem;
            }

        }
    }
}

.woocommerce-MyAccount-content {
    padding-bottom: 2rem;
}

@media screen and (min-width: 768px) {
    nav.woocommerce-MyAccount-navigation {
        ul {
            flex-direction: row;
        }
    }
}

/* My directions page */

.woocommerce-MyAccount-content {
    .u-columns.woocommerce-Addresses.col2-set.addresses {

        .u-column1.col-1.woocommerce-Address,
        .u-column2.col-2.woocommerce-Address {
            float: none !important;
        }
    }
}

.woocommerce-Address-title.title {
    a {
        display: block;
        font-weight: 700;
    }
}

.woocommerce-Address-title h3,
.woocommerce-Address address {
    white-space: nowrap !important;
}

/* Hide free delivery options */
.wc-block-components-shipping-address,
.wc-block-components-totals-shipping__fieldset,
.wc-block-checkout__shipping-option--free {
   display: none !important;
}

/* Override button styles in Search results page */
.button.product_type_simple {
    border-radius: var(--border-radius) !important;
    padding: 0.8rem 2rem !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem !important;
    margin: 1rem 0 !important;
    width: 100%;
    transition: var(--main-transition);
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--white) !important;
    margin-bottom: 0 !important;
}