body{
    margin: 0;
    font-family: Poppins;
  }
  .container{
    width: 900px;
    margin: auto;
    max-width: 90vw;
    text-align: center;
    padding-top: 10px;
    transition: transform .5s;
  }
  svg{
    width: 30px;
  }
  header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
  }
  .icon-cart{
    position: relative;
    cursor: pointer;
  }
  .icon-cart span{
    position: absolute;
    background-color: red;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #fff;
    top: 50%;
    right: -20px;
  }
  .title{
    font-size: xx-large;
  }
  .listProduct .item img{
    width: 90%;
    filter: drop-shadow(0 10px 5px #0009);
  }
  .listProduct{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .listProduct .item{
    background-color: #f7f7f7;
    padding: 20px;
    border-radius: 20px;
  }
  .listProduct .item h2{
    font-weight: 500;
    font-size: large;
  }
  .listProduct .item .price{
    letter-spacing: 7px;
    font-size: small;
  }
  .listProduct .item button{
    background-color: #353432;
    color: #eee;
    border: none;
    padding: 5px 10px;
    margin-top: 10px;
    border-radius: 20px;
    cursor: pointer;
  }
  
  /* cart */
  .cartTab{
    width: 400px;
    background-color: #353432;
    color: #eee;
    position: fixed;
    inset: 0 -400px 0 auto;
    display: grid;
    grid-template-rows: 70px 1fr 70px;
    transition: .5s;
  }
  body.showCart .cartTab{
   inset: 0 0 0 auto;
  }
  body.showCart .container{
    transform: translateX(-250px);
  }
  .cartTab h1{
    padding: 20px;
    margin: 0;
    font-weight: 300;
  }
  .cartTab .btn{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .cartTab .btn button{
    background-color: #E8BC0E;
    border: none;
    font-family: Poppins;
    font-weight: 500;
    cursor: pointer;
  }
  .cartTab .btn .close{
    background-color: #eee;
  }
  .listCart .item img{
    width: 100%;
  }
  .cartTab .listCart .item{
    display: grid;
    grid-template-columns: 70px 150px 50px 1fr;
    gap: 10px;
    text-align: center;
    align-items: center;
  }
  .listCart .quantity span{
    display: inline-block;
    width: 25px;
    height: 25px;
    background-color: #eee;
    border-radius: 50%;
    color: #555;
    cursor: pointer;
  }
  .listCart .quantity span:nth-child(2){
    background-color: transparent;
    color: #eee;
    cursor: auto;
  }
  .listCart .item:nth-child(even){
    background-color: #eee1;
  }
  .listCart{
    overflow: auto;
  }
  .listCart::-webkit-scrollbar{
    width: 0;
  }
  @media only screen and (max-width: 992px) {
    .listProduct{
        grid-template-columns: repeat(3, 1fr);
    }
  }
  
  
  /* mobile */
  @media only screen and (max-width: 768px) {
    .listProduct{
        grid-template-columns: repeat(2, 1fr);
    }
  }
  
  
  
  
  /*-----------------------------------*\
    #style.css
  \*-----------------------------------*/
  
  
  
  
  
  /*-----------------------------------*\
    #CUSTOM PROPERTY
  \*-----------------------------------*/
  
  :root {
  
    /**
     * colors
     */
  
    --hoockers-green_20: hsl(148, 20%, 38%, 0.2);
    --pale-spring-bud: hsl(60, 68%, 85%);
    --hoockers-green: hsl(148, 20%, 38%);
    --spanish-gray: hsl(0, 0%, 61%);
    --light-gray: hsl(0, 0%, 80%);
    --cultured-1: hsl(0, 0%, 97%);
    --cultured-2: hsl(60, 6%, 93%);
    --gray-web: hsl(0, 0%, 49%);
    --white_30: hsl(0, 0%, 100%, 0.3);
    --black_70: hsla(0, 0%, 0%, 0.7);
    --black_50: hsla(0, 0%, 0%, 0.5);
    --black_15: hsla(0, 0%, 0%, 0.15);
    --black_10: hsla(0, 0%, 0%, 0.1);
    --black_5: hsla(0, 0%, 0%, 0.05);
    --white: hsl(0, 0%, 100%);
    --black: hsl(0, 0%, 0%);
  
    /**
     * gradient color
     */
  
    --gradient: linear-gradient(to right, transparent 50%, var(--white_30) 100%);
  
    /**
     * typography
     */
  
    --ff-urbanist: 'Urbanist', sans-serif;
  
    --fs-1: 4.8rem;
    --fs-2: 4rem;
    --fs-3: 3.4rem;
    --fs-4: 2.4rem;
    --fs-5: 2rem;
    --fs-6: 1.8rem;
    --fs-7: 1.5rem;
    --fs-8: 1.4rem;
    --fs-9: 1.3rem;
  
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;
  
    /**
     * spacing
     */
  
    --section-padding: 35px;
  
    /**
     * shadow
     */
  
    --shadow-1: 0 8px 16px var(--black_15);
    --shadow-2: 0 4px 10px var(--black_5);
  
    /**
     * radius
     */
  
    --radius-3: 3px;
  
    /**
     * transition
     */
  
    --transition-1: 0.25s ease;
    --transition-2: 0.5s ease;
    --transition-3: 1s ease;
    --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
    --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
  
  }
  
  
  
  
  
  /*-----------------------------------*\
    #RESET
  \*-----------------------------------*/
  
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  li { list-style: none; }
  
  a,
  img,
  span,
  input,
  button,
  ion-icon { display: block; }
  
  a {
    text-decoration: none;
    color: inherit;
  }
  
  img { height: auto; }
  
  input,
  button {
    background: none;
    border: none;
    font: inherit;
  }
  
  input { width: 100%; }
  
  button { cursor: pointer; }
  
  ion-icon {
    pointer-events: none;
    --ionicon-stroke-width: 25px;
  }
  
  html {
    font-family: var(--ff-urbanist);
    font-size: 10px;
    scroll-behavior: smooth;
  }
  
  body {
    background-color: var(--white);
    color: var(--gray-web);
    font-size: 1.6rem;
    font-weight: var(--fw-500);
    line-height: 1.6;
  }
  
  :focus-visible { outline-offset: 4px; }
  
  ::-webkit-scrollbar {
    width: 10px;
    height: 5px;
  }
  
  ::-webkit-scrollbar-track { background-color: hsl(0, 0%, 95%); }
  
  ::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }
  
  ::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }
  
  
  
  
  
  /*-----------------------------------*\
    #REUSED STYLE
  \*-----------------------------------*/
  
  
  
  
  /*-----------------------------------*\
    #HEADER
  \*-----------------------------------*/
  
  .header .input-wrapper,
  .header-action-btn:not(:first-child),
  .navbar { display: none; }
  
  .header {
    position: relative;
    padding-block-end: 80px;
  }
  
  .header-top {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--white);
    padding-block: 26px;
    z-index: 4;
  }
  
  .header-top.active {
    position: fixed;
    top: -80px;
    bottom: auto;
    box-shadow: var(--shadow-1);
    transform: translateY(100%);
    transition: var(--transition-2);
  }
  
  .header-top.header-hide {
    box-shadow: none;
    transform: translateY(0);
  }
  
  .header-top .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }
  
  .nav-open-btn {
    width: 26px;
    display: grid;
    gap: 6px;
    padding-block: 5px;
  }
  
  .nav-open-btn .line {
    height: 2px;
    background-color: var(--black);
  }
  
  .nav-open-btn .line-1 { width: 15px; }
  
  .nav-open-btn .line-3 { width: 18px; }
  
  .header-action-btn {
    font-size: 28px;
    transition: var(--transition-1);
  }
  
  .header-action-btn:is(:hover, :focus) { color: var(--black_70); }
  
  
  
  /*-----------------------------------*\
    #MOBILE NAVBAR
  \*-----------------------------------*/
  
  .sidebar { z-index: 5; }
  
  .mobile-navbar {
    background-color: var(--white);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    max-width: 350px;
    width: 100%;
    padding: 25px 40px;
    z-index: 6;
    transform: translateX(-100%);
    visibility: hidden;
    transition: 0.25s var(--cubic-in);
  }
  
  .mobile-navbar.active {
    visibility: visible;
    transform: translateX(0);
    transition: 0.4s var(--cubic-out);
  }
  
  .mobile-navbar .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-end: 55px;
  }
  
  .nav-close-btn {
    font-size: 28px;
    color: var(--hoockers-green);
  }
  
  .nav-close-btn ion-icon { --ionicon-stroke-width: 40px; }
  
  .mobile-navbar .navbar-link {
    color: var(--black);
    font-size: var(--fs-8);
    text-transform: uppercase;
    font-weight: var(--fw-600);
    letter-spacing: 1px;
    padding-block: 5px;
    transition: var(--transition-1);
  }
  
  .mobile-navbar .navbar-link:is(:hover, :focus) { color: var(--hoockers-green); }
  
  .overlay {
    background-color: transparent;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    pointer-events: none;
    transition: var(--transition-1);
  }
  
  .overlay.active {
    background-color: var(--black_50);
    pointer-events: all;
  }
  
  
  
  .icons-container {
    display: flex; /* Horizontal layout by default */
    align-items: center; /* Align items vertically */
    justify-content: center; /* Center the icons */
    gap: 20px; /* Space between the two icons */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
  }
  
  .icon-cart {
    display: flex; /* Flexbox for each icon group */
    align-items: center;
    gap: 5px; /* Space between the icon and text */
  }
  
  .icon-cart svg,
  .icon-cart ion-icon {
    width: 24px; /* Icon width */
    height: 24px; /* Icon height */
  }
  



  /*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer .logo { display: none; }

.footer {
  background-color: var(--cultured-1);
  padding-block: 70px;
}

.footer-top {
  display: grid;
  gap: 40px;
  margin-block-end: 60px;
}

.footer-list-title {
  color: var(--black);
  font-size: var(--fs-5);
  font-weight: var(--fw-600);
  margin-block-end: 10px;
}

.footer-list-text { font-size: var(--fs-8); }

.footer-list-text .link {
  display: inline-block;
  color: var(--black);
  font-weight: var(--fw-600);
  text-decoration: underline;
  transition: var(--transition-1);
}

.footer-list-text .link:is(:hover, :focus) { color: var(--hoockers-green); }

.footer-list-text.bold {
  color: var(--black);
  font-weight: var(--fw-800);
  margin-block: 15px 2px;
}

.footer-link {
  font-size: var(--fs-7);
  padding-block: 5px;
}

.footer-link:is(:hover, :focus) { text-decoration: underline; }

.newsletter-title {
  color: var(--black);
  font-size: var(--fs-3);
  font-weight: var(--fw-600);
  line-height: 1.3;
}

.newsletter-text {
  font-size: var(--fs-7);
  line-height: 2;
  margin-block: 10px 35px;
}

.newsletter-form { position: relative; }

.email-field {
  background-color: var(--white);
  font-size: var(--fs-7);
  padding: 12px 18px;
  padding-inline-end: 145px;
  border: 1px solid var(--hoockers-green_20);
  border-radius: var(--radius-3);
  outline: none;
  transition: var(--transition-1);
}

.email-field::placeholder { color: var(--spanish-gray); }

.email-field:focus { border-color: var(--black); }

.newsletter-form .btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}

.copyright { font-size: var(--fs-7); }

.footer-bottom .wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  margin-block-end: 20px;
}

.social-list {
  display: flex;
  gap: 20px;
}

.social-link {
  color: var(--black);
  font-size: 18px;
  transition: var(--transition-1);
}

.social-link:is(:hover, :focus) { color: var(--hoockers-green); }

.footer-bottom > img { max-width: max-content; }


/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

/**
 * responsive for larger than 575px screen
 */

 @media (min-width: 575px) {

    /**
     * REUSED STYLE
     */
  
    .container {
      max-width: 540px;
      width: 100%;
      margin-inline: auto;
    }
  
    :is(.header, .hero) .container { max-width: unset; }
  
    .has-scrollbar { gap: 30px; }
  
    .scrollbar-item { min-width: calc(50% - 15px); }
  
  
  
    /**
     * HEADER
     */
  
    .alert { padding-block: 8px; }
  
    .header-top .container { padding-inline: 30px; }
  
  
  
    /**
     * HERO
     */
  
    .hero-card { padding-inline: 70px; }
  
    .hero-text { max-width: 30ch; }
  
  
  
    /**
     * BANNER
     */
  
    .banner-card .card-text { max-width: 30ch; }
  
  
  
    /**
     * OFFER
     */
  
    .offer .countdown { --fs-2: 4.8rem; }
  
    .offer .countdown .time:not(:last-child)::after { margin-inline: 20px; }
  
  }
  
  
  
  
  
  /**
   * responsive for larger than 768px screen
   */
  
  @media (min-width: 768px) {
  
    /**
     * CUSTOM PROPERTY
     */
  
    :root {
  
      /**
       * typography
       */
  
      --fs-1: 5.6rem;
  
    }
  
  
  
    /**
     * REUSED STYLE
     */
  
    .container { max-width: 730px; }
  
    .flex-item { max-width: calc(50% - 15px); }
  
  
  
    /**
     * COLLECTION
     */
  
    .collection-card { min-height: 450px; }
  
  
  
    /**
     * BANNER
     */
  
    .banner-list { grid-template-columns: 1fr 0.7fr; }
  
    .banner-card { padding: 50px; }
  
  
  
    /**
     * OFFER
     */
  
    .offer .section-text { max-width: 45ch; }
  
  
  
    /**
     * FOOTER
     */
  
    .footer-top { grid-template-columns: repeat(3, 1fr); }
  
    .footer-list:last-child { grid-column: 1 / 4; }
  
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
    .footer-bottom .wrapper { margin-block-end: 0; }
  
  }
  
  
  
  
  
  /**
   * responsive for larger than 992px screen
   */
  
  @media (min-width: 992px) {
  
    /**
     * CUSTOM PROPERTY
     */
  
    :root {
  
      /**
       * spacing
       */
  
      --section-padding: 50px;
  
    }
  
  
  
    /**
     * REUSED STYLE
     */
  
    .container { max-width: 960px; }
  
    .scrollbar-item { min-width: calc(33.33% - 20px); }
  
    .flex-item { max-width: calc(33.33% - 20px); }
  
  
  
    /**
     * COLLECTION
     */
  
    .collection-list {
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }
  
  
  
    /**
     * BANNER
     */
  
    .banner-list { grid-template-columns: 1fr 0.5fr; }
  
  
  
    /**
     * OFFER
     */
  
    .offer .container {
      display: grid;
      grid-template-columns: 1fr 0.7fr;
      align-items: center;
      gap: 30px;
    }
  
    .offer-banner { margin-block-end: 0; }
  
  
  
    /**
     * FOOTER
     */
  
    .footer .logo { display: block; }
  
    .footer { padding-block: 100px 80px; }
  
    .footer-top {
      grid-template-columns: 0.4fr 0.4fr 0.4fr 1fr;
      margin-block-end: 120px;
    }
  
    .footer-list:last-child { grid-column: auto; }
  
    .footer .logo img { width: 190px; }
  
  }
  
  
  
  
  
  /**
   * responsive for larger than 1200px screen
   */
  
  @media (min-width: 1200px) {
  
    /**
     * REUSED STYLE
     */
  
    .container { max-width: 1300px; }
  
    .scrollbar-item { min-width: calc(20% - 24px); }
  
  
  
    /**
     * HEADER
     */
  
    .header .input-wrapper,
    .header-action-btn:not(:first-child),
    .navbar { display: block; }
  
    .nav-open-btn { display: none; }
  
    .header {
      padding-block-end: 60px;
      margin-block-end: 10px;
    }
  
    .header-top {
      position: unset;
      padding-block: 24px 0;
    }
  
    .header-top:is(.active, .header-hide) { all: unset; }
  
    .header-top .container { flex-wrap: wrap; }
  
    .search-field {
      width: 270;
      font-size: var(--fs-7);
      border: 2px solid var(--hoockers-green_20);
      border-radius: var(--radius-3);
      padding: 10px 20px;
      padding-inline-end: 40px;
      outline: none;
      transition: var(--transition-1);
    }
  
    .search-field::placeholder { color: var(--spanish-gray); }
  
    .search-field:focus { border-color: var(--black); }
  
    .header .input-wrapper { position: relative; }
  
    .header .search-submit {
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
      font-size: 22px;
    }
  
    .header .search-submit ion-icon { --ionicon-stroke-width: 40px; }
  
    .header .logo { margin-inline-end: 60px; }
  
    .header-actions {
      display: flex;
      align-items: center;
      gap: 40px;
    }
  
    .header-action-btn { position: relative; }
  
    .header-action-btn .btn-badge {
      position: absolute;
      top: 0;
      right: -10px;
      background-color: var(--black);
      color: var(--white);
      font-size: var(--fs-9);
      min-width: 18px;
      height: 18px;
      line-height: 1.4;
      border-radius: 20px;
    }
  
    .header-action-btn:last-child {
      display: flex;
      align-items: center;
      gap: 10px;
    }
  
    .header-action-btn .btn-text {
      font-size: var(--fs-7);
      font-weight: var(--fw-700);
      margin-block-start: 3px;
    }
  
    .navbar {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: var(--white);
      padding-block: 18px;
      z-index: 4;
    }
  
    .navbar .navbar-list {
      display: flex;
      justify-content: center;
      gap: 45px;
    }
  
    .navbar .navbar-link {
      color: var(--black);
      font-size: var(--fs-7);
      font-weight: var(--fw-600);
    }
  
    .navbar .navbar-link::after {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: var(--black);
      transition: var(--transition-1);
      transform: scaleX(0);
      transform-origin: left;
    }
  
    .navbar .navbar-link:is(:hover, :focus)::after {
      transform: scaleX(1);
    }
  
    .header-top.active .navbar {
      position: fixed;
      top: -80px;
      bottom: auto;
      padding-block: 28px;
      box-shadow: var(--shadow-1);
      transform: translateY(100%);
      transition: var(--transition-2);
    }
  
    .header-top.header-hide .navbar {
      box-shadow: none;
      transform: translateY(0);
    }
  
  
  
    /**
     * HERO
     */
  
    .hero-card { padding: 120px 100px; }
  
    .hero-text { max-width: 40ch; }
  
  
  
    /**
     * BANNER
     */
  
    .banner-card-1 .card-title { max-width: 15ch; }
  
  
  
    /**
     * FEATURE
     */
  
    .feature .section-title { margin-block-end: 60px; }
  
    .feature .flex-list {
      gap: 100px;
      padding-inline: 50px;
    }
  
    .feature .flex-item { max-width: calc(33.33% - 66.66px); }
  
  
  
    /**
     * OFFER
     */
  
    .offer .container { gap: 120px; }
  
  }