:root { --color-primary: #e45702; --color-secondary: #ffae0b; --white: #fff; --black: #000; --red: #d80d0d; --blue: #138eff; --green: #40b653; --gray: #959595; --gray-2: #505050; --box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3); --liner-gradient: linear-gradient(180deg, #ff7522 0%, #e45702 100%); } html { font-size: 15px; } body { -webkit-box-sizing: border-box; box-sizing: border-box; font-family: Montserrat, sans-serif; color: #505050; word-break: break-word; line-height: 1.5; font-weight: 400; background-color: #fff; letter-spacing: 0.15px; } .container { max-width: 1220px; width: 100%; padding: 0 10px; margin: 0 auto; } .box-w { border-radius: 15px; background-color: #fff; padding: 10px; } .box-empty { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 24px; line-height: 28px; width: 100%; height: 430px; color: var(--red); text-align: center; grid-column: 1/-1; } .alert-mess { text-align: center; padding: 50px 30px; font-size: 20px; font-weight: 500; color: var(--red); grid-column: 1/-1; } .alert-text { font-size: 13px; line-height: 17px; font-weight: 500; color: var(--red); margin: 8px 8px 0; } .alert-error { padding-left: 24px; margin: 16px 0; color: var(--red); font-weight: 600; line-height: 1.5; } .accordion-icon { display: none; position: absolute; right: 10px; font-size: 28px; line-height: 16px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .accordion-icon.rotate { -webkit-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); } .scroll-margin-top { scroll-margin-top: 50px; } .text-capitalize { text-transform: capitalize; } .swiper-btn-custom { width: 40px; height: 60px; background-color: rgba(217, 215, 214, 0.8); color: #333; border-radius: 0 40px 40px 0; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); } .swiper-btn-custom:after { font-size: 24px; } .swiper-btn-custom.swiper-button-next { right: 0; border-radius: 40px 0 0 40px; } .swiper-btn-custom.swiper-button-next::after { -webkit-transform: translate(5px, 1px); -ms-transform: translate(5px, 1px); transform: translate(5px, 1px); } .swiper-btn-custom.swiper-button-prev { left: 0; border-radius: 0 40px 40px 0; } .swiper-btn-custom.swiper-button-prev::after { -webkit-transform: translate(-3px, 1px); -ms-transform: translate(-3px, 1px); transform: translate(-3px, 1px); } .heading-primary { font-size: 32px; line-height: 50px; font-weight: 600; color: #3a3734; text-transform: capitalize; margin-bottom: 20px; text-align: center; } .heading-secondary { font-size: 18px; line-height: 24px; font-weight: 700; margin-bottom: 8px; } .text-primary { font-size: 16px; line-height: 24px; } .btn-primary { display: inline-block; font-weight: 500; padding: 0 18px; text-transform: uppercase; color: #fff; background: var(--liner-gradient); text-align: center; } .btn-secondary { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; font-size: 16px; font-weight: 600; color: var(--color-primary); margin: 16px auto 0; } .box-primary { border: 1px solid #dadada; border-radius: 10px; margin-bottom: 12px; } .my-60px { margin: 60px 0; } .paging { padding: 0 10px 32px; margin-top: 42px; text-align: center; } .paging-link.active, .paging-link:hover { color: #fff; background: var(--color-primary); font-weight: 500; } .paging-link { display: -webkit-inline-box !important; display: -ms-inline-flexbox !important; display: inline-flex !important; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 8px; border-radius: 50%; color: #000; font-size: 16px; line-height: 16px; text-decoration: none; text-transform: capitalize; width: 36px; height: 36px; } .routing { white-space: nowrap; overflow: auto; } .routing .list { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 16px 0; list-style: none; } .routing .routing-link { position: relative; font-size: 14px; font-weight: 400; padding: 0 10px; text-decoration: none; } .routing .routing-link:first-child { padding-left: 0; } .routing .routing-link:last-child { color: var(--color-primary); } .routing .routing-link:not(:last-child)::before { content: ""; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%) rotate(25deg); -ms-transform: translateY(-50%) rotate(25deg); transform: translateY(-50%) rotate(25deg); width: 1px; height: 70%; border-right: 1px solid #000; } .header-cart:hover .cart-ttip { display: block; } .cart-ttip { display: none; position: absolute; background-color: #fff; border-radius: 10px; width: 400px; height: auto; right: 0; top: 30px; z-index: 3; -webkit-box-shadow: 0 1px 6px rgb(0 0 0 / 25%); box-shadow: 0 1px 6px rgb(0 0 0 / 25%); } .cart-ttip .null-cart { width: 100%; text-align: center; padding: 24px; color: #000; font-size: 14px; font-weight: 600; } .cart-ttip .cart-ttip-price-button { display: block; border-radius: 5px; padding: 10px; background: var(--color-primary); color: #fff; text-align: center; margin: 0 12px 12px; } .cart-ttip .cart-ttip-container { max-height: 300px; overflow: auto; } .cart-ttip .cart-ttip-price { padding: 10px 20px 10px 10px; border-top: 3px solid var(--color-primary); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; gap: 6px; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .cart-ttip .cart-ttip-price p { color: #000; width: auto; padding: 0; margin: 0; } .cart-ttip .cart-ttip-price p:first-child { font-size: 15px; font-weight: 700; text-transform: uppercase; -webkit-transform: translateY(2px); -ms-transform: translateY(2px); transform: translateY(2px); } .cart-ttip .cart-ttip-price p:nth-child(2) { font-size: 13px; font-weight: 200; color: var(--color-primary); margin-left: 0 !important; } .cart-ttip .cart-ttip-price p:last-child { font-size: 15px; font-weight: 700; } .cart-ttip .compare-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; width: 100%; padding: 10px; border-radius: 10px; background: #fff; font-size: 15px; line-height: 20px; } .cart-ttip .compare-item .compare-item-info { display: inline-block; padding: 0 10px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .cart-ttip .compare-item .compare-item-info p { background: 0 0; color: #000; padding: 0; width: 100%; word-break: break-word; font-size: 14px; line-height: 20px; margin-left: 0; height: 40px; } .cart-ttip .compare-item .compare-item-name { height: 40px; } .cart-ttip .compare-item .compare-item-price { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 10px; } .cart-ttip .compare-item .compare-item-price p { font-weight: 700; width: auto; } .cart-ttip .compare-item .compare-item-img { width: 80px; border: 5px; } .search-bar .search-results { display: none; border: 1px solid #ddd; background: #fff; position: absolute; top: 100%; right: 0; width: 100%; z-index: 9999; -webkit-box-shadow: 0 1px 5px rgb(0 0 0 / 20%); box-shadow: 0 1px 5px rgb(0 0 0 / 20%); } .search-bar .search-results .search-results-list { max-height: 300px; overflow: auto; z-index: 999; } .search-bar .search-results .item { background: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; padding: 10px; width: 100%; position: relative; text-decoration: none; font-weight: 400; } .search-bar .search-results .item:hover { background: #f0f2f5; } .search-bar .search-results .img { width: 60px; height: 60px; background: #fff; } .search-bar .search-results .title { font-size: 13px; font-weight: 500; line-height: 20px; color: #333; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .search-bar .search-results .name { line-height: 18px; height: 36px; } .search-bar .search-results .price { display: block; margin-top: 4px; color: #ec1c24; } .review-box { font-size: 14px; } .review-box .r-form { padding: 20px 16px; margin-top: 8px; border: 1px solid #e1e1e1; border-radius: 10px; } .review-box .r-form-reply { margin-left: 28px; position: relative; } .review-box .r-form-reply::before { content: ""; top: -12px; left: 9px; position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 8px 12px 8px; border-color: transparent transparent #e1e1e1 transparent; } .review-box .r-form-reply::after { content: ""; top: -11px; left: 9px; position: absolute; width: 0; height: 0; border-style: solid; border-width: 0 8px 14px 8px; border-color: transparent transparent #fff transparent; } .review-box .r-input { width: 100%; height: 40px; font-size: 14px; line-height: 40px; padding: 10px; border: 1px solid #eaeaea; margin-bottom: 12px; } .review-box textarea.r-input { height: 103px; line-height: 18px; } .review-box .r-btn { display: inline-block; height: 40px; font-weight: 600; line-height: 40px; padding: 0 30px; background: #6b3915; border: 1px solid #6b3915; color: #fff; } .review-box .r-btn-close { background: var(--red); border-color: var(--red); } .review-box .r-avatar { width: 32px; height: 32px; font-size: 16px; font-weight: 600; line-height: 32px; text-align: center; border-radius: 50%; background: #d9d9d9; } .review-box .r-name { font-weight: 600; } .review-box .r-reply { background: #f0f0f0; padding: 10px 12px; border-radius: 10px; margin-top: 10px; margin-left: 28px; } .rating-input { float: right; width: 16px; height: 16px; padding: 0; margin: 0 0 0 -16px; opacity: 0; } .rating-star:hover { background-position: 0 0; } .rating-star { position: relative; float: right; display: block; width: 17px; height: 17px; background: url(../images/star_rating_2022.png) 0 0; margin: 0 3px; } .rating-star:hover, .rating-star:hover ~ .rating-star { background-position: 0 0; } .rating-input:checked ~ .rating-star, .rating-star:hover, .rating-star:hover ~ .rating-star { background-position: 0 0; } .rating-input:checked ~ .rating-star, .rating:hover .rating-star:hover, .rating:hover .rating-star:hover ~ .rating-star { background-position: 0 0; } .rating-comment:hover .rating-star, .rating-star { position: relative; float: right; display: block; background: url("../images/star_rating_2022.png?v=2.1") 0 -28px; } .rating-comment:hover .rating-star:hover, .rating-comment:hover .rating-star:hover ~ .rating-star { background-position: 0 -56px !important; } #star_tip { display: none; margin-left: 10px; position: relative; background: #e20505; color: #fff; padding: 2px 8px 3px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 3px; } #star_tip:after { right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(82, 184, 88, 0); border-right-color: #e20505; border-width: 6px; margin-top: -6px; } .icon-star { display: inline-block; width: 90px; height: 19px; background-image: url("../images/star_sprite.png"); background-repeat: no-repeat; vertical-align: text-bottom; } .icon-star.star0 { background-position: 0 -108px !important; } .icon-star.star1 { background-position: 0 -87px !important; } .icon-star.star2 { background-position: 0 -65px !important; } .icon-star.star3 { background-position: 0 -42px !important; } .icon-star.star4 { background-position: 0 -21px !important; } .icon-star.star5 { background-position: 0 1px !important; } .global-menu-container { position: fixed; top: 0; left: -100%; bottom: 0; right: 100%; background: #fff; z-index: 9999; -webkit-transition: 0.5s all; -o-transition: 0.5s all; transition: 0.5s all; height: calc(100% - 55px); overflow: auto; line-height: 20px; font-size: 16px; -webkit-box-shadow: 0 1px 5px rgb(0 0 0 / 20%); box-shadow: 0 1px 5px rgb(0 0 0 / 20%); } .global-menu-container.active { left: 0; right: 0; } .global-menu-container .menu-content { border-top: 1px solid #e5eaf1; border-bottom: 1px solid #e5eaf1; } .global-menu-container .menu-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 16px; color: #404d5f; line-height: 44px; } .global-menu-container .menu-title.active { color: var(--color-primary); } .global-menu-container .menu-title .heading { font-size: 18px; } .global-menu-container .sub-menu { display: none; } .global-menu-container .sub-item { border-top: 1px solid #e5eaf1; } .global-menu-container .cat-child { display: none; background: #f5f8fd; border-top: 1px solid #e5eaf1; } .global-menu-container .cat-child .menu-title { margin-left: 16px; } .global-menu-container .cat-child-2 { background: #dfebff; } .global-menu-container .cat-child-2 .sub-item { border-top: 1px solid #d2dbe7; } .global-menu-container .cat-child-2 .cat-icon { border-color: #d2dbe7; } .global-menu-container .cat-child-3 { background: #b8d3ff; } .global-menu-container .cat-title { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .global-menu-container .cat-thumb { width: 24px; height: 24px; margin-right: 12px; background-repeat: no-repeat; background-position: center; background-size: 24px; -webkit-filter: grayscale(1); filter: grayscale(1); } .global-menu-container .cat-icon { width: 44px; line-height: 44px; text-align: center; border-left: 1px solid #e5eaf1; } .global-menu-container .cat-icon i { -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .global-menu-container .cat-icon.active i { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .global-menu-container .menu-support .item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 8px 16px; min-height: 40px; } .global-menu-container .fa-icon { width: 24px; font-size: 22px; margin-right: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .viccos-icons { background-image: url(/images/viccos-icon-map.png); background-repeat: no-repeat; display: inline-block; background-size: 333px 136px; } .icon-angle-down-primary { width: 10.5px; height: 6.5px; background-position: -2.5px -2.5px; } .icon-arrow-circle-o-right-primary { width: 24.5px; height: 24.5px; background-position: -18px -2.5px; } .icon-arrow-right { width: 27px; height: 15px; background-position: -47.5px -2.5px; } .icon-caret-down { width: 10.5px; height: 5.5px; background-position: -79.5px -2.5px; } .icon-caret-right-primary { width: 8.5px; height: 16.5px; background-position: -95px -2.5px; } .icon-check-green { width: 16px; height: 16px; background-position: -108.5px -2.5px; } .icon-clock { width: 24.5px; height: 24.5px; background-position: -129.5px -2.5px; } .icon-location-primary { width: 31.5px; height: 45.5px; background-position: -2.5px -32px; } .icon-location-primary-2 { width: 10.5px; height: 14.5px; background-position: -39px -32px; } .icon-quote-primary { width: 54.5px; height: 34.5px; background-position: -54.5px -32px; } .icon-review-star-primary { width: 32px; height: 30.5px; background-position: -114px -32px; } .icon-review-star-yellow { width: 13px; height: 12.5px; background-position: -151px -32px; } .icon-scroll-top-1 { width: 40px; height: 40px; background-position: -114px -67.5px; } .icon-search { width: 20.5px; height: 21px; background-position: -2.5px -112.5px; } .icon-special-offer-title-red { width: 161px; height: 44.5px; background-position: -169px -2.5px; } .icon-star-red { width: 34px; height: 32.5px; background-position: -160px -52px; } .icon-view-video { width: 100.5px; height: 51px; background-position: -198px -52px; } .p-item { font-size: 14px; line-height: 25px; padding: 15px 13px; background: #fff; border: 1px solid #ededed; border-radius: 10px; } .p-item .p-img { border-radius: 10px; overflow: hidden; } .p-item .p-name { font-size: 18px; font-weight: 700; margin-top: 8px; min-height: 50px; } .p-item .p-quantity { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .p-list.style-list .p-item { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; padding: 12px; border-radius: 15px; margin-bottom: 12px; } .p-list.style-list .p-item .p-img { max-width: 104px; width: 100%; height: -webkit-max-content; height: -moz-max-content; height: max-content; border-radius: 15px; } .p-list.style-list .p-item .p-name { margin-top: 0; font-size: 16px; line-height: 22px; min-height: 0; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .p-list.style-list .p-item .p-content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .p-list.style-list .p-item .p-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }