/* =========================================================
   BAYT AL AMANAH — Responsive Breakpoints
   Desktop 1440 / Laptop 1280 / Tablet 1024 / Tablet-P 768 / Mobile 576 / Small 375
   ========================================================= */

/* Large Desktop */
@media (min-width: 1441px){
  .container{ max-width: var(--container-lg); }
}

/* Laptop / standard desktop already covered by base styles at 1280 container */

/* Tablet landscape */
@media (max-width: 1024px){
  .container{ padding-inline: var(--pad-tablet); }
  .hero-title{ font-size: 52px; }
  .section-title{ font-size: 34px; }
  .features{ grid-template-columns: repeat(2, 1fr); }
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
  .shop-layout{ grid-template-columns: 1fr; }
  .filters{ position: static; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 44px; }
  .trust-strip{ grid-template-columns: repeat(2, 1fr); }
  .trust-strip div{ border-bottom: 1px solid rgba(255,255,255,.2); }
}

/* Tablet portrait */
@media (max-width: 768px){
  .nav-links{ display: none; }
  .nav-toggle{ display: flex; }
  .hero{ padding-top: 130px; }
  .hero .container{ grid-template-columns: 1fr; text-align: left; }
  .hero-visual{ order: -1; margin-bottom: 20px; }
  .hero-float-card{ display: none; }
  .hero-title{ font-size: 42px; }
  .split, .split.reverse{ grid-template-columns: 1fr; gap: 36px; }
  .split.reverse .split-media{ order: 0; }
  .category-grid{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .form-card{ padding: 30px 24px; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-bottom{ flex-direction: column; gap: 10px; text-align: center; }
  .section{ padding-block: 70px; }
  .page-header{ padding: 150px 0 56px; }
  .page-header h1{ font-size: 38px; }
}

/* Mobile */
@media (max-width: 576px){
  .container{ padding-inline: var(--pad-mobile); }
  .hero-title{ font-size: 34px; }
  .hero-subtitle{ font-size: 16px; }
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .section-title{ font-size: 27px; }
  .features{ grid-template-columns: 1fr; }
  .product-grid{ grid-template-columns: 1fr; }
  .trust-strip{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap: 34px; }
  .btn{ padding: 14px 24px; }
  .form-card{ padding: 26px 18px; }
  .category-card{ padding: 26px; min-height: 300px; }
}

/* Small mobile */
@media (max-width: 375px){
  .hero-title{ font-size: 29px; }
  .brand{ font-size: 17px; }
  .brand img{ height: 32px; }
}