/* Theme Name: Beauty Lab WooCommerce styles override */ /** * Shop tables */ table.shop_table_responsive thead { display: none; } table.shop_table_responsive tbody th { display: none; } table.shop_table_responsive tr td { display: block; text-align: right; clear: both; } table.shop_table_responsive tr td::before { content: attr(data-title) ": "; float: left; } table.shop_table_responsive tr td.product-remove a { text-align: left; } table.shop_table_responsive tr td.product-remove::before { display: none; } table.shop_table_responsive tr td.actions::before, table.shop_table_responsive tr td.download-actions::before { display: none; } table.shop_table_responsive tr td.download-actions .button { display: block; text-align: center; } @media screen and (min-width: 48em) { table.shop_table_responsive thead { display: table-header-group; } table.shop_table_responsive tbody th { display: table-cell; } table.shop_table_responsive tr th, table.shop_table_responsive tr td { text-align: left; } table.shop_table_responsive tr td { display: table-cell; } table.shop_table_responsive tr td::before { display: none; } } /** * Products */ ul.products { margin: 0; padding: 0; } ul.products li.product { list-style: none; position: relative; margin-bottom: 2em; } ul.products li.product img { display: block; } ul.products li.product .button { display: block; } @media screen and (min-width: 48em) { ul.products li.product { width: 30.79667%; float: left; margin-right: 3.8%; } ul.products li.product.first { clear: both; } ul.products li.product.last { margin-right: 0; } ul.products.columns-1 li.product { float: none; width: 100%; } ul.products.columns-2 li.product { width: 48.1%; } ul.products.columns-3 li.product { width: 30.79667%; } ul.products.columns-4 li.product { width: 22.15%; } ul.products.columns-5 li.product { width: 16.96%; } ul.products.columns-6 li.product { width: 13.49333%; } } /** * Single product */ .single-product div.product { position: relative; } .single-product div.product .woocommerce-product-gallery { position: relative; width: 50%; } .single-product div.product .woocommerce-product-gallery figure { margin: 0; position: relative; } .single-product div.product .woocommerce-product-gallery figure .onsale { position: absolute; z-index: 9; left: 10px; top: 10px; color: #fff; line-height: normal; font-size: 13px; padding: 4px 7px; border-radius: 3px; } .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger { position: absolute; top: 1em; right: 1em; display: block; z-index: 99; } .single-product div.product .woocommerce-product-gallery .flex-viewport { margin-bottom: 1em; } .single-product div.product .woocommerce-product-gallery .flex-control-thumbs { margin: 0; padding: 0; } .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li { list-style: none; cursor: pointer; float: left; } .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img { opacity: 0.5; transition: all 0.3s ease; } .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active { opacity: 1; } .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img { opacity: 1; } .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li { width: 48.1%; } .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n) { margin-right: 0; } .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n+1) { clear: both; } .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li { width: 30.79667%; } .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n) { margin-right: 0; } .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n+1) { clear: both; } .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li { width: 22.15%; } .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n) { margin-right: 0; } .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) { clear: both; } .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li { width: 16.96%; } .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n) { margin-right: 0; } .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n+1) { clear: both; } /* --modified-- */ .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li { width: 100%!important; float: none!important; } .woocommerce-product-gallery .flex-control-nav .owl-nav .owl-prev, .woocommerce-product-gallery .flex-control-nav .owl-nav .owl-next { display: inline-block; color: #d5275a; padding: 0 5px; position: absolute; top: 0; height: 100%; display: flex; flex-flow: column; align-items: center; justify-content: center; font-size: 23px; width: 24px; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .woocommerce-product-gallery .flex-control-nav:hover .owl-nav .owl-prev, .woocommerce-product-gallery .flex-control-nav:hover .owl-nav .owl-next { opacity: 1; visibility: visible; } .woocommerce-product-gallery .flex-control-nav .owl-nav .owl-prev.disabled, .woocommerce-product-gallery .flex-control-nav .owl-nav .owl-next.disabled { opacity: 0; visibility: hidden; } .woocommerce-product-gallery .flex-control-nav .owl-nav .owl-prev { left: 0; background: -moz-linear-gradient(left, rgba(201,201,201,0.65) 0%, rgba(201,201,201,0.65) 1%, rgba(201,201,201,0) 100%); background: -webkit-linear-gradient(left, rgba(201,201,201,0.65) 0%,rgba(201,201,201,0.65) 1%,rgba(201,201,201,0) 100%); background: linear-gradient(to right, rgba(201,201,201,0.65) 0%,rgba(201,201,201,0.65) 1%,rgba(201,201,201,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6c9c9c9', endColorstr='#00c9c9c9',GradientType=1 ); } .woocommerce-product-gallery .flex-control-nav .owl-nav .owl-next { right: 0; background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(201,201,201,0.65) 100%); background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(201,201,201,0.65) 100%); background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(201,201,201,0.65) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6c9c9c9',GradientType=1 ); } .stock:empty::before { display: none; } .stock.in-stock { color: #0f834d; } .stock.out-of-stock { color: #e2401c; } .beauty-product-single .product .summary { margin: 0; width: 50%; padding-left: 30px; } .beauty-product-single .product .product_title { font-size: 24px; line-height: 1.4; font-weight: 700; margin-bottom: 17px; } .beauty-product-single .product .woocommerce-product-rating { display: flex; flex-flow: row; align-items: center; margin-bottom: 28px; } .beauty-product-single .product .star-rating { margin-right: 5px; } .beauty-product-single .product .price { font-size: calc(24px + (30 - 24) * ((100vw - 320px) / (1920 - 320))); line-height: 1; font-weight: 700; margin-bottom: 20px; } @media (min-width: 1921px){ .beauty-product-single .product .price { font-size: 30px; } } .beauty-product-single .product .woocommerce-product-details__short-description { margin-bottom: 42px; } .beauty-product-single .woocommerce-grouped-product-list td label { margin: 0; } .beauty-product-single .woocommerce-grouped-product-list td label a:hover { text-decoration: underline; } .beauty-product-single table.variations td, .beauty-product-single table.variations th, .beauty-product-single .woocommerce-grouped-product-list table td, .beauty-product-single .woocommerce-grouped-product-list table th { vertical-align: middle; } .beauty-product-single .woocommerce-variation-add-to-cart { display: flex; } .woocommerce-variation-description { margin-bottom: 15px; } .woocommerce-variation.single_variation { margin-bottom: 20px; } .woocommerce-variation-availability { margin-top: 5px; } .beauty-product-single .product .cart { display: flex; flex-flow: row wrap; align-items: center; padding-bottom: 35px; } .beauty-product-single .product .quantity { margin-right: 10px; } .beauty-product-single .product .quantity input { margin: 0; border: 1px solid #f1f1f1; height: 40px; width: 62px; padding: 5px 10px; border-radius: 0; } .beauty-product-single .product .button { display: inline-block; height: 40px; color: #fff; padding: 0px 20px; vertical-align: middle; line-height: 40px; border: none; text-transform: uppercase; transition: all 0.3s ease; border-radius: 0; } .beauty-product-single .product .product_meta { border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; padding: 30px 0; margin-bottom: 25px; } .beauty-product-single .product .product_meta > span { display: block; font-weight: 600; margin-bottom: 10px; } .beauty-product-single .product .product_meta > span:last-child { margin-bottom: 0; } .beauty-product-single .product .product_meta > span span { font-weight: 400; } .beauty-product-single .product .product_meta > span a { font-weight: 400; text-transform: capitalize; } .beauty-product-single .product .product_meta > span a:hover { text-decoration: underline; } .beauty-product-single .product .social-share { display: flex; align-items: center; } .beauty-product-single .product .social-share .share-title { font-weight: 600; margin-right: 10px; } .beauty-product-single .product .social-share a { background: #efefef; box-shadow: 0 -2px 0 0 #d5275a inset; color: #888; display: inline-block; font-size: 17px; height: 32px; margin-right: 5px; padding: 4px; text-align: center; width: 32px; } .beauty-product-single .product .social-share a:hover { box-shadow: 0 -40px 0 0 #d5275a inset; color: #fff; } /** * Checkout */ @media screen and (min-width: 768px) { .col2-set .form-row-first { float: left; margin-right: 3.8%; } .col2-set .form-row-last { float: right; margin-right: 0; } .col2-set .form-row-first, .col2-set .form-row-last { width: 48.1%; } } /** * General WooCommerce components */ /** * Header cart */ .site-header-cart { position: relative; margin: 0; padding: 0; } .site-header-cart .cart-contents { text-decoration: none; } .site-header-cart .widget_shopping_cart { display: none; } .site-header-cart .product_list_widget { margin: 0; padding: 0; } /** * Star rating */ .star-rating { overflow: hidden; position: relative; height: 1.618em; line-height: 1.618; width: 6.3em; font-family: star; font-weight: 400; font-size: 13px; } .star-rating::before { content: "\53\53\53\53\53"; opacity: 0.25; float: left; top: 0; left: 0; position: absolute; letter-spacing: 3px; } .star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; } .star-rating span::before { content: "\53\53\53\53\53"; top: 0; position: absolute; left: 0; color: #4169e1; letter-spacing: 3px; } p.stars a { position: relative; height: 1em; width: 1em; text-indent: -999em; display: inline-block; text-decoration: none; margin-right: 1px; font-weight: 400; } p.stars a::before { display: block; position: absolute; top: 0; left: 0; width: 1em; height: 1em; line-height: 1; font-family: star; content: "\53"; color: #404040; text-indent: 0; opacity: 0.25; } p.stars a:hover ~ a::before { content: "\53"; color: #404040; opacity: 0.25; } p.stars:hover a::before { content: "\53"; color: #4169e1; opacity: 1; } p.stars.selected a.active::before { content: "\53"; color: #4169e1; opacity: 1; } p.stars.selected a.active ~ a::before { content: "\53"; color: #404040; opacity: 0.25; } p.stars.selected a:not(.active)::before { content: "\53"; color: #4169e1; opacity: 1; } /** * Tabs */ .beauty-product-single .woocommerce-tabs { width: 100%; margin-top: 30px; } .woocommerce-tabs ul.tabs { list-style: none; margin: 0; padding: 0; text-align: left; display: flex; flex-flow: row wrap; } .woocommerce-tabs ul.tabs li { display: block; margin: 0; position: relative; } .woocommerce-tabs ul.tabs li a { display: block; background: #eaeaea; color: #515151; font-size: 14px; padding: 10px 22px; text-transform: uppercase; border-right: 1px solid #d6d4d4; } .woocommerce-tabs ul.tabs li:last-child a { border-right: none; } .woocommerce-tabs ul.tabs li.active a { color: #fff; } .woocommerce-tabs .woocommerce-Tabs-panel { border: 1px solid #f1f1f1; padding: 25px 30px; margin: 0; } .woocommerce-tabs .panel h2:first-of-type { margin-bottom: 30px; font-size: 20px; font-weight: 600; } .woocommerce-tabs table { margin: 0; } .woocommerce-tabs table td, .woocommerce-tabs table th { padding: .5rem 1rem; } /*----product review-----*/ .woocommerce-tabs ol.commentlist { list-style: none; margin: 0; } .woocommerce-tabs ol.commentlist .comment_container { display: flex; flex-flow: row wrap; align-items: flex-start; } .woocommerce-tabs ol.commentlist .avatar { border-radius: 100%; } .woocommerce-tabs ol.commentlist .comment-text { width: calc(100% - 60px); padding-left: 15px; } .woocommerce-tabs ol.commentlist .review { margin-bottom: 30px; } .woocommerce-tabs ol.commentlist .meta { text-transform: capitalize; margin: 5px 0; } .woocommerce-tabs ol.commentlist .woocommerce-review__dash, .woocommerce-tabs ol.commentlist .woocommerce-review__published-date { color: #d0d0d0; } /* -----review comment form------ */ .woocommerce-tabs .comment-respond .comment-form { display: flex; flex-flow: row wrap; align-items: flex-start; } .woocommerce-tabs .comment-respond .comment-notes { margin: 6px 0; width: 100%; } .woocommerce-tabs .comment-respond .comment-form-email, .woocommerce-tabs .comment-respond .comment-form-author, .woocommerce-tabs .comment-respond .comment-form-comment, .woocommerce-tabs .comment-respond .comment-form-rating { width: 100%; } @media (min-width: 768px) { .woocommerce-tabs .comment-respond .comment-form-author { width: 50%; padding-right: 15px; } .woocommerce-tabs .comment-respond .comment-form-email { width: 50%; padding-left: 15px; } } .woocommerce-tabs .comment-respond input, .woocommerce-tabs .comment-respond textarea { border: 1px solid #d1d1d1; padding: 5px 15px; border-radius: 0; } .woocommerce-tabs .comment-respond input:not([type="checkbox"]) { height: 43px; } .woocommerce-tabs .comment-respond input[type="checkbox"] { display: inline-block; width: 20px; height: 20px; margin: 0 8px 0 0; position: relative; top: 3px; } .woocommerce-tabs .comment-respond .comment-form-cookies-consent { margin-bottom: 30px; width: 100%; display: flex; flex-flow: row; align-items: flex-start; } .woocommerce-tabs .comment-respond .comment-form-cookies-consent label { margin: 0; vertical-align: middle; } .woocommerce-tabs .comment-respond .form-submit { width: 100%; } .woocommerce-tabs .comment-respond .form-submit .submit { margin-bottom: 0; color: #fff; border: medium none; font-weight: 600; height: 43px; text-transform: uppercase; cursor: pointer; width: auto; padding: 0 30px; transition: all 0.3s ease; } /** * Password strength meter */ .woocommerce-password-strength { text-align: right; } .woocommerce-password-strength.strong { color: #0f834d; } .woocommerce-password-strength.short { color: #e2401c; } .woocommerce-password-strength.bad { color: #e2401c; } .woocommerce-password-strength.good { color: #3d9cd2; } /** * Forms */ .form-row.woocommerce-validated input.input-text { box-shadow: inset 2px 0 0 #0f834d; } .form-row.woocommerce-invalid input.input-text { box-shadow: inset 2px 0 0 #e2401c; } .required { color: #f00; } /** * Notices */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments { background-color: #0f834d; clear: both; color: #fff; padding: 8px 15px; margin-bottom: 20px; } .woocommerce-message a, .woocommerce-info a, .woocommerce-error a, .woocommerce-noreviews a, p.no-comments a { color: #fff; font-weight: 600; text-decoration: underline; } .woocommerce-message a:hover, .woocommerce-info a:hover, .woocommerce-error a:hover, .woocommerce-noreviews a:hover, p.no-comments a:hover { text-decoration: none; } .woocommerce-info, .woocommerce-noreviews, p.no-comments { background-color: #3d9cd2; } .woocommerce-error { background-color: #e2401c; } .demo_store { position: fixed; left: 0; bottom: 0; right: 0; margin: 0; padding: 1em; background-color: #3d9cd2; z-index: 9999; } @media screen and (min-width: 48em) { /** * Header cart */ .site-header-cart .widget_shopping_cart { position: absolute; top: 100%; width: 100%; z-index: 999999; left: -999em; display: block; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); } .site-header-cart:hover .widget_shopping_cart, .site-header-cart.focus .widget_shopping_cart { left: 0; display: block; } } /** * WooCommerce widgets */ /** * WooCommerce Price Filter */ .widget_price_filter .price_slider { margin-bottom: 1.5em; } .widget_price_filter .price_slider_amount { text-align: right; line-height: 2.4; } .widget_price_filter .price_slider_amount .button { float: left; border: none; padding: 0 18px 1px; background: #d5275a; color: #fff; height: 33px; } .widget_price_filter .ui-slider { position: relative; text-align: left; } .widget_price_filter .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1em; height: 1em; cursor: ew-resize; outline: none; /* background: #4169e1; */ box-sizing: border-box; margin-top: -0.32em; opacity: 1; transition: all 0.3s linear; } .widget_price_filter .ui-slider .ui-slider-handle:last-child { margin-left: -1em; } .widget_price_filter .ui-slider .ui-slider-handle:hover, .widget_price_filter .ui-slider .ui-slider-handle.ui-state-active { box-shadow: 0 0 0 0.25em rgba(0, 0, 0, 0.1); } .widget_price_filter .ui-slider .ui-slider-range { position: absolute; z-index: 1; display: block; border: 0; /* background: #4169e1; */ transition: all 0.3s linear; } .widget_price_filter .price_slider_wrapper .ui-widget-content { background: rgba(0, 0, 0, 0.1); } .widget_price_filter .ui-slider-horizontal { height: 0.3em; } .widget_price_filter .ui-slider-horizontal .ui-slider-range { height: 100%; } .widget_rating_filter li.wc-layered-nav-rating { text-align: right; } .widget_rating_filter li.wc-layered-nav-rating a { width: 100%; padding-left: 0; } .widget_rating_filter li.wc-layered-nav-rating a:hover { color: inherit; } .widget_rating_filter li.wc-layered-nav-rating a:before { display: none; } .widget_rating_filter li.wc-layered-nav-rating span.star-rating { float: left; } /* ---cart style--- */ .widget_shopping_cart .widget_shopping_cart_content { background: #fff; } .widget_shopping_cart .woocommerce-mini-cart a { display: inline-block; } .widget_shopping_cart .woocommerce-mini-cart { border: 1px solid #dedbdb; } .widget_shopping_cart .woocommerce-mini-cart-item { border-bottom: 1px solid #dedbdb; padding: 12px 10px; display: flex; position: relative; } .widget_shopping_cart .woocommerce-mini-cart-item:last-child { border-bottom: none; } .widget_shopping_cart .remove_from_cart_button { background: #fdb7bd; color: #d5275a; border: 1px solid#f5c2c7; width: 18px; height: 18px; border-radius: 100%; text-align: center; line-height: 16px; padding: 0 4px; position: absolute; left: 59px; top: 4px; opacity: 0; visibility: hidden; } .widget_shopping_cart .woocommerce-mini-cart-item:hover .remove_from_cart_button { opacity: 1; visibility: visible; } .widget_shopping_cart .attachment-woocommerce_thumbnail { width: 60px; margin-right: 15px; } .widget_shopping_cart .woocommerce-mini-cart-item .quantity { display: block; } .widget_shopping_cart .woocommerce-mini-cart__total.total { margin: 8px 0 12px; text-align: right; } .widget_shopping_cart .woocommerce-mini-cart__buttons.buttons { display: flex; flex-flow: row; align-items: center; justify-content: flex-end; } .widget_shopping_cart .woocommerce-mini-cart__buttons.buttons .button { display: block; color: #fff; padding: 6px 20px; border-radius: 3px; margin-left: 10px; } /* -------widget_products------ */ .widget_recently_viewed_products ul li, .widget_recent_reviews ul li, .widget_top_rated_products ul li, .widget_products ul li { display: block; margin-bottom: 30px; } .widget_recently_viewed_products ul li:last-child, .widget_recent_reviews ul li:last-child, .widget_top_rated_products ul li:last-child, .widget_products ul li:last-child { margin-bottom: 0px; } .widget_recently_viewed_products ul li a, .widget_recent_reviews ul li a, .widget_top_rated_products ul li a, .widget_products ul li a { padding: 0; } .widget_recently_viewed_products ul li a .product-title, .widget_recent_reviews ul li a .product-title, .widget_top_rated_products ul li a .product-title, .widget_products ul li a .product-title { margin-top: 5px; color: #232428; display: block; font-size: 18px; font-family: 'Arimo', sans-serif; font-weight: 400; } .widget_recently_viewed_products ul li a:before, .widget_recent_reviews ul li a:before, .widget_top_rated_products ul li a:before, .widget_products ul li a:before { display: none; } @media (max-width: 991px) { .beauty-product-single { padding: 80px 0 50px; } .single-product div.product .woocommerce-product-gallery { width: 100%; } .beauty-product-single .product .summary { margin: 30px 0 0 0; width: 100%; padding-left: 0; } } @media (max-width: 767px) { .woocommerce-tabs .woocommerce-Tabs-panel { padding: 15px 20px; } .woocommerce-tabs .panel h2:first-of-type { margin-bottom: 15px; } } @media (max-width: 575px) { .woocommerce-tabs ul.tabs { display: block; } .woocommerce-tabs ul.tabs li a { border-bottom: 1px solid #d6d4d4; } .woocommerce-tabs ul.tabs li:last-child a { border-bottom: none; } .woocommerce-tabs ol.commentlist .comment_container { display: block; } .woocommerce-tabs ol.commentlist .comment-text { width: 100%; padding-left: 0; margin-top: 15px; } }