/*-------------------------------------------------------------- # myStore - Custom WooCommerce Styling --------------------------------------------------------------*/ /* -------- breadcrumb Styling -------- */ .woocommerce .breadcrumbs, .woocommerce-page .breadcrumbs, .woocommerce .entry-header.site-container, .woocommerce-page .entry-header.site-container { display: none; } .woocommerce .woocommerce-breadcrumb, .woocommerce-page .woocommerce-breadcrumb { line-height: 15px; font-size: 11px; text-transform: uppercase; margin: 0 auto 12px; color: #777; position: absolute; right: 25px; top: 45px; } .single-product.woocommerce .woocommerce-breadcrumb, .single-product.woocommerce-page .woocommerce-breadcrumb { position: relative; top: 0; right: 0; text-align: right; } /* -------- Products Styling -------- */ .woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count { box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.015); border-bottom: 1px solid rgba(0, 0, 0, 0.08); display: block; width: 50%; float: left; margin: 10px 0 30px; padding: 15px 0 16px; } .woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering { box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.015); border-bottom: 1px solid rgba(0, 0, 0, 0.08); display: block; width: 50%; text-align: right; margin: 10px 0 30px; padding: 10px 0; float: left; } .woocommerce .woocommerce-ordering select, .woocommerce-page .woocommerce-ordering select { background: white; border-radius: 1px; border: 1px solid rgb(220, 220, 220); font-size: 12px; text-transform: uppercase; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02); padding: 6px; font-weight: 600; color: rgb(89, 89, 89); } .woocommerce .products ul, .woocommerce ul.products, .woocommerce-page .products ul, .woocommerce-page ul.products { margin: 0 -0.5% 10px; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: 24%; margin: 0 0.5% 13px; padding: 0 0 20px; text-align: center; float: left; list-style-type: none; position: relative; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span, .woocommerce-page nav.woocommerce-pagination ul li a, .woocommerce-page nav.woocommerce-pagination ul li span { padding: 10px !important; } .woocommerce #content nav.woocommerce-pagination ul, .woocommerce nav.woocommerce-pagination ul, .woocommerce-page #content nav.woocommerce-pagination ul, .woocommerce-page nav.woocommerce-pagination ul { border-radius: 3px; } .woocommerce nav.woocommerce-pagination ul li:first-child, .woocommerce-page nav.woocommerce-pagination ul li:first-child { border-radius: 3px 0 0 3px; } .woocommerce nav.woocommerce-pagination ul li:last-child, .woocommerce-page nav.woocommerce-pagination ul li:last-child { border-radius: 0 3px 3px 0; } .woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img { box-shadow: none !important; display: block; } .woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3, .woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title { line-height: 1em; font-weight: 500; margin: 0; padding: 8px 0; text-align: center; font-size: 18px; } .woocommerce #content ul.products li.product span.price, .woocommerce-page #content ul.products li.product span.price { color: #2D2D2D; font-weight: 600; padding: 0; font-size: 15px; margin: 0; text-align: center; } .woocommerce ul.products li.product .price del, .woocommerce-page ul.products li.product .price del { font-size: 13px; margin: 0 4px 0 0; display: inline-block; } .woocommerce .products .star-rating, .woocommerce-page .products .star-rating { position: absolute; left: 4px; top: 5px; opacity: 0; -webkit-transition: all 0.08s linear 0s; -moz-transition: all 0.08s linear 0s; -ms-transition: all 0.08s linear 0s; -o-transition: all 0.08s linear 0s; transition: all 0.08s linear 0s; } .woocommerce span.onsale, .woocommerce ul.products li.product .onsale, .woocommerce-page ul.products li.product .onsale { border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset; width: 70px; height: 28px; min-height: 20px; margin: 0; padding: 4px 0 0; line-height: 20px; font-size: 14px; text-shadow: none; font-weight: 400; text-transform: uppercase; right: -6px; top: 5px; } .woocommerce ul.products li.product .onsale:after, .woocommerce-page ul.products li.product .onsale:after { content: ''; width: 0px; height: 0px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; position: absolute; top: 25px; right: 2px; -ms-transform: rotate(45deg); /* IE 9 */ -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ transform: rotate(45deg); } .woocommerce #review_form #respond .form-submit input, .woocommerce-page #review_form #respond .form-submit input, .woocommerce ul.products li.product a.add_to_cart_button, .woocommerce-page ul.products li.product a.add_to_cart_button { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 0; color: #FFF; font-size: 13px; font-weight: 500; text-transform: uppercase; margin: 8px 0 0; text-shadow: none; } .woocommerce ul.products li.product a.added_to_cart, .woocommerce-page ul.products li.product a.added_to_cart { width: 25px; overflow: hidden; height: 31px; line-height: 20px; position: absolute; bottom: 23px; left: 65px; color: transparent; } .woocommerce ul.products li.product a:hover .star-rating, .woocommerce-page ul.products li.product a:hover .star-rating { opacity: 1; } /* -- New Gallery CSS -- */ .woocommerce div.product div.images .flex-control-thumbs { margin: 5px -5px 0; } .woocommerce div.product div.images .flex-control-thumbs li { padding: 5px; } .woocommerce div.product div.images .woocommerce-product-gallery__image { min-height: auto !important; } /* -------- Single Page Styling -------- */ .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images { margin: 0 0 40px; } .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-top: 5px; margin-bottom: 40px; } .woocommerce a.button, .woocommerce-page a.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page input.button, .woocommerce input.button.alt, .woocommerce-page #content input.button.alt, .woocommerce button.button.alt, .woocommerce-page button.button.alt { text-shadow: none !important; font-size: 14px; font-weight: 400; border: 1px solid rgba(0, 0, 0, 0.14); padding: 9px 30px 10px; margin: 0 0 0 7px; display: inline-block !important; color: #FFF !important; } .woocommerce table.cart td.actions .coupon .input-text, .woocommerce-page #content table.cart td.actions .coupon .input-text, .woocommerce-page table.cart td.actions .coupon .input-text { background-color: #FFF; width: 50%; padding: 8px 6px; margin: 0; } .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover { color: #FFF !important } .woocommerce form.checkout_coupon .form-row-first, .woocommerce-page form.checkout_coupon .form-row-first { width: 56%; } .woocommerce form.checkout_coupon .form-row-last, .woocommerce-page form.checkout_coupon .form-row-last { width: 44%; } .woocommerce form.checkout_coupon input.input-text, .woocommerce-page form.checkout_coupon input.input-text { width: 100%; } .woocommerce table.cart input, .woocommerce-page #content table.cart input, .woocommerce-page table.cart input { background: none; background-color: rgba(0, 0, 0, 0.28); text-shadow: none; font-size: 14px; font-weight: 400; border: 1px solid rgba(0, 0, 0, 0.2); padding: 9px 30px 10px; margin: 0 0 0 7px; top: 0px !important; } .woocommerce #content .quantity, .woocommerce .quantity, .woocommerce-page #content .quantity, .woocommerce-page .quantity { width: 120px; float: left; } .woocommerce #content .quantity input.qty, .woocommerce .quantity input.qty, .woocommerce-page #content .quantity input.qty, .woocommerce-page .quantity input.qty { height: 35px; border: 1px solid rgba(0, 0, 0, 0.08); background-color: #F5F5F5; border-radius: 3px; padding: 0; } .woocommerce #content .quantity .minus, .woocommerce #content .quantity .plus, .woocommerce .quantity .minus, .woocommerce .quantity .plus, .woocommerce-page #content .quantity .minus, .woocommerce-page #content .quantity .plus, .woocommerce-page .quantity .minus, .woocommerce-page .quantity .plus { width: 40px; height: 35px; color: #5e5e5e; float: left; position: relative; font-size: 24px; font-weight: 400; line-height: 1; text-shadow: none; background: none !important; border: 0; box-shadow: none; outline: none !important; } .woocommerce #content div.product .product_title, .woocommerce div.product .product_title, .woocommerce-page #content div.product .product_title, .woocommerce-page div.product .product_title { margin: 0 0 10px; } .woocommerce .woocommerce-product-rating, .woocommerce-page .woocommerce-product-rating { float: right; margin: 8px 0 0; } .single-product.woocommerce .woocommerce-product-rating, .single-product.woocommerce-page .woocommerce-product-rating { float: none; } .woocommerce #content div.product p.price, .woocommerce-page #content div.product p.price, .woocommerce-page div.product p.price { font-size: 24px; } .woocommerce form.cart, .woocommerce-page form.cart { margin-top: 30px; } .wc-proceed-to-checkout a.checkout-button { color: #FFF !important; float: right; } .woocommerce #review_form #respond .form-submit input, .woocommerce-page #review_form #respond .form-submit input { position: relative; } .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: 20px 0 30px; padding: 25px 0 40px; border: 1px solid rgba(0, 0, 0, 0.08); border-left: 0; border-right: 0; } .woocommerce-tabs ul.tabs, .woocommerce div.product .woocommerce-tabs ul.tabs, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs, .woocommerce-page div.product .woocommerce-tabs ul.tabs { float: left; width: 20%; margin: 0 2% 0 0; padding: 0; } .woocommerce #content div.product .woocommerce-tabs:before, .woocommerce div.product .woocommerce-tabs:before, .woocommerce-page #content div.product .woocommerce-tabs:before, .woocommerce-page div.product .woocommerce-tabs:before, .woocommerce #content div.product .woocommerce-tabs:after, .woocommerce div.product .woocommerce-tabs:after, .woocommerce-page #content div.product .woocommerce-tabs:after, .woocommerce-page div.product .woocommerce-tabs:after { content: ' '; display: table; clear: both; } .woocommerce #content div.product .woocommerce-tabs .panel, .woocommerce div.product .woocommerce-tabs .panel, .woocommerce-page #content div.product .woocommerce-tabs .panel, .woocommerce-page div.product .woocommerce-tabs .panel { padding: 10px 0 0; margin: 0 0 0 1%; width: 77%; float: left; } .woocommerce #content div.product .woocommerce-tabs ul.tabs li, .woocommerce div.product .woocommerce-tabs ul.tabs li, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li, .woocommerce-page div.product .woocommerce-tabs ul.tabs li { background: none; box-shadow: none; border: 0 none; border-bottom: 1px solid rgba(0, 0, 0, 0.08); padding: 5px 10px 5px 10px; margin: 0; font-size: 15px; border-radius: 0 !important; display: block; } .woocommerce #content div.product .woocommerce-tabs ul.tabs li a, .woocommerce div.product .woocommerce-tabs ul.tabs li a, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li a, .woocommerce-page div.product .woocommerce-tabs ul.tabs li a { text-shadow: none; font-weight: 400; display: block; } .woocommerce #content div.product .woocommerce-tabs ul.tabs li.active, .woocommerce div.product .woocommerce-tabs ul.tabs li.active, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li.active, .woocommerce-page div.product .woocommerce-tabs ul.tabs li.active { border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .woocommerce #content div.product .woocommerce-tabs ul.tabs li:before, .woocommerce div.product .woocommerce-tabs ul.tabs li:before, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li:before, .woocommerce-page div.product .woocommerce-tabs ul.tabs li:before, .woocommerce #content div.product .woocommerce-tabs ul.tabs li:after, .woocommerce div.product .woocommerce-tabs ul.tabs li:after, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li:after, .woocommerce-page div.product .woocommerce-tabs ul.tabs li:after, .woocommerce #content div.product .woocommerce-tabs ul.tabs:before, .woocommerce div.product .woocommerce-tabs ul.tabs:before, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs:before, .woocommerce-page div.product .woocommerce-tabs ul.tabs:before, .woocommerce #content div.product .woocommerce-tabs ul.tabs li.active:after, .woocommerce div.product .woocommerce-tabs ul.tabs li.active:after, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li.active:after, .woocommerce-page div.product .woocommerce-tabs ul.tabs li.active:after { border: 0; box-shadow: none; } .woocommerce #content div.product form.cart .variations td.label, .woocommerce div.product form.cart .variations td.label, .woocommerce-page #content div.product form.cart .variations td.label, .woocommerce-page div.product form.cart .variations td.label { padding: 5px 30px 10px 0; } .woocommerce form .form-row input.input-text, .woocommerce-page form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce-page form .form-row select, .woocommerce #content div.product form.cart .variations select, .woocommerce div.product form.cart .variations select, .woocommerce-page #content div.product form.cart .variations select, .woocommerce-page div.product form.cart .variations select { background: white; border-radius: 1px; border: 1px solid rgb(220, 220, 220); font-size: 12px; text-transform: uppercase; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02); padding: 6px; font-weight: 600; color: rgb(89, 89, 89); margin: 0 0 3px; } .woocommerce .entry-summary .single_variation_wrap, .woocommerce-page .entry-summary .single_variation_wrap { text-align: right; font-size: 18px; } .woocommerce .cart-collaterals .shipping_calculator .button, .woocommerce-page .cart-collaterals .shipping_calculator .button { width: auto; border: 1px solid rgba(0, 0, 0, 0.15); padding: 9px 20px 10px; box-shadow: none; color: #FFF; text-shadow: none; font-weight: 400; font-size: 14px; } /* -------- Table Styling -------- */ .woocommerce table.shop_table, .woocommerce-page table.shop_table { margin: 0 0 50px; border-radius: 0; border-left: 0; border-right: 0; } .woocommerce table.cart th, .woocommerce-page #content table.cart th, .woocommerce-page table.cart th { background-color: rgba(0, 0, 0, 0.02); font-size: 16px; text-shadow: none; font-weight: 500; padding: 10px; } .woocommerce table.shop_table td, .woocommerce-page table.shop_table td { padding: 25px 10px; } .woocommerce .cart-collaterals .cart_totals table, .woocommerce-page .cart-collaterals .cart_totals table { float: right; } .woocommerce .cart-collaterals .cart_totals tr th, .woocommerce-page .cart-collaterals .cart_totals tr th { padding: 15px 10px 15px 0; } .woocommerce .cart-collaterals .cart_totals table td, .woocommerce-page .cart-collaterals .cart_totals table td { padding: 15px 0 15px 10px; text-align: right; width: 12%; } .woocommerce table.shop_table tfoot th, .woocommerce-page table.shop_table tfoot th { vertical-align: middle; } .woocommerce table.shop_table.my_account_orders th, .woocommerce-page table.shop_table.my_account_orders th, .woocommerce table.shop_table.order_details th, .woocommerce-page table.shop_table.order_details th, .woocommerce-checkout table.shop_table thead .product-name, .woocommerce-checkout table.shop_table thead .product-total { background-color: rgba(0, 0, 0, 0.04); padding: 10px; } .woocommerce table.shop_table tfoot th, .woocommerce-page table.shop_table tfoot th, .woocommerce table.shop_table tfoot td, .woocommerce-page table.shop_table tfoot td { background-color: rgba(0, 0, 0, 0.04); padding: 10px; } .woocommerce .cart-collaterals .cross-sells, .woocommerce-page .cart-collaterals .cross-sells { width: 52%; } .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { width: 44%; max-width: 380px; } .woocommerce table.cart a.remove, .woocommerce-page #content table.cart a.remove, .woocommerce-page table.cart a.remove { font-size: 30px; color: #777; } .woocommerce table.cart img, .woocommerce-page #content table.cart img, .woocommerce-page table.cart img { height: 100px; width: auto; } .woocommerce #customer_details, .woocommerce-page #customer_details { display: block; width: 54%; clear: none; float: left; margin-left: 0; margin-right: 6%; } .woocommerce #customer_details .col-1, .woocommerce-page #customer_details .col-1, .woocommerce #customer_details .col-2, .woocommerce-page #customer_details .col-2 { float: none; width: 100%; } .woocommerce #customer_details .col-2, .woocommerce-page #customer_details .col-2 { margin: 25px 0 0; padding: 25px 0 0; border-top: 1px solid rgba(0, 0, 0, 0.08); } .woocommerce #order_review_heading, .woocommerce-page #order_review_heading, .woocommerce #order_review, .woocommerce-page #order_review { border: 1px solid rgba(0, 0, 0, 0.08); background-color: rgba(0, 0, 0, 0.02); display: block; width: 40%; clear: none; float: right; margin-right: 0; margin-left: 4%; margin-left: 0; } .woocommerce #order_review_heading, .woocommerce-page #order_review_heading { border-bottom: 0; padding: 20px 20px 0; margin: 64px 0 0; } .woocommerce #order_review, .woocommerce-page #order_review { border-top: 0; padding: 20px 20px 20px; } .woocommerce form .form-row, .woocommerce-page form .form-row { padding: 0; margin: 0 0 5px; } .woocommerce form .form-row input.input-text, .woocommerce-page form .form-row input.input-text { border: 1px solid rgba(0, 0, 0, 0.18); background-color: rgba(0, 0, 0, 0.02); font-weight: 400; font-size: 15px; text-transform: none; padding: 8px; } .woocommerce form .form-row textarea.input-text, .woocommerce-page form .form-row textarea.input-text { border: 1px solid rgba(0, 0, 0, 0.18); background-color: rgba(0, 0, 0, 0.02); font-weight: 400; font-size: 15px; text-transform: none; padding: 8px; min-height: 100px; } .woocommerce .order_details, .woocommerce-page .order_details { border: 1px solid rgba(0, 0, 0, 0.08); } .woocommerce .order_details li, .woocommerce-page .order_details li { padding: 20px; } .woocommerce-checkout .form-row .chosen-container-single .chosen-single { background: none; background-color: rgba(0, 0, 0, 0.02); border: 1px solid rgba(0, 0, 0, 0.18); box-shadow: none; height: 36px; border-radius: 0; padding: 2px 0 4px 8px; } /* -------- Messages Styling -------- */ .cart-empty { font-size: 18px; } .return-to-shop { margin-bottom: 100px; } .cart-empty, .return-to-shop { text-align: center; } .woocommerce .woocommerce-message, .woocommerce-page .woocommerce-message { border-radius: 1px; box-shadow: none; background: none; background-color: rgba(0, 0, 0, 0.04); } .woocommerce .woocommerce-info, .woocommerce-page .woocommerce-info { border-radius: 1px; box-shadow: none; background: none; background-color: rgba(0, 0, 0, 0.04); } .woocommerce .woocommerce-error, .woocommerce-page .woocommerce-error { border-radius: 1px; box-shadow: none; background: none; background-color: rgba(0, 0, 0, 0.04); } .woocommerce .woocommerce-error:before, .woocommerce-page .woocommerce-error:before, .woocommerce .woocommerce-message:before, .woocommerce-page .woocommerce-message:before, .woocommerce .woocommerce-info:before, .woocommerce-page .woocommerce-info:before { border-radius: 0; height: 100%; left: 0; width: 30px; } /* -------- Sidebar Styling -------- */ .woocommerce .widget-area, .woocommerce-page .widget-area { box-shadow: -1px 0 0 #D7D7D7; } /* -------- My Account Styling -------- */ .woocommerce-account .woocommerce-MyAccount-navigation { width: 20%; } .woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; box-shadow: -1px 0 0 #D7D7D7 inset; } .woocommerce-account .woocommerce-MyAccount-navigation ul li { margin: 0 0 1px; padding: 0; background-color: rgba(0, 0, 0, 0.02); list-style-type: none; } .woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); padding: 12px 12px; text-decoration: none; } .woocommerce-account .is-active { box-shadow: 4px 0 0 rgba(0, 0, 0, 0.3) inset; } .woocommerce-account .woocommerce-MyAccount-content { width: 78%; } /* -------- Responsive Styling -------- */ @media screen and (max-width: 980px) { .woocommerce ul.products, .woocommerce-page ul.products { margin: 0 -1% 30px; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: 48%; margin: 0 1% 22px; } } @media screen and (max-width: 782px) { .woocommerce #container, .woocommerce-page #container { box-shadow: none; width: 100%; float: none; padding: 0; } .woocommerce .widget-area, .woocommerce-page .widget-area { box-shadow: 0 -1px 0 #D7D7D7; padding: 35px 0 0; margin: 30px 0 50px; } .woocommerce ul.products, .woocommerce-page ul.products { margin: 0 0 10px; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: 100%; margin: 0 0 24px; } .woocommerce #customer_details, .woocommerce-page #customer_details { width: 100%; float: none; } .woocommerce #order_review_heading, .woocommerce-page #order_review_heading, .woocommerce #order_review, .woocommerce-page #order_review { width: 100%; float: none; } /* -- My Account -- */ .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; margin: 0 0 20px; } .woocommerce-account .woocommerce-MyAccount-navigation ul { box-shadow: none; } .woocommerce-account .woocommerce-MyAccount-navigation ul li { display: inline-block; margin: 0 4px 5px 0; } .woocommerce-account .is-active { box-shadow: 0 -4px 0 rgba(0, 0, 0, 0.3) inset; } } @media screen and (max-width: 769px) { .woocommerce ul.products, .woocommerce-page ul.products { margin: 0 -1% 30px; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: 48%; margin: 0 1% 22px; } } @media screen and (max-width: 560px) { .woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count { width: 100%; float: none; border-bottom: 0; margin: 0; } .woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering { width: 100%; float: none; } } @media screen and (max-width: 460px) { .woocommerce ul.products, .woocommerce-page ul.products { margin: 0 0 10px; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: 100%; margin: 0 0 24px; } }