header.top-navigation {
   margin-bottom: 0;
}

/* ==========================================================================
   Section
   ========================================================================== */

main>section {
   padding: 4rem 0 2rem 0;
}

section .container {
   max-width: calc(1400px - 5%);
}

section .container>* {
   margin-bottom: 2rem;
}

.section-header {
   text-align: center;
   margin-bottom: 4rem !important;
}

.section-header > span:not(.icon), .hero-cta span {
   --pico-color: var(--pico-primary);
   font-size: 0.95rem;
   font-weight: 600;
   letter-spacing: normal;
   color: var(--pico-color);
   margin-bottom: 1rem;
}

.section-header h2 {
   --pico-font-size: 2.4rem;
}

.section-body {
   max-width: 1280px;
   margin: 0 auto 2rem auto;
   padding: 0 2rem;
}

.section-footer {
   text-align: center;
}

.section-footer a {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
   font-weight: 500;
   text-decoration: none;
   --pico-color: var(--static-dark-color);
   background-color: transparent;
}

.section-footer a:hover, .section-footer a:active, .section-footer a:focus {
   --pico-color: var(--pico-primary);
}

.section-footer a .svg-icon {
   width: 1.2rem;
   transition: color var(--pico-transition);
}

/* Section: Tablet Styles
   ========================================================================== */

@media(max-width: 980px) {}

/* Section: Mobile Styles
   ========================================================================== */

@media(max-width: 768px) {
   main>section {
      padding: 2rem 0 1rem 0;
   }

   .section-header {
      margin-bottom: 3rem !important;
   }

   .section-body {
      padding: 0;
   }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.section-hero {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 0;
   padding: 3rem 5%;
   background-size: cover;
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23fd704e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-icon lucide-circle"><circle cx="12" cy="12" r="10"/></svg>');
   background-position: 30rem -2rem;
}

.section-hero .section-header, .section-hero .section-header h1 {
   margin: 0 !important;
}

.section-hero .container {
   display: flex;
   align-items: stretch;
}

/* Hero Header */

.section-hero .section-header {
   text-align: left;
   width: 40%;
   display: flex;
   flex-direction: column;
}

.section-hero .section-header h1 {
   font-weight: 300;
   margin-bottom: 1.5rem !important;
}

.section-hero .section-header h1 b {
   font-weight: 600;
}

.section-hero .section-header p {
   font-size: 1.1rem;
   margin-bottom: 1.5rem;
}

.hero-cta {
   display: flex;
   flex-direction: column;
   margin-top: auto;
   margin-bottom: 1rem;
}

.hero-cta span {
   font-size: 0.85rem !important;
   line-height: 1;
}

.hero-cta a {
   --pico-background-color: var(--static-dark-color);
   --pico-color: var(--static-light-color);
   --pico-border-color: var(--static-dark-color);
   background: linear-gradient(var(--primary-gradient-light), var(--main-gradient-color));
   box-shadow: 0 0 0 var(--pico-outline-width) transparent;
   transition: color var(--pico-transition), border var(--pico-transition), box-shadow var(--pico-transition);
   width: max-content;
   display: flex !important;
   gap: 0.5rem;
   align-items: center;
   justify-content: center;
   line-height: 1;
   padding: 1rem 2rem;
}

.hero-cta a:hover, .hero-cta a:active, .hero-cta a:focus {
   --pico-border-color: #d3d3d3;
   --pico-color: #d3d3d3;
   box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
}

/* Featured Products */

.section-hero .section-body {
   width: 60%;
   margin: 0;
}

ul.featured-products {
   display: flex;
   gap: 1rem;
   padding: 0;
   margin: 0;
   flex-wrap: wrap;
   align-items: stretch;
   justify-content: space-between;
}

ul.featured-products li {
   list-style: none;
   margin: 0;
   width: calc(50% - 0.5rem);
   display: flex;
}

ul.featured-products li a {
   width: 100%;
   text-decoration: none;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 0.5rem;
   text-align: center;
   background-color: #f5f5f5;
   border-radius: var(--pico-border-radius);
   transition: opacity var(--pico-transition);
}

ul.featured-products li a:hover, ul.featured-products li a:active, ul.featured-products li a:focus {
   --pico-color: var(--pico-primary);
   opacity: 0.75;
}

ul.featured-products li a img {
   height: 128px;
   width: auto;
   margin-bottom: 0.75rem;
   transition: transform var(--pico-transition);
}

ul.featured-products li a:hover img, ul.featured-products li a:active img, ul.featured-products li a:focus img {
   transform: scale(1.05);
}

ul.featured-products li a h2 {
   font-size: 1rem;
   /* margin-bottom: 0; */
}

ul.featured-products li a p {
   margin-bottom: 0;
   font-size: 0.95rem;
   margin-top: 0.5rem;
}

/* Hero: Tablet Styles
   ========================================================================== */

@media(max-width: 980px) {}

/* Hero: Mobile Styles
   ========================================================================== */

@media(max-width: 768px) {

   .section-hero {
      padding: 2rem 1rem;
      margin: 0;
      background-position: 30vw 25vh;
   }

   .section-hero .container {
      flex-direction: column;
      padding: 0;
      gap: 1.5rem;
   }

   .section-hero .section-header {
      width: 100%;
      text-align: center;
   }

   .section-hero .section-header h1 {
      --pico-font-size: 2.5rem;
      margin-bottom: 1rem !important;
   }

   .section-hero .section-header p {
      margin-bottom: 2rem;
   }

   .hero-cta {
      align-items: center;
   }

   .section-hero .section-body {
      width: 100%;
   }
}

/* ==========================================================================
   Section - Brands
   ========================================================================== */

.section-brands {
   background-color: var(--pico-form-element-background-color);
   border: 1px solid var(--pico-form-element-border-color);
   border-right: none;
   border-left: none;
}

.brands-list {
   padding: 0;
   margin: 0;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   align-items: stretch;
   gap: 1.5rem;
}

.brands-list li {
   list-style: none;
   margin: 0;
   width: calc(25% - 1.125rem);
}

.brands-list li a {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 3rem 2rem;
   max-height: 8rem;
   height: 100%;
   border: 1px solid var(--pico-form-element-border-color);
   border-radius: var(--pico-border-radius);
   transition: opacity var(--pico-transition);
}

.brands-list li a:hover, .brands-list li a:active, .brands-list li a:focus {
   opacity: .75;
}

.brands-list li a:hover img, .brands-list li a:focus img, .brands-list li a:active img {
   transform: scale(1.05);
}

.brands-list li a img {
   height: 2rem;
   width: auto;
   transition: transform var(--pico-transition);
}

.blvk img {
   height: 4rem !important;
}

.geek-bar img {
   height: 1.5rem !important;
}

.suorin img {
   height: 3rem !important;
}

.vuse img {
   height: 2.5rem !important;
}

/* Section - Brands: Tablet Styles
   ========================================================================== */

@media(max-width: 980px) {}

/* Section - Brands: Mobile Styles
   ========================================================================== */

@media(max-width: 768px) {
   .brands-list {
      overflow-x: scroll;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 1.5rem;
      flex-wrap: nowrap;
      justify-content: flex-start;
      gap: 0.75rem;
   }

   .brands-list li {
      width: calc(27% - 0.75rem);
      min-width: calc(27% - 0.75rem);
   }

   .brands-list li a {
      padding: 1rem;
   }

   .brands-list li a img {
      height: auto !important;
   }
}

/* ==========================================================================
   Section - Collection
   ========================================================================== */

main>.section-collection:nth-child(even) {
   background-color: var(--pico-form-element-background-color);
   border: 1px solid var(--pico-form-element-border-color);
   border-right: none;
   border-left: none;
}

.section-collection .section-header {
   text-align: left;
   max-width: 1280px;
   margin: 0 auto 2rem auto !important;
   padding: 0 2rem;
}

/* Section - Collection: Tablet Styles
   ========================================================================== */

@media(max-width: 980px) {}

/* Section - Collection: Mobile Styles
   ========================================================================== */

@media(max-width: 768px) {
   .section-collection .section-header, .section-collection .section-body {
      padding: 0;
   }
}

/* ==========================================================================
   Products List
   ========================================================================== */

.product-list-header {
   display: flex;
   justify-content: space-between;
}

.product-list-header h2 {
   margin-bottom: 0;
}

.product-list-nav {
   display: flex;
   gap: 0.6rem;
}

.product-list-nav button {
   width: 2.25rem;
   height: 2.25rem;
   padding: 0;
   border: none;
   display: flex;
   justify-content: center;
   align-items: center;
   --pico-background-color: #f5f5f5;
}

.product-list-nav .svg-icon {
   width: 1.5rem !important;
}

.product-list-wrapper h2 {
   margin-bottom: 2rem;
}

ul.product-list {
   display: flex;
   gap: 0.8rem;
   margin: 0;
   padding: 0;
   overflow-x: scroll;
   -webkit-overflow-scrolling: touch;
   letter-spacing: normal;
}

ul.product-list li {
   list-style: none;
   margin-bottom: 1rem;
   position: relative;
   width: 22.5%;
   min-width: 22.5%;
}

.product {
   display: flex;
   flex-direction: column;
   text-decoration: none;
   --pico-background-color: transparent;
   transition: opacity var(--pico-transition);
}

.product:hover, .product:active, .product:focus {
   opacity: .75;
}

.product img {
   border-radius: 0.25rem;
   margin-bottom: 0.8rem;
   aspect-ratio: 1 / 1;
}

.product h3 {
   color: var(--static-dark-color);
   margin-bottom: 0.1rem;
   font-size: 1.15rem;
   font-weight: 500;
}

.product>span {
   color: #707072;
   font-size: 0.95rem;
   margin-bottom: 0.5rem;
}

.product p {
   color: var(--static-dark-color);
   display: flex;
   flex-direction: row-reverse;
   flex-wrap: wrap;
   font-size: 1.05rem;
   font-weight: 500;
   justify-content: flex-end;
}

.product p ins {
   color: var(--static-dark-color);
   width: 100%;
}

.product p del {
   color: #707072;
   font-weight: 400;
   width: 100%;
}

/* Products List: Tablet Styles
   ========================================================================== */

@media(max-width: 980px) {
   ul.product-list li {
      width: 40%;
      min-width: 40%;
   }
}

/* Products List: Mobile Styles
   ========================================================================== */

@media(max-width: 768px) {
   ul.product-list li {
      width: 80%;
      min-width: 80%;
   }
}

/* ==========================================================================
   Section - FAQ
   ========================================================================== */

main>.section-collection:nth-child(even) {
   margin-bottom: 0;
}

.section-faq {
   margin-top: 0;
   margin-bottom: 0;
   padding: 0 !important;
   background-color: var(--pico-form-element-background-color);
}

.section-faq .section-body {
   display: grid;
   grid-template-areas: "content sidebar";
   grid-template-columns: 1fr 1fr;
   padding: 0 2rem;
   margin-bottom: 0;
}

.section-faq .section-body>* {
   padding: 4rem 0;
}

.faq-header {
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   gap: 2rem;
   border-right: 1px solid var(--pico-form-element-border-color);
   padding-right: 3rem !important;
}

.faq-header .subheading {
   margin-bottom: 0.5rem;
   --pico-color: var(--pico-primary);
   font-size: 0.95rem;
   font-weight: 600;
   letter-spacing: normal;
}

.faq-header h2 {
   margin: 0 0 1.5rem 0;
}

.faq-header h3 {
   --pico-font-size: 1.3rem;
}

.faq-body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding-left: 3rem !important;
}

.faq-body details {
   padding-bottom: var(--pico-spacing);
   border-bottom: 1px solid var(--pico-form-element-border-color);
}

.faq-body details:last-child {
   margin-bottom: 0;
   border-bottom: none;
}

.faq-body details summary {
   font-size: 1.05rem !important;
}

/* Section - FAQ: Tablet Styles
   ========================================================================== */

@media(max-width: 980px) {}

/* Section - FAQ: Mobile Styles
   ========================================================================== */

@media(max-width: 768px) {
   .section-faq .section-body {
      display: flex;
      flex-direction: column;
      padding: 0;
   }

   .section-faq .section-body>* {
      padding: 2rem 0 !important;
      border: none;
   }
}

/* Last Section no gap with footer */

footer, main {
   padding-block: initial !important;
}

/* ==========================================================================
   Container
   ========================================================================== */


/* Container: Tablet Styles
   ========================================================================== */

@media(max-width: 980px) {}

/* Container: Mobile Styles
   ========================================================================== */

@media(max-width: 768px) {}