/* test2 */
 b {font-weight: bold; } /* FONT FAMILY ================================ ================================*/ .fonts {font-family: fonts-title; } /* FONT WEIGHT ================================ ================================*/ .fw-100 {font-weight: 100 !important; } .fw-200 {font-weight: 200 !important; } .fw-300 {font-weight: 300 !important; } .fw-400 {font-weight: 400 !important; } .fw-500 {font-weight: 500 !important; } .fw-600 {font-weight: 600 !important; } .fw-700 {font-weight: 700 !important; } .fw-800 {font-weight: 800 !important; } .fw-900 {font-weight: 900 !important; } /* FONT SIZE ================================ ================================*/ /* LOST CSS ================================ ================================*/ .lh-1 {line-height: 1; } .lh-12 {line-height: 1.2; } .lh-13 {line-height: 1.3; } main {position: relative; overflow-x: clip; } .btn {border-radius: 0; } .btn:focus {color: var(--bs-btn-hover-color); background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); outline: 0; box-shadow: var(--bs-btn-focus-box-shadow); } /* COLOR & BACKGROUND ================================ ================================*/ /* MOBILE NAV SWIPE ================================ ================================*/ menu.mobile-bottom-menu {position: fixed; top: auto; bottom: 0; left: 0; width: 100%; height: 45px; background-color: transparent; z-index: 3; margin: 0; display: flex; align-items: center; justify-content: space-between; transition: .4s; } menu.mobile-bottom-menu.scrolling {background-color: rgba(255, 255, 255, .25); backdrop-filter: blur(5px); } menu.mobile-bottom-menu ul.nav-tools {flex-direction: row; column-gap: 1.25rem; row-gap: 0; position: initial; transform: translate(0, 0); padding: 0; padding-right: .5rem; } menu.mobile-bottom-menu ul.nav-tools li a {position: relative; display: flex; column-gap: .25rem; } menu.mobile-bottom-menu ul.nav-tools li a .count {position: absolute; } menu.mobile-bottom-menu ul.nav-tools li:nth-child(2) {margin-bottom: 0; margin-right: 1rem; } menu.mobile-bottom-menu .nav-footer-collections li a {column-gap: .5rem; color: white; } menu.mobile-bottom-menu .nav-footer-collections li a:hover {color: #936646; } menu.mobile-bottom-menu .nav-footer-collections li a i::before, menu.mobile-bottom-menu .nav-footer-collections li a i::after {background-color: white; } /* menu :scrolling */ menu.mobile-bottom-menu.scrolling .nav-footer-collections li a {color: black; } menu.mobile-bottom-menu.scrolling .nav-footer-collections li a i::before, menu.mobile-bottom-menu.scrolling .nav-footer-collections li a i::after {background-color: black; } menu.mobile-bottom-menu.scrolling .nav-tools li a svg path, menu.mobile-bottom-menu.scrolling .nav-tools li a svg circle {stroke: black; } menu.mobile-bottom-menu.scrolling .nav-tools li a .count {background-color: black; color: white; } /* HEADER ================================ ================================*/ /* часть перенесено в styles.liquid */ .dynamic-sides ul.nav-navigation, header ul.nav-navigation {justify-content: end; writing-mode: horizontal-tb; transform: unset; padding: 0; top: .15rem; bottom: 0; right: 0; margin: 0; position: relative; } header .nav-navigation li a {column-gap: 1rem; padding: .5rem 0; } header .nav-navigation li a.nav-icon-menu i {transform: rotate(0); } header.scrolling {background-color: rgba(255, 255, 255, .75); backdrop-filter: blur(5px); border-color: #efefef; } header.scrolling .nav-navigation li a {color: black; } header.scrolling .nav-navigation li a i {border-color: black; } header.scrolling .nav-navigation li a i::before, header.scrolling .nav-navigation li a i::after {border-color: black; } .header-wrapper {display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; } header .header-wrapper .logo {padding: .75rem 1.25rem; text-align: center; } body.template-is-index header .header-wrapper .logo {padding: .25rem 1.25rem; } header .header-wrapper .logo img, header .header-wrapper .logo svg {width: 97px; height: 33px; } @media (max-width:579px) {header .header-wrapper .logo img, header .header-wrapper .logo svg {height: 20px; width: 100%; } } body.template-is-index header .header-wrapper .logo {filter: invert(1) contrast(10); transition: .4s; } body.template-is-index header.scrolling .header-wrapper .logo {filter: invert(0) contrast(0); } /* NAVIGATION ================================ ================================*/ .wrapper-nav {position: absolute; top: 0; left: 1rem; height: 100%; min-height: 100vh; z-index: 5; } body.template-is-index .wrapper-nav {left: 1.5rem; } ul.nav-navigation {position: sticky; top: 50%; bottom: 50%; margin: auto; z-index: 1; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg) translateY(50%); padding: 2rem 1.6rem; background-color: transparent; z-index: 2; transition: .4s; } .nav-navigation.navigation-relative {position: relative; top: 40%; bottom: 0; } .nav-navigation {padding: 0; column-gap: 3rem; } .nav-navigation li a {padding: 0; display: flex; align-items: center; column-gap: .75rem; } body.template-is-index .nav-navigation li a {color: white; transition: .4s; } body.template-is-index header.scrolling .nav-navigation li a {color: black; } /* nav menu menu  */ li a.nav-icon i {position: relative; width: 25px; height: 25px; display: block; transform: rotate(90deg); } body.template-is-index .nav-icon-catalog i::before, body.template-is-index .nav-icon-catalog i::after {background-color: white; } .nav-icon-catalog i::before, .nav-icon-catalog i::after {position: absolute; content: ''; height: 1px; background-color: black; transition: .4s; } .nav-icon-catalog i::before {top: 35%; left: 0; width: 80%; } .nav-icon-catalog i::after {bottom: 35%; left: 0; width: 100%; } /* nav menu catalog  */ .nav-navigation li a.nav-icon-menu i {width: 6px; height: 6px; border: 1px solid black; margin: .5rem 0; transition: .4s; } .nav-navigation li a.nav-icon-menu i::before, .nav-navigation li a.nav-icon-menu i::after {position: absolute; content: ''; top: 0; bottom: 0; margin: auto; width: 6px; height: 6px; border: 1px solid black; transition: .4s; } body.template-is-index .nav-navigation li a.nav-icon-menu i, body.template-is-index .nav-navigation li a.nav-icon-menu i::before, body.template-is-index .nav-navigation li a.nav-icon-menu i::after {border-color: white; } body.template-is-index header.scrolling .nav-navigation li a.nav-icon-menu i, body.template-is-index header.scrolling .nav-navigation li a.nav-icon-menu i::before, body.template-is-index header.scrolling .nav-navigation li a.nav-icon-menu i::after {border-color: black; } .nav-navigation li a.nav-icon-menu i::before {left: -.6rem; } .nav-navigation li a.nav-icon-menu i::after {right: -.6rem; } .nav-navigation li a.nav-icon-menu:hover i, .nav-navigation li a.nav-icon-menu:hover i::before, .nav-navigation li a.nav-icon-menu:hover i::after {border-color: #936646; } .nav-navigation li a.nav-icon-catalog:hover i::before, .nav-navigation li a.nav-icon-catalog:hover i::after {background-color: #936646; } /* TOOLS ================================ ================================*/ .wrapper-tools {position: absolute; top: 0; right: 1rem; height: 100%; } body.template-is-index .wrapper-tools {right: 1.5rem; } ul.nav-tools {position: sticky; top: 50%; bottom: 50%; transform: translate(0, -50%); z-index: 1; display: flex; flex-direction: column; row-gap: 1.5rem; align-items: center; justify-content: center; padding: 2rem 1.6rem; background-color: transparent; z-index: 5; transition: .4s; } ul.nav-tools li a {position: relative; padding: 0; color: white; } ul.nav-tools li a .count {position: absolute; top: 0.35rem; right: -1rem; margin: auto; font-size: 12px; transition: .4s; width: 14px; height: 14px; /*    background-color: white;*/ border-radius: 14px; color: black; display: flex; align-items: center; justify-content: center; text-align: center; transition: .4s; } body.template-is-index ul.nav-tools li a .count {color: white; } body.template-is-index .wrapper-sides.shirt ul.nav-tools li a .count {color: black; } ul.nav-tools li a .fav-num .count {transition: .4s; } ul.nav-tools li a .fav-num.is-empty {display: none; } ul.nav-tools li a .fav-num.is-empty .count {opacity: 0; } .wrapper-sides.shirt ul.nav-tools li a:hover .count {/*    color: white;*/ } ul.nav-tools li:nth-child(2) {margin-bottom: 3.5rem; } .nav-tools li a svg path, .nav-tools li a svg circle {transition: .4s; } .nav-tools li a:hover svg path, .nav-tools li a:hover svg circle {stroke: #936646; } /* SWIPER SIDES NAV & TOOLS */ .wrapper-sides.shirt .nav-navigation, .wrapper-sides.shirt .nav-tools {background-color: rgba(255, 255, 255, .85); backdrop-filter: blur(5px); } .wrapper-sides.shirt .nav-navigation a, .wrapper-sides.shirt .nav-tools a {color: black; } /* NAV */ .wrapper-sides .nav-navigation a.nav-icon-menu i::before, .wrapper-sides .nav-navigation a.nav-icon-menu i::after {top: -1px; } .wrapper-sides.shirt .nav-navigation a.nav-icon-catalog i::before, .wrapper-sides.shirt .nav-navigation a.nav-icon-catalog i::after {background-color: black; } .wrapper-sides.shirt .nav-navigation a.nav-icon-menu i, .wrapper-sides.shirt .nav-navigation a.nav-icon-menu i::before, .wrapper-sides.shirt .nav-navigation a.nav-icon-menu i::after {border-color: black; } /* NAV :hover */ .wrapper-sides .nav-navigation a:hover, .wrapper-sides .nav-tools a:hover, .wrapper-sides.shirt .nav-navigation a:hover, .wrapper-sides.shirt .nav-tools a:hover {color: #936646; } .wrapper-sides.shirt .nav-navigation a.nav-icon-catalog:hover i::before, .wrapper-sides.shirt .nav-navigation a.nav-icon-catalog:hover i::after {background-color: #936646; } .wrapper-sides .nav-navigation a.nav-icon-menu:hover i, .wrapper-sides .nav-navigation a.nav-icon-menu:hover i::before, .wrapper-sides .nav-navigation a.nav-icon-menu:hover i::after, .wrapper-sides.shirt .nav-navigation a.nav-icon-menu:hover i, .wrapper-sides.shirt .nav-navigation a.nav-icon-menu:hover i::before, .wrapper-sides.shirt .nav-navigation a.nav-icon-menu:hover i::after {border-color: #936646; } @media (max-width:579px) {.wrapper-sides {display: none !important; } } /* TOOLS */ body:not(.template-is-index) .wrapper-sides .nav-tools a svg path, body:not(.template-is-index) .wrapper-sides .nav-tools a svg circle {stroke: black; } body.template-is-index .wrapper-sides.shirt .nav-tools a svg path, body.template-is-index .wrapper-sides.shirt .nav-tools a svg circle {stroke: black; } /* TOOLS :hover */ body .wrapper-sides .nav-tools a:hover svg path, body .wrapper-sides .nav-tools a:hover svg circle, body .wrapper-sides.shirt .nav-tools a:hover svg path, body .wrapper-sides.shirt .nav-tools a:hover svg circle {stroke: #936646; } .wrapper-sides.shirt .nav-tools a:hover .count {/*    color: white;*/ } .wrapper-sides.shirt .nav-tools a .count {/*    background-color: black;*/ /*    color: white;*/ } /* SWIPER ================================ ================================*/ @media (max-width:579px) {.swiper:not(.carousel-product-images).swiper-horizontal .swiper-wrapper {height: 520px; } } .swiper-tools-nav {position: absolute; top: auto; left: 0; right: 0; bottom: calc(2.25rem - 14px); margin: auto; width: fit-content; display: flex; align-items: center; background-color: rgba(255, 255, 255, .5); backdrop-filter: blur(5px); width: 110px; height: 28px; padding: 0 .75rem; justify-content: space-between; z-index: 2; transition: .4s; } .swiper-tools-nav:hover {background-color: rgba(255, 255, 255, 1); } .swiper-tools-nav .swiper-button-prev, .swiper-tools-nav .swiper-button-next {position: relative; margin: 0; left: 0; right: 0; height: 28px; width: 100%; top: auto; } .swiper-tools-nav .swiper-button-prev::after, .swiper-tools-nav .swiper-button-next::after {position: absolute; content: ''; top: 0; bottom: 0; margin: auto; width: 33px; height: 10px; background-size: contain; background-repeat: no-repeat; } .swiper-tools-nav .swiper-button-prev::after {left: 0; right: auto; } .swiper-tools-nav .swiper-button-next::after {left: auto; right: 0; } .swiper-tools-nav .swiper-button-prev::after {background-image: url(arrow-left-dark.svg); } .swiper-tools-nav .swiper-button-next::after {background-image: url(arrow-right-dark.svg); } /* MAIN INDEX ================================ ================================*/ /* MAIN BANNER */ /* Перенесено в styles.liquid для ьыстрой загрузки первой страницы */ /* BLOCK NEWS */ .block-carousel {position: relative; padding-top: 4.5rem; padding-bottom: 4.5rem; } .block-carousel-title {position: absolute; top: .75rem; left: 0; right: 0; margin: auto; width: fit-content; z-index: 3; } .block-carousel .swiper {padding: 1px 1px; } .block-carousel .swiper .swiper-slide {outline: 1px solid rgba(0, 0, 0, .2); height: auto; } .swiper .swiper-slide .box-product, .swiper .swiper-slide .box-product .cover {height: 100%; } .block-carousel .swiper .swiper-slide .box-product .cover {display: block; } .block-carousel .swiper .swiper-slide .images img {width: 100%; height: 100%; object-fit: cover; } @media (max-width:579px) {.block-carousel {padding-left: 0; padding-right: 0; } .block-carousel-title {font-size: 24px; font-weight: 600; margin-top: .25rem; color: #4B5257; } .block-carousel-title img {display: none; } } /* MINIMAP */ .minimap {position: absolute; left: 0; right: 0; bottom: 8rem; margin: auto; width: fit-content; z-index: 2; width: 130px; } .nav-minimap {flex-direction: column; row-gap: .25rem; background-color: rgba(255, 255, 255, .85); backdrop-filter: blur(5px); padding: 1rem .5rem; opacity: .75; transition: .4s; } .nav-minimap:hover {opacity: 1; } .nav-minimap li a {padding: 0; text-align: center; font-size: 14px; font-weight: 600; color: #4B5257; /*    padding: .5rem;*/ height: 20px; display: block; display: flex; align-items: center; justify-content: center; text-align: center; } .nav-minimap li a i {width: 20px; height: 1px; border-radius: 14px; background-color: #4B5257; display: block; transition: .4s; } .nav-minimap li a i+span {opacity: 0; visibility: hidden; position: absolute; transition: .4s; line-height: 1; } .nav-minimap li a.active i {opacity: 0; visibility: hidden; } .nav-minimap li a.active span {opacity: 1; visibility: visible; } .nav-minimap li a:hover i {opacity: 0; visibility: hidden; } .nav-minimap li a:hover i+span {opacity: 1; visibility: visible; } .nav-minimap li a:hover i+span {color: #aaa; font-weight: 400; } @media (max-width:579px) {.minimap {display: none !important; } } /* BOX PRODUCT */ .box-product {position: relative; } @media (max-width:579px) {.box-product .cover {/*        aspect-ratio: 3/4;*/ } .box-product .cover img {width: 100%; height: 100%; object-fit: cover; } } /* box product info header / bottom / left / right */ .box-product-header, .box-product-bottom, .box-product-left, .box-product-right {position: absolute; opacity: 0; visibility: visible; transition: .4s; } .box-product-header, .box-product-bottom {left: 0; width: 100%; padding: 1.25rem; } .box-product-left, .box-product-right {top: 10rem; } .box-product:hover .box-product-header, .box-product:hover .box-product-bottom {opacity: 1; visibility: visible; } .box-product-header {top: 0; } .box-product-bottom {bottom: 0; } .box-product-header {display: flex; justify-content: space-between; } .labels {display: flex; flex-direction: column; row-gap: .55rem; } .labels label {padding: .25rem .8rem; background-color: #ccc; color: white; font-weight: 600; text-transform: uppercase; width: fit-content; } .labels label.new {background-color: #E4D9C2; color: black; } .labels label.sale {background-color: #4B5257; } .box-product-title {font-size: 14px; font-weight: 500; } .box-product-prices {display: flex; flex-direction: column; margin-top: .5rem; } .box-product-prices span {font-size: 14px; } .box-product-prices del {font-size: 12px; color: #666666; } /* box propdict left / right  */ .box-product:hover .box-product-left, .box-product:hover .box-product-right {opacity: 1; visibility: visible; } .box-product-left {left: 1.25rem; } .nav-list-variants {flex-direction: column; row-gap: 1rem; } .nav-list-variants li {font-size: 14px; font-weight: 500; color: #4D4D4D; text-transform: uppercase; } .box-product-right {right: 1.25rem; } .nav-list-colors {flex-direction: column; row-gap: 1rem; } .nav-list-colors li span.blob-color {width: 10px; height: 10px; border-radius: 10px; display: block; } span.blob-color.bg-light {border: 1px solid #ddd; } @media (max-width:579px) {.box-product .box-product-header, .box-product .box-product-bottom, .box-product .box-product-left, .box-product .box-product-right {opacity: 1; visibility: visible; } } /* BLOCK ART */ .block-art {position: relative; height: 90vh; /*    background-image: url(bg-art.jpg);*/ background-position: center; background-repeat: no-repeat; background-size: cover; } .block-art-title {position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: center; height: 100%; font-size: 36px; font-weight: 700; color: white; } .block-art-carousel, .carousel-art, .block-art .row, .block-art .col-6 {height: 100%; } .block-art-carousel {position: relative; height: 100%; } .block-art-carousel .carousel-art {height: 100%; background-color: white; } .carousel-art .swiper-slide .box-product {outline: 1px solid rgba(0, 0, 0, .2) } .block-art-carousel .swiper-tools-nav {top: 0; bottom: 0; margin: auto; left: -5rem; right: auto; transform: rotate(90deg); } .block-all-link {position: absolute; right: 2rem; bottom: 2rem; } .block-all-link a {text-decoration: none; color: white; transition: .4s; padding-bottom: .25rem; font-size: 14px; font-weight: 500; border-bottom: 2px solid white; } .block-all-link a:hover {color: #000; border-color: #000; } @media (max-width:579px) {.block-art {height: auto; background-image: none !important; padding-left: 0; padding-right: 0; } .block-art .cover {position: relative; } .block-art .cover .block-art-title {transform: rotate(0); writing-mode: horizontal-tb; font-size: 24px; } .block-art-carousel .swiper-tools-nav {position: relative; transform: rotate(0); left: 0; margin: 1rem auto; margin-bottom: .5rem; } .block-all-link {position: initial; margin-left: auto; margin-right: auto; margin-bottom: 1rem; display: block; text-align: center; } .block-all-link a {color: black; border-bottom: 1px solid black; font-size: 12px; } } /* LOOKBOOK */ .block-lookbook {position: relative; padding-top: 4.5rem; padding-bottom: 4.5rem; } .block-lookbook-carousel {position: absolute; top: 0; left: 25%; height: 100%; z-index: 2; } .block-lookbook-carousel .carousel-tab, .block-lookbook-carousel .carousel-tab .swiper-slide, .block-lookbook-carousel .carousel-tab .swiper-slide .cover {height: 100%; } .block-lookbook-carousel .carousel-tab .swiper-slide .cover {position: relative; } .block-lookbook-carousel .carousel-tab .swiper-slide .cover img {height: 100%; width: 100%; object-fit: cover; } .block-lookbook-title {position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; color: white; font-size: 36px; font-weight: 700; width: fit-content; height: fit-content; } .carousel-tab-pagination {left: 0; right: auto; display: flex; align-items: end; column-gap: .5rem; padding: 1.25rem; transition: .4s; } .carousel-tab-pagination .swiper-pagination-bullet {background-color: #efefef; opacity: 1; width: 2px; height: 5px; border-radius: 0; margin: 0 !important; } .carousel-tab-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {height: 15px; margin: 0; } .block-lookbook .tab-pane.fade {opacity: 0; transition: opacity .4s linear; } .block-lookbook .tab-pane.fade.show {opacity: 1; } .block-lookbook .box-product {outline: 1px solid #ccc; } @media (max-width:579px) {.block-lookbook {padding-left: 0; padding-right: 0; padding-top: 1.5rem; padding-bottom: 1.5rem; } .block-lookbook-title {font-size: 24px; } .block-lookbook-carousel {position: initial; } .block-lookbook .swiper-tools-nav {top: auto; bottom: auto; transform: translate(calc(100% + 1rem), calc(100% - 4.5rem)); } .block-lookbook .tab-content .swiper-tools-nav {position: initial; margin-top: 1rem; transform: translate(0); top: auto; bottom: calc(2.25rem - 14px); } } /* BLOCK CHOCOLATE */ .block-chocolate {position: relative; height: 90vh; background-image: url(bg-chocolate.jpg); background-position: top; background-repeat: no-repeat; background-size: cover; } .block-chocolate-carousel, .carousel-chocolate, .block-chocolate .row, .block-chocolate .col-6, .block-chocolate .col-lg-6, .block-chocolate .col-xl-6 {height: 100%; } .block-chocolate-carousel {position: relative; } .carousel-chocolate {background-color: white; } .carousel-chocolate .swiper-slide .box-product {outline: 1px solid rgba(0, 0, 0, .2) } .block-chocolate-carousel .swiper-tools-nav {top: 0; right: -5rem; left: auto; transform: rotate(90deg); } .block-chocokate-title {position: absolute; top: 0; right: 0; left: 0; bottom: ; margin: auto; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: center; height: 100%; font-size: 36px; font-weight: 700; } @media (max-width:579px) {.block-chocolate {height: auto; background-image: none !important; padding-left: 0; padding-right: 0; } .carousel-chocolate {background-color: unset; } .block-chocolate .cover {position: relative; } .block-chocolate .cover .block-art-title {transform: rotate(0); writing-mode: horizontal-tb; font-size: 24px; color: black; } .block-chocolate-carousel .swiper-tools-nav {position: relative; transform: rotate(0); margin: auto; margin-top: 1rem; margin-bottom: .5rem; right: auto; } } /* OUTERWEAR */ .block-outerwear {position: relative; overflow: hidden; } .block-outerwear-title {position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: fit-content; height: fit-content; font-size: 36px; font-weight: 700; color: white; } .block-outerwear .block-carousel-title {top: .75rem; } .block-outerwear-carousel {padding-top: 4.5rem; padding-bottom: 4.5rem; height: 100%; } .block-outerwear .poster-right {position: relative; height: 100%; } .block-outerwear .poster-right img {width: max-content; height: 100%; } .carousel-outerwear {height: 100%; padding-top: 1px; padding-bottom: 1px; } .carousel-outerwear .swiper-slide .box-product {outline: 1px solid rgba(0, 0, 0, .2); } @media (max-width:579px) {.block-outerwear {padding-left: 0; padding-right: 0; } .block-outerwear .poster-right img {width: 100%; } .block-outerwear-carousel {padding-top: 0; } .block-art, .block-chocolate, .block-outerwear {height: auto !important; max-height: unset !important; } } /* PROMO ================================ ================================*/ .marquee-promo {display: flex; position: relative; z-index: 3; } .marquee-promo marquee {background-color: #E4D9C2; padding: 1.75rem 0; } .marquee-promo span {position: relative; color: black; left: -100%; font-size: 24px; font-weight: 600; } @media (max-width:579px) {.marquee-promo marquee {padding: .5rem 0; } .marquee-promo span {font-size: 14px; } } /* COLLECTION ================================ ================================*/ /* Breadcrumbs */ .breadcrumbs {position: relative; z-index: 5; } .nav-breadcrumbs {column-gap: 1rem; } .nav-breadcrumbs li .nav-link {padding: 0; font-size: 12px; color: #808080; } .nav-breadcrumbs li a.nav-link {padding-right: 1rem; position: relative; } .nav-breadcrumbs li a.nav-link::after {position: absolute; content: ''; width: 10px; height: 1px; background-color: #808080; top: 0; right: -5px; bottom: 0; margin: auto; } .nav-breadcrumbs li a.nav-link:hover {color: black; } /* Collection Title & Filter & Sort */ .collection-title-filter-sort {margin-top: .5rem; display: flex; align-items: center; justify-content: space-between; } .collection-title {font-size: 32px; font-weight: 700; } .collection-filters, .collection-sort {display: flex; align-items: center; column-gap: 2rem; } .collection-filter-sort {display: flex; align-items: center; column-gap: 7rem; } .collection-filter-title {font-size: 16px; font-weight: 500; display: flex; align-items: center; column-gap: .25rem; } .collection-filter-list {display: flex; align-items: center; column-gap: 3rem; } .box-filter {position: relative; } .box-filter.hasitems {position: relative; } .box-filter.hasitems::before {position: absolute; content: ''; top: .3rem; left: -.6rem; width: 6px; height: 6px; border-radius: 8px; background-color: black; } .filter-title {position: relative; text-decoration: none; color: #666; padding-right: 1rem; transition: .4s; } .filter-title[aria-expanded="true"] {color: black; } .filter-title[aria-expanded="true"]::before {position: fixed; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: transparent; cursor: default; z-index: 1; } .filter-title::after {position: absolute; content: ''; width: 10px; height: 10px; top: 0; right: 0; bottom: 0; margin: auto; mask-image: url(angle-down-grey.svg); background-color: #666; mask-repeat: no-repeat; mask-position: center; transition: .4s; } .filter-title[aria-expanded="true"]::after {transform: rotate(180deg); background-color: black; } .box-filter-content {position: absolute; top: 2.5rem; right: 0; z-index: 1; } .box-filter-content-size {width: 400px; } .box-filter-content-simple {width: 500px; } .box-filter-content-color {width: 800px; } .box-filter-content-sort {width: max-content; } .modal-body.box-filter-content-sort {width: auto; } @media (max-width:1550px) {.box-filter-content-color {width: 500px; } } .box-filter-sort {padding-top: 2rem; } .box-filter-list {backdrop-filter: blur(5px); background-color: rgba(255, 255, 255, .75); padding: 4rem; display: flex; column-gap: 2rem; row-gap: 2rem; flex-wrap: wrap; align-items: center; justify-content: space-between; list-style-type: none; } .box-filter-list label {width: 60px; height: 30px; display: flex; align-items: center; justify-content: center; text-align: center; color: #666; } .box-filter-list label input {display: none; } .box-filter-list label input:checked+span {color: black; } .box-filter-list label span {position: relative; cursor: pointer; } .box-filter-list label span::after {position: absolute; content: ''; width: 14px; height: 11px; top: 0; right: -1.5rem; bottom: 0; margin: auto; background-image: url(check.svg); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0; visibility: hidden; transition: .4s; } .box-filter-list label input:checked+span::after {opacity: 1; visibility: visible; } .box-filter-content-color label {display: flex; flex-direction: row-reverse; align-items: center; column-gap: .5rem; flex: 0 calc(25% - 2rem); max-width: calc(25% - 2rem); justify-content: start; width: auto; } @media (max-width:1550px) {.box-filter-content-color label {flex: 0 calc(50% - 2rem); max-width: calc(50% - 2rem); } } .box-filter-content-color .color {width: 16px; height: 16px; min-width: 16px; min-height: 16px; border-radius: 16px; display: block; } .box-filter-content-color .color.bg-light {border: 1px solid black; } .box-filter-content-simple li {display: flex; flex-direction: row-reverse; align-items: center; column-gap: .5rem; flex: 0 calc(50% - 2rem); max-width: calc(50% - 2rem); justify-content: start; } .box-filter-content-simple .box-filter-list label, .box-filter-content-sort .box-filter-list label {width: auto; } .box-filter-content-sort label span {text-wrap: nowrap; } .box-filter-content-sort .box-filter-list {flex-direction: column; align-items: start; } .filter-clear {display: flex; align-items: center; column-gap: .5rem; text-decoration: none; color: #666; } .filter-clear:hover {color: black; } .filter-clear img, .filter-clear svg {transform: translateY(2px); } .filter-clear svg rect {transition: .4s; } .filter-clear:hover svg rect {fill: black; } /* COLLECTION FILTER SELECTED */ .collection-filter-selected {display: flex; align-items: center; justify-content: end; margin-top: 1rem; flex-wrap: wrap; column-gap: .5rem; } @media (max-width: 579px) {.collection-filter-selected {width: 100%; overflow-x: auto; justify-content: start; padding-bottom: .75rem; flex-wrap: nowrap; } } .collection-filter-selected label, .collection-filter-selected a.delete {padding: .35rem 1rem; background-color: white; display: flex; align-items: center; column-gap: .5rem; color: #A3A3A3; font-size: 12px; transition: .4s; line-height: 1; } .collection-filter-selected a.delete {color: #A3A3A3; } .collection-filter-selected a.delete:hover {color: black; } .collection-filter-selected label a {color: #A3A3A3; } @media (max-width: 579px) {.collection-filter-selected label, .collection-filter-selected a.delete {flex-wrap: nowrap; text-wrap: nowrap; font-size: 12px; } } .collection-filter-selected label:hover {color: black; } .collection-filter-selected label a img, .collection-filter-selected label a svg {margin-top: -1px; } .collection-filter-selected label a img, .collection-filter-selected label a svg {transition: .4s; } .collection-filter-selected label a:hover img, .collection-filter-selected label a:hover svg {transform: rotate(90deg); } .collection-filter-selected label a svg rect, .collection-filter-selected a.delete svg rect {transition: .4s; } .collection-filter-selected label a:hover svg rect, .collection-filter-selected a.delete:hover svg rect, {fill: black; } .collection-filter-selected label .color {width: 10px; height: 10px; border-radius: 10px; display: block; margin-top: 0; } /* .collection-filter-selected label .name{order: 1; } .collection-filter-selected label .value{order: 2; } .collection-filter-selected label a{order: 3; } .collection-filter-selected label .color{order: 0; } */ .collection-filter-selected li input {display: none; } .collection-filter-selected .filter-items-list-simple {column-gap: .5rem; } .collection-filter-selected .filter-items-list-simple li label {transition: .4s; } .collection-filter-selected .filter-items-list-simple li label:focus {opacity: .5; } .collection-filter-selected label svg rect {transition: .4s; } .collection-filter-selected label:hover svg rect {fill: black; } .collection-filter-selected .filter-items-list-simple {row-gap: 0; flex-wrap: nowrap; } .items-empty {height: 50vh; } /* Collection List */ .collection-list .box-product {outline: 1px solid #ccc; } .collection-list .cart-items-empty {flex-direction: column; row-gap: 1rem; text-align: center; } @media (max-width:579px) {.collection-title-filter-sort {flex-direction: column; row-gap: 1rem; align-items: start; } .collection-filter-sort {width: 100%; column-gap: 0; justify-content: space-between; } .collection-filter-title {font-size: 12px; } .collection-list {padding-left: 0; padding-right: 0; } .collection-list .box-product .box-product-header, .collection-list .box-product .box-product-bottom {padding: .75rem; } .collection-list .box-product .labels {row-gap: .25rem; } .collection-list .box-product .labels label {font-size: 8px; } .collection-list .box-product .box-product-left, .collection-list .box-product .box-product-right {display: none; } .collection-list .box-product .box-product-bottom {display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%); } .collection-list .box-product .box-product-bottom .box-product-title {font-size: 10px; } .collection-list .box-product .box-product-bottom .box-product-prices span {font-size: 10px; } .collection-list .box-product .box-product-bottom .box-product-prices del {font-size: 8px; } /* Modal Sort */ .modal-collection .modal-dialog, .modal-collection .modal-dialog {margin: 0; } #modalSort .modal-dialog .modal-body {padding: .5rem 1rem 2rem 1rem; } .modal-collection .modal-dialog .modal-body .modal-body-header {display: flex; align-items: center; justify-content: space-between; } .modal-collection .modal-dialog .modal-body .box-filter-list {background-color: transparent; backdrop-filter: unset; padding: 0; flex-direction: column; align-items: start; row-gap: 1.5rem; padding: 1rem 0; } .modal-collection .modal-dialog .modal-body .box-filter-list label {width: auto; max-width: fit-content; } .modal-collection .modal-footer {padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: .5rem; } .modal-collection .modal-footer .btn {width: 100%; border-radius: 0; height: 46px; } /* Modal Filter */ .modal-body-filters {margin-top: 1rem; display: flex; flex-direction: column; row-gap: 1rem; } .modal-collection .modal-footer {border: 0; margin-top: 2rem; } .filter.box-filter-content-color {width: auto; } .filter-name {position: relative; padding: 1rem 0; width: 100%; display: flex; align-items: center; justify-content: space-between; } .filter-name {text-decoration: none; } .filter-name .arrow {position: relative; width: 14px; height: 14px; display: block; } .filter-name .arrow::before, .filter-name .arrow::after {position: absolute; content: ''; background-color: black; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 2px; transition: .4s; } .filter-name .arrow::before {transform: rotate(0); } .filter-name .arrow::after {transform: rotate(90deg); } .filter-name[aria-expanded="true"] .arrow::after {opacity: 0; } .filter input[type=range] {border-bottom: 0; } .filter-price-range {padding-bottom: 1rem; } .filter-price-range input[type="text"] {width: 100%; padding: .75rem; background-color: rgba(0, 0, 0, .1); border: 0; text-align: center; } .filter-price-range input[type="text"]:focus {outline: none; box-shadow: none; } .filter-price-sep {position: relative; top: calc(50% - 2px); width: 100%; height: 2px; background-color: #D1D1D1; display: block; } /* Filter Color */ .filter-item-color {display: grid; grid-template-columns: repeat(3, 1fr); padding-bottom: 1rem; } @media (max-width:579px) {.filter-item-color {grid-template-columns: repeat(2, 1fr); } } .filter-item-color .text {width: 100%; height: auto; display: flex; align-items: center; justify-content: start; text-align: center; cursor: pointer; } .filter-item-color .text span {position: relative; transition: .4s; } .filter-item-color .text span::after {position: absolute; content: ''; width: 14px; height: 11px; top: 0; bottom: 0; right: -1.5rem; margin: auto; background-image: url(check.svg); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0; transition: .4s; } .filter-item-color input {display: none; } .filter-item-color input:checked+.text span::after {opacity: 1; } .filter-item-color .text:hover span, .filter-item-color input:checked+.text span {transform: scale(1.25); } /* Filter Size */ .filter-item-size {display: grid; grid-template-columns: repeat(4, 1fr); padding: 1rem 0; row-gap: 1.5rem; list-style-type: none; } .filter-item-size label {width: fit-content; height: fit-content; display: flex; align-items: center; justify-content: center; font-size: 14px; } .filter-item-size .text {position: relative; width: 100%; height: 100%; cursor: pointer; display: flex; align-items: center; justify-content: start; text-align: center; column-gap: .5rem; } .filter-item-size .text span {position: relative; } .filter-item-size .text span::after {position: absolute; content: ''; width: 14px; height: 11px; top: 0; bottom: 0; right: -1.5rem; margin: auto; background-image: url(check.svg); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0; transition: .4s; } .filter-item-size input {display: none; } .filter-item-size input:checked+.text span::after {opacity: 1; } .filter-item-size input[disabled]+.text {opacity: .5; cursor: not-allowed; } .filter-item-size input[disabled]+.text::after {position: absolute; content: ''; width: 200%; height: 1px; top: 0; left: -50%; right: 0; bottom: 0; margin: auto; background-color: #666; transform: rotate(0deg); } /* Filter Simple */ .box-filter .filter-item {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1rem; row-gap: 1.75rem; padding: 1rem 0; } .box-filter .filter-item label {display: flex; align-items: center; column-gap: .5rem; } .modal-body-filters .filter-item {display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 1.75rem; } .modal-body-filters .filter-item label span.text {display: inline-block; } @media (max-width:579px) {.filter-item label span.text {font-size: 14px; } } .filter-item label:has(> input[type="checkbox"]:not([disabled])) {cursor: pointer; } .filter-item label input {display: none; } .filter-item label span.text {position: relative; display: block; } .filter-item label span.text::after {position: absolute; content: ''; width: 14px; height: 11px; top: 0; bottom: 0; right: -1.5rem; margin: auto; background-image: url(check.svg); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0; transition: .4s; } .filter-item label input:checked+span.text::after {opacity: 1; } .filter-item label input[disabled]~span.text {opacity: .5; } .filter-item label input[disabled]+span.checkbox {background-color: #aaa; } } /* Collection Pagination */ .pagination {margin-top: 2rem; display: block; } .nav-pagination, .nav-pagination-arrows {display: flex; justify-content: center; } .nav-pagination {align-items: end; } .nav-pagination li .nav-link {padding: 0; font-size: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 14px; color: black; } .nav-pagination li .nav-link span {opacity: 0; transition: .4s; } .nav-pagination li .nav-link.active:hover span {color: black; opacity: 1; } .nav-pagination li .nav-link.active span {opacity: 1; } .nav-pagination li .nav-link:hover span {opacity: .5; } .nav-pagination li .nav-link i {width: 2px; height: 5px; background-color: #666; display: block; transition: .4s; } .nav-pagination li .nav-link.active i, .nav-pagination li .nav-link.active:hover i {height: 15px; background-color: black; } .nav-pagination li .nav-link:hover i {height: 10px; } .nav-pagination li .nav-link.dots {flex-direction: row; column-gap: .25rem; margin: 0 .25rem; } .nav-pagination li .nav-link.dots i {height: 2px; } .nav-pagination-arrows {column-gap: 1rem; margin-top: 1.25rem; } .nav-pagination-arrows li a {padding: 0; } .nav-pagination-arrows li a img {transition: .4s; } .nav-pagination-arrows li:first-child a:hover img {transform: translateX(-10px) scale(1.1); } .nav-pagination-arrows li:last-child a:hover img {transform: translateX(10px) scale(1.1); } /* SIDEBAR ================================ ================================*/ /* PRODUCT ================================ ================================*/ /* @media (min-width:1024px){body.template-is-product header{border-bottom: 0; } body.template-is-product header.scrolling{background-color: transparent; backdrop-filter: blur(0); } } */ .product-grid {display: grid; grid-template-columns: 2fr 1.3fr 2fr; } .product-grid .bttn-favorite {width: 24px; height: 23px; padding: 0; } /* Product content */ .product-wrapper {position: sticky; top: 0; padding: 1rem 2.5rem; } .product-logo {text-align: center; } .product-title-tools {display: flex; align-items: center; justify-content: space-between; margin-top: 5.5rem; margin-bottom: 1rem; } .product-title {font-size: 24px; font-weight: 500; } .product-tools {display: flex; align-items: center; column-gap: 1rem; } .product-tools-favorite {width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; text-align: center; } .product-tools-share {width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; text-align: center; } .product-tools-share .ya-share2 {transition: .4s; z-index: 2; } .product-tools-share:hover .ya-share2 {transform: scale(1.1); } .product-prices {display: flex; flex-direction: column; row-gap: .75rem; line-height: 1; margin: 1rem 0; } .product-prices span {font-size: 24px; font-weight: 500; } .product-prices del {font-size: 14px; color: #666; } .product-similar {margin-top: 1.5rem; padding-bottom: 1.5rem; } .product-similar-title {font-size: 12px; color: #808080; margin-bottom: .5rem; } .product-similar-list {display: grid; grid-template-columns: repeat(7, 1fr); column-gap: .5rem; row-gap: .5rem; } .box-similar {position: relative; } .box-similar.active::after {position: absolute; content: ''; bottom: -.5rem; left: 0; width: 100%; height: 1px; background-color: black; } .box-similar .cover {width: 100%; height: 100%; display: block; } .box-similar .cover img {width: 100%; height: 100%; object-fit: cover; } .box-similar.disabled .cover img {opacity: .5; } .box-similar span.text {position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; font-size: 8px; color: #808080; width: fit-content; height: fit-content; } /* variants */ .product-variants-titls {font-size: 12px; color: #808080; } .product-variants-list {display: flex; flex-wrap: wrap; align-items: center; column-gap: 2rem; row-gap: 1rem; } .product-variants-list label {height: 40px; width: auto; display: flex; align-items: center; cursor: pointer; } .product-variants-list label span.text {position: relative; text-transform: uppercase; } .product-variants-list label span.text::after {position: absolute; content: ''; width: 8px; height: 6px; top: 0; right: -.75rem; bottom: 0; margin: auto; background-image: url(check.svg); background-repeat: no-repeat; background-position: center; opacity: 0; transition: .4s; } .product-variants-list label input {display: none; } .product-variants-list label input:checked+span.text::after {opacity: 1; } .product-variants-list label input[disabled]+span.text {opacity: .5; cursor: not-allowed; } .product-table-size {font-size: 12px; text-decoration: none; padding-bottom: .05rem; border-bottom: 1px solid black; display: inline-block; transition: .4s; } .product-table-size:hover {border-color: #936646; } /* Product quest */ .product-quest {margin-top: 3rem; } .product-quest-title {font-size: 12px; color: #808080; } .product-quest-list {display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 1rem; row-gap: 1rem; margin-top: 1rem; } .product-quest-list .btn {width: 100%; border-radius: 0; height: 50px; display: flex; align-items: center; justify-content: center; column-gap: .5rem; } .product-quest-list .btn {transition: .4s; } .product-quest-list .btn span {line-height: 1; } .product-quest-list .btn svg path {transition: .4s; } .product-quest-list .btn:hover svg path, .product-quest-list .btn:focus svg path, .product-quest-list .btn:focus-visible svg path {fill: white; } /* Add to Cart */ .product-addtocart {margin: 2rem 0; } .product-addtocart .btn {width: 100%; border-radius: 0; height: 50px; } /* Procut Accordion */ .product-info-wrapper .accordion {margin-top: 3rem; display: block; } .product-info-wrapper .accordion .accordion-button {background-color: transparent; box-shadow: none; padding: .75rem 0; } .product-info-wrapper .accordion .accordion-item {border: 0; background-color: transparent; } .product-info-wrapper .accordion .accordion-button:not(.collapsed) {color: #936646; } .product-info-wrapper .accordion .accordion-body {padding: 1rem 0; border-bottom: 1px solid #ccc; margin-bottom: 1rem; } .product-info-wrapper .accordion .accordion-button::after {background-image: url(acc-plus.svg); background-size: auto; transform: rotate(0); position: absolute; top: 0; right: 0; bottom: 0; margin: auto; } .product-info-wrapper .accordion .accordion-button:not(.collapsed)::after {background-image: url(acc-minus.svg); } ol.product-property {padding-inline-start: 0px; margin-bottom: 0; font-size: 14px; } ol.product-property li {display: flex; justify-content: space-between; margin-bottom: 1rem; } ol.product-property li:last-child {margin-bottom: 0; } li .dots:nth-child(2) {flex: 1 0; border-bottom: 2px dotted rgba(196, 196, 196, 0.5); height: 1em; margin: 0 .4em; } ol.product-property li span:first-child {color: #70767D; font-weight: 500; } ol.product-property li span {color: black; } ol.product-property li {margin: .75rem 0; } /* Product gallery */ .product-grid {position: relative; } .product-grid .breadcrumbs {position: absolute; top: 2rem; left: 2rem; z-index: 5; } /* Product gallery */ .product-grid-gallery-wrapper {position: sticky; top: 0; } .product-grid-gallery .cover {position: relative; aspect-ratio: 3/4; display: block; } .product-grid-gallery .cover img {width: 100%; } .product-grid-gallery .play-button {position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 70px; height: 70px; cursor: pointer; } .product-grid-gallery .play-button img {width: 100%; height: 100%; object-fit: contain; transition: .4s; } .product-grid-gallery .play-button:hover img {transform: scale(1.1); } .product-grid-gallery video {/*     position: absolute;*/ /*     top: 0;*/ /*     left: 0;*/ width: 100%; height: 100%; /*     opacity: 0;*/ /*     visibility: hidden;*/ transition: .4s; object-fit: cover; } .product-grid-gallery .swiper video{object-fit: cover; } .product-grid-gallery video.show {opacity: 1; visibility: visible; } .product-grid-gallery video::-webkit-media-controls {display: none; } /* Product MODAL */ @media (max-width:579px) {.product-grid {display: block; } .product-carousel .swiper-tools-nav {left: auto; right: 1rem; } .product-grid .breadcrumbs {position: relative; top: 0; left: 0; margin-top: 1rem; } .product-wrapper {position: relative; padding: 0; } .product-wrapper .product-info-wrapper {padding-left: 0; padding-right: 0; } .product-title-tools {margin-top: 1rem; } } /* CART ================================ ================================*/ /* CART ITEMS */ .box-item {margin-bottom: 2rem; } .box-item:last-child {margin-bottom: 0; } .box-item a.cover {overflow: hidden; display: block; } .box-item a img {transition: .4s; } .box-item a:hover img {transform: scale(1.1); } .box-item-title {font-size: 20px; font-weight: 500; text-decoration: none; } .box-item-params-list {margin-top: 1rem; } .box-item-params {color: #666; display: flex; align-items: center; column-gap: .5rem; } .box-item-params i {width: 10px; height: 10px; display: inline-block; border-radius: 10px; margin-right: .25rem; } /* QTY */ .quantity {display: flex; align-items: center; justify-content: space-between; column-gap: .5rem; border-bottom: 1px solid #ccc; margin: 0 1rem .5rem; padding-bottom: .5rem; } .quantity .btn-qty {display: block; font-size: 18px; font-weight: 500; cursor: pointer; transition: .4s; } .quantity .btn-qty:hover {transform: scale(1.5); } .quantity input {width: 100%; text-align: center; border: 0; background-color: transparent; font-size: 18px; font-weight: 500; } .quantity input:focus {box-shadow: none; outline: none; } /* item prices */ .box-item-prices {text-align: center; } .box-item-prices span {display: block; font-size: 20px; font-weight: 500; } .box-item-prices del {font-size: 14px; color: #666; } .box-item-tools {text-align: end; display: flex; align-items: center; justify-content: end; column-gap: 1.5rem; } .box-item-tools a svg, .box-item-tools a img {transition: .4s; } .box-item-tools a:hover svg, .box-item-tools a:hover img {transform: scale(1.25); } .box-item-tools-del svg rect {transition: .4s; } .box-item-tools-del:hover svg rect {fill: red; height: 2px; } @media (max-width:579px) {.box-item .row:first-child {} .box-item-tools {flex-direction: column; row-gap: .5rem; align-items: end; justify-content: center; } .box-item-tools a img, .box-item-tools a svg {width: 16px; height: 16px; object-fit: contain; } .box-item-title {font-size: 14px; } .box-item-params-list {margin-top: 0; font-size: 12px; } .quantity {margin: 0; padding-bottom: .25rem; } .quantity input {font-size: 14px; } .box-item-prices {line-height: 1; text-align: end; } .box-item-prices span {font-size: 14px; } .box-item-prices del {font-size: 10px; } } /* CART CHECKOUT */ .box-checkout {position: sticky; top: 5rem; padding: 3.25rem 3.5rem; background-color: #E4D9C2; z-index: 3; } .box-checkout-title {font-size: 32px; font-weight: 600; } .box-checkout-count {font-size: 16px; font-weight: 500; color: #666; } .box-checkout-prices {display: flex; flex-direction: column; row-gap: .75rem; margin: 4rem 0; line-height: 1; } .box-checkout-prices span {font-size: 36px; font-weight: 500; } .box-checkout-prices del {font-size: 24px; font-weight: 500; color: #666; } /* Discout */ .discounts-wrap {margin-top: 5rem; margin-bottom: 6rem; } .box-checkout-discout {position: relative; padding-bottom: .5rem; width: 100%; border-bottom: 1px solid black; margin-bottom: 1rem; } .box-checkout-discout input {width: 100%; height: 40px; background-color: transparent; border: 0; text-transform: uppercase; letter-spacing: 2px; } .box-checkout-discout input:focus {box-shadow: none; outline: none; } .box-checkout-discout input::placeholder {transition: .4s; text-transform: capitalize; letter-spacing: 0; } .box-checkout-discout input:focus::placeholder {opacity: .25; } .box-checkout-discout .btn-apply {position: absolute; top: 0; right: 0; height: 100%; width: fit-content; background-color: transparent; border: 0; outline: none; } .box-checkout-discout .btn-apply img {transition: .4s; } .box-checkout-discout .btn-apply:hover img {transform: scale(2); } .notice.is-info {background-color: rgba(255, 255, 255, .75); backdrop-filter: blur(5px); } .box-checkout-button .btn {width: 100%; height: 60px; border-radius: 0; font-size: 18px; } .cart-items-empty {height: 100%; display: flex; align-items: center; justify-content: center; font-size: 24px; column-gap: 1rem; text-transform: uppercase; } @media (max-width:579px) {.box-checkout {padding: 1rem; margin-left: -.75rem; margin-right: -.75rem; } .box-checkout-title {font-size: 24px; } .box-checkout-prices span {font-size: 24px; } .box-checkout-prices del {font-size: 16px; } .box-checkout-prices {margin: 2rem 0; } .box-checkout-discout {margin-top: 3rem; margin-bottom: 3rem; } .cart-wrapper {position: relative; overflow: clip; clip-path: border-box; } .box-checkout-sticky {position: fixed; bottom: -20%; background-color: #E4D9C2; width: 100%; left: 0; padding: 1rem 0 4rem 0; z-index: 2; transition: .4s; } .box-checkout-sticky.show {bottom: 0; } .box-checkout-sticky .btn {height: 60px; width: 100%; } .box-checkout-sticky .open-checkout {position: relative; margin: .25rem 0 1rem 0; display: inline-block; width: 48px; height: 3px; border-radius: 3px; background-color: #4B5257; margin-left: auto; margin-right: auto; display: flex; align-items: center; justify-content: center; } .mask-box-checkout {transition: .4s; position: fixed; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; z-index: 1; } .mask-box-checkout.show {opacity: 1; visibility: visible; } /* */ .box-checkout-sticky .box-checkout-discout {margin-bottom: 1rem; } } /* PAGE ================================ ================================*/ .page-title {font-size: 32px; font-weight: 600; } /* FAVORITES ================================ ================================*/ /* MODALs ================================ ================================*/ .modal-content {border-radius: 0; background-color: rgba(255, 255, 255, .75); backdrop-filter: blur(5px); } /* Modal Search */ #modalSearch .modal-dialog {margin-top: 10%; } .form-search {position: relative; } .form-search input.form-control {height: 50px; border: 0; border-bottom: 1px solid #767674; width: 100%; background-color: transparent; border-radius: 0; padding: 0; transition: .4s; } .form-search input:focus {outline: none; box-shadow: none; /*    box-shadow: 0 0 0 .25rem rgba(118, 118, 116, .25);*/ /*    padding: .5rem .5rem;*/ } .form-search .btn-search {position: absolute; top: 0; right: 0; width: fit-content; height: 50px; box-shadow: none; outline: none; border: 0; background-color: transparent; } /* Modal Product in CART */ #productInCart .modal-title {font-size: 16px; color: #666; } #productInCart .modal-product-title {font-size: 18px; text-align: center; margin-top: 1rem; } #productInCart .modal-body {padding-bottom: 0; padding-top: 0; } #productInCart .btn {height: 50px; display: flex; align-items: center; justify-content: center; } .btn-close:focus {box-shadow: none; } /* Toasts */ .toast-header {display: flex; align-items: center; justify-content: space-between; } .toast {border-radius: 0; } @media (max-width:579px) {.toast-container {/*        max-width: 230px;*/ /*        width: 230px;*/ } } /* FOOTER ================================ ================================*/ footer {position: relative; background-color: #f7f8f3; padding-top: 2.5rem; z-index: 3; } .footer-wrapper {position: relative; } .footer-wrapper .bg-logo {position: absolute; top: 0; left: 0; width: 75%; z-index: -1; } .footer-wrapper .bg-logo svg {width: 100%; } .footer-menu {display: flex; flex-direction: column; justify-content: center; align-items: center; padding-right: 4rem; } .nav-footer-menu {flex-direction: column; row-gap: 1rem; } .nav-footer-menu li a {padding: 0; font-size: 12px; } .nav-footer-menu li:first-child {font-weight: 700; margin-bottom: 1rem; } .nav-footer-collections {column-gap: 4rem; justify-content: center; } .nav-footer-collections li a {position: relative; padding: 0; font-size: 14px; font-weight: 500; display: flex; align-items: center; column-gap: 1rem; } .nav-footer-collections .nav-icon-catalog i {transform: rotate(0); } footer .footer-wrapper .nav-footer-collections .nav-icon-catalog i::before, footer .footer-wrapper .nav-footer-collections .nav-icon-catalog i::after {background-color: black; } footer .footer-wrapper .nav-footer-collections .nav-icon-catalog:hover i::before, footer .footer-wrapper .nav-footer-collections .nav-icon-catalog:hover i::after {background-color: #936646; } /* socials */ .socials {height: 100%; display: flex; flex-direction: column; padding-bottom: 4rem; margin-top: auto; align-items: end; justify-content: end; } .nav-socials {margin-top: 1rem; flex-direction: column; align-items: end; justify-content: end; row-gap: 1.5rem; } .nav-socials li a {padding: 0; } .nav-socials li a img, .nav-socials li a svg {transition: .4s; } .nav-socials li a:hover img, .nav-socials li a:hover svg {transform: scale(1.4) rotate(15deg); } .nav-socials li a svg path {transition: .4s; } .nav-socials li a:hover svg path {fill: #936646; } .footer-info {margin-top: 8.5rem; padding-left: 5rem; } .footer-info a[href="tel"] {font-size: 62px; font-weight: 600; text-decoration: none; line-height: 1; transition: .4s; } .footer-info-address, .footer-info-timework {color: #4D4D4D; } .footer-info-address {margin-top: 2rem; } .footer-info a[href="mail"] {margin-top: 2rem; display: inline-block; text-decoration: none; transition: .4s; } .footer-info-creator {margin-top: 5.5rem; padding-left: 6rem; font-size: 14px; color: #4D4D4D; } .footer-info-creator .powered {margin-top: .5rem; display: flex; align-items: center; column-gap: .5rem; line-height: 1; } .footer-title {font-weight: 700; } @media (max-width:1550px) {.footer-menu {padding-right: 2rem; } .socials {padding-bottom: 3rem; } .nav-socials {row-gap: .75rem; } .footer-info-creator {margin-top: 2rem; padding-left: 2rem; } .footer-info a[href="tel"] {font-size: 42px; } .footer-info a[href="mail"] {margin-top: 2rem; } } @media (max-width:579px) {.footer-info {margin-top: 1rem; padding-left: 0; } .footer-menu {display: block; } .nav-footer-menu li:first-child {margin-bottom: 0; } .nav-footer-collections {column-gap: 1rem; justify-content: space-between; } .socials {justify-content: start; align-items: start; } .nav-socials {flex-direction: row; justify-content: start; margin-top: 1rem; column-gap: 1rem; } .footer-info a[href="tel"] {font-size: 36px; } .footer-info {font-size: 14px; } .footer-info-address, .footer-info a[href="mail"] {margin-top: 1rem; } .footer-info-creator {padding-left: 0; } .footer-wrapper .bg-logo {position: relative; width: 100%; margin-bottom: 4rem; margin-top: 3rem; } .footer-wrapper .bg-logo svg {height: auto; } }