@media(max-width:1200px){
  .header-container{
    grid-template-columns:auto 1fr auto;
  }

  .main-nav,
  .header-search{
    display:none;
  }

  .menu-button{
    display:flex;
  }

  .hero-wrap{
    grid-template-columns:1fr;
  }

  .category-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .product-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .trust-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:768px){
  .top-announcement{
    height:auto;
    padding:10px;
    text-align:center;
    flex-direction:column;
    gap:4px;
  }

  .header-container{
    padding:14px;
    grid-template-columns:auto 1fr auto;
  }

  .site-logo{
    justify-self:center;
  }

  .site-logo img{
    width:118px;
  }

  .header-icon{
    display:none;
  }

  .cart-pill{
    width:44px;
    height:44px;
    padding:0;
    justify-content:center;
  }

  .cart-pill span:last-child{
    display:none;
  }

  .home-hero{
    padding:16px 14px 32px;
  }

  .hero-video-card{
    min-height:500px;
    border-radius:30px;
  }

  .hero-overlay{
    background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.88));
  }

  .hero-content{
    padding:28px 20px 36px;
    justify-content:flex-end;
    align-items:center;
    text-align:center;
  }

  .hero-content span{
    font-size:9px;
    padding:8px 12px;
  }

  .hero-content h1{
    font-size:36px;
    max-width:320px;
  }

  .hero-content p{
    font-size:13px;
    max-width:310px;
  }

  .hero-buttons{
    width:100%;
    max-width:260px;
    display:grid;
  }

  .hero-buttons a,
  .pink-btn{
    width:100%;
  }

  .hero-side{
    margin-top:18px;
    gap:16px;
  }

  .hero-card{
    border-radius:28px;
    padding:24px 20px;
  }

  .hero-card h2{
    font-size:30px;
  }

  .quick-cats,
  .benefits{
    grid-template-columns:1fr;
  }

  .home-section{
    padding:42px 14px;
  }

  .section-title{
    display:block;
  }

  .section-title h2{
    font-size:33px;
  }

  .category-grid,
  .product-grid,
  .trust-grid{
    grid-template-columns:1fr;
  }

  .product-img{
    height:390px;
  }

  .campaign-section{
    padding:0 14px;
  }

  .campaign-box{
    min-height:310px;
    border-radius:30px;
    padding:28px 22px;
  }

  .campaign-box h2{
    font-size:34px;
  }

  .footer-inner{
    grid-template-columns:1fr;
  }
}