/* ==========================================================================
   Tradeo Shop — responsive rules
   ========================================================================== */

/* ---- Tablet / small desktop ---- */
@media (max-width:1024px){
  .main-nav{display:none}              /* replaced by drawer */
  .mobile-toggle{display:inline-grid}
  .bottom-nav{display:flex}
  body{padding-bottom:64px}            /* room for the fixed bottom nav */

  .header-row{flex-wrap:wrap;gap:14px;min-height:auto;padding:12px 0}
  .brand{order:1;min-width:auto}
  .header-actions{order:2;margin-left:auto}
  .header-search{order:3;flex-basis:100%;max-width:none}
  .action-help{display:none}           /* keep the top row compact */

  .category-grid,.products-grid,.woocommerce ul.products{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-about{grid-column:1/-1}
}

/* ---- Large phones / small tablets ---- */
@media (max-width:768px){
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .promos{grid-template-columns:1fr;gap:14px}
  .promo-card{aspect-ratio:16/7}
  .carousel-arrow{width:38px;height:38px}
  .carousel-arrow.prev{left:10px}
  .carousel-arrow.next{right:10px}

  .deals-head{flex-direction:column;align-items:flex-start;gap:14px}
  .section-head{margin-bottom:20px}
}

/* ---- Phones ---- */
@media (max-width:560px){
  .announcement{font-size:11.5px}
  .category-grid,.products-grid,.woocommerce ul.products{grid-template-columns:repeat(2,1fr);gap:12px}
  .product-title{font-size:12.5px;min-height:34px}
  .add-cart{padding:10px;font-size:12px}
  .brand-chip{min-width:120px;height:56px;font-size:13px}
  .cd-box{min-width:40px}
  .cd-box span{font-size:15px}
  .footer-grid{grid-template-columns:1fr;gap:26px;padding:40px 0 30px}
  .footer-about{grid-column:auto}
  .footer-bottom .container{flex-direction:column;align-items:flex-start;gap:10px}
  .newsletter-form{flex-direction:column}
  .slide-copy p{margin-bottom:20px}
}

/* ---- Very small ---- */
@media (max-width:380px){
  .header-actions{gap:12px}
  .brand{font-size:20px}
}