/*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Imports # Custom properties # Reset # Typography # Elements # Links # Global WooCommerce Css # Shop Page # Single Product Page # Cart Page # Checkout Page # My Account Page --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Imports --------------------------------------------------------------*/ @import "_custom-properties.css"; @import "_reset.css"; @import "_typography.css"; @import "_elements.css"; @import "_links.css"; @import "_grid.css"; @import "content.css"; @import "sidebar.css"; @import "widgets.css"; /*-------------------------------------------------------------- # Global WooCommerce Css --------------------------------------------------------------*/ .woocommerce .entry-meta, .woocommerce .entry-footer, .woocommerce-page .entry-meta, .woocommerce-page .entry-footer { display: none } .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt.disabled, .woocommerce #respond input#submit.alt.disabled:hover, .woocommerce #respond input#submit.alt:disabled, .woocommerce #respond input#submit.alt:disabled:hover, .woocommerce #respond input#submit.alt:disabled[disabled], .woocommerce #respond input#submit.alt:disabled[disabled]:hover, .woocommerce a.button.alt.disabled, .woocommerce a.button.alt.disabled:hover, .woocommerce a.button.alt:disabled, .woocommerce a.button.alt:disabled:hover, .woocommerce a.button.alt:disabled[disabled], .woocommerce a.button.alt:disabled[disabled]:hover, .woocommerce button.button.alt.disabled, .woocommerce button.button.alt.disabled:hover, .woocommerce button.button.alt:disabled, .woocommerce button.button.alt:disabled:hover, .woocommerce button.button.alt:disabled[disabled], .woocommerce button.button.alt:disabled[disabled]:hover, .woocommerce input.button.alt.disabled, .woocommerce input.button.alt.disabled:hover, .woocommerce input.button.alt:disabled, .woocommerce input.button.alt:disabled:hover, .woocommerce input.button.alt:disabled[disabled], .woocommerce input.button.alt:disabled[disabled]:hover, .woocommerce #respond input#submit.disabled, .woocommerce #respond input#submit:disabled, .woocommerce #respond input#submit:disabled[disabled], .woocommerce a.button.disabled, .woocommerce a.button:disabled, .woocommerce a.button:disabled[disabled], .woocommerce button.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled], .woocommerce input.button.disabled, .woocommerce input.button:disabled, .woocommerce input.button:disabled[disabled] { font-family: inherit; font-size: inherit; color: #fff; background-color: var(--button_background_color); border-radius: 3px; padding: 8px 20px; font-weight: 700; font-style: normal; text-decoration: none; text-align: center; cursor: pointer; display: inline-block; line-height: 1.3; border: 1px solid var(--button_border_color); outline: 0; vertical-align: middle; -webkit-appearance: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: all linear .2s; transition: all linear .2s; } .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce #respond input#submit.disabled:hover, .woocommerce #respond input#submit:disabled:hover, .woocommerce #respond input#submit:disabled[disabled]:hover, .woocommerce a.button.disabled:hover, .woocommerce a.button:disabled:hover, .woocommerce a.button:disabled[disabled]:hover, .woocommerce button.button.disabled:hover, .woocommerce button.button:disabled:hover, .woocommerce button.button:disabled[disabled]:hover, .woocommerce input.button.disabled:hover, .woocommerce input.button:disabled:hover, .woocommerce input.button:disabled[disabled]:hover { background-color: var(--button_background_hover_color); border: 1px solid var(--button_border_hover_color); color: #fff; } .woocommerce nav.woocommerce-pagination ul li span.current { color: var(--color-link-active); } .woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce nav.woocommerce-pagination ul li a:hover { color: var(--color-link-hover); } /*-------------------------------------------------------------- # Shop Page --------------------------------------------------------------*/ .post-type-archive-product .content-area { margin-top: 15px; } .woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering { margin-bottom: 2em; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { position: relative; background: #fff; border: 1px solid var(--global-border-color); border-radius: 8px; box-shadow: 0 1px 2px 0 rgba(0,0,0,.1); } .woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3 { margin: 0 1em; } .woocommerce ul.products li.product .price { margin: 0 16px; } .woocommerce ul.products li.product .star-rating { margin: 5px 1em 10px; } .woocommerce ul.products li.product .woocommerce-loop-category__title:hover, .woocommerce ul.products li.product .woocommerce-loop-product__title:hover { color: var(--color-link-hover); } .woocommerce ul.products li.product .button { margin: 1em; padding: 8px 5px; display: block; text-align: center; line-height: 1.3; } .woocommerce a.added_to_cart { padding: 0 10px 10px; display: block; text-align: center; } .woocommerce span.onsale { top: 2px; left: 2px; } .woocommerce ul.products li.product .onsale { top: 2px; right: 2px; margin: 0; font-weight: normal; } .woocommerce span.onsale { min-height: auto; min-width: auto; line-height: 1.5; border-radius: 8px; padding: 5px 10px; } .woocommerce nav.woocommerce-pagination ul, .woocommerce nav.woocommerce-pagination ul li { border: 0; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: inline-block; margin-bottom: .5em; margin-right: 1em; min-width: 1.75em; line-height: 1.5; text-align: center; background: #fff!important; font-weight: 400; border-radius: .28571429rem; text-transform: none; text-shadow: none!important; box-shadow: inset 0 0 0 1px #e8e8e8; padding: 10px 15px; text-decoration: none; } /*-------------------------------------------------------------- # Single Product Page --------------------------------------------------------------*/ .single-product .content-area { margin-top: 30px; } .single-product aside { margin-top: 15px; } .woocommerce div.product div.images .flex-control-thumbs li img { border: 5px solid var(--global-border-color); } .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary { margin-bottom: 2em; margin-top: 0; padding: 1em; border: 1px solid var(--global-border-color); box-shadow: 0 1px 2px 0 rgba(0,0,0,.1); border-radius: 8px; background: #fff; height: 100%; } .woocommerce div.product p.price, .woocommerce div.product span.price { margin-top: 0; } .woocommerce div.product form.cart div.quantity, .woocommerce-page div.product form.cart div.quantity { margin: 0 15px 0 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--color-link-active); } .pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right, .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { border: 0 !important; } .woocommerce #content div.product .woocommerce-tabs, .woocommerce div.product .woocommerce-tabs, .woocommerce-page #content div.product .woocommerce-tabs, .woocommerce-page div.product .woocommerce-tabs { margin-bottom: 2em; } .woocommerce div.product .woocommerce-tabs ul.tabs, .woocommerce-page div.product .woocommerce-tabs ul.tabs { margin: 0; } .woocommerce div.product .woocommerce-tabs .panel, .woocommerce-page div.product .woocommerce-tabs .panel { margin: 0 0 2em; padding: 1em; background: #fff; border: 1px solid #d3ced2; border-top: 0; border-radius: 0 0 8px 8px; } .woocommerce div.product .woocommerce-tabs .panel ul, .woocommerce-page div.product .woocommerce-tabs .panel ol, .woocommerce div.product .woocommerce-tabs .panel ul, .woocommerce-page div.product .woocommerce-tabs .panel ol { padding-left: 20px; } .woocommerce .entry-content .woocommerce-error, .woocommerce .entry-content .woocommerce-info, .woocommerce .entry-content .woocommerce-message, .woocommerce-page .entry-content .woocommerce-error, .woocommerce-page .entry-content .woocommerce-info, .woocommerce-page .entry-content .woocommerce-message, .woocommerce-error, .woocommerce-info, .woocommerce-message { margin: 0 0 2em; padding: 1em 2em 1em 3.5em !important; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.1); } .woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before { left: 15px; } .product_meta > span { display: block; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid var(--global-border-color); } .product_meta > span:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } /*-------------------------------------------------------------- # Cart Page --------------------------------------------------------------*/ .woocommerce #content table.cart td.actions .input-text, .woocommerce table.cart td.actions .input-text, .woocommerce-page #content table.cart td.actions .input-text, .woocommerce-page table.cart td.actions .input-text { width: 110px; font-size: inherit; } #add_payment_method .cart-collaterals .cart_totals table, .woocommerce-cart .cart-collaterals .cart_totals table, .woocommerce-checkout .cart-collaterals .cart_totals table, form.woocommerce-cart-form { background: #fff; } .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { float: none; width: 100%; position: relative; padding: 1em; border: 1px solid var(--global-border-color); -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.1); box-shadow: 0 1px 2px 0 rgba(0,0,0,.1); border-radius: 8px; background: #fff; } #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 { margin-bottom: 0; } .woocommerce table.shop_table{ box-shadow: none; } /*-------------------------------------------------------------- # Checkout Page --------------------------------------------------------------*/ .woocommerce .woocommerce-notice, .woocommerce .woocommerce ul.order_details, .woocommerce .woocommerce form.checkout_coupon, .woocommerce .woocommerce form.login, .woocommerce .woocommerce form.register, .woocommerce form.checkout.woocommerce-checkout, .woocommerce .woocommerce .woocommerce-customer-details, .woocommerce .woocommerce .woocommerce-order-details, .woocommerce .woocommerce .woocommerce-order-downloads, .woocommerce-page .woocommerce-notice, .woocommerce-page .woocommerce ul.order_details, .woocommerce-page .woocommerce form.checkout_coupon, .woocommerce-page .woocommerce form.login, .woocommerce-page .woocommerce form.register, .woocommerce-page form.checkout.woocommerce-checkout, .woocommerce-page .woocommerce .woocommerce-customer-details, .woocommerce-page .woocommerce .woocommerce-order-details, .woocommerce-page .woocommerce .woocommerce-order-downloads { position: relative; margin: 1rem 0 30px; padding: 1em !important; border: 1px solid var(--global-border-color); -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.1); box-shadow: 0 1px 2px 0 rgba(0,0,0,.1); border-radius: 8px; background: #fff; } @media only screen and (max-width: 768px) { .woocommerce-column--shipping-address { margin-top: 20px; } } /*-------------------------------------------------------------- # My Account Page --------------------------------------------------------------*/ .woocommerce .entry-content:not(.wc-tab) ol, .woocommerce-page .entry-content:not(.wc-tab) ol, .woocommerce .entry-content:not(.wc-tab) ul, .woocommerce-page .entry-content:not(.wc-tab) ul { margin: 0; padding: 0; list-style: none; } .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { position: relative; margin: 0 0 30px; padding: 1em; border: 1px solid var(--global-border-color); -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.1); box-shadow: 0 1px 2px 0 rgba(0,0,0,.1); border-radius: 8px; background: #fff; } .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link a { display: block; position: relative; font-weight: 400; padding: 10px 0; padding-left: 30px; } .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link.is-active a { color: var(--color-link-active); } .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link a:after { content: ""; width: 10px; height: 2px; background: #111; display: block; position: absolute; top: 0; left: 10px; bottom: 0; margin: auto; } .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link a:hover:after { background: var(--color-link-active); } .woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link.is-active a:after { background: var(--color-link-active); } .widget_product_search input[type=search] { width: 100%; margin-bottom: 10px; }