/*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Global WooCommerce Css # Shop Page # Single Product Page # Cart Page # Checkout Page # My Account Page # Widgets # Extra Plugin Support # TP WooCommerce Product Gallery # Advanced WooCommerce Product Gallery Slider --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Global WooCommerce Css --------------------------------------------------------------*/ .woocommerce .entry-meta, .woocommerce .entry-footer, .woocommerce-page .entry-meta, .woocommerce-page .entry-footer { display: none } .woocommerce-product-search button[type=submit], .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: var(--button-border-radius); 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-product-search button[type=submit]:hover, .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: var(--global-border-radius); box-shadow: none; } .woocommerce ul.products li.product a img { border-radius: var(--global-border-radius) var(--global-border-radius) 0 0; } .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 { color: var(--color-theme-primary); margin: 0 16px; font-size: 18px; } @media only screen and (max-width: 543px) { .woocommerce ul.products li.product .price { font-size: 16px; } } .woocommerce ul.products li.product .price { font-weight: 500; } .woocommerce ul.products li.product .price ins { text-decoration: none; font-weight: 500; } .woocommerce ul.products li.product .price del { font-size: 14px; margin-right: 4px; color: #949494; opacity: 1; font-weight: 400; } .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; background-color: var(--color-theme-primary); } .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: var(--global-border-radius); 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 --------------------------------------------------------------*/ .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: none; border-radius: var(--global-border-radius); background: #fff; height: 100%; } .woocommerce div.product p.price, .woocommerce div.product span.price { margin-top: 0; color: var(--color-theme-primary); font-size: 20px; font-weight: 500; } .woocommerce div.product p.price>span, .woocommerce div.product span.price>span { margin: 0 4px; } .woocommerce div.product p.price ins, .woocommerce div.product span.price ins { text-decoration: none; font-weight: 500; } .woocommerce div.product p.price del, .woocommerce div.product span.price del { font-size: 14px; margin-right: 4px; color: #949494; opacity: 1; font-weight: 400; } .woocommerce div.product form.cart div.quantity, .woocommerce-page div.product form.cart div.quantity { margin: 0 15px 0 0; } .woocommerce div.product form.cart div.quantity .qty, .woocommerce-page div.product form.cart div.quantity .qty { padding: 5px; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--color-theme-primary); } .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; padding: 0; text-align: center; } .woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; } .woocommerce div.product .woocommerce-tabs .panel, .woocommerce-page div.product .woocommerce-tabs .panel { margin: 0 0 2em; padding: 1.5em; background: #fff; border: 1px solid var(--global-border-color); border-radius: var(--global-border-radius); } @media only screen and (max-width: 767px) { .woocommerce div.product .woocommerce-tabs .panel, .woocommerce-page div.product .woocommerce-tabs .panel { padding: 1em; } } .woocommerce div.product .woocommerce-tabs ul.tabs li { border: 0; background-color: transparent; display: inline-block; position: relative; z-index: 0; border-radius: 0; margin: 0; padding: 0 1em; } .woocommerce div.product .woocommerce-tabs ul.tabs li::before { left: 0; border-bottom-right-radius: 0; border-width: 0; box-shadow: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li::after { right: 0; border: 0; border-bottom-left-radius: 0; border-width: 0; box-shadow: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active::after, .woocommerce div.product .woocommerce-tabs ul.tabs li.active::before { box-shadow: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: transparent; z-index: 2; border-bottom: 1px solid var(--color-theme-primary); } .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-page div.product .woocommerce-tabs .panel ol.commentlist { padding-left: 0; } .woocommerce #reviews #comments ol.commentlist li img.avatar { width: 38px; padding: 0; border: 0; border-radius: 50%; } .woocommerce table.shop_attributes td { padding: 8px; } .woocommerce table.shop_attributes td p { padding: 0; } .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 table.shop_table { border: 1px solid var(--global-border-color); border-radius: var(--global-border-radius); } .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 18px; border: 0; } .woocommerce table.shop_table td { border-top: 1px solid var(--global-border-color); } .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; } form.woocommerce-cart-form { border-radius: var(--global-border-radius); } .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); box-shadow: none; border-radius: var(--global-border-radius); 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: var(--global-border-radius); background: #fff; } .select2-container.select2-container--default span.select2-choice, .select2-container.select2-container--default span.select2-selection { height: auto; margin: 0; padding: 10px; border: 1px solid var(--global-border-color); border-radius: var(--form-border-radius); box-sizing: border-box; } .select2-container--default .select2-selection--single span.select2-selection__rendered { color: inherit; line-height: normal; padding: 0; } .select2-container--default .select2-selection--single .select2-selection__arrow { position: absolute; z-index: 1; top: 50% !important; right: 1px; width: 20px; height: 26px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .select2-dropdown { margin-top: 0; border: 1px solid var(--global-border-color); } #add_payment_method #payment ul.payment_methods, .woocommerce-cart #payment ul.payment_methods, .woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--global-border-color); } #add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment { background-color: rgba(0, 0, 0, .02); border-radius: var(--global-border-radius); } #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: 0; } @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: var(--global-border-radius); background: #fff; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button.button { margin-left: 10px; } @media only screen and (max-width: 480px) { .woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button.button { margin: 0 0 15px; width: 100%; } } .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; } /*-------------------------------------------------------------- # Widgets --------------------------------------------------------------*/ .woocommerce .widget_price_filter .ui-slider .ui-slider-range, .woocommerce .widget_price_filter .ui-slider .ui-slider-handle { background-color: var(--color-link-active); } /*-------------------------------------------------------------- ## TP WooCommerce Product Gallery --------------------------------------------------------------*/ .lg-icon { font-family: lg !important; } /*-------------------------------------------------------------- ## Advanced WooCommerce Product Gallery Slider --------------------------------------------------------------*/ button.fancybox-button { background: rgba(30, 30, 30, 0.6) !important; border: 0 !important; border-radius: 0 !important; cursor: pointer; display: inline-block; height: 44px; margin: 0; outline: none; padding: 10px; transition: color .2s; vertical-align: top; width: 44px; }