File: /home/nahevttf/public_html/wp-content/themes/extendable/assets/css/woocommerce.css
/*
* --------------------------------------------------------
* WooCommerce
* --------------------------------------------------------
*/
/*
* --------------------------------------------------------
* All of our variables.
* These could probably live in theme.json at some point.
* --------------------------------------------------------
*/
.woocommerce,
.woocommerce-page {
--wc--gap: var(--wp--style--block-gap, 1rem);
--wc--spacing--sm: var(--wp--custom--spacing--small);
--wc--spacing--md: var(--wp--custom--spacing--medium);
--wc--spacing--lg: var(--wp--custom--spacing--large);
--wc--spacing--outer: var(--wp--custom--spacing--outer);
--wc--z-index-xs: -1;
--wc--z-index-sm: 1;
--wc--z-index-md: 5;
--wc--z-index-lg: 10;
--wc--z-index-xl: 20;
--wc--z-index-xxl: 25;
--wc--z-index-xxxl: 30;
--wc--button--background--static: var(
--wp--custom--elements--button--color--background
);
--wc--button--color--static: var(--wp--custom--elements--button--color--text);
--wc--button--background--interactive: var(
--wp--custom--elements--button--color--text
);
--wc--button--color--interactive: var(
--wp--custom--elements--button--color--background
);
--wc--button--border--color: var(
--wp--custom--elements--button--border--color,
currentColor
);
--wc--button--border--style: var(
--wp--custom--elements--button--border--style,
solid
);
--wc--button--border--width: var(
--wp--custom--elements--button--border--width,
2px
);
--wc--button--border--radius: var(
--wp--custom--elements--button--border--radius
);
--wc--button--typography--font-family: var(
--wp--custom--elements--button--typography--font-family,
inherit
);
--wc--button--typograhpy--font-size: var(
--wp--custom--elements--button--typography--font-size,
1.15rem
);
--wc--button--typography--font-weight: var(
--wp--custom--elements--button--typography--font-weight,
400
);
--wc--button--typography--letter-spacing: var(
--wp--custom--elements--button--typography--letter-spacing,
0
);
--wc--button--typography--line-height: var(
--wp--custom--elements--button--typography--line-height,
1.384
);
--wc--button--typography--text-align: center;
--wc--button--typography--text-transform: var(
--wp--custom--elements--button--typography--text-transform,
none
);
--wc--button--padding--bottom: calc(
var(
--wp--custom--elements--button--spacing--padding--bottom,
calc(0.667em + 2px)
) - 2px
);
--wc--button--padding--left: calc(
var(
--wp--custom--elements--button--spacing--padding--left,
calc(1.333em + 2px)
) - 2px
);
--wc--button--padding--right: calc(
var(
--wp--custom--elements--button--spacing--padding--right,
calc(1.333em + 2px)
) - 2px
);
--wc--button--padding--top: calc(
var(
--wp--custom--elements--button--spacing--padding--top,
calc(0.667em + 2px)
) - 2px
);
--wc--button--padding: var(--wc--button--padding--top)
var(--wc--button--padding--right) var(--wc--button--padding--bottom)
var(--wc--button--padding--left);
--wc--pagination--current--typography--font-weight: var(
--wp--custom--typography--font-weight--bold,
700
);
--wc--preset--color--alt: var(--wp--preset--color--foreground);
--wc--tabs--color--text--static: var(--wp--preset--color--foreground);
--wc--tabs--color--background--static: var(--wp--preset--color--tertiary);
}
/*
* --------------------------------------------------------
* Products lists
* --------------------------------------------------------
*/
.woocommerce .products {
list-style: none;
margin: 0;
padding: 0;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
text-align: center;
}
.woocommerce .product a {
text-decoration: none;
}
.woocommerce ul.products li.product a img {
margin-bottom: 0.5rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: var(--wp--preset--font-size--medium);
}
.woocommerce ul.products li.product .price {
font-size: var(--wp--preset--font-size--small);
font-weight: 700;
margin-bottom: 0;
}
.woocommerce .product .price {
font-size: var(--wp--preset--font-size--medium);
font-weight: 700;
}
.woocommerce .price ins,
.woocommerce .price bdi {
text-decoration: none;
}
.woocommerce .add_to_cart_button.loading {
opacity: 0.5;
}
.woocommerce a.added_to_cart {
display: block;
margin-top: 0.2rem;
}
/*
* --------------------------------------------------------
* Buttons, buttons, buttons.
* --------------------------------------------------------
*/
#add_payment_method .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout .wc-proceed-to-checkout a.checkout-button {
font-size: var( --wp--custom--elements--button--typography--font-size, 1.15rem );
}
.woocommerce-page .woocommerce-cart-form #coupon_code {
flex: 1;
flex-basis: 0;
}
.woocommerce-page .woocommerce-cart-form #coupon_code,
.woocommerce-page .woocommerce-cart-form .actions .button {
font-size: var(--wp--preset--font-size--small);
height: 100%;
}
.woocommerce ul.products li.product .button {
font-size: var(--wp--preset--font-size--small);
}
/*
* --------------------------------------------------------
* Breadcrumbs
* --------------------------------------------------------
*/
.woocommerce .woocommerce-breadcrumb {
margin-bottom: 0.5rem;
}
.woocommerce.single-product .woocommerce-breadcrumb {
margin-bottom: var(--wp--preset--spacing--30);
}
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a {
color: var(--wp--preset--color--foreground);
text-decoration: none;
font-size: var(--wp--preset--font-size--small);
}
/*
* --------------------------------------------------------
* Pagination
* --------------------------------------------------------
*/
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
border: none;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
font-weight: var(--wc--pagination--current--typography--font-weight);
}
/*
* --------------------------------------------------------
* Shop page
* --------------------------------------------------------
*/
.woocommerce-products-header__title.page-title {
margin-top: 0;
margin-bottom: var(--wp--preset--spacing--40);
font-size: var(--wp--preset--font-size--x-large);
}
.woocommerce-result-count {
font-size: var(--wp--preset--font-size--small);
margin-bottom: var(--wp--preset--spacing--30);
}
.woocommerce .woocommerce-ordering {
margin-bottom: var(--wp--preset--spacing--30);
}
.woocommerce-ordering .orderby {
font-size: var(--wp--preset--font-size--small);
padding: calc(var(--wp--custom--elements--input--spacing--padding--top) / 1.5)
0 calc(var(--wp--custom--elements--input--spacing--padding--bottom) / 1.5)
calc(var(--wp--custom--elements--input--spacing--padding--left) / 1.5);
}
/*
* --------------------------------------------------------
* Single product
* --------------------------------------------------------
*/
.woocommerce div.product {
margin-top: var(--wp--preset--spacing--30);
}
.single-product .summary .product_title.entry-title {
font-size: var(--wp--preset--font-size--x-large);
margin-bottom: 1rem;
}
.woocommerce div.product p.price {
margin-top: 1rem;
font-weight: 700;
}
.woocommerce
div.product
div.summary
.woocommerce-product-details__short-description {
margin-bottom: var(--wp--preset--spacing--40);
}
.woocommerce div.product div.summary .stock {
font-weight: 700;
color: var(--wp--preset--color--primary);
}
.woocommerce div.product form.cart .variations select {
font-size: var(--wp--preset--font-size--small);
height: 100%;
padding: calc(var(--wp--custom--elements--input--spacing--padding--top) / 1.5)
0 calc(var(--wp--custom--elements--input--spacing--padding--bottom) / 1.5)
calc(var(--wp--custom--elements--input--spacing--padding--left) / 1.5);
}
.woocommerce table.variations {
position: relative;
}
.woocommerce table.variations tr {
margin-bottom: calc(var(--wp--preset--spacing--30) / 2);
}
.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th {
display: block;
text-align: left;
}
.woocommerce div.product form.cart table.variations th {
line-height: 2.5;
font-size: var(--wp--preset--font-size--small);
}
.woocommerce div.product form.cart .reset_variations {
font-size: var(--wp--preset--font-size--small);
position: absolute;
right: 0;
bottom: calc(100% - 40px);
}
.woocommerce div.product div.summary form.cart {
margin-bottom: var(--wp--preset--spacing--50);
}
.woocommerce div.product .product_meta {
display: flex;
flex-direction: column;
font-weight: 700;
font-size: var(--wp--preset--font-size--small);
}
.woocommerce div.product .product_meta > * > * {
font-weight: 400;
}
.woocommerce div.product .woocommerce-tabs {
padding-top: var(--wp--preset--spacing--30);
margin-bottom: var(--wp--preset--spacing--60);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
padding: 0;
margin-bottom: var(--wp--preset--spacing--30);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
border-bottom: 2px solid var(--wp--preset--color--foreground);
opacity: 0.2;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
color: var(--wc--tabs--color--text--static);
opacity: 0.75;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background-color: transparent;
border: none;
border-bottom: solid 2px transparent;
border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
border: none;
display: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
border-bottom: solid 2px var(--wp--preset--color--foreground);
background: transparent;
color: var(--wp--preset--color--foreground);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
box-shadow: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
opacity: 1;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
color: var(--wp--preset--color--foreground);
opacity: 1;
}
.woocommerce-Tabs-panel h2 {
font-size: var(--wp--preset--font-size--medium);
}
.woocommerce div.product .related.products {
margin-top: var(--wp--preset--spacing--60);
}
.single-product .related {
margin-bottom: var(--wp--preset--spacing--50);
margin-top: var(--wp--preset--spacing--30);
}
.single-product .related h2 {
font-size: var(--wp--preset--font-size--large);
margin-bottom: var(--wp--preset--spacing--30);
}
/*
* --------------------------------------------------------
* Colors, colors, colors.
* --------------------------------------------------------
*/
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
color: var(--wc--preset--color--alt);
}
.woocommerce div.product p.price del, .woocommerce div.product span.price del {
opacity: 0.75;
}
.woocommerce span.onsale {
background-color: var(--wp--preset--color--primary);
color: var(--wp--preset--color--background);
}
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
background: transparent;
color: var(--wc--preset--color--alt);
}
.wc-block-components-product-badge {
color: var(--wp--preset--color--secondary);
}
.wc-block-components-checkout-return-to-cart-button svg {
fill: currentColor;
}
.woocommerce table.shop_table,
.woocommerce table.shop_table td {
border-color: rgb(153 153 153 / 30%);
}
/*
* --------------------------------------------------------
* Quantity picker.
* --------------------------------------------------------
*/
.woocommerce div.product form.cart div.quantity {
margin-right: 0;
}
.woocommerce .quantity .qty {
color: currentColor;
font-size: var(--wc--button--typograhpy--font-size);
width: 100%;
max-width: 120px;
text-align: center;
background-color: transparent;
border-color: currentColor;
border-style: solid;
border-radius: var(--wp--custom--elements--input--border--radius);
border-width: var(--wp--custom--elements--input--border--width);
padding: var( --wp--custom--elements--input--spacing--padding--top, calc(0.667em + 2px) ) calc( var( --wp--custom--elements--input--spacing--padding--right, calc(1.333em + 2px) ) / 2 );
padding: var(--wp--custom--elements--input--spacing--padding--top)
var(--wp--custom--elements--input--spacing--padding--right)
var(--wp--custom--elements--input--spacing--padding--bottom)
var(--wp--custom--elements--input--spacing--padding--left);
}
/*
* --------------------------------------------------------
* input
* --------------------------------------------------------
*/
.woocommerce-page .woocommerce-cart-form #coupon_code,
.woocommerce-page .input-text {
border-color: var(--wp--custom--elements--input--border--color);
border-radius: var(--wp--custom--elements--input--border--radius);
border-width: var(--wp--custom--elements--input--border--width);
box-sizing: border-box;
display: block;
font-size: var(--wp--custom--elements--input--typography--font-size);
line-height: var(--wp--custom--elements--input--typography--line-height) !important;
padding: var(--wp--custom--elements--input--spacing--padding--top)
var(--wp--custom--elements--input--spacing--padding--right)
var(--wp--custom--elements--input--spacing--padding--bottom)
var(--wp--custom--elements--input--spacing--padding--left);
width: 100%;
}
.woocommerce-page .input-text::placeholder {
color: var(--wp--preset--color--foreground);
opacity: 0.75;
}
.select2-dropdown {
background-color: var(--wp--preset--color--tertiary);
color: var(--wp--preset--color--foreground);
font-size: var(--wp--preset--font-size--small);
}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[data-selected=true] {
background-color: var(--wp--preset--color--background);
}
.woocommerce form .form-row .select2-container .select2-selection--single {
background-color: var(--wp--custom--elements--input--color--background);
border-color: var(--wp--custom--elements--input--color--foreground);
border-radius: var(--wp--custom--elements--input--border--radius);
border-style: solid;
border-width: var(--wp--custom--elements--input--border--width);
color: currentColor;
cursor: pointer;
display: block;
font-size: var(--wp--custom--elements--input--typography--font-size);
line-height: var(--wp--custom--elements--input--typography--line-height) !important;
height: auto;
margin: 0;
outline: 0;
padding: var(--wp--custom--elements--input--spacing--padding--top)
var(--wp--custom--elements--input--spacing--padding--right)
var(--wp--custom--elements--input--spacing--padding--bottom)
var(--wp--custom--elements--input--spacing--padding--left);
}
.select2-container--default
.select2-results__option--highlighted[aria-selected],
.select2-container--default
.select2-results__option--highlighted[data-selected] {
background-color: var(--wp--preset--color--primary);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--wp--preset--color--foreground);
}
/*
* --------------------------------------------------------
* Info and message
* --------------------------------------------------------
*/
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
padding: 1em 2em 1em 3.5em;
background-color: var(--wp--preset--color--tertiary);
color: var(--wp--preset--color--foreground);
}
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
border-color: var(--wp--preset--color--foreground);
}
/*
* --------------------------------------------------------
* Checkout.
* --------------------------------------------------------
*/
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
background-color: var(--wp--preset--color--tertiary);
}
#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
background-color: var(--wp--preset--color--background);
color: var(--wp--preset--color--foreground);
}
#add_payment_method #payment div.payment_box p:last-child,
.woocommerce-cart #payment div.payment_box p:last-child,
.woocommerce-checkout #payment div.payment_box p:last-child {
margin-top: 0;
}
#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
border-bottom-color: var(--wp--preset--color--background);
}
.woocommerce-page ul.woocommerce-order-overview {
padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30)
calc(var(--wp--preset--spacing--30) / 2);
background-color: var(--wp--preset--color--foreground);
color: var(--wp--preset--color--background);
}
#add_payment_method table.cart td.actions .coupon .input-text,
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-checkout table.cart td.actions .coupon .input-text {
border-color: var(--wp--preset--color--foreground);
color: var(--wp--preset--color--foreground);
}
/*
* --------------------------------------------------------
* My Account.
* --------------------------------------------------------
*/
.woocommerce-account .woocommerce-MyAccount-navigation ul {
display: flex;
flex-direction: column;
gap: calc(var(--wp--preset--spacing--30) / 4);
}
.woocommerce-account .woocommerce-MyAccount-navigation li,
.woocommerce-account .woocommerce-MyAccount-navigation li:first-child {
padding: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
background-color: var(--wp--preset--color--tertiary);
padding: calc(var(--wp--preset--spacing--30) / 2)
calc(var(--wp--preset--spacing--30) / 1.5);
border-radius: var(--wp--custom--elements--input--border--radius);
font-size: var(--wp--preset--font-size--small);
display: block;
}
.woocommerce-account .woocommerce-MyAccount-content {
width: 66%;
}
.woocommerce-account .addresses .title h3 {
margin-top: calc(var(--wp--preset--spacing--30) / 2);
font-size: var(--wp--preset--font-size--medium);
}
.woocommerce-account .addresses .title a {
font-size: var(--wp--preset--font-size--small);
margin-top: calc(var(--wp--preset--spacing--30) / 2);
}
form.woocommerce-EditAccountForm.edit-account span {
font-size: var(--wp--preset--font-size--small);
}