/* * ============================== * WooCommerce components * theme.json presets styles first. * ============================== */ /* Range slide color */ .wc-block-components-price-slider__range-input-progress, .rtl .wc-block-components-price-slider__range-input-progress { --range-color: var(--wp--preset--color--primary); } /* Breadcrumbs & in stock/out of stock. */ .woocommerce .woocommerce-breadcrumb, .woocommerce .woocommerce-breadcrumb a, .woocommerce div.product .stock { color: var(--wp--color--text-foreground); } /* On sale badge general, and in blocks */ .woocommerce span.onsale, .wc-block-components-product-sale-badge { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--background); font-size: var(--wp--preset--font-size--extra-small); /* other variable presets for selector bellow */ } /* WooCommerce blocks using var presets */ table.wc-block-cart-items .wc-block-cart-items__header th, .is-large.wc-block-cart .wc-block-cart__totals-title { font-size: var(--wp--preset--font-size--regular); /* other variable presets for selector bellow */ } /* Product page sub header (sorting, breadcrumbs etc.) */ .wc-block-components-sort-select, .woocommerce .woocommerce-breadcrumb, .wc-block-components-totals-item__description { margin-bottom: calc(2 * var(--wp--custom--v-spacing)); } /* Products grid block */ .wc-block-grid__products { margin: var(--wp--custom--v-spacing) 0; } /* * Product page, category and tag pages. */ .product_meta > * { display: block; } /* * Quantity input. */ .woocommerce .quantity .qty { } /* * On-sale badge */ .woocommerce span.onsale, .wc-block-components-product-sale-badge { box-sizing: initial; min-height: 3.236rem; min-width: 3.236rem; padding: 0.202rem; font-weight: 700; z-index: 9; position: absolute; text-align: center; line-height: 3.236; top: 4px; left: 4px; right: auto; margin: 0; border: none; border-radius: 100%; } /* * Related products on-sale badge */ .woocommerce ul.products li.product .onsale { top: 4px; left: 4px; right: auto; margin: 0; } /* * Product price in loop and single. */ .wc-block-components-product-price, .woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce ul.products li.product .price { color: var(--wp--preset--color--primary); font-weight: 700; } /* Override button styles.*/ .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button, .product button.single_add_to_cart_button, .woocommerce ul.products li.product .button.add_to_cart_button, .woocommerce ul.products li.product .button.product_type_grouped, .woocommerce ul.products li.product .button.product_type_external { font-weight: 500; } /* * Product button styles. */ .wc-block-grid__products .wp-block-button .wp-block-button__link, .wc-block-components-button.components-button.contained, .wc-block-mini-cart__footer-actions .wc-block-components-button:not(.is-link).outlined, .woocommerce ul.products li.product .button.add_to_cart_button, .woocommerce button.button.disabled, .woocommerce .product button.single_add_to_cart_button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button:not(.wc-block-cart-item__remove-link), .woocommerce input.button, .wc-block-mini-cart__shopping-button a { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--background); box-shadow: var(--wp--custom--shadow-button-input); border: 2px solid var(--wp--preset--color--foreground); border-radius: var(--wp--custom--global-border-radius); transition: background-color .2s linear; font-family: inherit; } .wc-block-grid__products .wp-block-button .wp-block-button__link:hover, .wc-block-components-button.components-button.contained:hover, .wc-block-mini-cart__footer-actions .wc-block-components-button:not(.is-link).outlined:hover, .woocommerce ul.products li.product .button.add_to_cart_button:hover, .woocommerce button.button.disabled:hover, .woocommerce .product button.single_add_to_cart_button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:not(.wc-block-cart-item__remove-link):hover, .woocommerce input.button:hover, .wc-block-mini-cart__shopping-button a:hover { background-color: var(--wp--preset--color--secondary); color: var(--wp--preset--color--primary) !important; box-shadow: var(--wp--custom--shadow-button-input); cursor: pointer; } .wc-block-grid__products .wp-block-button .wp-block-button__link:active, .wc-block-components-button.components-button.contained:active, .woocommerce ul.products li.product .button.add_to_cart_button:active, .woocommerce button.button.disabled:active, .woocommerce .product button.single_add_to_cart_button:active, .woocommerce #respond input#submit:active, .woocommerce a.button:active, .woocommerce button.button:not(.wc-block-cart-item__remove-link):active, .woocommerce input.button:active, .wc-block-mini-cart__shopping-button a:active { transform: translateY(2px); box-shadow: none; background-color: inherit } /* * WooCommerce pagingation */ .woocommerce button.button.disabled { padding: var(--wp--custom--input-padding); } .woocommerce nav.woocommerce-pagination ul { border: none; } .woocommerce nav.woocommerce-pagination ul li { border-right: none; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span, .woocommerce nav.woocommerce-pagination ul li span.current, .wc-block-pagination .wc-block-pagination-page { margin: calc(var(--wp--custom--h-spacing) * 0.2); padding: calc(var(--wp--custom--input-padding) * 0.2); border-radius: var(--wp--custom--global-border-radius); background: var(--wp--preset--color--primary); color: var(--wp--preset--color--background); box-shadow: var(--wp--custom--shadow-button-input); font-size: var(--wp--preset--font-size--small); transition: background-color .2s linear; line-height: inherit; } .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span:hover, .woocommerce nav.woocommerce-pagination ul li span.current:hover, .wc-block-pagination .wc-block-pagination-page:hover { color: var(--wp--preset--color--foreground); background: var(--wp--preset--color--secondary); box-shadow: var(--wp--custom--shadow-button-input); cursor: pointer; } .woocommerce nav.woocommerce-pagination ul li a:active, .woocommerce nav.woocommerce-pagination ul li span:active, .woocommerce nav.woocommerce-pagination ul li span.current:active, .wc-block-pagination .wc-block-pagination-page:active, .woocommerce nav.woocommerce-pagination ul li span.current, .wc-block-pagination .wc-block-pagination-page.wc-block-pagination-page--active { transform: translateY(2px); box-shadow: none; } .woocommerce nav.woocommerce-pagination ul li span.current, .wc-block-pagination .wc-block-pagination-page.wc-block-pagination-page--active { font-weight: 700; color: var(--wp--preset--color--foreground); background: var(--wp--preset--color--secondary); outline: 1px solid rgba(0,0,0,.3); } /* * Woocommerce notices */ .woocommerce-notices-wrapper .woocommerce-error, .woocommerce-notices-wrapper .woocommerce-info, .woocommerce-notices-wrapper .woocommerce-message { background: var(--wp--preset--color--secondary); color: var(--wp--preset--color--foreground); padding-right: 3.5em; } .woocommerce-notices-wrapper .woocommerce-error, .woocommerce-notices-wrapper .woocommerce-error li, .woocommerce-notices-wrapper .woocommerce-info, .woocommerce-notices-wrapper .woocommerce-info li, .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-message li { display: flex; width: 100%; justify-content: flex-end; flex-direction: row-reverse; align-items: center; } .woocommerce-notices-wrapper .woocommerce-error:before, .woocommerce-notices-wrapper .woocommerce-info:before, .woocommerce-notices-wrapper .woocommerce-message:before { top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.5); line-height: 1; border-radius: 10px; padding: 2px; } .woocommerce .woocommerce-error .button, .woocommerce .woocommerce-info .button, .woocommerce .woocommerce-message .button, .woocommerce-page .woocommerce-error .button, .woocommerce-page .woocommerce-info .button, .woocommerce-page .woocommerce-message .button { position: absolute; right: 1.2em; top: 50%; transform: translateY(-50%); } /* * Search form block. */ .wc-block-product-search input, .wc-block-product-search button { padding: var(--wp--custom--input-padding); border-radius: var(--wp--custom--global-border-radius); box-shadow: var(--wp--custom--shadow-button-input); } .wc-block-product-search button { transition: background-color .2s linear; background: var(--wp--preset--color--primary); color: var(--wp--preset--color--background); border: none; } .wc-block-product-search button:hover { transition: background-color .2s linear; background: var(--wp--preset--color--secondary); color: var(--wp--preset--color--foreground); } .wc-block-product-search button:active { transform: translateY(2px); box-shadow: none; } /* * Product search results and archive pages */ .woocommerce ul.products { text-align: center; display: flex; flex-wrap: wrap; } .woocommerce-page ul.products li.product { display: flex; flex-direction: column; margin-top: 1rem; margin-bottom: 1rem; } .woocommerce ul.products li.product .woocommerce-loop-product__title { text-decoration: underline; font-size: var(--wp--preset--font-size--small); padding: 0; } .woocommerce-page ul.products li.product .button { margin: auto auto 0 auto; } /* * WooCommerce Cart Block */ .wc-block-components-totals-wrapper::after, .is-large.wc-block-cart .wc-block-cart-items::after, .is-large.wc-block-cart .wc-block-cart-items td::after { border-width: 0; } table.wc-block-cart-items .wc-block-cart-items__header { border-bottom: 1px solid var(--wp--preset--color--primary) } table.wc-block-cart-items .wc-block-cart-items__header th, .is-large.wc-block-cart .wc-block-cart__totals-title { text-transform: initial; font-weight: 600; } .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { margin: 0 !important; padding: 0 !important; } /* * WooCommerce Checkout Block */ .woocommerce .wc-block-components-order-summary-item__image > img, .woocommerce-page .wc-block-components-order-summary-item__image > img{ max-width: 48px; box-shadow: var(--wp--custom--text-shadow); } .wc-block-components-order-summary-item__quantity { border-color: var(--wp--preset--color--primary); min-width: 15px; min-height: 25px; font-size: 0.9rem; font-weight: bold; left: -30px; right: auto; top: 10px; letter-spacing: -0.04rem; } .wc-block-components-product-name { font-weight: bold; } .wc-block-components-order-summary-item .wc-block-components-product-metadata { font-size: 0.9rem; } .wc-block-components-sidebar .wc-block-components-panel > h2, .wc-block-components-totals-coupon .wc-block-components-panel__button{ margin-bottom: var(--wp--custom--v-spacing, 1.25rem); } /* Fix inaccessible colors on the checkout and cart pages */ .wc-block-components-checkout-return-to-cart-button { fill: var(--wp--preset--color--foreground); text-decoration: underline; } /** * WooCommerce: Mini Cart. */ .wc-block-mini-cart__button:hover, .wc-block-mini-cart__drawer .components-button:hover { cursor: pointer; } .wp-block-woocommerce-mini-cart-contents { padding: calc(var(--wp--custom--v-spacing)); } .wp-block-woocommerce-mini-cart button.wc-block-mini-cart__button, .wp-block-woocommerce-mini-cart button.wc-block-mini-cart__button:hover, .wp-block-woocommerce-mini-cart button.wc-block-mini-cart__button:focus, .wp-block-woocommerce-mini-cart button.wc-block-mini-cart__button:active { box-shadow: none; border-radius: 0; margin-top: initial; margin-bottom: initial; background: none; border: none; } /* * Product image */ .wc-block-components-product-image img, .woocommerce div.product div.images img, .woocommerce ul.products li.product a img { border-radius: var(--wp--custom--global-border-radius); } /* Tabs */ .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #515151; } /* Fix a bug with the left alignment not working on the front. */ .wc-block-featured-product.has-left-content .wp-block-button.aligncenter { text-align: left; } @media ( max-width: 340px ) { .wc-block-product-search .wc-block-product-search__fields { display: block; } .wc-block-product-search .wc-block-product-search__field { max-width: 165px; } .wc-block-product-search .wc-block-product-search__button { margin-top: 1rem; margin-left: 0; } } @media (max-width: 782px) { .wc-block-cart .wc-block-cart__submit-container--sticky { background: inherit; padding: 0; } .wc-block-cart .wc-block-cart__submit-container--sticky:before { box-shadow: none; color: inherit; } } /* * Single product */ .woocommerce div.product .product_title { text-shadow: var(--wp--custom--text-shadow); }