/* ================================
GLOBAL
SWIPER CONTROLS
CONTENTS
1. HEADER
2. MENU
3. FOOTER
4. BREADCRUMS
5. STAR RATING
6. MAIN SCREEN
7. ABOUT COMPANY
8. POPULAR PRODUCTS
9. REVIEWS
10. MANUFACTURE
11. NEWS
12. CATALOG
13. FILTERS
14. DETALED PRODUCT
15. BASKET
16. ORDER
17. PAGE BANNER
18. FAVORITE PAGE
19. COMPARE PAGE
20. PERSONAL PAGE
21. ARTICLE PAGES
22. BX-AUTH
================================ */
@font-face {
font-family: Cormorant;
font-display: swap;
src: url("../fonts/Cormorant/Cormorant-Regular.woff2") format("woff2"),
url("../fonts/Cormorant/Cormorant-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: Cormorant;
font-display: swap;
src: url("../fonts/Cormorant/Cormorant-Medium.woff2") format("woff2"),
url("../fonts/Cormorant/Cormorant-Medium.woff") format("woff");
font-weight: 500;
font-style: normal
}
@font-face {
font-family: Cormorant;
font-display: swap;
src: url("../fonts/Cormorant/Cormorant-SemiBold.woff2") format("woff2"),
url("../fonts/Cormorant/Cormorant-SemiBold.woff") format("woff");
font-weight: 600;
font-style: normal
}
@font-face {
font-family: Cormorant;
font-display: swap;
src: url("../fonts/Cormorant/Cormorant-Bold.woff2") format("woff2"),
url("../fonts/Cormorant/Cormorant-Bold.woff") format("woff");
font-weight: 700;
font-style: normal
}
/* Roboto */
@font-face {
font-family: Roboto;
font-display: swap;
src: url("../fonts/Roboto/Roboto-Regular.woff2") format("woff2"),
url("../fonts/Roboto/Roboto-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: Roboto;
font-display: swap;
src: url("../fonts/Roboto/Roboto-Medium.woff2") format("woff2"),
url("../fonts/Roboto/Roboto-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
}
:root {
--font-cormorant: Cormorant;
--font-roboto: Roboto;
--base-color-dark: #443F3A; /* + */
--base-color-white: #FFFFFF; /* + */
--base-color-sand-beige: #FBF7F3; /* песочный */
--base-color-soft-beige: #E3DFD9; /* мягкий бежевый */
--base-color-light-beige: #B3AB9B; /* светло-бежевый */
--base-color-gray: #858176; /* серый */
--base-color-light-gray: #CDCDCD; /* светло-серый */
--base-color-dark-gray: #7D7767; /* тёмно-серый */
--base-color-light-silver: #C3C3C3; /* светло-серебряный */
--base-color-soft-gray: #D9D9D9; /* мягкий серый */
--base-color-error: #ed4261;
/* Старая палитра */
/*--base-color-cream-beige: #F0EBE5; кремово-бежевый +++ */
/*--base-color-olive-gray: #878378; оливково-серый +++ */
--base-border-radius: 2px;
}
/*
font: 600 1.125rem / 1 var(--font-roboto); 18px
font: 400 1.25rem / 1.4 var(--font-roboto); 20px
font: 400 1.375rem / 1.4 var(--font-roboto); 22px
font: 500 1.5rem / 1.4 var(--font-roboto); 24px
font: 500 1.75rem / 1.4 var(--font-roboto); 28px
font: 500 4.375rem / 1.1 var(--font-cormorant); 70px
*/
* {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* Высота экрана */
margin: 0;
background-color: var(--base-color-sand-beige); /* песочный */
padding: 0;
margin: 0;
}
html {
font-size: clamp(16px, 0.5vw, 20px);
}
html, body {
scroll-behavior: smooth;
}
main {
flex: 1;
padding: 52px 0 0;
}
h1,h2,h3,h4,h5,h6 {
margin: 0;
}
:root {
--font-mont: 'Mont', sans-serif;
}
ul {
list-style: none;
padding: 0;
margin: 0
}
ol {
list-style: none;
padding: 0;
margin: 0
}
p {
font-family: var(--font-mont);
font-weight: 400;
margin: 0
}
a {
text-decoration: none;
color: var(--base-color-dark);
}
fieldset {
padding: 0;
border: none;
margin: 0;
}
legend {
margin: 0;
padding: 0;
}
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
border: none;
margin: 0;
}
button {
font-family: var(--font-mont);
padding: 0;
cursor: pointer;
outline: none;
border: none;
background-color: transparent;
}
button:focus {
outline: none;
}
textarea {
resize: none
}
img {
width: 100%;
height: auto;
}
figure {
margin: 0;
}
.visually-hidden {
opacity: 0;
visibility: hidden;
font-size: 0;
position: absolute;
width: 0;
height: 0;
clip: rect(0, 0, 0, 0);
}
.wrapper {
max-width: auto;
padding: 0 120px;
margin: 0 auto;
}
.row,
.col {
padding: 0 !important;
margin: 0 !important;
}
.icon {
fill: var(--base-color-dark);
}
.section-title {
/* font: 500 70px/110% var(--font-cormorant); */
font: 500 4.375rem/110% var(--font-cormorant);
color: var(--base-color-dark);
text-transform: uppercase;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
margin: 0;
}
.section-text {
/* font: 400 20px/140% var(--font-roboto); */
font: 400 1.25rem/140% var(--font-roboto);
color: var(--base-color-dark);
margin: 0;
}
.catalog-link {
width: 280px;
/* font: 400 20px/140% var(--font-roboto); */
font: 400 1.25rem/140% var(--font-roboto);
color: var(--base-color-dark);
position: relative;
text-align: center;
}
.catalog-link__icon {
position: absolute;
width: 100%;
max-width: 250px;
left: 15px;
top: 23px;
z-index: 2;
}
.catalog-link::before {
position: absolute;
content: '';
width: 70px;
height: 70px;
top: -4px;
right: -17px;
z-index: 1;
background-color: var(--base-color-light-beige); /* светло-бежевый */
border-radius: 50%;
}
.overlay {
background-color: rgb(81, 81, 81, 0.7);
backdrop-filter: blur(2px);
width: 100%;
height: 100vh;
position: fixed;
top: 0;
bottom: 0;
z-index: 10;
opacity: 0;
visibility: hidden;
}
.overlay.js-active {
opacity: 1;
visibility: visible;
}
.mob-logout {
display: none;
}
/* #region ================================= GLOBAL ================================= */
/* ================================ GLOBAL CONTENTS
1.1 Swiper Controls
================================ */
/* #region ======== 1.1 Swiper Controls ======== */
.swiper-controls {
display: flex;
flex-direction: row-reverse;
justify-content: flex-start;
gap: 10px;
margin: 35px 0 0 0;
}
.swiper-controls .swiper-button-next,
.swiper-controls .swiper-button-prev {
display: flex;
justify-content: center;
position: static;
background-color: var(--base-color-light-beige);
border-radius: 50%;
width: 70px;
height: 70px;
}
.swiper-controls .swiper-button-next svg,
.swiper-controls .swiper-button-prev svg {
width: 24px;
height: 24px;
fill: none;
stroke: var(--base-color-dark);
}
#reviews-slider,
#news-slider {
--swiper-scrollbar-drag-bg-color: var(var(--base-color-gray));
--swiper-scrollbar-bg-color: var(--base-color-light-silver);
}
#header-menu-main-slider .swiper-scrollbar,
#reviews-slider .swiper-scrollbar,
#news-slider .swiper-scrollbar {
display: none;
}
/* #endregion */
/* #endregion */
/* #region ================================= 1. HEADER ================================= */
/* ================================ HEADER CONTENTS
1.1 Search
1.2 Header Contacts
1.3 Header Controls
1.4 Compare
1.5 Favorite
1.6 Login
1.7 Cart
1.8 Burger
================================ */
.header {
position: relative;
z-index: 10;
padding: 52px 0 0;
}
.header-content {
display: flex;
align-items: center;
}
.header-logo {
display: block;
flex-shrink: 0;
width: 60px;
height: 30px;
margin: 0 40px 0 0;
}
.header-logo img {
height: 100%;
}
/* ======== 1.1 Search ======== */
.header-search {
width: 100%;
max-width: 550px;
margin: 0 0 0 auto;
}
.header-search-form {
width: 100%;
position: relative;
}
.header-search-form__input {
position: relative;
z-index: 10;
width: 100%;
font: 400 16px/1 var(--font-roboto);
background-color: transparent;
color: var(--base-color-dark);
border: 2px solid var(--base-color-light-beige); /* светло-бежевый */
border-radius: 1000px;
padding: 8px 16px;
}
.header-search-form__btn {
position: absolute;
right: 15px;
top: 6px;
}
.header-search-form__icon {
width: 24px;
height: 24px;
fill: transparent;
}
.search-btn {
display: none;
}
.header-search__close-btn {
display: none;
}
/* ======== 1.2 Header Contacts ======== */
.header-contacts {
display: flex;
align-items: center;
flex-shrink: 0;
gap: 20px;
margin: 0 0 0 40px;
}
.header-contacts__contact {
font: 400 1.25rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
}
/* ======== 1.3 Header Controls ======== */
.header-controls {
display: flex;
gap: 20px;
align-items: center;
margin: 0 0 0 40px;
}
/* ======== 1.4 Compare ======== */
.compare {
position: relative;
display: flex;
}
.compare__link {
width: 100%;
height: 100%;
}
.compare__icon {
width: 25px;
height: 25px;
stroke: var(--base-color-dark);
}
.compare__value {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
border-radius: 50%;
width: 14px;
height: 14px;
right: -8px;
top: -4px;
font: 500 10px/1 var(--font-roboto);
background-color: var(--base-color-dark-gray);
color: var(--base-color-white);
}
/* ======== 1.5 Favorite ======== */
.favorite {
position: relative;
display: flex;
}
.favorite__link {
width: 100%;
height: 100%;
}
.favorite__icon {
width: 25px;
height: 25px;
fill: transparent;
stroke: var(--base-color-dark);
}
.favorite__value {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
border-radius: 50%;
width: 14px;
height: 14px;
right: -8px;
top: -4px;
font: 500 10px/1 var(--font-roboto);
background-color: var(--base-color-dark-gray);
color: var(--base-color-white);
}
/* ======== 1.6 Login ======== */
.login__icon {
width: 25px;
height: 25px;
fill: transparent;
}
/* ======== 1.7 Cart ======== */
.cart {
position: relative;
display: flex;
}
.cart__link {
width: 100%;
height: 100%;
}
.cart__icon {
width: 29px;
height: 28px;
fill: transparent;
}
.cart__value {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
border-radius: 50%;
width: 14px;
height: 14px;
right: -8px;
top: -4px;
font: 500 10px/1 var(--font-roboto);
background-color: var(--base-color-dark-gray);
color: var(--base-color-white);
}
/* ======== 1.8 Burger ======== */
.burger-btn {
width: 42px;
height: 32px;
margin: 0 0 0 40px;
}
.burger-btn__icon {
width: 42px;
height: 26px
}
/* #endregion ================================= 1. HEADER ================================= */
/* #region ================================= 2. MENU ================================= */
/* ================================ MENU CONTENTS
2.1 Menu
2.2 Menu Brands
2.3 Menu Left Column
2.4 Menu Right Column
2.5 Menu Slider
2.6 Something Content
================================ */
/* ======== 2.1 Menu ======== */
.header-menu {
display: none;
flex-direction: column;
gap: 40px;
background-color: var(--base-color-soft-beige);
position: absolute;
top: 0;
left: 0;
z-index: 12;
width: 100%;
padding: 52px 120px;
}
.header-menu.js-is-open {
display: flex;
}
.header-menu-heading {
display: flex;
justify-content: space-between;
height: 39px;
align-items: center;
}
.header-menu-heading__close-bnt {
width: 30px;
height: 30px;
}
.header-menu-heading__close-icon {
width: 30px;
height: 30px;
}
.header-menu .header-controls {
display: none;
}
.header-menu-navigation {
grid-area: navigation;
display: flex;
gap: 84px;
}
.header-menu-content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"navigation slider"
"brands slider";
gap: 25px;
}
.header-catalog__link {
font: 500 1.5rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
}
.header-sub-catalog {
display: flex;
flex-direction: column;
gap: 14px;
padding: 0 0 0 18px;
margin: 17px 0 0 0;
}
.header-sub-catalog__link {
position: relative;
font: 400 1.375rem / 1 var(--font-roboto);
color: var(--base-color-dark);
}
.header-sub-catalog__link::before {
position: absolute;
content: '';
width: 4px;
height: 4px;
background-color: var(--base-color-dark);
top: 8px;
left: -18px;
border-radius: 50%;
}
.header-menu-navigation__link {
font: 500 1.5rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
}
/* ======== 2.2 Menu Brands ======== */
.header-brands {
grid-area: brands;
display: flex;
gap: 20px;
margin: auto 0 0 0;
}
.header-brand {
display: flex;
align-items: center;
max-width: 180px;
height: 146px;
background-color: var(--base-color-soft-gray);
}
/* ======== 2.3 Menu Left Column ======== */
.header-menu-left-column {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 33px 0 42px 0px;
}
/* ======== 2.4 Menu Right Column ======== */
.header-menu-right-column {
display: flex;
flex-direction: column;
gap: 20px;
}
/* ======== 2.5 Menu Slider ======== */
.header-menu-slider {
display: flex;
flex-direction: column;
gap: 24px;
grid-area: slider;
width: 100%;
overflow: hidden;
}
.header-main-slider,
.header-thumb-slider {
width: 100%;
overflow: hidden;
}
.header-main-slider .header-menu-slider-slide__img {
width: 100%;
aspect-ratio: 829 / 342;
overflow: hidden;
}
.header-main-slider .header-menu-slider-slide__img img,
.header-thumb-slider .header-menu-slider-slide__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.header-menu-slider-slide__title {
font: 500 1.125rem/1 var(--font-roboto);
margin: 20px 0 0 0;
}
/* ======== 2.6 Something Content ======== */
.something-content-list {
display: flex;
align-items: center;
gap: 15px;
}
.something-content-item {
max-width: 192px;
display: flex;
flex-direction: column;
gap: 20px;
}
.something-content-item__title {
font: 500 1.125rem/1 var(--font-roboto);
}
/* #endregion ================================= 2. MENU ================================= */
/* #region ================================= 3. FOOTER ================================= */
/* ================================ FOOTER CONTENTS
3.1 Footer Main
3.2 Footer Navigation
3.3 Footer Social
3.4 Footer Subscribe
3.5 Footer Bottom Content
================================ */
/* #region ======== 3.1 Footer Main ======== */
.footer {
flex-shrink: 0;
background-color: var(--base-color-light-beige);
padding: 80px 0 42px 0;
}
.footer-content {
display: flex;
gap: 20px;
}
.footer-logo {
display: block;
flex-shrink: 0;
width: 60px;
height: 30px;
}
/* #endregion ======== 3.1 Footer Main ======== */
/* #region ======== 3.2 Footer Navigation ======== */
.footer-navigation {
width: 100%;
max-width: 560px;
display: flex;
justify-content: space-between;
gap: 20px;
margin: 0 0 0 auto;
}
.footer-navigation-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.footer-navigation-column:nth-of-type(1) .footer-navigation-list__item:first-child a,
.footer-navigation-column:nth-of-type(3) .footer-navigation-list__item:first-child a {
font: 600 1.125rem / 1 var(--font-roboto);
}
.footer-navigation-column:nth-of-type(2) .footer-navigation-list .footer-navigation-list__item a {
font: 600 1.125rem / 1 var(--font-roboto);
}
.footer-navigation-list__link {
font: 400 1.125rem / 1 var(--font-roboto);
color: var(--base-color-dark);
}
/* #endregion ======== 3.2 Footer Navigation ======== */
/* #region ======== 3.3 Footer Social ======== */
.footer-social {
margin: 2px 0 0 auto;
}
.footer-social-list {
display: flex;
gap: 20px;
}
.footer-social-list__item {
width: 70px;
height: 70px;
background-color: var(--base-color-light-gray);
border-radius: 50%;
}
.footer-social-list__link {
display: flex;
width: 100%;
height: 100%;
}
/* #endregion ======== 3.3 Footer Social ======== */
/* #region ======== 3.4 Footer Subscribe ======== */
.footer-subscribe {
display: flex;
flex-direction: column;
gap: 22px;
margin: -5px 0 0 auto;
}
.footer-subscribe__title {
font: 600 1.25rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
}
.footer-form-subscribe {
display: flex;
gap: 20px;
}
.footer-form-subscribe__input {
width: 300px;
font: 400 1.25rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
background-color: var(--base-color-sand-beige);
border-radius: var(--base-border-radius);
padding: 21px 24px;
}
.footer-form-subscribe__input::placeholder {
font: 400 1.25rem / 1.4 var(--font-roboto);
color: var(--base-color-light-beige);
}
.footer-form-subscribe__btn {
font: 400 1.25rem / 1.4 var(--font-roboto);
background-color: var(--base-color-gray);
color: var(--base-color-sand-beige);
padding: 20px 52px;
}
/* #endregion ======== 3.4 Footer Subscribe ======== */
/* #region ======== 3.5 Footer Bottom Content ======== */
.footer-bottom-content {
margin: 53px 0 0 0;
}
.footer-bottom-content-list {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
max-width: 1046px;
margin: 0 auto 0 193px;
}
.footer-bottom-content-list__link {
font: 400 1.125rem / 1 var(--font-roboto);
color: var(--base-color-dark);
}
/* #endregion ======== 3.5 Footer Bottom Content ======== */
/* #endregion */
/* #region ================================= 4. BREADCRUMS ================================= */
/* ================================ BREADCRUMS CONTENTS 4.1 Bread Crumbs ================================ */
/* #region ======== 4.1 Bread Crumbs ======== */
.breadcrumbs-list {
display: flex;
align-items: center;
gap: 5px;
list-style: none;
overflow-x: auto;
}
.breadcrumbs-list__item {
position: relative;
font: 400 1.25rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
white-space: nowrap;
}
.breadcrumbs-list__item::after {
content: '/';
padding: 0 6px;
}
.breadcrumbs-list__item:last-child:after {
content: '';
}
.breadcrumbs-list__current-page {
color: var(--base-color-gray);
}
/* #endregion */
/* #endregion */
/* #region ================================= 5. STAR RATING ================================= */
/* ================================ STAR RATING CONTENTS 5.1 Star Rating ================================ */
/* #region ======== 5.1 Star Rating ======== */
.star-rating {
--star-size: 20px;
--star-color: #e4e5e9;
--star-fill: #ffc107;
display: inline-block;
}
.star-rating__stars {
position: relative;
width: calc(var(--star-size) * 5);
height: var(--star-size);
}
.star-rating__stars::before,
.star-rating__stars::after {
content: "";
position: absolute;
inset: 0;
-webkit-mask-image: url("data:image/svg+xml;utf8,\");
-webkit-mask-repeat: repeat-x;
-webkit-mask-size: var(--star-size) var(--star-size);
mask-image: url("data:image/svg+xml;utf8,\");
mask-repeat: repeat-x;
mask-size: var(--star-size) var(--star-size);
}
.star-rating__stars::before {
background-color: var(--star-color);
}
.star-rating__stars::after {
background-color: var(--star-fill);
width: calc(var(--rating) * var(--star-size));
overflow: hidden;
}
/* #endregion */
/* #endregion */
/* #region ================================= 6. MAIN SCREEN ================================= */
/* ================================ MAIN SCREEN CONTENTS 6.1 Main Screen ================================ */
/* #region ======== 6.1 Main Screen ======== */
.wrapper--main-screen {
padding: 0;
}
.main-page {
position: relative;
padding: 0 0 50px;
}
.main-page::before {
position: absolute;
content: '';
width: 100%;
max-width: 1672px;
height: 414px;
top: 1494px;
left: 50%;
transform: translateX(-50%);
z-index: -1;
background: url(../img/decor/decor.png) 0 0 / contain no-repeat;
}
.main-screen {
position: relative;
background-color: var(--base-color-soft-beige); /* мягкий бежевый */
padding: 233px 0 146px;
margin: -143px 0 121px 0;
}
.main-screen__title {
font: 400 188px/1 var(--font-cormorant);
text-transform: uppercase;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
text-align: center;
color: var(--base-color-gray); /* серый */;
margin: 0 auto;
}
.main-screen-content-img {
position: absolute;
max-width: 450px;
margin: -94px auto 0;
left: 50%;
transform: translate(-48%, -10%);
}
.main-screen-content-info {
display: flex;
flex-direction: column;
gap: 36px;
max-width: 437px;
margin: 76px 211px 0 auto;
}
.main-screen-content-info__text {
font: 400 1.25rem / 140% var(--font-roboto);
color: var(--base-color-dark);
}
.main-screen-content-info__mob-text {
display: none;
}
.main-screen-content-info__link {
margin: 0 0 0 -17px;
}
/* #endregion */
/* #endregion */
/* #region ================================= 7. ABOUT COMPANY ================================= */
/* ================================ ABOUT COMPANY CONTENTS 7.1 About Company ================================ */
/* #region ======== 7.1 About Company ======== */
.about-company-content {
/* display: grid;
grid-template-columns: 1fr 1fr; */
display: flex;
gap: 50px;
padding: 60px 0 0;
}
.about-company-content-right-coulmn {
width: 100%;
/* max-width: 550px; */
display: flex;
flex-direction: column;
gap: 80px;
padding: 42px 0 0 0;
margin: 0 0 0 auto;
}
.about-company-image img {
border-radius: 3px;
}
.about-company-description {
max-width: 550px;
}
/* #endregion */
/* #endregion */
/* #region ================================= 8. POPULAR PRODUCTS ================================= */
/* ================================ POPULAR PRODUCTS CONTENTS 8.1 Popular Products ================================ */
/* #region ======== 8.1 Popular Products ======== */
.popular-products-section {
padding: 60px 0;
margin: 356px 0 0 0;
}
.popular-products-content {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 52px 20px;
}
.popular-products-info {
/* max-width: 700px; */
display: flex;
flex-direction: column;
grid-area: 1 / 1 / 2 / 7;
gap: 53px;
}
.popular-products-info__text {
max-width: 575px;
}
.popular-products {
display: contents;
}
.popular-products__product:nth-child(1) {
grid-area: 1 / 7 / 2 / 10;
}
.popular-products__product:nth-child(2) {
grid-area: 1 / 10 / 2 / 13;
}
.popular-products__product:nth-child(3) {
grid-area: 2 / 1 / 3 / 4;
}
.popular-products__product:nth-child(4) {
grid-area: 2 / 4 / 3 / 7;
}
.popular-products__product:nth-child(5) {
grid-area: 2 / 7 / 3 / 10;
}
.popular-products-catalog-link {
grid-area: 2 / 10 / 3 / -1;
margin: auto auto 108px auto;
}
.product-card__link {
display: flex;
flex-direction: column;
gap: 10px;
}
.product-card__title {
max-width: 270px;
/* font: 400 20px/140% var(--font-roboto); */
font: 400 1.25rem/140% var(--font-roboto);
color: var(--base-color-dark);
}
.product-card__img img {
border-radius: 3px;
}
/* #endregion */
/* #endregion */
/* #region ================================= 9. REVIEWS ================================= */
/* ================================ REVIEWS CONTENTS 9.1 Reviews ================================ */
/* #region ======== 9.1 Reviews ======== */
.reviews-section {
padding: 60px 0;
}
.reviews-section__title {
max-width: 600px;
}
.reviews-slider {
position: relative;
overflow: hidden;
margin: 60px 0 0 0;
}
#reviews-slider .swiper-slide {
width: clamp(320px, 28vw, 600px);
aspect-ratio: 550 / 280;
min-width: 547px;
}
.review {
display: flex;
flex-direction: column;
gap: 12px;
/* max-width: 547px; */
background-color: var(--base-color-light-beige);
padding: 38px 54px;
}
.review.swiper-slide {
display: flex;
flex-direction: column;
gap: 12px;
/* max-width: 547px; */
height: 280px;
}
.review__user-name {
/* font: 600 18px/1 var(--font-roboto); */
font: 600 1.125rem/1 var(--font-roboto);
color: var(--base-color-dark);
}
.review__user-text {
/* font: 400 18px/140% var(--font-roboto); */
font: 400 1.25rem/140% var(--font-roboto);
color: var(--base-color-dark);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
.review__link {
font: 500 18px/140% var(--font-roboto);
color: var(--base-color-dark);
margin: auto 0 0;
}
/* #endregion */
/* #endregion */
/* #region ================================= 10. MANUFACTURE ================================= */
/* ================================ MANUFACTURE CONTENTS 10.1 Manufacture ================================ */
/* #region ======== 10.1 Manufacture ======== */
.manufacture-section {
padding: 60px 0;
}
.manufacture-section__title {
max-width: 1125px;
}
.manufacture-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 52px 0 0 0;
}
.manufacture-content-column {
display: flex;
flex-direction: column;
gap: 40px;
}
.manufacture-content-column__text {
font: 400 1.25rem/140% var(--font-roboto);
color: var(--base-color-dark);
}
.manufacture-content-column:not(:has(.manufacture-content-column__img)) .manufacture-content-column__text {
margin: auto 0 0 0;
}
.manufacture-content-column__img {
object-fit: cover;
height: 100%;
border-radius: 3px;
}
/* #endregion */
/* #endregion */
/* #region ================================= 11. NEWS ================================= */
/* ================================ NEWS CONTENTS 11.1 News ================================ */
/* #region ======== 10.1 Manufacture ======== */
.news-section {
padding: 60px 0;
}
.news-item__title {
font: 400 1.25rem/140% var(--font-roboto);
}
#news-slider {
margin: 60px 0 0;
}
#news-slider .swiper-slide {
width: clamp(280px, 21vw, 520px);
}
.news-item__image {
width: 100%;
aspect-ratio: 405 / 230;
overflow: hidden;
background-color: var(--base-color-light-beige);
border-radius: 3px;
}
.news-item__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-item__link {
display: flex;
flex-direction: column;
gap: 14px;
}
/* #endregion */
/* #endregion */
/* #region ================================= 12. CATALOG ================================= */
/* ================================ CATALOG CONTENTS
12.1 Catalog Heading
12.2 Catalog Selections
12.3 Catalog
12.4 Sorting
12.5 Catalog List
12.6 Price
12.7 Pagination
12.8 Catalog SEO-text
12.9 Catalog 1-lvl
================================ */
/* #region ======== 12.1 Catalog Heading ======== */
.catalog-heading {
padding: 38px 0 0;
}
.catalog-heading-content {
display: flex;
flex-direction: column;
gap: 35px;
}
.catalog-title {
font: 500 4.375rem / 1.1 var(--font-cormorant);
text-transform: uppercase;
color: var(--base-color-dark);
position: relative;
}
.catalog-title__count-value {
font: 400 1.25rem / 1.4 var(--font-roboto);
color: var(--base-color-gray);
position: absolute;
top: -4px;
}
/* #endregion */
/* #region ======== 12.2 Catalog Selections ======== */
.selections {
display: flex;
gap: 35px;
}
.selection {
font: 500 1.5rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
}
.selection__link {
display: flex;
}
.selection__count-value {
font: 500 1.25rem / 1.4 var(--font-roboto);
color: var(--base-color-gray);
margin: -16px 0 0;
}
/* #endregion */
/* #region ======== 12.3 Catalog ======== */
.catalog {
padding: 0 0 120px;
margin: 32px 0 0 0;
}
.catalog-controls {
display: flex;
justify-content: space-between;
align-items: center;
}
/* #endregion */
/* #region ======== 12.4 Sorting ======== */
.sorting {
position: relative;
cursor: pointer;
}
.sorting-heading {
display: flex;
align-items: center;
gap: 5px;
}
.sorting-heading__title {
font: 400 1.25rem / 1.4 var(--font-roboto);
color: var(--base-color-gray);
}
.sorting-heading__current-sorting {
font: 400 1.25rem / 1.4 var(--font-roboto);
color: var(--base-color-gray);
}
.sorting__icon {
width: 22px;
height: 18px;
stroke: var(--base-color-gray);
fill: var(--base-color-gray);
margin: 0 0 0 4px;
}
.sorting-list {
position: absolute;
z-index: 10;
display: flex;
flex-direction: column;
gap: 10px;
background-color: var(--base-color-white);
width: 100%;
padding: 20px;
opacity: 0;
visibility: hidden;
}
.sorting-list.js-active {
opacity: 1;
visibility: visible;
}
.sorting-list__item {
font: 400 1.25rem / 1.4 var(--font-roboto);
text-align: left;
color: var( --base-color-dark);
}
.sorting-list__item.js-active {
color: var(--base-color-gray);
}
.sorting-list__item:hover,
.sorting-list__item:focus {
color: var(--base-color-gray);
}
/* #endregion */
/* #region ======== 12.5 Catalog List ======== */
.catalog-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
gap: 20px;
margin: 20px 0 0 0;
}
.catalog-list.compare-products-content {
margin: 0;
}
.catalog-product-card {
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
gap: 13px;
transition: all 0.3s ease-in-out;
border-radius: 3px;
padding: 0 0 20px;
}
.catalog-product-card:hover {
background-color: var(--base-color-soft-beige);
}
.catalog-list__product:hover .catalog-product-card {
width: 100%;
z-index: 2;
}
.catalog-product-card-visible-content {
display: flex;
justify-content: space-between;
}
.catalog-product-card-hidden-content {
display: grid;
grid-template-columns: 1fr 110px;
align-items: flex-end;
grid-template-areas:
"char cart"
"price cart";
gap: 14px;
margin: -7px 0 0;
transition: all 0.3s ease-in-out;
visibility: hidden;
opacity: 0;
}
.catalog-product-card:hover .catalog-product-card-hidden-content {
visibility: visible;
opacity: 1;
}
.catalog-product-card__img-link {
display: flex;
}
.catalog-product-card__title {
font: 500 1.25rem / 1.4 var(--font-roboto);
max-width: 300px;
transition: all 0.3s ease-in-out;
}
.catalog-product-card-controls {
position: relative;
display: flex;
align-items: center;
gap: 17px;
transition: all 0.3s ease-in-out;
}
.compare-btn {
width: 20px;
height: 20px;
}
.compare-btn__icon {
width: 16px;
height: 20px;
stroke: var(--base-color-gray);
}
.compare-btn.is-active .compare-btn__icon {
stroke: var(--base-color-dark);
}
.favorite-btn {
width: 20px;
height: 20px;
}
.favorite-btn__icon {
width: 22px;
height: 23px;
stroke: var(--base-color-dark);
fill: transparent;
}
.favorite-btn.is-active .favorite-btn__icon {
stroke: #dc3545;
fill: #dc3545;
}
.catalog-product-card-char {
display: flex;
align-items: center;
gap: 5px;
color: var(--base-color-gray);
transition: all 0.3s ease-in-out;
}
.catalog-product-card-char__label {
font: 400 1rem / 1 var(--font-roboto);
}
.catalog-product-card-char__value {
font: 500 1rem / 1 var(--font-roboto);
}
.catalog-product-card:hover .catalog-product-card__title,
.catalog-product-card:hover .catalog-product-card-char,
.catalog-product-card:hover .catalog-product-card-price {
transform: translate(20px, 0);
}
.catalog-product-card:hover .catalog-product-card-controls,
.catalog-product-card:hover .add-to-cart-btn {
transform: translate(-20px, 0);
}
.collection-products .catalog-product-card__title,
.viewed-products .catalog-product-card__title {
max-width: 210px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* #endregion */
/* #region ======== 12.6 Price ======== */
.catalog-product-card-price {
grid-area: price;
transition: all 0.3s ease-in-out;
}
.catalog-product-card-price__cost {
font: 500 1.75rem/1 var(--font-roboto);
color: var(--base-color-dark);
}
.catalog-product-card-price__currency {
font: 500 1.75rem/1 var(--font-roboto);
color: var(--base-color-dark);
}
.go-to-detailed-cart,
.add-to-cart-btn {
grid-area: cart;
font: 400 1rem/1 var(--font-roboto);
text-align: center;
background-color: var(--base-color-light-beige);
color: var(--base-color-dark);
padding: 12px 0;
}
.add-to-cart-btn {
transition: all 0.3s ease-in-out;
}
/* #endregion */
/* #region ======== 12.7 Pagination ======== */
.catalog-pagination {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
margin: 40px 0 0;
}
.catalog-show-more {
display: flex;
justify-content: center;
align-items: center;
font: 400 1.25rem / 1.4 var(--font-roboto);
background-color:var(--base-color-light-beige);
color: var(--base-color-dark);
width: 100%;
max-width: 830px;
padding: 17px 0;
}
.pagination-list {
display: flex;
align-items: center;
gap: 30px;
}
.pagination-list__item {
font: 400 1.25rem / 1.4 var(--font-roboto);
/* color: var(--base-color-dark); */
}
.pagination-list__icon-next,
.pagination-list__icon-prev {
width: 8px;
height: 13px;
stroke: var(--base-color-gray);
fill: transparent;
}
.pagination-list__item.disabled .pagination-list__icon-next,
.pagination-list__item.disabled .pagination-list__icon-prev {
width: 8px;
height: 13px;
stroke: var(--base-color-light-beige);
}
/* #endregion */
/* #region ======== 12.8 Catalog SEO-text ======== */
.catalog-seo {
padding: 0 0 175px;
}
.catalog-seo-content {
display: flex;
justify-content: space-between;
gap: 50px;
}
.catalog-seo-content__img {
flex-shrink: 0;
width: 50%;
}
.catalog-seo-content__text {
font: 400 1.25rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
margin: 0;
}
/* #endregion */
/* #region ======== 12.9 Catalog 1-lvl ======== */
.catalog-section-list-tile-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(405px, 1fr));
gap: 30px 20px;
}
.catalog-section-list-item {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
padding: 0;
}
.catalog-section-list-item-img {
border: none;
}
.catalog-section-list-item-title {
text-align: left;
margin: 0 0 0 -2px;
}
.catalog-section-list-item-title .catalog-section-list-item-link,
.catalog-section-list-item-title .catalog-section-list-item-counter {
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
font: 500 1.5rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
}
/* #endregion */
/* #endregion */
/* #region ================================= 13. FILTERS ================================= */
/* ================================ FILTERS CONTENTS
13.1 Filters
13.2 Range
13.3 Checkboxes
13.4 Radio
13.5 Filter Buttons
================================ */
/* #region ======== 13.1 Filters ======== */
.filters-btn {
display: flex;
align-items: center;
gap: 10px;
font: 400 1.25rem / 1.4 var(--font-roboto);
background-color: var(--base-color-light-beige);
color: var(--base-color-dark);
padding: 16px 40px;
}
.filters-btn__icon {
width: 23px;
height: 16px;
fill: var(--base-color-dark);
stroke: var(--base-color-dark);
}
.filters {
position: fixed;
display: flex;
flex-direction: column;
gap: 40px;
width: 100%;
max-width: 405px;
height: 100vh;
background-color: var(--base-color-soft-beige);
padding: 60px 20px 40px 40px;
}
.filters__close-btn {
position: absolute;
top: 20px;
right: 20px;
width: 20px;
height: 20px;
}
.filters__close-icon {
width: 20px;
height: 20px;
}
.filters-content {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 31px;
overflow-y: scroll;
padding: 0 20px 0 0;
scrollbar-width: auto;
}
.filters-content::-webkit-scrollbar {
width: 4px;
}
.filters-content::-webkit-scrollbar-track {
background: var(--base-color-light-beige);
border-radius: 10px;
}
.filters-content::-webkit-scrollbar-thumb {
background: var(--base-color-gray);
border-radius: 10px;
}
.filter__title {
font: 500 1.25rem / 1 var(--font-roboto);
color: var(--base-color-dark);
margin: 0 0 16px;
}
.filter__title--dropdpwn {
padding: 0 0 0 26px;
}
/* #endregion */
/* #region ======== 13.2 Range ======== */
.range-filter {
display: flex;
flex: 350px;
flex-direction: column;
gap: 15px;
}
.range-filter__inputs {
display: flex;
justify-content: space-between;
position: relative;
}
.range-filter__inputs::before {
position: absolute;
content: '';
width: 20px;
height: 2px;
top: 18px;
left: 50%;
transform: translate(-50%, 0);
background-color: var(--base-color-light-beige);
}
.range-filter__input {
width: 100%;
max-width: 140px;
font: 400 1.125rem / 1 var(--font-roboto) !important;
padding: 7px 42px 8px 0;
font-size: 14px;
background-color: transparent;
border-radius: 4px;
border: 2px solid var(--base-color-light-beige);
color: var(--base-color-dark);
text-align: right;
}
.range-filter__inputs--price .range-filter__input {
padding: 7px 29px 8px 0;
}
.range-filter__input-wrapper {
position: relative;
}
.range-filter__input-wrapper::before,
.range-filter__input-wrapper::after {
position: absolute;
font: 400 1.125rem / 1 var(--font-roboto);
color: var(--base-color-gray);
}
.range-filter__input-wrapper::before {
top: 11px;
left: 11px;
}
.range-filter__input-wrapper::after {
top: 11px;
right: 11px;
}
.range-filter__input-wrapper--min::before {
content: 'от';
}
.range-filter__input-wrapper--max::before {
content: 'до';
}
.range-filter__input-wrapper--min::after,
.range-filter__input-wrapper--max::after {
content: 'см';
}
.range-filter__input-wrapper--min-price::after,
.range-filter__input-wrapper--max-price::after {
/* content: 'AED'; */
font-family: 'UAESymbol';
content: 'ê';
}
.range-filter__slider {
position: relative;
height: 16px;
}
.range-filter__slider input[type="range"] {
position: absolute;
width: 100%;
pointer-events: none;
-webkit-appearance: none;
background: none;
}
.range-filter__track {
position: absolute;
height: 3px;
background-color:var(--base-color-light-beige);
top: 47%;
transform: translateY(-47%);
width: 100%;
border-radius: 5px;
}
.range-filter__range {
position: absolute;
height: 3px;
background-color: var(--base-color-gray);
top: 47%;
transform: translateY(-47%);
border-radius: 5px;
}
input[type="range"]::-webkit-slider-thumb {
pointer-events: all;
width: 16px;
height: 16px;
border-radius: 50%;
background: #007bff;
cursor: pointer;
-webkit-appearance: none;
}
input[type="range"]::-moz-range-thumb {
pointer-events: all;
width: 16px;
height: 16px;
border-radius: 50%;
background: #007bff;
cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: var(--base-color-soft-beige);
border-radius: 50%;
border: 2px solid var(--base-color-gray);
/* box-shadow: 0 4px 10px rgba(0,0,0,0.15); */
cursor: grab;
}
input[type="range"]::-webkit-slider-thumb:active {
cursor: grabbing;
transform: scale(1.1);
}
/* #endregion */
/* #region ======== 13.3 Checkboxes ======== */
.filter-input-list {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 10px;
}
.filter-input-list--miniatures {
flex-direction: row;
}
.filter-input-list--colors {
flex-direction: row;
}
.filter-input-list__item {
display: flex;
align-items: center;
height: 25px;
padding: 0 0 0 45px;
}
.filter-input-list__item--miniature {
height: auto;
padding: 0;
}
.filter-input-list__item--color {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
padding: 0;
}
.filter-input-list__input {
position: relative;
cursor: pointer;
}
.filter-input-list__label {
position: relative;
font: 400 1.125rem / 1 var(--font-roboto);
color: var(--base-color-dark);
text-transform: lowercase;
cursor: pointer;
}
.filter-input-list__label:not(.filter-input-list__label--miniature):not(.filter-input-list__label--colors) {
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
.filter-input-list__label--miniature {
width: 60px;
height: 60px;
border: 2px solid var(--base-color-light-beige);
border-radius: 4px;
padding: 4px;
}
.filter-input-list__label--color {
width: 40px;
height: 40px;
padding: 0;
border-radius: 50%;
}
.filter-input-list__input[type="checkbox"] + .filter-input-list__label::before {
position: absolute;
content: '';
width: 21px;
height: 21px;
border: 2px solid var(--base-color-light-beige);
border-radius: 2px;
top: -5px;
left: -45px;
}
.filter-input-list__input[type="checkbox"] + .filter-input-list__label--miniature::before {
content: none !important;
}
.filter-input-list__input[type="checkbox"] + .filter-input-list__label--color::before {
content: none;
}
.filter-input-list__input[type="checkbox"]:checked + .filter-input-list__label:not(.filter-input-list__label--color)::before {
background: url(../img/icon-check.svg) center / 15px 11px no-repeat;
}
.filter-input-list__input[type="checkbox"]:checked + .filter-input-list__label--miniature {
border-color: var(--base-color-dark-gray);
}
.filter-input-list__input[type="checkbox"]:checked + .filter-input-list__label--color::after {
position: absolute;
width: 12px;
height: 12px;
content: '';
border-radius: 50%;
background: url(../img/icon-white-cross.svg) center / 10px 10px no-repeat;
top: 8.4px;
left: 8px;
}
.filter-input-list__input[type="checkbox"]:checked + .filter-input-list__label--color.filter-input-list__label--white::after {
background: url(../img/icon-dark-cross.svg) center / 10px 10px no-repeat;
}
.filter-input-list__input:checked + .filter-input-list__label {
box-shadow: 0 0 0 4px #E3DFD9, 0 0 0 6px #858176;
width: 28px;
height: 28px;
}
/* #endregion */
/* #region ======== 13.4 Radio ======== */
.filter-input-list__input[type="radio"] + .filter-input-list__label::before {
position: absolute;
content: '';
width: 21px;
height: 21px;
border: 2px solid var(--base-color-light-beige);
border-radius: 50%;
top: -4px;
left: -45px;
}
.filter-input-list__input[type="radio"]:checked + .filter-input-list__label::after {
position: absolute;
content: '';
width: 11px;
height: 11px;
border-radius: 50%;
background-color: var(--base-color-light-beige);
top: 3px;
left: -38px;
}
/* #endregion */
/* #region ======== 13.5 Filter Buttons ======== */
.filter-buttons {
display: flex;
flex-direction: column;
gap: 10px;
}
.filter-buttons__button {
font: 600 1.125rem / 1 var(--font-roboto);
border-radius: 2px;
padding: 20px 0;
}
.filter-buttons__button--submit {
background-color: var(--base-color-light-beige);
color: var(--base-color-dark);
}
.filter-buttons__button--clear {
background-color: var(--base-color-light-gray);
color: var(--base-color-dark);
}
/* #endregion */
/* #endregion */
/* #region ================================= 14. DETALED PRODUCT ================================= */
/* ================================ DETALED PRODUCT CONTENTS
14.1 Detailed Product
14.2 Detail Product Gallery
14.3 Detail Product Info
14.4 Deatail Product Options
14.5 Select Variation
14.6 Additional Content
================================ */
/* #region ======== 14.1 Detailed Product ======== */
.detailed-product {
margin: 60px 0 120px;
}
.detailed-product-content {
display: flex;
flex-direction: column;
gap: 60px;
}
.detailed-product-main-content {
display: grid;
grid-template-columns: 51.83% 1fr;
gap: 106px;
}
/* #endregion */
/* #region ======== 14.2 Detail Product Gallery ======== */
.detailed-product-gallery {
display: flex;
flex-direction: column;
gap: 20px;
}
.detailed-product-main-gallery {
position: relative;
width: 100%;
}
.detailed-product-main-gallery .detailed-product-main-gallery-controls {
position: absolute;
top: 50%;
justify-content: space-between;
width: 100%;
padding: 0 20px;
}
.detailed-product-thumb-gallery {
overflow: hidden;
}
.detailed-product-main-gallery .swiper-slide img,
.detailed-product-thumb-gallery .swiper-slide img {
border-radius: 3px;
}
.detailed-product-thumb-gallery .swiper-slide {
cursor: pointer;
}
/* #endregion */
/* #region ======== 14.3 Detail Product Info ======== */
.detailed-product-info {
width: 100%;
max-width: 724px;
padding: 3px 0;
}
.detailed-product-info-heading {
position: relative;
display: flex;
flex-direction: column;
gap: 17px;
}
.detailed-product-controls {
display: flex;
flex-direction: row-reverse;
gap: 15px;
position: absolute;
top: -3px;
right: -3px;
}
.detailed-product-controls .compare-btn {
width: 20px;
height: 20px;
}
.detailed-product-controls .compare-btn__icon {
width: 16px;
height: 20px;
/* stroke: var(--base-color-dark); */
stroke: var(--base-color-gray);
}
.detailed-product-controls .favorite-btn {
width: 20px;
height: 20px;
}
.detailed-product-controls .favorite-btn__icon {
width: 22px;
height: 23px;
stroke: var(--base-color-dark);
fill: transparent;
}
.detailed-product-article {
font: 400 1.125rem / 1 var(--font-roboto);
color: var(--base-color-gray);
}
.detailed-product-info-heading__title {
max-width: 595px;
font: 500 2.5rem / 1.2 var(--font-cormorant);
text-transform: uppercase;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: var(--base-color-dark);
}
/* #endregion */
/* #region ======== 14.4 Deatail Product Options ======== */
.detailed-product-options {
margin: 12px 0 0 0;
}
.detailed-product-option {
border-top: 2px solid var(--base-color-light-gray);
padding: 0 20px;
}
.detailed-product-option:first-of-type{
border-top: none;
}
.detailed-product-option:last-of-type {
border-bottom: 2px solid var(--base-color-light-gray);
}
.detailed-product-option__btn {
position: relative;
width: 100%;
font: 500 1.25rem / 1 var(--font-roboto);
padding: 20px;
text-align: left;
padding: 25px 0;
}
.detailed-product-option__btn::before,
.detailed-product-option__btn::after {
position: absolute;
content: '';
width: 16px;
height: 2px;
background-color: var(--base-color-dark);
transition: transform 0.3s ease-in-out;
}
.detailed-product-option__btn::before {
top: 34px;
right: 22px;
}
.detailed-product-option__btn::after {
top: 34px;
right: 22px;
transform: rotate(90deg);
}
.detailed-product-option__content {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.detailed-product-option.js-active .detailed-product-option__btn::before {
transform: rotate(45deg);
}
.detailed-product-option.js-active .detailed-product-option__btn::after {
transform: rotate(-45deg);
}
.detailed-product-option.js-active .detailed-product-option__content {
max-height: 500px;
padding: 0 0 20px;
opacity: 1;
transition: all 0.3s ease-in-out;
}
.selected-option-label {
font: 400 1.25rem / 1 var(--font-roboto);
color: var(--base-color-gray);
}
/* #endregion */
/* #region ======== 14.5 Select Variation ======== */
.detailed-product-select-variation {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
padding: 0 5px;
}
.detailed-product-select-variation__item {
width: 50px;
height: 50px;
}
.detailed-product-select-variation__item.option-text {
width: max-content;
height: auto;
padding: 5px 10px;
background-color: transparent;
border-radius: 3px;
border: 2px solid var(--base-color-light-beige);
}
.detailed-product-select-variation__item.color {
border-radius: 50%;
}
.detailed-product-select-variation__item.material,
.detailed-product-select-variation__item.accessories {
border-radius: 2px;
}
.detailed-product-select-variation__item.accessories {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-color: var(--base-color-white);
}
.detailed-product-select-variation__item.color.js-active,
.detailed-product-select-variation__item.material.js-active,
.detailed-product-select-variation__item.accessories.js-active {
position: relative;
width: 42px;
height: 42px;
}
.detailed-product-select-variation__item.option-text.js-active {
background-color: var(--base-color-light-beige);
}
.detailed-product-select-variation__item.color.js-active::before {
/* position: absolute;
content: '';
border-radius: 50%;
width: 46px;
height: 46px;
top: -4px;
left: -4px;
border: 2px solid var(--base-color-light-beige); */
}
.detailed-product-select-variation__item.color.js-active {
box-shadow: 0 0 0 2px #E3DFD9, 0 0 0 4px #858176;
width: 42px;
height: 42px;
}
.detailed-product-select-variation__item.material.js-active::before,
.detailed-product-select-variation__item.accessories.js-active::before {
/* position: absolute;
content: '';
border-radius: 4px;
width: 46px;
height: 46px;
top: -4px;
left: -4px;
border: 2px solid var(--base-color-light-beige); */
}
.detailed-product-select-variation__item.material.js-active,
.detailed-product-select-variation__item.accessories.js-active {
box-shadow: 0 0 0 2px #E3DFD9, 0 0 0 4px #858176;
width: 42px;
height: 42px;
}
.detailed-product-price {
font: 500 2.5rem/1 var(--font-roboto);
color: var(--base-color-dark);
padding: 38px 24px 32px;
}
.detailed-product-price__cost,
.detailed-product-price__currency {
font-family: inherit;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
}
.detail-product-btns {
display: flex;
flex-direction: column;
gap: 5px;
}
.detail-product-btns__btn {
width: 100%;
max-width: 405px;
font: 400 1.25rem / 1.4 var(--font-roboto);
border-radius: 3px;
background-color: var(--base-color-light-beige);
color: var(--base-color-dark);
padding: 16px 0;
margin: 0 0 0 4px;
}
.add-to-cart {
width: 100%;
max-width: 405px;
font: 400 1.25rem / 1.4 var(--font-roboto);
border-radius: 3px;
background-color: var(--base-color-light-beige);
color: var(--base-color-dark);
padding: 16px 0;
margin: 0 0 0 4px;
}
/* #endregion */
/* #region ======== 14.6 Additional Content ======== */
.detailed-products-triggers {
display: flex;
align-items: center;
}
.detailed-products-triggers__trigger {
width: 50%;
font: 400 1.5rem/1 var(--font-roboto);
border-bottom: 2px solid var(--base-color-light-gray);
color: var(--base-color-gray);
padding: 0 0 15px;
}
.detailed-products-triggers__trigger.js-active {
border-color: var(--base-color-dark);
color: var(--base-color-dark);
}
.detailed-product-tab-content__tab {
display: none;
/* width: 50%;
max-width: 820px; */
padding: 32px 0;
}
.detailed-product-tab-content__tab.js-active {
display: block;
}
.detailed-product-description p {
font: 400 1.25rem / 1.4 var(--font-roboto);
padding: 0 10px;
margin: 0 0 20px;
}
.description-grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
align-self: start;
gap: 50px;
}
/* .description-container {
grid-area: descr;
} */
.image-container img {
border-radius: 3px;
}
.characteristics-list {
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
}
.characteristic {
display: flex;
justify-content: space-between;
align-items: center;
font: 400 1.25rem / 1.4 var(--font-roboto);
border-bottom: 2px solid var(--base-color-light-gray);
padding: 0 0 10px;
}
.detailed-product-section {
margin: 0 0 90px;
}
.detailed-product-section__title {
font: 500 2.5rem / 1 var(--font-cormorant);
text-transform: uppercase;
color: var(--base-color-dark);
}
.detailed-product-section .catalog-list {
grid-template-columns: repeat(auto-fill, minmax(405px, 1fr));
margin: 32px 0 0;
}
/* #endregion */
/* #endregion */
/* #region ================================= 15. Basket ================================= */
/* ================================ Basket CONTENTS
15.1 Basket Heading
15.2 Basket Empty
15.3 Basket Product
15.4 Basket Order Details
15.5 Basket Additinal Info
================================ */
/* #region ======== 15.1 basket Heading ======== */
.basket {
padding: 0 0 120px;
}
.basket--not-empty {
padding: 0 0 120px;
margin: -12px 0 0 0;
}
.basket-heading {
padding: 36px 0;
}
.basket-content {
display: flex;
gap: 20px;
}
.basket-main-content {
flex: 2;
}
.basket-aside-content {
display: flex;
flex-direction: column;
gap: 20px;
flex-shrink: 0;
flex: 1;
width: 100%;
max-width: 567px;
}
.basket-heading__title {
font: 500 4.375rem / 1.1 var(--font-cormorant);
text-transform: uppercase;
color: var(--base-color-dark);
position: relative;
}
.basket-heading__count-value {
font: 400 1.25rem / 1.4 var(--font-roboto);
color: var(--base-color-gray);
position: absolute;
top: -4px;
}
/* #endregion */
/* #region ======== 15.2 Basket Empty ======== */
.basket-empty-block {
display: flex;
flex-direction: column;
gap: 40px;
}
.basket-empty-block__text {
font: 400 1.5rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
}
.basket-empty-block__link {
max-width: 325px;
font: 400 1.25rem / 1.4 var(--font-roboto);
text-align: center;
background-color: var(--base-color-light-beige);
padding: 16px 0;
}
/* #endregion */
/* #region ======== 15.3 Basket Product ======== */
.basket-product-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.basket-product {
position: relative;
display: flex;
align-items: flex-start;
gap: 30px;
background-color: var(--base-color-soft-beige);
border-radius: 3px;
padding: 40px;
}
.basket-product-image {
flex-shrink: 0;
max-width: 205px;
max-height: 205px;
}
.basket-product-info {
display: flex;
flex-direction: column;
gap: 7px;
max-width: 300px;
padding: 3px 0 0 0;
}
.basket-product-info__title {
font: 500 1.25rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
}
.basket-product-info-chars {
display: flex;
flex-direction: column;
gap: 3px;
}
.basket-product-info-char {
font: 400 1.125rem / 1.4 var(--font-roboto);
color: var(--base-color-gray);
}
.basket-product-counter {
width: max-content;
display: flex;
align-items: center;
border-radius: 10000px;
border: 2px solid var(--base-color-gray);
margin: 10px 0 0 12px;
}
.basket-product-counter__btn {
width: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
padding: 8px 0;
}
.basket-product-counter__btn .icon {
width: 16px;
height: 16px;
stroke: var(--base-color-gray);
stroke-width: 2px;
pointer-events: none;
}
.basket-product-counter__value {
font: 500 1.25rem / 1.4 var(--font-roboto);
color: var(--base-color-gray);
text-align: center;
max-width: 25px;
background-color: transparent;
}
.basket-product-price {
font: 500 1.5rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
white-space: nowrap;
margin: 3px 20px 0 auto;
}
.basket-product-controls {
display: flex;
gap: 16px;
position: absolute;
bottom: 44px;
right: 20px;
}
.compare-btn,
.favorite-btn {
width: 25px;
height: 25px;
}
.compare-btn__icon,
.favorite-btn__icon {
width: 25px;
height: 25px;
}
.basket-product-delete-btn {
position: absolute;
top: 20px;
right: 20px;
width: 20px;
height: 20px;
}
.basket-product-delete-btn__icon {
width: 20px;
height: 20px;
}
/* #endregion */
/* #region ======== 15.4 Basket Order Details ======== */
.order-details {
display: flex;
flex-direction: column;
gap: 32px;
border-radius: 3px;
background-color: var(--base-color-soft-beige);
padding: 40px;
}
.order-details__title {
font: 500 1.5rem / 1.4 var(--font-roboto);
text-transform: uppercase;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: var(--base-color-dark);
}
.order-details-summary {
display: flex;
justify-content: space-between;
}
.order-details-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.order-details-info__label {
font: 500 1.5rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
}
.order-details-positions {
font: 400 1rem / 1 var(--font-roboto);
color: var(--base-color-gray);
}
.order-details-price {
font: 500 1.5rem / 1 var(--font-roboto);
color: var(--base-color-dark);
padding: 5px 0 0 0;
}
.order-details__link {
font: 400 1.25rem / 1 var(--font-roboto);
text-align: center;
color: var(--base-color-dark);
background-color: var(--base-color-light-beige);
border-radius: 3px;
padding: 22px 0 20px;
margin: 5px 0 0;
}
.order-details__submit {
font: 400 1.25rem / 1 var(--font-roboto);
text-align: center;
color: var(--base-color-dark);
background-color: var(--base-color-light-beige);
padding: 22px 0 20px;
margin: 5px 0 0;
}
/* #endregion */
/* #region ======== 15.5 Basket Additinal Info ======== */
.basket-additional-info {
display: flex;
flex-direction: column;
gap: 11px;
border-radius: 3px;
background-color: var(--base-color-soft-beige);
padding: 10px 40px 26px;
margin: -23px 0 0;
}
.basket-dropdown {
padding: 0 0 10px;
border-bottom: 2px solid var(--base-color-light-gray);
}
.basket-dropdown:last-of-type {
border: none;
padding: 0;
}
.basket-dropdown-btn {
position: relative;
width: 100%;
display: flex;
align-items: center;
gap: 35px;
font: 400 1.125rem / 1 var(--font-roboto);
color: var(--base-color-dark);
}
.basket-dropdown-btn::before,
.basket-dropdown-btn::after {
position: absolute;
content: '';
width: 16px;
height: 2px;
background-color: var(--base-color-dark);
transition: transform 0.3s ease-in-out;
}
.basket-dropdown-btn::before {
top: 19px;
right: 14px;
}
.basket-dropdown-btn::after {
top: 19px;
right: 14px;
transform: rotate(90deg);
}
.basket-dropdown-content {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.basket-dropdown.js-active .basket-dropdown-btn::before {
transform: rotate(45deg);
}
.basket-dropdown.js-active .basket-dropdown-btn::after {
transform: rotate(-45deg);
}
.basket-dropdown.js-active .basket-dropdown-content {
max-height: 500px;
padding: 0 0 20px;
opacity: 1;
transition: all 0.3s ease-in-out;
}
.basket-dropdown-btn__icon {
width: 40px;
height: 40px;
fill: none;
}
.basket-dropdown-content p {
font: 400 1.125rem / 1 var(--font-roboto);
color: var(--base-color-dark);
padding: 20px 0 0;
}
/* #endregion */
.basket + .viewed-products {
padding: 90px 0;
}
/* #endregion */
/* #region ================================= 16. Order ================================= */
/* ================================ Order CONTENTS
16.1 Order Heading
16.2 Order Placing
16.3 Order Form
16.4 Order Confirm Personal Data
================================ */
/* #region ======== 16.1 Order Heading ======== */
.order-placing-heading {
padding: 22px 0;
}
.order-placing__back {
display: block;
position: relative;
font: 400 1.25rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
padding: 0 0 0 28px;
}
.order-placing__back::before,
.order-placing__back::after {
position: absolute;
content: '';
width: 10px;
height: 2px;
top: 11px;
left: 0;
background-color: var(--base-color-dark);
border-radius: 2px;
transform: rotate(-45deg);
}
.order-placing__back::after {
top: 16px;
transform: rotate(45deg);
}
/* #endregion */
/* #region ======== 16.2 Order Placing ======== */
.order-placing {
padding: 0 0 120px;
}
.order-placing-form {
display: flex;
gap: 20px;
}
.order-placing-aside-content {
display: flex;
flex-direction: column;
gap: 20px;
flex: 1;
width: 100%;
max-width: 567px;
flex-shrink: 0;
}
/* #endregion */
/* #region ======== 16.3 Order Form ======== */
.order-placing-main-content {
flex: 2;
display: flex;
flex-direction: column;
gap: 40px;
background-color: var(--base-color-soft-beige);
border-radius: 3px;
padding: 40px;
}
.order-placing__title {
font: 500 1.75rem / 1 var(--font-roboto);
text-transform: uppercase;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: var(--base-color-dark);
}
.order-placing-block {
display: flex;
flex-direction: column;
gap: 20px;
}
.order-placing-block__title {
font: 500 1.25rem / 1 var(--font-roboto);
text-transform: uppercase;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: var(--base-color-dark);
}
.order-placing-block-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.order-placing-input-block input[type="text"],
.order-placing-input-block textarea {
width: 100%;
font: 400 1rem / 1 var(--font-roboto);
color: var(--base-color-dark);
background-color: var(--base-color-sand-beige);
border: 2px solid var(--base-color-light-beige);
border-radius: 3px;
padding: 17px 18px 16px 18px;
}
.order-placing-input-block textarea {
resize: none;
}
.order-placing-input-block textarea:focus {
outline: none;
}
.order-placing-input-block input::placeholder,
.order-placing-input-block textarea::placeholder {
font: 400 1rem / 1 var(--font-roboto);
color: var(--base-color-light-beige);
}
.order-placing-input-block input.js-error {
border-color: var(--base-color-error);
}
.order-placing-input-block input.js-error + .js-error-message {
display: block;
margin: 5px 0 0;
color: var(--base-color-error);
font: 400 1rem / 1 var(--font-roboto);
}
.order-placing-block-content--custom-layout {
display: flex;
flex-direction: column;
gap: 20px;
}
.order-placing-block-inputs {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 10px;
}
.order-placing-block-inputs--payments {
display: flex;
}
.address-field--house {
grid-area: 1 / 1 / 2 / 5;
}
.address-field--street {
grid-area: 1 / 5 / 2 / 9;
}
.address-field--flat {
grid-area: 1 / 9 / 2 / 13;
}
.address-field--region {
grid-area: 2 / 1 / 3 / 7;
}
.address-field--postalcode {
grid-area: 2 / 7 / 3 / 13;
}
.address-field--comment {
grid-area: 3 / 1 / 4 / -1;
}
.map {
border-radius: 3px;
overflow: hidden;
max-height: 400px;
}
.order-placing-block-content--payment {
display: block;
}
.payment-method {
display: flex;
width: 100%;
max-width: 177px;
}
.payment-method__label {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background-color: var(--base-color-sand-beige);
border: 2px solid var(--base-color-light-beige);
border-radius: 3px;
cursor: pointer;
padding: 15px 0;
}
.payment-method__label img {
width: auto;
}
.payment-method__input:checked + .payment-method__label {
border-color: var(--base-color-dark);
}
/* #endregion */
/* #region ======== 16.4 Order Confirm Personal Data ======== */
.confirm-personal-data {
margin: -30px 0 0 0;
}
.confirm-personal-data-label {
position: relative;
cursor: pointer;
}
.confirm-personal-data-label__checkbox {
display: block;
position: absolute;
width: 25px;
height: 25px;
border: 2px solid var(--base-color-light-beige);
}
.confirm-personal-data-label__text {
display: block;
font: 400 1rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
padding: 2px 0 0 40px;
}
.confirm-personal-data__input:checked + .confirm-personal-data-label .confirm-personal-data-label__checkbox {
background: url(../img/icon-check.svg) center / 15px 11px no-repeat;
}
/* #endregion */
/* #endregion */
/* #region ================================= 17. PAGE BANNER ================================= */
/* #region ================================= 18. FAVORITE ================================= */
.favorite-heading {
padding: 26px 0;
}
.favorite-heading__title {
font: 500 4.375rem / 1.1 var(--font-cormorant);
text-transform: uppercase;
color: var(--base-color-dark);
}
.favorite-products {
padding: 0 0 110px;
}
/* #endregion */
/* #region ================================= 19. COMPARE ================================= */
/* ================================ Compare CONTENTS
19.1 Compare Heading
19.2 Compare Category Triggers
19.3 Compare Characteristics
================================ */
/* #region ======== 19.1 Compare Characteristics ======== */
.compare-heading {
padding: 36px 0;
}
.compare-heading__title {
font: 500 4.375rem / 1.1 var(--font-cormorant);
text-transform: uppercase;
color: var(--base-color-dark);
}
.compare-products {
position: relative;
padding: 5px 0 110px;
}
.compare-products-inner-wrapper {
display: flex;
flex-direction: column;
gap: 30px;
}
/* #endregion */
/* #region ======== 19.2 Compare Characteristics ======== */
.compare-products-category {
display: flex;
gap: 40px;
margin: 0 0 30px;
}
.compare-products-category__btn {
font: 400 1.5rem / 1 var(--font-roboto);
color: var(--base-color-light-beige);
border-bottom: 2px solid transparent;
padding: 0 0 1px;
}
.compare-products-category__btn.js-active {
border-color: var(--base-color-dark);
color: var(--base-color-dark);
}
/* #endregion */
.compare-products-inner-wrapper {
overflow-x: auto;
}
.catalog-list.compare-products-content {
display: flex;
flex-wrap: nowrap;
/* grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); */
}
.catalog-list.compare-products-content .catalog-list__product {
flex-shrink: 0;
}
.catalog-list.compare-products-content .catalog-list__product:hover .catalog-product-card {
z-index: 3;
position: relative;
}
/* #region ======== 19.1 Compare Characteristics ======== */
.compare-characteristics {
display: flex;
flex-direction: column;
gap: 42px;
z-index: 2;
padding: 0;
margin: -92px 0 0;
}
.compare-scroll-btn {
background-color: var(--base-color-light-beige);
border-radius: 50%;
width: 70px;
height: 70px;
position: absolute;
top: 260px;
transform: translateY(-50%);
z-index: 3;
}
.compare-scroll-btn--left {
left: 100px;
}
.compare-scroll-btn--right {
right: 100px;
}
.compare-scroll-btn svg {
width: 24px;
height: 24px;
fill: none;
stroke: var(--base-color-dark);
}
.differences-only-btn {
display: flex;
align-items: center;
gap: 15px;
}
.differences-only-btn__toggler {
position: relative;
width: 68px;
height: 36px;
background-color: var(--base-color-soft-beige);
border-radius: 10000px;
}
.differences-only-btn__toggler::before {
position: absolute;
content: '';
width: 32px;
height: 32px;
top: 2px;
left: 2px;
background-color: var(--base-color-light-beige);
border-radius: 50%;
transition: all 0.3s ease-in-out;
}
.differences-only-btn__label {
font: 400 1.5rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
}
.differences-only-btn.js-active .differences-only-btn__toggler::before {
transform: translate(100%, 0);
background-color: var(--base-color-gray);
}
.compare-characteristics-properties {
display: flex;
flex-direction: column;
gap: 18px;
}
.compare-property {
display: flex;
flex-direction: column;
gap: 13px;
/* border-bottom: 2px solid var(--base-color-light-gray);
padding: 0 0 17px; */
}
.compare-property:last-of-type {
border-bottom: none;
}
.compare-property__name {
font: 400 1.5rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
}
.compare-property__values {
display: flex;
min-width: 405px;
/* display: grid;
align-items: center;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); */
gap: 20px;
}
.compare-property__value {
position: relative;
font: 400 1.25rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
min-width: 405px;
/* border-bottom: 2px solid var(--base-color-light-gray); */
padding: 0 0 17px;
}
.compare-property__value::before {
position: absolute;
content: '';
width: calc(100% + 20px);
height: 2px;
left: 0;
bottom: 0;
background-color: var(--base-color-light-gray);
}
/* #endregion */
/* #endregion */
/* #region ================================= 20. PERSONAL ================================= */
/* ================================ Personal CONTENTS
20.1 Personal Heading
20.2 Personal Aside
20.3 Personal Content
================================ */
.personal {
padding: 60px 0 120px;
}
/* #region ======== 20.1 Personal Heading ======== */
.personal-heading {
background-color: var(--base-color-soft-beige);
border-radius: 3px;
padding: 46px 40px;
}
.personal-heading__title {
font: 500 1.5rem/1 var(--font-roboto);
text-transform: uppercase;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: var(--base-color-dark);
}
/* #endregion */
/* #region ======== 20.2 Personal Aside ======== */
.personal-aside {
width: 100%;
max-width: 405px;
display: flex;
flex-direction: column;
gap: 30px;
background-color: var(--base-color-soft-beige);
border-radius: 3px;
padding: 40px;
}
.personal-aside-heading {
display: flex;
flex-direction: column;
gap: 13px;
}
.personal-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
background-color: var(--base-color-sand-beige);
}
.personal-avatar img {
object-fit: cover;
border-radius: 50%;
width: 120px;
height: 120px;
}
.personal-name {
font: 500 1.5rem/1.4 var(--font-roboto);
text-transform: uppercase;
color: var(--base-color-dark);
}
.personal-navigation {
display: flex;
flex-direction: column;
gap: 30px;
}
.personal-navigation__link {
width: max-content;
font: 500 1.25rem/1 var(--font-roboto);
text-transform: uppercase;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: var(--base-color-dark);
position: relative;
}
.personal-navigation__link.is-active::before {
position: absolute;
content: '';
width: 100%;
height: 2px;
bottom: -10px;
left: 0;
background-color: var(--base-color-dark);
}
/* #endregion */
/* #region ======== 20.3 Personal Content ======== */
.personal-inner-box {
display: flex;
align-items: flex-start;
gap: 20px;
}
.personal-content {
width: 100%;
display: flex;
flex-direction: column;
gap: 16px;
}
.personal-inner-content {
display: flex;
flex-direction: column;
gap: 40px;
background-color: var(--base-color-soft-beige);
border-radius: 3px;
padding: 40px;
}
/* #endregion */
/* #region ======== 20.3 Personal Form ======== */
.personal-user-data-form,
.change-user-password-form {
display: flex;
flex-direction: column;
gap: 40px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 100%;
}
.form-group__title {
font: 500 1.25rem/1 var(--font-roboto);
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: var(--base-color-dark);
}
.inputs-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.input-block input[type="text"],
.input-block input[type="password"] {
width: 100%;
font: 400 1rem / 1 var(--font-roboto);
color: var(--base-color-dark);
background-color: var(--base-color-sand-beige);
border: 2px solid var(--base-color-light-beige);
border-radius: 3px;
padding: 17px 18px 16px 18px;
}
.input-block input[type="password"] {
-webkit-text-security: disc;
}
.input-block input::placeholder {
font: 400 1rem / 1.4 var(--font-roboto);
color: var(--base-color-light-beige);
}
.form-submit-btn {
max-width: 31.07%;
font: 400 1.125rem / 1 var(--font-roboto);
text-align: center;
color: var(--base-color-dark);
text-transform: lowercase;
background-color: var(--base-color-light-beige);
padding: 22px 0 20px;
margin: -19px 0 0;
}
.form-submit-btn:disabled {
background-color: var(--base-color-light-gray);
opacity: 0.8;
cursor: default;
}
.input-block--gender,
.input-block--password {
position: relative;
}
.input-block--gender.js-active .gender-list {
display: flex;
}
.input-block--gender input {
position: relative;
cursor: pointer;
}
.input-block--gender::before,
.input-block--gender::after {
position: absolute;
content: '';
width: 14px;
height: 2px;
background-color: var(--base-color-gray);
top: 27px;
transition: transform 0.3s ease-in-out;
z-index: 1;
}
.input-block--gender::before {
transform: rotate(45deg);
right: 24px;
}
.input-block--gender::after {
transform: rotate(-45deg);
right: 15px;
}
.input-block--gender.js-active::before {
transform: rotate(-45deg);
right: 24px;
}
.input-block--gender.js-active::after {
transform: rotate(45deg);
right: 15px;
}
.gender-list {
position: absolute;
width: calc(100% - 4px);
left: 2px;
bottom: -68px;
display: none;
flex-direction: column;
gap: 10px;
background-color: var(--base-color-sand-beige);
border-radius: 0 0 3px;
padding: 13px 20px;
}
.gender-list__item {
font: 400 1rem / 1 var(--font-roboto);
color: var(--base-color-gray);
cursor: pointer;
}
.gender-list__item:hover {
color: var(--base-color-light-beige);
}
.gender-list__item.js-selected {
color: var(--base-color-light-beige);
cursor: default;
}
.visible-pass-btn {
display: flex;
position: absolute;
top: 16px;
right: 20px;
width: 24px;
height: 24px;
}
.visible-pass-btn__icon {
width: 24px;
height: 24px;
fill: transparent;
}
.visible-pass-btn__icon--eye {
display: none;
}
.visible-pass-btn.js-active .visible-pass-btn__icon--eye-off {
display: none;
}
.visible-pass-btn.js-active .visible-pass-btn__icon--eye {
display: block;
}
/* #endregion */
/* #endregion */
/* #region ================================= 21. ORDERS ================================= */
.order {
border-bottom: 2px solid var(--base-color-light-gray);
padding: 25px 0;
}
.order:first-child {
padding: 0 0 25px;
}
.order:last-child {
border-bottom: none;
}
.order-heading {
display: flex;
flex-direction: column;
gap: 14px;
}
.order-status {
font: 400 1.125rem/1 var(--font-roboto);
color: var(--base-color-gray);
}
.order-status__value {
font: 500 1.125rem/1 var(--font-roboto);
color: var(--base-color-gray);
margin: 0 0 0 10px;
}
.order-info {
width: max-content;
position: relative;
font: 400 1.25rem/1 var(--font-roboto);
color: var(--base-color-dark);
cursor: pointer;
}
.order-info::before,
.order-info::after {
position: absolute;
content: '';
width: 14px;
height: 2px;
background-color: var(--base-color-gray);
top: 9px;
transition: transform 0.3s ease-in-out;
z-index: 1;
}
.order-info::before {
transform: rotate(45deg);
right: -23px;
}
.order-info::after {
transform: rotate(-45deg);
right: -32px;
}
.order-content {
max-height: 0;
opacity: 0;
margin: 0;
}
.order-heading.js-active .order-info::before {
transform: rotate(-45deg);
}
.order-heading.js-active .order-info::after {
transform: rotate(45deg);
}
.order-heading.js-active + .order-content {
max-height: 100000px;
opacity: 1;
transition: all 0.3s ease-in-out;
margin: 25px 0 0;
}
.order-product-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.order-product-list__product-link {
display: flex;
align-items: flex-start;
gap: 30px;
}
.order-product-list__produc-img {
width: 130px;
height: 130px;
border-radius: 3px;
overflow: hidden;
}
.order-product-list__product-name {
width: 300px;
font: 500 1.25rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
padding: 3px 0 0 0;
}
.order-product-list__product-price {
font: 500 1.25rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
white-space: nowrap;
padding: 3px 0 0;
}
/* #endregion */
/* #region ================================= 21. ARTICLE PAGES ================================= */
.article-heading {
padding: 26px 0;
}
.article-heading__title {
font: 500 4.375rem / 1.1 var(--font-cormorant);
text-transform: uppercase;
color: var(--base-color-dark);
}
.article-content {
padding: 0 0 110px;
}
.article-content__text {
font: 400 1.25rem / 1.4 var(--font-roboto);
margin: 0 0 20px;
}
.article-content__text--bold {
font: 600 2rem / 1.4 var(--font-cormorant);
border-bottom: 1px solid var(--base-color-dark);
}
.article-content-block-list {
margin: 0 0 40px;
}
.article-content-block-list ul,
.article-content-block-list ol {
display: flex;
flex-direction: column;
gap: 10px;
font: 400 1.25rem / 1.4 var(--font-roboto);
}
.article-content-block-list ul li,
.article-content-block-list ol li {
position: relative;
padding: 0 0 0 30px;
}
.article-content-block-list ul li::before,
.article-content-block-list ol li::before {
position: absolute;
content: '';
top: 10px;
left: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--base-color-dark);
}
.article-content__text a {
color: #858176;
border-bottom: 2px solid #858176;
}
/* #endregion */
/* #region ================================= 22. BX-AUTH ================================= */
.bx-auth,
.bx-auth-inner-content {
display: flex;
flex-direction: column;
gap: 20px;
position: relative;
}
.bx-auth-note {
font: 500 1.5rem / 1.4 var(--font-roboto);
text-transform: uppercase;
text-box-trim: trim-both;
text-box-edge: cap alphabetic;
color: var(--base-color-dark);
}
.auth-link {
display: block;
width: 100%;
border: none;
font: 400 1.25rem / 1 var(--font-roboto);
text-align: center;
color: var(--base-color-dark);
background-color: var(--base-color-light-beige);
padding: 20px 0;
margin: -20px 0 0 0;
}
.form-auth,
.form-register {
display: flex;
flex-direction: column;
gap: 10px;
}
.form-forgot-pass {
display: flex;
flex-direction: column;
gap: 20px;
}
.inputs-group--flex {
display: flex;
flex-direction: column;
}
.inputs-group--flex-row {
flex-direction: row;
}
.input-block + small {
display: block;
font: 400 1rem/1 var(--font-roboto);
color: var(--base-color-dark);
margin: 10px 0 0;
}
.checkbox-label {
position: relative;
cursor: pointer;
}
.checkbox-label__checkbox {
display: block;
position: absolute;
top: -2px;
width: 25px;
height: 25px;
border: 2px solid var(--base-color-light-beige);
}
.checkbox-label__text {
display: block;
font: 400 1rem / 1.4 var(--font-roboto);
color: var(--base-color-dark);
padding: 0 0 0 35px;
}
.input-block--checkbox input:checked + .checkbox-label .checkbox-label__checkbox {
background: url(../img/icon-check.svg) center / 15px 11px no-repeat;
}
.input-block input[type="submit"] {
width: 100%;
border: none;
font: 400 1.25rem / 1 var(--font-roboto);
text-align: center;
color: var(--base-color-dark);
background-color: var(--base-color-light-beige);
padding: 20px 0;
}
.input-block input::placeholder {
font: 400 1rem / 1 var(--font-roboto);
color: var(--base-color-light-beige);
}
.context-menu {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.error-block {
position: absolute;
top: 0;
right: 0;
}
.captcha-img-block img {
max-height: 56px;
}
.alert.alert-danger:empty {
display: none;
}
/* #endregion */
.page-banner {
padding: 60px 0;
}
@media(max-width: 1920px) {
/* #region ================================= 1920px ABOUT COMPANY ================================= */
.about-company-content-left-column {
max-width: 688px;
flex: 1;
}
.about-company-content-right-coulmn {
/* max-width: 550px; */
flex: 1;
/* margin: 0 178px 0 auto; */
}
/* #endregion */
/* #region ================================= 1920px REVIEWS ================================= */
.reviews-slider.swiper {
max-width: 1880px;
}
/* #endregion */
/* #region ================================= 1920px CATALOG ================================= */
.catalog-list {
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
}
/* #endregion */
}
@media(max-width: 1700px) {
/* #region ================================= 1700px MAIN SCREEN ================================= */
.main-screen__title {
font: 400 148px/1 var(--font-cormorant);
}
.main-screen-content-info {
margin: 80px 0 0 auto;
}
/* #endregion */
}
@media(max-width: 1440px) {
.wrapper {
padding: 0 60px;
}
/* #region ================================= 1440px HEADER ================================= */
.header-menu {
padding: 52px 60px;
}
/* #endregion */
/* #region ================================= 1440px FOOTER ================================= */
.footer-navigation {
max-width: 460px;
}
.footer-form-subscribe__input {
width: 100%;
}
.footer-bottom-content-list {
flex-wrap: wrap;
justify-content: flex-start;
margin: 0 auto 0 0;
}
.footer-form-subscribe {
flex-direction: column;
}
.footer-form-subscribe__btn {
padding: 21px 52px;
}
/* #endregion */
/* #region ================================= 1440px MAIN SCREEN ================================= */
.main-screen__title {
font: 400 120px/1 var(--font-cormorant);
}
.main-screen-content-info {
max-width: 350px;
}
/* #endregion */
/* #region ================================= 1440px ABOUT COMPANY ================================= *
.about-company-content-right-coulmn {
margin: 0 0 0 auto;
}
/* #endregion */
/* #region ================================= 1440px REVIEWS ================================= */
.reviews-slider.swiper {
margin: 60px -16px 0;
}
.reviews-slider .swiper-wrapper {
padding: 0 16px;
}
.review.swiper-slide {
max-width: 485px;
}
/* #endregion */
/* #region ================================= 1440px DETALED PRODUCT ================================= */
.detailed-product-main-content {
grid-template-columns: 60% 1fr;
gap: 50px;
}
.detailed-product-option {
padding: 0;
}
.detailed-product-option__btn::before,
.detailed-product-option__btn::after {
right: 0;
}
/* #endregion */
/* #region ================================= 1440px Basket ================================= */
/* .basket-content {
flex-direction: column;
} */
.basket-aside-content {
max-width: none;
}
.basket-product {
display: grid;
grid-template-columns: 205px auto;
grid-template-areas:
"img info info"
"img count price";
gap: 20px 30px;
}
.basket-product-image {
grid-area: img;
}
.basket-product-info {
grid-area: info;
}
.basket-product-counter {
grid-area: count;
margin: 0;
}
.basket-product-price {
grid-area: price;
margin: 0 0 0 auto;
}
.basket-product-controls {
flex-direction: column;
gap: 10px;
top: 48px;
bottom: auto;
right: 19px;
}
.basket-product-delete-btn {
width: 25px;
height: 25px;
}
/* #endregion */
/* #region ================================= 1440px Basket ================================= */
.order-placing-form {
flex-direction: column;
}
.order-placing-aside-content {
max-width: none;
}
.confirm-personal-data-label__text {
padding: 3px 0 0 40px;
}
/* #endregion */
/* #region ================================= 1440px PERSONAL ================================= */
.personal-aside {
flex: 1;
}
.personal-content {
flex: 2;
}
.form-group {
max-width: 100%;
}
.form-submit-btn {
max-width: 100%;
}
/* #endregion */
/* #region ================================= 1440px COMPARE ================================= */
.compare-scroll-btn--left {
left: 0;
}
.compare-scroll-btn--right {
right: 0;
}
}
@media(max-width: 1220px) {
.wrapper {
padding: 0 60px;
}
/* #region ================================= 1220px HEADER ================================= */
.header-search {
display: none;
align-items: center;
position: absolute;
z-index: 10;
width: 100%;
max-width: 100%;
left: 0;
top: 0;
padding: 22px 16px;
background: var(--base-color-soft-beige);
}
.header-search.js-active {
display: flex;
}
.header-search-form {
width: calc(100% - 32px);
}
.header-search__close-btn {
display: block;
width: 24px;
height: 24px;
margin: 0 0 0 auto;
}
.header-search__close-icon {
width: 24px;
height: 24px;
}
.header-contacts {
margin: 0 0 0 auto;
}
.search-btn {
display: block;
}
.header-menu {
padding: 52px 30px;
}
.header-brand {
height: auto;
}
/* #endregion */
/* #region ================================= 1220px MAIN SCREEN ================================= */
.main-screen__title {
font: 400 110px/1 var(--font-cormorant);
}
/* #endregion */
/* #region ================================= 1220px POPULAR PRODUCTS ================================= */
.popular-products-content {
display: flex;
flex-direction: column;
gap: 52px 20px;
position: relative;
}
.popular-products-info {
gap: 34px;
}
.popular-products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.popular-products__product {
max-width: 100%;
}
.popular-products__product:nth-child(n) {
grid-area: auto;
}
.popular-products-catalog-link {
position: absolute;
bottom: 50px;
right: 0;
margin: 0;
}
/* #endregion */
}
@media(max-width: 1110px) {
/* #region ================================= 1110px MAIN SCREEN ================================= */
.main-screen__title {
font: 400 100px / 1 var(--font-cormorant);
}
/* #endregion */
}
@media(max-width: 1024px) {
main {
padding: 45px 0 0;
}
.wrapper {
padding: 0 20px;
}
/* #region ================================= 1024px SWIPER CONTROLS ================================= */
#news-slider .swiper-scrollbar,
#reviews-slider .swiper-scrollbar {
display: block;
position: static;
margin: 40px 16px 0;
}
.swiper-controls {
display: none;
}
/* #endregion */
/* #region ================================= 1024px HEADER ================================= */
.header {
padding: 45px 0 0;
}
.header-logo {
width: 50px;
height: 25px;
}
.header-contacts {
gap: 12px;
}
.header-contacts__contact {
font: 400 1.125rem / 1.4 var(--font-roboto);
}
.header-controls {
gap: 17px;
margin: 0 0 0 20px;
}
.burger-btn {
margin: 0 0 0 20px;
}
.header-menu {
padding: 45px 20px;
}
.header-menu-content {
grid-template-columns: 1fr;
grid-template-areas:
"navigation"
"slider"
"brands";
gap: 25px;
}
/* #endregion */
/* #region ================================= 1024px FOOTER ================================= */
.footer-content {
display: grid;
grid-template-columns: 60px 1fr 1fr;
gap: 0 20px;
}
.footer-logo {
grid-area: 1 / 1 / 2 / 2;
}
.footer-navigation {
max-width: 460px;
grid-area: 1 / 2 / 2 / 3;
}
.footer-social {
grid-area: 2 / 3 / 3 / 4;
}
.footer-subscribe {
grid-area: 1 / 3 / 2 / 4;
}
/* #endregion */
/* #region ================================= 1024px MAIN SCREEN ================================= */
.main-page::before {
content: none;
}
.main-screen {
padding: 172px 0 83px;
margin: -143px 0 80px 0;
}
.main-screen__title {
font: 400 64px/1 var(--font-cormorant);
text-align: left;
max-width: 500px;
margin: 0;
}
.main-screen-content-info {
max-width: 380px;
gap: 15px;
margin: 37px 0 0 0;
}
.main-screen-content-info__text {
font: 400 1.125rem / 140% var(--font-roboto);
}
.main-screen-content-img {
position: absolute;
max-width: 330px;
max-width: 330px;
margin: 0;
left: auto;
right: 25px;
top: 166px;
transform: translate(0, 0);
}
/* #endregion */
/* #region ================================= 1024px ABOUT COMPANY ================================= */
.about-company-content {
flex-direction: column;
gap: 50px;
padding: 50px 0 0;
}
.about-company-content-left-column,
.about-company-content-right-coulmn {
max-width: 100%;
gap: 50px;
padding: 0;
}
/* #endregion */
/* #region ================================= 1024px POPULAR PRODUCTS ================================= */
.popular-products-section {
margin: 86px 0 0 0;
}
.popular-products-catalog-link {
right: 10%;
transform: translate(10%, 0);
}
/* #endregion */
/* #region ================================= 1024px MANUFACTURE ================================= */
.manufacture-content {
grid-template-columns: 1fr;
}
/* #endregion */
/* #region ================================= 1024px CATALOG ================================= */
.catalog-list {
grid-template-columns: repeat(auto-fill, minmax(343px, 1fr));
gap: 30px 20px;
}
.catalog-product-card,
.catalog-product-card:hover {
padding: 0;
}
.catalog-list__product:hover .catalog-product-card {
position: relative;
background-color: transparent;
transform: translate(0, 0);
margin: 0;
}
.catalog-product-card-controls {
margin: 0 0 0 auto;
}
.catalog-product-card-hidden-content {
opacity: 1;
visibility: visible;
}
.catalog-seo-content {
flex-direction: column;
}
.catalog-seo-content__img {
width: 50%;
}
/* #endregion */
/* #region ================================= 1024px DETALED PRODUCT ================================= */
.detailed-product-main-content {
display: flex;
flex-direction: column;
gap: 30px;
}
.detailed-product-info {
max-width: 100%;
padding: 0;
}
.detailed-product-tab-content__tab {
width: 100%;
max-width: 100%;
}
/* #endregion */
/* #region ================================= 1024px BASKET ================================= */
.basket:not(.basket--not-empty) .basket-content {
flex-direction: column;
}
/* #endregion */
/* #region ================================= 1024px COMPARE ================================= */
.compare-characteristics {
margin: 20px 0 0;
}
/* #endregion */
/* #region ================================= 1024px PERSONAL ================================= */
.personal-inner-box {
flex-direction: column;
}
.personal-aside {
max-width: 100%;
}
.personal-content {
gap: 0;
}
.personal-heading {
opacity: 0;
visibility: hidden;
height: 0;
width: 0;
padding: 0;
}
/* #endregion */
}
@media(max-width: 767px) {
main {
padding: 32px 0 0;
}
.wrapper {
padding: 0 16px;
}
.section-title {
font: 500 40px/1 var(--font-cormorant);
}
.section-text {
font: 400 16px/140% var(--font-roboto);
}
.star-rating {
margin: 9px 0 0 0;
}
/* #region ================================= 767px SWIPER CONTROLS ================================= */
#header-menu-main-slider .swiper-scrollbar {
display: block;
width: 100%;
}
#reviews-slider .swiper-scrollbar,
#news-slider .swiper-scrollbar {
width: calc(100% - 32px);
margin: 36px auto 0;
}
/* #endregion */
/* #region ================================= 767px HEADER ================================= */
.header {
padding: 32px 0 0;
}
.header-content {
height: 39px;
}
.header-contacts {
display: none;
}
.header-controls {
gap: 20px;
margin: 0 0 0 auto;
}
.header-menu .header-controls {
margin: 0 20px 0 auto;
}
.header-menu .header-controls .search-btn,
.header-controls .compare,
.header-controls .favorite,
.header-controls .login {
display: none;
}
.header-menu .header-controls {
display: flex;
}
.header-menu .header-controls .compare,
.header-menu .header-controls .favorite,
.header-menu .header-controls .login {
display: block;
}
.cart__icon {
width: 26px;
height: 26px;
}
.burger-btn,
.burger-btn__icon {
width: 30px;
height: 21px;
}
.header-menu-navigation {
flex-direction: column;
align-items: center;
gap: 20px;
}
.header-catalog__link {
font: 500 1.25rem/1 var(--font-roboto);
}
.header-sub-catalog__link {
font: 400 1.125rem / 1 var(--font-roboto);
}
#header-menu-main-slider {
position: relative;
padding: 0 0 20px;
}
#header-menu-thumb-slider {
display: none;
}
#header-menu-main-slider .swiper-slide {
min-width: initial;
max-width: 215px;
}
.header-menu-slider-slide__title {
font: 500 1.125rem/1 var(--font-roboto);
margin: 18px 0 0;
}
.header-menu {
gap: 33px;
padding: 32px 16px;
}
.header-menu-heading__close-bnt,
.header-menu-heading__close-icon {
width: 22px;
height: 22px;
}
.header-sub-catalog {
gap: 15px;
padding: 0 0 0 7px;
margin: 14px 0 0 0;
}
.header-menu-navigation__link {
font: 500 1.25rem / 1.4 var(--font-roboto);
}
/* #endregion */
/* #region ================================= 767px FOOTER ================================= */
.footer {
padding: 58px 0 42px 0;
}
.footer-content {
display: flex;
flex-direction: column;
gap: 41px 20px;
}
.footer-navigation {
flex-direction: column;
gap: 34px;
margin: 0;
}
.footer-navigation-column:nth-of-type(3) {
display: none;
}
.footer-social {
margin: 0;
}
.footer-social-list__item {
width: 60px;
height: 60px;
}
.footer-subscribe {
gap: 17px;
margin: 0;
}
.footer-form-subscribe {
gap: 10px;
}
.footer-subscribe__title {
font: 600 1.125rem / 1 var(--font-roboto);
}
.footer-form-subscribe__input::placeholder {
font: 400 1.125rem / 1.4 var(--font-roboto);
}
.footer-form-subscribe__btn {
font: 400 1.125rem / 1.4 var(--font-roboto);
}
.footer-bottom-content-list {
flex-direction: column;
align-items: flex-start;
margin: 0;
}
.footer-bottom-content-list__link {
font: 500 1.125rem / 1 var(--font-roboto);
}
/* #endregion */
/* #region ================================= 767px BREADCRUMS ================================= */
.breadcrumbs-list {
gap: 5px;
}
.breadcrumbs-list__item {
font: 400 1rem / 1.4 var(--font-roboto);
}
.breadcrumbs-list__item::after {
padding: 0 1px;
}
/* #endregion */
/* #region ================================= 767px MAIN SCREEN ================================= */
.main-screen {
padding: 191px 0 73px;
margin: -143px 0 0 0;
}
.main-screen-content {
display: flex;
flex-direction: column-reverse;
}
.main-screen-content-info {
justify-content: space-between;
max-width: 100%;
height: 446px;
margin: 22px 0 0 0;
}
.main-screen-content-info__text {
display: none
}
.main-screen-content-info__mob-text {
display: block;
font: 400 16px / 1 var(--font-roboto);
}
.main-screen-content-img {
position: absolute;
width: 307px;
left: auto;
right: 50%;
top: auto;
bottom: 161px;
transform: translate(50%, 0);
}
/* #endregion */
/* #region ================================= 767px ABOUT COMPANY ================================= */
.about-company-section {
padding: 90px 0 45px;
}
.about-company-section__title {
max-width: 220px;
}
.about-company-content {
gap: 30px;
padding: 40px 0 0;
}
.about-company-content-right-coulmn {
gap: 32px;
}
.about-company-image img {
width: 100%;
aspect-ratio: 343 / 276;
object-fit: cover;
object-position: 50% 0;
}
.about-company-content-right-coulmn .about-company-image img {
aspect-ratio: 343 / 158;
}
/* #endregion */
/* #region ================================= 767px POPULAR PRODUCTS ================================= */
.popular-products-section {
padding: 45px 0 90px;
margin: 0;
}
.popular-products-content {
gap: 32px;
}
.popular-products {
gap: 32px;
}
.popular-products-catalog-link {
margin: 0 auto;
}
/* #endregion */
/* #region ================================= 767px REVIEWS ================================= */
.reviews-section {
padding: 45px 0;
}
.review {
padding: 38px 20px;
}
.reviews-slider.swiper {
margin: 40px -16px 0;
}
#reviews-slider .swiper-slide {
min-width: initial;
max-width: 290px;
}
.review.swiper-slide {
/* max-width: 290px; */
height: auto;
}
.review__user-text {
font: 400 1.125rem / 1.4 var(--font-roboto);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 8;
}
/* #endregion */
/* #region ================================= 767px MIDDLE BANNER ================================= */
.page-banner {
padding: 45px 0;
}
.page-banner-image {
width: 100%;
aspect-ratio: 375 / 269;
}
.page-banner-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 87% 16%;
}
/* #endregion */
/* #region ================================= 767px MANUFACTURE ================================= */
.manufacture-section {
padding: 45px 0;
margin: 0;
}
.manufacture-content {
gap: 35px;
margin: 35px 0 0 0;
}
.manufacture-content-column {
gap: 31px;
}
.manufacture-content-column__text {
font: 400 16px/140% var(--font-roboto);
}
.manufacture-content-column__img {
width: 100%;
aspect-ratio: 343 / 232;
object-fit: cover;
object-position: 50% 0;
}
/* #endregion */
/* #region ================================= 767px NEWS ================================= */
.news-section {
padding: 45px 0;
}
/* #endregion */
/* #region ================================= 767px CATALOG ================================= */
.catalog-heading {
padding: 24px 0 0;
}
.catalog-heading-content {
gap: 15px;
}
.catalog-title {
font: 500 2.50rem / 1.1 var(--font-cormorant);
}
.catalog-title__count-value {
font: 400 1rem / 1.4 var(--font-roboto);
top: -8px;
}
.catalog-selection {
margin: 0 -16px;
}
.catalog-section-list-tile-list {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.selections {
overflow-y: scroll;
flex-wrap: nowrap;
gap: 20px;
padding: 10px 16px 0;
}
.selection {
font: 500 1.125rem / 1.4 var(--font-roboto);
flex-shrink: 0;
}
.selection__count-value {
font: 500 1rem / 1.4 var(--font-roboto);
margin: -10px 0 0;
}
.catalog {
padding: 0 0 120px;
margin: 24px 0 0 0;
}
.catalog-list {
display: flex;
flex-direction: column;
gap: 36px 0;
}
.catalog-product-card:hover {
background-color: transparent;
padding: 0;
transform: translate(0, 0) scale(1);
}
.catalog-product-card__img-link img {
min-height: 343px;
}
.catalog-product-card__title {
font: 500 1.125rem / 1.4 var(--font-roboto);
max-width: 280px;
}
.catalog-product-card-price__cost {
font: 500 1.625rem / 1 var(--font-roboto);
}
.sorting-heading {
background-color: var(--base-color-light-beige);
border-radius: 2px;
padding: 15px 18px;
}
.sorting-heading__title,
.sorting-heading__current-sorting {
display: none;
}
.sorting__icon {
width: 20px;
height: 16px;
stroke: var(--base-color-dark);
fill: var(--base-color-dark);
margin: 0;
}
.sorting-list {
min-width: 200px;
width: max-content;
box-sizing: border-box;
left: auto;
right: 0;
}
/* #endregion */
/* #region ================================= 767px FILTERS ================================= */
.filters-btn {
font: 400 1rem / 1.4 var(--font-roboto);
padding: 13px 40px 10px;
}
.filters {
padding: 60px 20px 40px 20px;
}
/* #endregion */
/* #region ================================= 767px DETAILED PRODUCT ================================= */
.detailed-product {
margin: 36px 0 64px;
}
.detailed-product-main-content {
gap: 44px;
}
.detailed-product-info-heading {
gap: 18px;
}
.detailed-product-content {
gap: 34px;
}
.detailed-product-article {
font: 400 1rem / 1 var(--font-roboto);
}
.detailed-product-info-heading__title {
font: 500 1.625rem / 1.2 var(--font-cormorant);
padding: 0 20px 0 0;
}
.detailed-product-option__btn {
padding: 21px 21px 17px;
}
.detailed-product-select-variation__item {
width: 40px;
height: 40px;
}
.detailed-product-select-variation__item.color.js-active,
.detailed-product-select-variation__item.material.js-active,
.detailed-product-select-variation__item.accessories.js-active {
width: 32px;
height: 32px;
}
.detailed-product-select-variation__item.color.js-active::before {
width: 36px;
height: 36px;
}
.detailed-product-select-variation__item.material.js-active::before,
.detailed-product-select-variation__item.accessories.js-active::before {
width: 36px;
height: 36px;
}
.detailed-product-option.js-active .detailed-product-option__content {
padding: 0 17px 24px;
}
.detailed-product-option__btn::before,
.detailed-product-option__btn::after {
right: 17px;
}
.detailed-product-price {
font: 500 1.625rem / 1 var(--font-roboto);
padding: 35px 0 0;
}
.add-to-cart {
max-width: none;
font: 400 1rem / 1.4 var(--font-roboto);
padding: 20px 0 18px;
margin: 16px 0 0 0;
}
#detailed-product-thumb-gallery {
display: none;
}
.detailed-products-triggers__trigger {
font: 400 1.125rem / 1.4 var(--font-roboto);
padding: 0 0 12px;
}
.detailed-product-description p {
font: 400 1rem / 1.4 var(--font-roboto);
padding: 0;
}
.detailed-product-tab-content__tab {
padding: 14px 0;
}
.detailed-product-section__title {
font: 500 1.625rem / 1 var(--font-cormorant);
}
.detailed-product-section .catalog-list {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
margin: 15px 0 0;
}
/* #endregion */
/* #region ================================= 767px BASKET ================================= */
.basket--not-empty {
margin: -3px 0 0 0;
}
.basket-heading {
padding: 26px 0;
}
.basket-heading__title {
font: 500 2.5rem / 1 var(--font-cormorant);
}
.basket-heading__count-value {
font: 400 1.125rem / 1 var(--font-roboto);
top: -7px;
}
.basket-empty-block__text {
font: 400 1.125rem / 1 var(--font-roboto);
}
.basket-empty-block {
gap: 37px;
padding: 5px 0 0;
}
.basket-empty-block__link {
max-width: 100%;
}
.basket-content {
gap: 22px;
}
.basket-product {
display: grid;
grid-template-columns: 110px auto;
grid-template-areas:
"img info"
"img count"
"img price";
gap: 10px 20px;
padding: 20px 10px 10px 10px;
}
.basket-product-image {
grid-area: img;
width: 110px;
height: 110px;
}
.basket-product-info {
padding: 0 40px 0 0;
}
.basket-product-info__title {
font: 500 1rem / 1.35 var(--font-roboto);
}
.basket-product-counter__value {
font: 500 1rem / 1.4 var(--font-roboto);
max-width: 12px;
}
.basket-product-counter__btn {
width: 36px;
}
.basket-product-info-chars {
display: none;
}
.basket-product-price {
margin: 13px 0 0 auto;
}
.order-details {
gap: 24px;
padding: 40px 10px;
}
.order-details__title {
font: 500 1.25rem / 1 var(--font-roboto);
}
.order-details__link {
font: 400 1.125rem / 1 var(--font-roboto);
padding: 22px 0 21px;
margin: 2px 0 0;
}
.basket-additional-info {
gap: 11px;
padding: 27px 9px;
}
.basket-dropdown-btn {
gap: 22px;
font: 400 1rem / 1 var(--font-roboto);
padding: 0 12px;
}
.basket-dropdown-content p {
font: 400 1rem / 1.2 var(--font-roboto);
padding: 20px 12px 0;
color: #c4c4c4;
}
/* #endregion */
/* #region ================================= 767 Order ================================= */
.order-placing {
padding: 0 0 97px;
}
.order-placing-heading {
padding: 15px 0;
}
.order-placing__back {
font: 400 1.125rem / 1.4 var(--font-roboto);
padding: 0 0 0 26px;
}
.order-placing__back::before,
.order-placing__back::after {
left: -2px;
}
.order-placing-main-content {
gap: 30px;
padding: 40px 10px;
}
.order-placing__title {
font: 500 1.25rem / 1 var(--font-roboto);
}
.order-placing-block {
gap: 20px;
}
.order-placing-block__title {
font: 500 1.125rem / 1 var(--font-roboto);
text-transform: none;
}
.order-placing-block-content {
grid-template-columns: 1fr;
}
.order-placing-block-inputs {
display: flex;
flex-direction: column;
}
.order-details__submit {
padding: 22px 0 19px;
margin: 1px 0 0;
}
.order-details__submit + .confirm-personal-data {
margin: -22px 0 0 0;
}
.order-details__submit + .confirm-personal-data .confirm-personal-data-label__text {
font: 400 0.875rem / 1.4 var(--font-roboto);
padding: 2px 0 0 40px;
}
/* #endregion */
/* #region ================================= 18. FAVORITE ================================= */
.favorite-heading {
padding: 24px 0 10px;
}
.favorite-heading__title {
font: 500 2.5rem / 1.1 var(--font-cormorant);
}
.favorite-products {
padding: 0 0 110px;
}
/* #endregion */
/* #region ================================= 18. ARTICLE PAGES ================================= */
.article-heading {
padding: 26px 0;
}
.article-heading__title {
font: 500 2.50rem / 1.1 var(--font-cormorant);
}
.article-content__text {
font: 400 1rem / 1.4 var(--font-roboto);
margin: 0 0 20px;
}
.article-content__text--bold {
font: 600 1.5rem / 1.2 var(--font-cormorant);
padding: 0 0 10px;
}
.article-content-block-list {
margin: 0 0 40px;
}
.article-content-block-list ul,
.article-content-block-list ol {
font: 400 1rem / 1.4 var(--font-roboto);
}
.article-content-block-list ul li,
.article-content-block-list ol li {
padding: 0 0 0 30px;
}
.article-content__text a {
border-bottom: 1px solid #858176;
}
/* #endregion */
/* #region ================================= 767px COMPARE / MOB COMPARE ================================= */
.compare-products {
padding: 5px 0 90px;
}
.compare-heading {
padding: 24px 0;
}
.compare-heading__title {
font: 500 2.5rem / 1.1 var(--font-cormorant);
}
.compare-products-category {
gap: 20px;
}
.compare-products-category__btn {
font: 400 1.125rem / 1 var(--font-roboto);
padding: 0 0 2px;
}
.compared-products {
display: grid;
grid-template-columns: calc(50% - 5px) calc(50% - 5px);
gap: 10px;
position: relative;
}
.compared-products-container {
width: 100%;
}
.compared-product__img-link {
/* display: block; */
}
.compared-product__img-link img {
border-radius: 3px;
min-width: 167px;
min-height: 167px;
}
.compared-product__title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font: 500 1rem / 1.4 var(--font-roboto);
overflow: hidden;
color: var(--base-color-dark);
margin: 11px 0 0 0;
}
.compared-product-price {
font: 500 1.25rem / 1 var(--font-roboto);
color: var(--base-color-dark);
margin: 11px 0 0 0;
}
.compared-product-footer {
display: flex;
gap: 15px;
margin: 15px 0 0 0;
}
.compared-product-controls {
display: flex;
gap: 15px;
}
.compare-btn {
width: 16px;
height: 20px;
margin: 5px 0 0;
}
.compare-btn__icon {
width: 16px;
height: 20px;
}
.favorite-btn {
width: 22px;
height: 20px;
margin: 7px 0 0;
}
.favorite-btn__icon {
width: 22px;
height: 20px;
}
.compared-product-footer .add-to-cart-btn {
padding: 12px 11px 10px;
}
.char {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 14px;
padding: 20px 0;
height: 90px;
}
.char__label {
display: none;
font: 500 1.125rem / 1 var(--font-roboto);
color: var(--base-color-dark);
}
.char__value {
font: 400 1rem / 1 var(--font-roboto);
color: var(--base-color-dark);
}
.compared-products-slider {
position: relative;
padding: 40px 0 0 0 !important;
}
.compared-products-slider .swiper-pagination {
font: 400 1rem / 1 var(--font-roboto);
color: var(--base-color-dark);
top: 0;
bottom: auto;
}
.compared-products-slider .swiper-scrollbar {
top: 19px !important;
bottom: auto !important;
}
.compared-products-slider .swiper-pagination .swiper-pagination-current {
margin: 0 -4px 0 0;
}
.compared-products-slider .swiper-pagination .swiper-pagination-total {
margin: 0 0 0 -4px;
}
.compare-products .differences-only-btn {
width: 100%;
gap: 30px;
margin: 30px 0;
}
.differences-only-btn__toggler {
width: 52px;
height: 28px;
}
.differences-only-btn__toggler::before {
width: 24px;
height: 24px;
}
.differences-only-btn__label {
font: 400 1.125rem / 1.4 var(--font-roboto);
}
.compared-products-char-labels {
width: 100%;
position: absolute;
left: 0;
z-index: 2;
bottom: 0;
pointer-events: none;
}
.compared-products-char-labels .char {
display: block;
height: 90px;
padding: 20px 0;
border-bottom: 2px solid var(--base-color-light-gray);
}
.compared-products-char-labels .char:last-child {
border-bottom: none;
}
.chart__label{
font: 500 1.125rem / 1 var(--font-roboto);
color: var(--base-color-dark);
}
/* #endregion */
/* #region ================================= 767px PERSONAL ================================= */
.personal {
padding: 40px 0;
}
.personal-aside {
position: relative;
padding: 40px 10px;
}
.personal-aside-heading {
flex-direction: row;
align-items: center;
gap: 20px;
}
.personal-avatar,
.personal-avatar img {
width: 80px;
height: 80px;
}
.personal-name {
font: 500 1.25rem / 1.4 var(--font-roboto);
}
.personal-navigation {
flex-direction: row;
gap: 20px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-gutter: stable;
white-space: nowrap;
padding: 0 0 25px;
}
.personal-navigation::-webkit-scrollbar {
height: 4px;
background-color: var(--base-color-light-gray);
border-radius: 3px;
}
.personal-navigation::-webkit-scrollbar-thumb {
background-color: var(--base-color-gray);
border-radius: 3px;
}
.personal-navigation__link {
flex-shrink: 0;
white-space: nowrap;
}
.mob-logout {
display: block;
width: 30px;
height: 30px;
padding: 3px;
position: absolute;
top: 17px;
right: 7px;
}
.icon-logout {
width: 24px;
height: 24px;
fill: none;
stroke: var(--base-color-dark);
}
.personal-navigation__link:last-of-type {
display: none;
}
.personal-navigation__link.is-active::before {
bottom: -6px;
}
.personal-inner-content {
gap: 40px;
padding: 40px 10px;
}
.inputs-group {
grid-template-columns: 1fr;
gap: 10px;
}
.form-group__title {
font: 500 1.125rem / 1 var(--font-roboto);
padding: 0 0 0 10px;
}
.gender-list {
bottom: -62px;
padding: 10px 18px;
}
.order {
padding: 20px 10px;
}
.order:first-child {
padding: 0 10px 20px;
}
.order-heading {
gap: 8px;
}
.order-heading.js-active + .order-content {
margin: 17px 0 0;
}
.order-status {
font: 400 1rem / 1 var(--font-roboto);
}
.order-status__value {
font: 500 1rem / 1 var(--font-roboto);
}
.order-info {
font: 400 1.125rem / 1 var(--font-roboto);
}
.order-product-list__product-link {
display: grid;
grid-template-columns: 108px 1fr;
grid-template-areas:
"img name"
"img price";
gap: 0 20px;
}
.order-product-list__produc-img {
width: 108px;
height: 108px;
flex-shrink: 0;
grid-area: img;
}
.order-product-list__produc-img img {
min-height: 108px;
}
.order-product-list__product-name {
grid-area: name;
width: auto;
font: 500 1.125rem / 1.4 var(--font-roboto);
padding: 0;
}
.order-product-list__product-price {
font: 500 1.125rem / 1.4 var(--font-roboto);
grid-area: price;
padding: 0;
margin: auto 0 0;
}
/* #endregion */
/* #region ================================= 767 ARTICLE PAGES ================================= */
.article-heading {
padding: 26px 0;
}
.article-heading__title {
font: 500 2.50rem / 1.1 var(--font-cormorant);
}
.article-content__text {
font: 400 1rem / 1.4 var(--font-roboto);
margin: 0 0 20px;
}
.article-content__text--bold {
font: 600 1.5rem / 1.2 var(--font-cormorant);
padding: 0 0 10px;
}
.article-content-block-list {
margin: 0 0 40px;
}
.article-content-block-list ul,
.article-content-block-list ol {
font: 400 1rem / 1.4 var(--font-roboto);
}
.article-content-block-list ul li,
.article-content-block-list ol li {
padding: 0 0 0 30px;
}
.article-content__text a {
border-bottom: 1px solid #858176;
}
/* #endregion */
}