/* ACCOUNT */

#customer_login .col-1,
#customer_login .col-2,
.post-content > .woocommerce > .woocommerce-ResetPassword{
background-color: var(--color-ui-block);
color: var(--color-ui-block-text);
padding: var(--grid-gap);
border-radius: var(--border-radius-700);
}

.post-content > .woocommerce > .woocommerce-ResetPassword{
grid-column: content;
}

.woocommerce .woocommerce-MyAccount-navigation{
margin-bottom: var(--grid-gap);
}
.woocommerce-MyAccount-navigation ul{
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .5rem 1rem;
font-family: var(--font-menu);
padding: 0;
margin: 0;
}
.woocommerce-MyAccount-navigation ul .woocommerce-MyAccount-navigation-link--edit-account{
flex-grow: 2;
}
.woocommerce-MyAccount-navigation ul .woocommerce-MyAccount-navigation-link--customer-logout{
}
.woocommerce-MyAccount-navigation a{
color: var(--color-text-secondary);
display: inline-block;
height: 100%;
text-align: center;
padding-bottom: .25rem;
border-bottom: 1px solid transparent;
}
.woocommerce-MyAccount-navigation ul:not(:has(li.is-active)) .woocommerce-MyAccount-navigation-link--dashboard a,
.woocommerce-MyAccount-navigation .is-active a,
.woocommerce-MyAccount-navigation a:hover{
color: var(--color-text);
border-color: var(--color-ui-border);
}
.woocommerce-MyAccount-navigation ul .woocommerce-MyAccount-navigation-link--customer-logout a{
background-color: var(--color-ui-button-secondary);
color: var(--color-ui-button-secondary-text);
font-family: var(--font-ui-button);
font-weight: var(--font-weight-button);
font-size: var(--font-size-button);
line-height: var(--line-height-button);
text-decoration: none;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
column-gap: var(--gap-button);
width: auto;
padding: var(--padding-button);
border: 1px solid var(--color-ui-button-secondary-border);
border-radius: var(--border-radius-400);
}

.woocommerce-MyAccount-content .woocommerce-pagination{
display: flex;
column-gap: 1rem;
margin-top: 1rem;
}

.woocommerce-MyAccount-content .addresses .edit{
background-color: var(--color-ui-button-secondary);
color: var(--color-ui-button-secondary-text);
font-family: var(--font-ui-button);
font-weight: var(--font-weight-button);
font-size: var(--font-size-button);
line-height: var(--line-height-button);
text-decoration: none;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
column-gap: var(--gap-button);
width: auto;
padding: var(--padding-button);
margin-bottom: .5rem;
border: 1px solid var(--color-ui-button-secondary-border);
border-radius: var(--border-radius-400);
}

.woocommerce-address-fields{
display: grid;
row-gap: 1rem;
}
.woocommerce-address-fields p:has(button){
margin: 0;
}

.woocommerce-MyAccount-content .edit-account{
display: grid;
grid-template-columns: var(--wc-2col-grid-columns);
gap: 1rem var(--grid-gap);
}
.woocommerce-MyAccount-content .edit-account fieldset{
grid-column: full;
}
.woocommerce-MyAccount-content .edit-account p:has(button){
margin: 0;
}

/* TODO PRODUCTS */

.woocommerce .woocommerce-catalog{
display: grid;
grid-template-columns: var(--wc-catalog-grid-columns);
align-items: baseline;
gap: var(--grid-gap);
font-family: var(--font-ui);
margin-bottom: var(--grid-gap);
}
.woocommerce .woocommerce-catalog:not(:has(*)){
margin-bottom: 0;
}
.woocommerce .woocommerce-catalog p{
margin: 0;
}

.woocommerce ul.products{
grid-column: wide;
list-style: none;
display: grid;
gap: var(--grid-gap);
padding: 0;
}
.woocommerce ul.products.columns-2{
grid-template-columns: repeat(2,1fr);
}
.woocommerce ul.products.columns-3{
grid-template-columns: repeat(3,1fr);
}
.woocommerce ul.products.columns-4{
grid-template-columns: repeat(4,1fr);
}
.woocommerce ul.products.columns-5{
grid-template-columns: repeat(5,1fr);
}
.woocommerce ul.products.columns-6{
grid-template-columns: repeat(6,1fr);
}
.woocommerce ul.products li.product{
background-color: var(--color-card-product);
color: var(--color-card-product-text);
width: 100%;
display: grid;
grid-template-rows: [full-start product-description-start] auto [product-description-end add-to-cart-start] auto [add-to-cart-end added-to-cart-start] auto [added-to-cart-end full-end];
grid-template-columns: [full-start] 1rem [content-start] 1fr [content-end] 1rem [full-end];
align-content: start;
border-radius: var(--border-radius-400);
box-shadow: var(--box-shadow-400) var(--color-ui-shadow);
position: relative;
overflow: hidden;
isolation: isolate;
}
.woocommerce ul.products li.product > a:first-child{
color: inherit;
grid-row: product-description;
grid-column: full;
display: grid;
grid-template-rows: [full-start on-sale-start] auto [on-sale-end image-start] auto [image-end title-start] auto [title-end stars-start] auto [stars-end price-start] auto [price-end out-of-stock-start] auto [out-of-stock-end full-end];
grid-template-columns: subgrid;
align-content: start;
justify-items: center;
text-decoration: none;
}
.woocommerce ul.products li.product img{
grid-row: image;
grid-column: full;
}
.woocommerce ul.products li.product h2{
grid-row: title;
grid-column: content;
}
.woocommerce ul.products li.product .star-rating{
grid-row: image;
grid-column: content;
}
.woocommerce ul.products li.product .price{
grid-row: price;
grid-column: content;
}
.woocommerce ul.products li.product .onsale{
grid-row: image;
grid-column: content;
}
.woocommerce ul.products li.product .out-of-stock{
grid-row: image;
grid-column: content;
}
.woocommerce ul.products li.product > a.button{
grid-row: add-to-cart;
grid-column: content;
}
.woocommerce ul.products li.product > .added_to_cart{
grid-row: added-to-cart;
grid-column: content;
}
.woocommerce ul.products li.product > *{

margin: 0 0 1rem 0;
}
.woocommerce ul.products li.product > * > *{

margin: 0 0 1rem 0;
}
.woocommerce ul.products li.product img{
width: 100%;
object-fit: cover;
aspect-ratio: 1/1;
z-index: -1;
}
.woocommerce ul.products li.product h2{
color: var(--color-product-title);
font-size: var(--font-size-400);
text-align: center;
/*margin: 1rem 0;*/
}
.woocommerce ul.products li.product h2 mark{
color: inherit;
}
.woocommerce ul.products li.product .star-rating{
background-color: var(--color-card-product);
z-index: 1;
align-self: end;
padding: .5em 1em;
/*margin: .5rem 0;*/
margin-bottom: 2rem;
border-radius: 100vw;
box-shadow: var(--box-shadow-400) var(--color-ui-shadow);
}
.woocommerce ul.products li.product .price{
text-align: center;
}
.woocommerce ul.products li.product .woocommerce-price-suffix{
display: block;
}
.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product .out-of-stock{
font-size: var(--font-size-tag);
/*margin: .5rem 0;*/
border-radius: var(--border-radius-400);
box-shadow: var(--box-shadow-400) var(--color-ui-shadow);
}
.woocommerce ul.products li.product .onsale{
z-index: 1;
align-self: start;
justify-self: start;
margin-top: 1rem;
}
.woocommerce ul.products li.product .out-of-stock{
z-index: 1;
align-self: center;
}
.woocommerce ul.products li.product > a.button,
.woocommerce ul.products li.product > .wc-forward{
justify-self: center;
/*margin-top: 1rem;
margin-bottom: 1rem;*/
}
.woocommerce ul.products li.product > a.button{
}
.woocommerce ul.products li.product > .added_to_cart{
color: var(--color-text-secondary);
font-family: var(--font-secondary);
font-weight: var(--font-weight-secondary);
font-size: var(--font-size-secondary);
text-decoration: none;
margin-top: -.5rem;
padding-top: 0;
}
.woocommerce ul.products li.product.outofstock > *{
}
.woocommerce ul.products li.product.outofstock :is(.onsale, img, h2, .star-rating, .price, .button){
/*filter: saturate(0) opacity(50%);*/
}
.woocommerce ul.products li.product-category h2{
margin: 0;
}
/*
.woocommerce ul.products li.product-category{
align-content: stretch;
}
.woocommerce ul.products li.product-category > a:first-child{
grid-row: full;
align-content: stretch;
margin: 0;
}
.woocommerce ul.products li.product-category img{
grid-row: full;
height: 100%;
}
.woocommerce ul.products li.product-category h2{
background-color: var(--color-black-trans50);
color: var(--color-text-contrast);
grid-row: full;
grid-column: full;
align-self: end;
width: 100%;
padding: 1rem 0;
margin: 0;
}
*/

/* TODO PRODUCT */

.woocommerce-product-header .woocommerce-breadcrumb{
grid-row: breadcrumb;
margin-bottom: var(--grid-gap);
}
.woocommerce-product-header .product_title{
grid-row: title;
grid-column: title;
font-family: var(--font-title-header);
margin: 0;
}
.woocommerce-product-header .woocommerce-product-rating{
grid-row: stars;
grid-column: stars;
}
.woocommerce-product-header .onsale{
grid-row: onsale;
grid-column: onsale;
justify-self: end;
}

.woocommerce div.product{
display: grid;
grid-template-columns: var(--wc-product-grid-columns);
gap: var(--grid-gap);
}

.woocommerce-product-header .onsale{
position: absolute;
display: grid;
place-items: center;
aspect-ratio: 1;
border-radius: var(--border-radius-900);
transform: rotate(-10deg);
}

.woocommerce-product-gallery{
position: relative;
}
.woocommerce-product-gallery__trigger{
visibility: hidden;
position: absolute;
left: 1rem;
top: 1rem;
z-index: 1;
text-decoration: none;
}
.woocommerce-product-gallery__trigger::before{
visibility: visible;
background-color: var(--color-ui-button-neutral);
color: var(--color-ui-button-neutral-text);
width: 3.5em;
height: 3.5em;
aspect-ratio: 1/1;
display: grid;
place-items: center;
padding: 1em;
border: 1px solid var(--color-ui-button-neutral-border);
border-radius: var(--border-radius-900);
}
.woocommerce-product-gallery__trigger img.emoji{
display: none !important;
}
.pswp__caption__center{
font-family: var(--font-secondary);
font-style: italic;
font-size: var(--font-size-caption);
text-align: center;
padding: .5em 1em;
}

.woocommerce-product-gallery__wrapper{
display: grid;
grid-template-columns: var(--wc-product-gallery-grid-columns);
gap: .5rem;
}

.woocommerce-product-gallery__wrapper :first-child{
grid-column: gallery;
}
.woocommerce-product-gallery__image img{
width: 100%;
border-radius: var(--border-radius-500);
}

.woocommerce div.product .summary .price{
font-size: 2rem;
margin: 0;
margin-bottom: var(--grid-gap);
}
.woocommerce div.product .summary .price del{
font-size: .5em;
}
.woocommerce div.product.product-type-variable .summary > .price{
opacity: .35;
}

.woocommerce div.product .summary .product_meta{
font-family: var(--font-secondary);
margin-top: var(--grid-gap);
}

.woocommerce div.product .cart{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
margin-block-start: 1rem;
}
.woocommerce div.product .variations_form.cart{
flex-direction: column;
align-items: flex-start;
}
.woocommerce div.product .cart .quantity:not(:has(input[type="number"])){
display: none;
}
.woocommerce div.product .single_variation_wrap{
display: flex;
flex-direction: column;
gap: 1rem;
}

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related{
grid-column: product;
}

.woocommerce div.product .woocommerce-tabs .wc-tabs{
list-style: none;
display: flex;
font-family: var(--font-ui);
padding: 0;
margin: 0;
margin-bottom: -1px;
}
.woocommerce div.product .woocommerce-tabs .wc-tabs li{
background-color: var(--color-element-tabs-inactive);
color: var(--color-element-tabs-inactive-text);
display: grid;
align-items: center;
border: 1px solid var(--color-ui-border);
}
.woocommerce div.product .woocommerce-tabs .wc-tabs li + li{
border-left-width: 0;
}
.woocommerce div.product .woocommerce-tabs .wc-tabs li.active,
.woocommerce div.product .woocommerce-tabs .wc-tabs li:hover{
background-color: var(--color-element-tabs-active);
color: var(--color-element-tabs-active-text);
border-bottom: 1px solid var(--color-element-tabs-active);
}
.woocommerce div.product .woocommerce-tabs .wc-tabs:has(:hover) li.active:not(:hover){
background-color: var(--color-element-tabs-inactive);
color: var(--color-element-tabs-inactive-text);
border-bottom: 1px solid var(--color-ui-border);
}
.woocommerce div.product .woocommerce-tabs .wc-tabs li,
.woocommerce div.product .woocommerce-tabs .wc-tabs a{
border-top-right-radius: .5rem;
border-top-left-radius: .5rem;
}
.woocommerce div.product .woocommerce-tabs .wc-tabs li a{
color: inherit;
display: block;
text-decoration: none;
padding: .5rem 1rem;
}
.woocommerce-Tabs-panel{
background-color: var(--color-element-tabs-active);
color: var(--color-element-tabs-active-text);
display: grid;
row-gap: 1rem;
padding: 1rem;
border: 1px solid var(--color-ui-border);
}
.woocommerce-Tabs-panel--description p{
font-family: var(--font-ui);
margin: 0;
}
.woocommerce div.product #comments{
background-color: inherit;
color: inherit;
display: block;
padding: 0;
}
.woocommerce div.product #comments .commentlist{
padding-top: 0;
padding-bottom: 1rem;
}
.woocommerce div.product .review{
padding: 1rem;
box-shadow: var(--box-shadow-100) var(--color-ui-border);
border-radius: var(--border-radius-500);
}
.woocommerce div.product .comment_container{
overflow: hidden;
}
.woocommerce div.product .comment-text{
background-color: var(--color-comment);
color: var(--color-comment-text);
display: grid;
grid-template-rows: [review-start meta-start] auto [meta-end rating-start] auto [rating-end description-start] auto [description-end review-end];
grid-template-columns: [review-start description-start rating-start avatar-start] auto [avatar-end meta-start] 1fr [meta-end rating-end description-end review-end];
align-items: center;
column-gap: .5rem;
}
.woocommerce div.product .avatar{
grid-row: meta;
grid-column: avatar;
width: 32px;
height: auto;
aspect-ratio: 1 / 1;
border-radius: var(--border-radius-900);
border: 1px solid var(--color-ui-border);
}
.woocommerce div.product .review .star-rating{
grid-row: rating;
grid-column: rating;
margin-top: .5rem;
}
.woocommerce div.product .comment-text .meta{
grid-row: meta;
grid-column: meta;
margin: 0;
}
.woocommerce div.product .review .woocommerce-review__author{
font-family: var(--font-title);
font-weight: var(--font-weight-title);
}
.woocommerce div.product .review .woocommerce-review__dash{
display: none;
}
.woocommerce div.product .review .woocommerce-review__published-date{
color: var(--color-text-secondary);
font-size: var(--font-size-secondary);
font-weight: 400;
text-transform: capitalize;
}
.woocommerce div.product .review .woocommerce-review__published-date::before{
content: "⦁";
color: var(--color-text-secondary);
margin-left: .25rem;
margin-right: .5rem;
}
.woocommerce div.product .comment-text .description{
grid-row: description;
grid-column: description;
}
.woocommerce div.product #review_form_wrapper{
padding-top: var(--grid-gap);
margin-top: var(--grid-gap);
border-top: 1px solid var(--color-separator);
}
.woocommerce div.product #respond .comment-form-rating{
justify-self: start;
}
.woocommerce div.product #reviews .woocommerce-verification-required{
font-style: italic;
margin-top: 1rem;
}

.woocommerce div.product .related{
grid-column: product;
display: grid;
row-gap: 1rem;
}
.woocommerce div.product .related ul.products{
grid-column: auto;
}

/* CART PAGE */

.woocommerce .shop_table.cart .actions button[name="update_cart"]{
background-color: var(--color-ui-button-secondary);
color: var(--color-ui-button-secondary-text);
border-color: var(--color-ui-button-secondary-border);
border-radius: var(--border-radius-400);
}

.woocommerce .cart-collaterals{
display: grid;
grid-template-columns: var(--wc-cart-collaterals-grid-columns);
margin-top: var(--grid-gap);
gap: var(--grid-gap);
}

.woocommerce .cart-collaterals .cart_totals{
grid-column: right;
display: grid;
row-gap: 1rem;
}

/* CHECKOUT */

body.woocommerce-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce-form-login,
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout .woocommerce-form-coupon{
grid-column: content;
}
.woocommerce-form-login-toggle{
z-index: 1;
}
body.woocommerce-checkout .woocommerce-form-login,
body.woocommerce-checkout .woocommerce-form-coupon{
background-color: var(--color-neutral);
color: var(--color-text);
padding: var(--grid-gap);
margin-bottom: var(--grid-gap);
border-radius: var(--border-radius-500);
}
.woocommerce-form-coupon-toggle{
z-index: 1;
}

#customer_details{
grid-template-columns: var(--wc-1col-grid-columns);
row-gap: var(--grid-gap);
}

#customer_details .woocommerce-billing-fields,
#customer_details .woocommerce-shipping-fields{
display: grid;
row-gap: 1rem;
}
#customer_details .woocommerce-billing-fields h3,
#ship-to-different-address{
margin: 0;
}

#order_review_heading{
padding-top: var(--grid-gap);
margin-top: var(--grid-gap);
margin-bottom: var(--grid-gap);
border-top: 1px solid var(--color-separator);
}

.woocommerce .woocommerce-checkout-payment{
margin-top: var(--grid-gap);
}
.woocommerce-checkout-payment .wc_payment_methods{
list-style: none;
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: 1rem;
padding: 0;
}
.woocommerce-checkout-payment .methods .wc_payment_method{
background-color: var(--color-background);
background-image:
	linear-gradient(
		to bottom,
		var(--color-yellow) 0,
		var(--color-white) 5rem,
		var(--color-white) 100%
	);
flex: 1;
font-family: var(--font-ui);
padding: 1rem;
box-shadow: var(--box-shadow-400) var(--color-ui-shadow);
border-radius: var(--border-radius-400);
overflow: hidden;
}
.woocommerce-checkout-payment .place-order{
margin-top: 1rem;
}
.woocommerce-checkout-payment .place-order .validate-required{
margin: .5rem 0;
}
.woocommerce-checkout-payment .place-order #place_order{
justify-self: start;
}

.woocommerce-checkout-payment .methods .wc_payment_method > .payment_box{
margin-top: .5rem;
}
.woocommerce-checkout-payment .methods .wc_payment_method > label > img{
margin-top: .5rem;
}
.woocommerce-checkout-payment .wc_payment_methods .payment_method_paypal img{
mix-blend-mode: multiply;
}

.woocommerce-checkout-payment .woocommerce-terms-and-conditions{
max-height: 30rem !important;
padding: var(--grid-gap);
margin-block-start: var(--grid-gap);
box-shadow: var(--box-shadow-100) var(--color-ui-border);
}
.woocommerce-checkout-payment .woocommerce-terms-and-conditions::first-child{
margin-block-end: 0;
}

/* ORDER */

.woocommerce-order .woocommerce-order-overview{
list-style: none;
justify-self: start;
font-family: var(--font-ui);
padding: .5em 1em;
margin: 0;
border: 1px solid var(--color-ui-border);
}

.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details{
display: grid;
row-gap: 1rem;
margin-top: var(--grid-gap);
}
.woocommerce-order .woocommerce-order-details__title{
margin: 0;
}
.woocommerce-order .woocommerce-order-details .shop_table{
justify-self: start;
}
.woocommerce-order .woocommerce-order-details p{
margin: 0;
}