/* /* /* 1. Normalize або Reset  */
html {
   line-height: 1.15;
   /* 1 */
   -webkit-text-size-adjust: 100%;
   /* 2 */
}

/* Sections
    ========================================================================== */

/**
  * Remove the margin in all browsers.
  */

body {
   margin: 0;
}

/**
  * Render the `main` element consistently in IE.
  */

main {
   display: block;
}

/**
  * Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Firefox, and Safari.
  */

h1 {
   font-size: 2em;
   margin: 0.67em 0;
}

/* Grouping content
    ========================================================================== */

/**
  * 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE.
  */

hr {
   box-sizing: content-box;
   /* 1 */
   height: 0;
   /* 1 */
   overflow: visible;
   /* 2 */
}

/**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */

pre {
   font-family: monospace, monospace;
   /* 1 */
   font-size: 1em;
   /* 2 */
}

/* Text-level semantics
    ========================================================================== */

/**
  * Remove the gray background on active links in IE 10.
  */

a {
   background-color: transparent;
}

/**
  * 1. Remove the bottom border in Chrome 57-
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */

abbr[title] {
   border-bottom: none;
   /* 1 */
   text-decoration: underline;
   /* 2 */
   text-decoration: underline dotted;
   /* 2 */
}

/**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */

b,
strong {
   font-weight: bolder;
}

/**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */

code,
kbd,
samp {
   font-family: monospace, monospace;
   /* 1 */
   font-size: 1em;
   /* 2 */
}

/**
  * Add the correct font size in all browsers.
  */

small {
   font-size: 80%;
}

/**
  * Prevent `sub` and `sup` elements from affecting the line height in
  * all browsers.
  */

sub,
sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
}

sub {
   bottom: -0.25em;
}

sup {
   top: -0.5em;
}

/* Embedded content
    ========================================================================== */

/**
  * Remove the border on images inside links in IE 10.
  */

img {
   border-style: none;
}

/* Forms
    ========================================================================== */

/**
  * 1. Change the font styles in all browsers.
  * 2. Remove the margin in Firefox and Safari.
  */

button,
input,
optgroup,
select,
textarea {
   font-family: inherit;
   /* 1 */
   font-size: 100%;
   /* 1 */
   line-height: 1.15;
   /* 1 */
   margin: 0;
   /* 2 */
      cursor: pointer;
}

/**
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
  */

button,
input {
   /* 1 */
   overflow: visible;
}

/**
  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  * 1. Remove the inheritance of text transform in Firefox.
  */

button,
select {
   /* 1 */
   text-transform: none;
}




/**
  * Remove the inner border and padding in Firefox.
  */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
   border-style: none;
   padding: 0;
}

/**
  * Restore the focus styles unset by the previous rule.
  */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
   outline: 1px dotted ButtonText;
}

/**
  * Correct the padding in Firefox.
  */

fieldset {
   padding: 0.35em 0.75em 0.625em;
   border: none;
}

/**
  * 1. Correct the text wrapping in Edge and IE.
  * 2. Correct the color inheritance from `fieldset` elements in IE.
  * 3. Remove the padding so developers are not caught out when they zero out
  *    `fieldset` elements in all browsers.
  */

legend {
   box-sizing: border-box;
   /* 1 */
   color: inherit;
   /* 2 */
   display: table;
   /* 1 */
   max-width: 100%;
   /* 1 */
   padding: 0;
   /* 3 */
   white-space: normal;
   /* 1 */
}

/**
  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */

progress {
   vertical-align: baseline;
}

/**
  * Remove the default vertical scrollbar in IE 10+.
  */


textarea {
   overflow: auto;
}

/**
  * 1. Add the correct box sizing in IE 10.
  * 2. Remove the padding in IE 10.
  */

[type="checkbox"],
[type="radio"] {
   box-sizing: border-box;
   /* 1 */
   padding: 0;
   /* 2 */
}

/**
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
   height: auto;
}

/**
  * 1. Correct the odd appearance in Chrome and Safari.
  * 2. Correct the outline style in Safari.
  */

[type="search"] {

   /* 1 */
   outline-offset: -2px;
   /* 2 */
}

/**
  * Remove the inner padding in Chrome and Safari on macOS.
  */

[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
}

/**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */

::-webkit-file-upload-button {
   -webkit-appearance: button;
   /* 1 */
   font: inherit;
   /* 2 */
}

/* Interactive
    ========================================================================== */

/*
  * Add the correct display in Edge, IE 10+, and Firefox.
  */

details {
   display: block;
}

/*
  * Add the correct display in all browsers.
  */

summary {
   display: list-item;
}

/* Misc
    ========================================================================== */

/**
  * Add the correct display in IE 10+.
  */

template {
   display: none;
}

/**
  * Add the correct display in IE 10.
  */

[hidden] {
   display: none;
}

/*  */



:root {
   --main-bg-color: #fff;
   --second-bg-color: #1a1a1a;
   --text-color: #333;
   --light-grey: #ccc;
   --hover: #e6e6e6;
   --main-font: "Inter", sans-serif;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   font-size: 16px;
}

button,
input {
   outline: none;
   border: none;
   cursor: pointer;
   font-family: inherit;
   color: inherit;
   background: none;
   font-weight: inherit;
}

a {
   text-decoration: none;
   color: inherit;
}

ul,
li {
   list-style: none;
}

h2,
figcaption {
   font-weight: inherit;
   font-size: 1.25rem;
   letter-spacing: 0.3em;
}


body {
   position: relative;
      padding-top: 62px;
   color: var(--text-color);
   font-family: "Inter";
   font-size: 16px;
   background-color: var(--main-bg-color);
   font-family: var(--main-font);
      letter-spacing: 1.4px;
}

[data-fls-scrolllock] body {
   overflow: hidden;
   touch-action: none;
   overscroll-behavior: none;
}

.wrapper {
   min-height: 100%;
   display: flex;
   flex-direction: column;
   overflow: clip;
   padding-top: 53px;
}

.wrapper>main {
   flex: 1 1 auto;
}

.container_content-home-page{
   display: flex;
      margin-bottom: 64px;
}

.wrapper>* {
   min-width: 0;
}

[class*=__container] {
   max-width: 1150px;
   margin: 0 auto;
   padding-left: 15px;
   padding-right: 15px;
}

/* -------------------------------------------------------------------- */
/* HEADER */
.header {
   display: flex;
   flex-direction: column;
   gap: 33px;
   position: fixed;
      width: 100%;
         background: var(--main-bg-color);
            z-index: 10000;
            top: 0;
   padding: 24px 0px 6px;
      margin-top: 33px;
}

.header-right{
   display: flex;
      gap: 10px;
}

#openModal{
   font-size: 28px;
}



/* === Mob 767px === */
@media (max-width: 767px) {
   .header {
      padding-top: 58px;
   }
}

.main_nav_list-descktop{
      display: flex;
         gap: 60px;
            flex-wrap: wrap;
}



.header-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-inline: 64px;
}


/* menu burger */
.menu_container {
   opacity: 0;
   pointer-events: none;
   transform: translateY(-100%);
   transition: all 0.3s ease;
   position: fixed;
   top: 0;
   left: 0;
   background-color: var(--text-color);
   color: var(--main-bg-color);
   box-shadow: 0 24px 24px 0 rgba(68, 92, 117, 0.25);
   z-index: 1000;
   font-size: 1.25em;
   padding: 40px 188px 0px 85px;
   height: 50%;
}


.menu_container.open {
   opacity: 1;
   pointer-events: auto;
   transform: translateX(0);
      display: flex;
         flex-direction: column;
         align-items: center;
}

.close_menu {
   margin-bottom: 20px;
   align-self: flex-end;
}



 .btn_menu{
   display: none;
         font-size: 42px;
 }

.main_nav_item {
   white-space: nowrap;
}

.main_nav_list {
   font-weight: 400;
   font-size: 20px;
   letter-spacing: 0.3em;
}

.main_nav_list a {
   line-height: 300%;
}


@media (max-width: 768px) {
   .menu_container {
      padding: 41px 32px;
      width: 100%;
      overflow-y: auto;

   }

   .main_nav_list {
      font-size: 1.25rem;
   }

   .btn_menu{
display: block;
   }


}


/* //////////// */
.header_logo {
   text-align: center;
      font-weight: 700;
      font-size: 44px;
}

.header_logo p {
   font-size: 1.25rem;
   letter-spacing: 0.33em;
   margin-top: 24px;
}

@media (max-width: 768px) {
   .header_logo a {
      flex-direction: column;
      gap: 11px;
   }


}



/* FOOTER */
.footer {
   max-width: 1236px;
   padding: 85px 1rem 160px;
   margin: 0 auto;
   position: relative;
}


@media (max-width:768px) {
   .box {
      display: flex;
      flex-direction: column;
      gap: 22px;
      align-items: center;
   }

   .form-row .name {
      flex-direction: column;
      gap: 20px;
   }

   .message {
      flex-direction: column;
      gap: clamp(32px, 4vw, 64px);
   }

   .form-row {
      flex-direction: column;
   }

   .form-group {
      flex-direction: column;
      align-items: flex-start;
   }


  .wrapper>main{
      padding-inline: 15px;
      padding-top: 24px;
   }
}

@media (max-width:878px){
.main_nav-descktop {
      display: none;
   }
}


@media (min-width:769px) and (max-width:1119px) {
   .form-group {
      flex-direction: column;
      align-items: center;
   }

   .form-row .name {
      gap: 20px;
   }

   .message {
      flex-direction: column;
      gap: 20px;
   }

}

.button:hover{
 color: var(--text-color);
   background-color: var(--hover);
}




/* .................PRODUCT CARD .................................. */
.product-card{
   margin-bottom: 4px;
      background: #fff;
      padding-top: 16px;
      padding-bottom: 16px;
      padding-inline: 32px;

}

#product-list > .product-card {
padding-inline: 0px;
}

.product-card.amound{
   display: flex;
   flex-wrap: wrap;
}

#product-list{
                  padding: 29px 20px 0px 60px;
               max-width: 1120px;
                  width: 100%;
                     column-gap: 16px;
                     row-gap: 8px;
                     grid-template-columns: repeat(4, minmax(0, 1fr));
                     display: grid;
}

@media (max-width:982px) {
   #product-list{
         grid-template-columns: repeat(3, minmax(0, 1fr));
   }
}

.product-cart-info{
      display: flex;
         flex-direction: column;
         gap: 7px;
         flex: 1;
}

.product-card_info{
font-size: 14px;
}

.product-card_info h3{
  font-weight: 500;
}

.card-view-container {
   position: relative;
  aspect-ratio: auto 280 / 373;
   overflow: hidden;
}

.product-card_image-defoult,
.product-card_image-hover {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: opacity 0.3s ease;
}

.product-card_image-defoult {
   opacity: 1;
   z-index: 1;
}

.product-card_image-hover {
   opacity: 0;
   z-index: 2;
}

.card-view-container:hover .product-card_image-hover {
   opacity: 1;
}

.card-view-container:hover .product-card_image-defoult {
   opacity: 0;
}


.product-option{
   display: flex;
   justify-content: space-between;
      align-items: flex-start;
}

.btn-add-fav{

}

/* //// */

.remove-btn{
      align-self: flex-end;
         display: flex;
         align-items: center;
         font-size: 18px;
         background: #f6f6f6;
            padding: 10px;
}


.product-cart-info h3{
      font-size: 1.6rem;
         line-height: 2.2rem;
         letter-spacing: 0;
         font-weight: 500;
}

.product-cart-info p{
   color: #7a7878;
      font-size: 14px;
}

#category-select{
   text-align: center;
      padding: 10px 12px;
         border-radius: 10px;
         font-size: 18px;
         border: 1px solid var(--text-color);
outline: none;
}

.details-btn{
padding: 12px 12px;
   font-family: var(--font-family);
   letter-spacing: 0.33em;
   color: var(--main-bg-color);
   background: var(--text-color);
   border-radius: 100%;
   align-self: flex-end;
}
  
.details-btn:hover,
.remove-btn:hover{
background-color: var(--hover) ;
color: var(--text-color);
}

@media (max-width:793px) {
   #product-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: 0;
   }

   .product-card_image {
      max-height: 206px;
   }
}
/* ......... FOR PRODUCT HTML............. */

.single-product_main{
      padding: 20px 92px;
     
      margin: 0 auto;
}

.single-product-container {
   display: flex;
      justify-content: center;
      gap: 68px;
}

.single-product-container img{
      flex: 1 0 300px;
         max-width: 600px;

}

.single-product_info{
   flex: 1;
}

.single-product-header h1{
      margin-bottom: 3px;
         font-size: 37px;
         line-height: 4.2rem;
}

.single-product-header p{
      font-size: 17px;
      line-height: 2.2rem;
}
   
.btn-add-to-cart,
.checkout-btn,
.modal-btn{
      color: var(--main-bg-color);
      width: 100%;
         font-size: 17px;
         border-radius: 10px;
         padding: 19px 0px;
            margin: 49px 0px;
   background-color: #cea600;
}

.btn-add-to-cart:hover,
.checkout-btn:hover{
background-color: #d5b01b;
}

.single-product_price{
      margin: 20px 0px;
         font-size: 36px;
}

.single-product_price span{
      font-size: 16px;
         margin-left: -9px;
}

.single-product-container ul>li{
      margin-bottom: 10px;
}

/* footer single product */
.footer_single-product{
   margin-top: 100px;
   color: var(--light-grey);
         padding-top: 64px;
            padding-bottom: 64px;
background-color: var(--text-color);
}


.single-product-footer{
      background: #eeebef;
         padding: 20px;
         border-radius: 8px;
}

/* підписатись на розсилку */
.sub-news-container {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.sub-news-container h4 {
   font-size: 20px;
   line-height: 2.8rem;
   font-weight: 700;
   letter-spacing: 0;
}

.btn-sub-news{
   background-color: var(--light-grey);
   color: var(--text-color);
   padding: 13px 18px;
      border-radius: 10px;
         margin-top: 31px;
}
.btn-sub-news:hover{
   background-color: var(--hover);
}

.social-links-footer{
      padding: 20px;
}

@media (max-width:920px) {
.single-product-container{
   flex-direction: column;
}
}


/* КОШИК  */
#cart-count{
background: var(--text-color);
   color: var(--light-grey);
   padding: 4px 8px;
   font-size: 14px;
   border-radius: 12px;
      margin-left: -12px;
}
    
.basket-container{
font-size: 28px;
   display: flex;
   align-items: center;
   font-size: 33px;
}

/* Сторінка Cart */

#page-cart{
      background: #eeebef;
}

.cart-wrapper{
padding-left: 16px;
   padding-right: 16px;
   padding-top: 32px;
   padding-bottom: 32px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   gap: 16px;
   max-width: 1278px;
   width: 100%;
}

@media (max-width:768px) {
   .cart-wrapper {
            grid-template-columns: 1fr;
          
         }
}

/* ЗВЕРНИ УВАГУ */

#cart-container{
   grid-column: span 7;
}

.cart-summary{
   grid-column: span 5;
      background: #fff;
      position: sticky;
      top: 16px;
      z-index: 1;
      border-radius: 8px;
         padding: 20px;
            height: fit-content;
}

.cart-summary h2,
#total{
      width: 100%;
         padding-top: 8px;
         padding-bottom: 12px;
   font-weight: 600;
      letter-spacing: 0;
         border-bottom: 1px solid #6464644f;
}

#total{
   font-weight: 500;
}

/* БІГУЩА СТРОКА */
.marquee {
   z-index: 1000;
      position: fixed;
      top: 0;
         bottom: auto;
         background: #191919;
         color: white;
         font-size: 14px;
left: 0;
   right: 0;
      overflow: hidden;
      box-sizing: border-box;
      padding: 9px 0;
   
         white-space: nowrap;
      font-weight: bold;
}


.marquee-content {
   display: inline-block;
   padding-left: 100%;

   animation: scroll-left 15s linear infinite;
   will-change: transform;
}

.marquee:hover .marquee-content {
   animation-play-state: paused;

}

@keyframes scroll-left {
   0% {
      transform: translateX(0%);
   }

   100% {
      transform: translateX(-100%);
   }
}


/* FILTER BUTTONS */

#category-buttons{

      display: flex;
         flex-direction: column;
            align-items: flex-start;
            width: 25%;
            padding-left: 47px;

}

.filter-btn {
      text-align: left;
   min-height: 48px;
   width: 100%;
      font-size: 1.2rem;
         font-weight: 400;
         padding-left: 12px;
}



.filter-btn:hover {
   background: #d2d2d273;
}



/* OPEN MODAL HEART */



@media (max-width:768px) {
   .container_content-home-page {
         display: flex;
         flex-direction: column;
      }

            #category-buttons{
               width: 100%;
               flex-direction: row;
               padding-left: 0;
            }

      .product-card {
            padding-inline: 25px;
      }

.header-top{
      padding-inline: 24px;
}

.header_logo{
   font-size: 20px;
}

.basket-container{
      font-size: 28px;
}

#openModal {
   font-size: 27px;
}
}






/* BANNER VIDEO */
.banner {
   position: relative;
   width: 100%;
   height: 66vh;
   margin-bottom: 24px;
   overflow: hidden;
      padding: 40px 60px;
}

.banner-text{
   position: absolute;
      top: 52%;
      width: 33.3%;
      padding: 12px 0px 12px 3.5em;
      background-color: #000;
      color: #fff;
}

       /* відео адаптив */
@media (max-width: 768px) {
   .banner{
      padding: 0;
   }

}



@media (max-width: 800px) {
.banner-text {
    display: none;
   }

}



/* modal */
#modal-overlay,
#cart {
   display: none;
}

#modal-overlay{
      width: 100%;
         height: 100vh;
         position: absolute;
         z-index: 10000;
         top: 0;
         background: #00000075;

}

.popup.__cart{
            max-width: 60%;
               margin: 0 auto;
}

.popup-block{
      background: var(--main-bg-color);
         margin: 0 auto;
         display: flex;
         flex-direction: column;
         padding: 39px;
}

.popup-close{
   align-self: flex-end;
}

.popup-title{
   font-size: 31px;
      align-self: center;
      margin-bottom: 50px;
      font-weight: 700;
}

.popup-form{
      margin: 0 auto;
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 55px;
}

.data-form{
   margin-bottom: 24px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 15px;
}

.data-form input{
border: 1px solid #8c8c8c;
   border-radius: 6px;
   padding: 8px;
   flex: 2;
}

.data-form-container{
   width: 64vh;
}

.data-form label{
      flex: 1;
}


@media (max-width:768px) {
   .popup.__cart {
         max-width: 96%;
      }
}

@media (max-width:920px){
.data-form-container {
      width: auto;
   }
}





.banner-slider {
      width: 100%;
         height: 100%;
   position: relative;
   overflow: hidden;
}

.slides {
   display: flex;
   transition: transform 0.5s ease;
         height: 100%;
         object-fit: contain;
         object-position: center top;
}

.slides img {
   width: 100%;
   height: auto;
   flex-shrink: 0;
   object-fit: cover;
      object-position: center;
}

.container_toggle-banner{
      display: flex;
         position: absolute;
         top: 37px;
         right: 3%;
}

.prev,
.next {
   padding: 4px 15px;
      font-size: 25px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.5);
      border: 1px solid #b9b4b452;
}


.prev:hover ,
.next:hover{
      background: rgba(255, 255, 255, 0.697);
}


.old-price {
   text-decoration: line-through;
   color: gray;
   margin-right: 5px;
}

.sale-price {
   color: red;
   font-weight: bold;
}


/* відгуки */
#reviews {
   padding: 2rem;
   background: #f9f9f9;
}

#reviews h2 {
   text-align: center;
   margin-bottom: 1rem;
}

.review-card {
   border: 1px solid #ddd;
   padding: 1rem;
   margin: 0.5rem auto;
   max-width: 400px;
   border-radius: 8px;
   background: #fff;
}

.review-card p {
   margin: 0 0 0.5rem 0;
   font-style: italic;
}

.review-card span {
   font-weight: bold;
   font-size: 0.9rem;
}



/* питання */
#faq {
   padding: 2rem;
}

#faq h2 {
   text-align: center;
   margin-bottom: 1rem;
}

.faq-item {
   margin-bottom: 1rem;
}

.faq-item h3 {
   margin: 0;
   cursor: pointer;
}

.faq-item p {
   margin: 0.3rem 0 0 0;
}


#faq p {
   display: none;
}