/* ==========================================================================
   COD Personal Pro — RESPONSIVE CSS
   Breakpoints (PART B.4):
     Mobile:  320–599px  (base styles, no media query)
     Tablet:  600–999px
     Desktop: 1000px+
   Mobile-first: base rules assume small screens; these scale UP.
   ========================================================================== */

/* ===================== TABLET (>=600px) ===================== */
@media (min-width:600px){
  .container{padding:0 24px}

  ul.products{grid-template-columns:repeat(3,1fr);gap:16px}
  .category-grid{grid-template-columns:repeat(3,1fr)}
  .testimonial-grid{grid-template-columns:repeat(2,1fr)}

  .footer-widgets{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr 1fr}
  .order-overview{grid-template-columns:repeat(4,1fr)}

  .hero{min-height:520px}
  .hero-heading{font-size:2.25rem}

  h1{font-size:2rem}
  .page-title{font-size:2rem}
}

/* ===================== DESKTOP (>=1000px) ===================== */
@media (min-width:1000px){
  .container{padding:0 32px}
  .home-section{padding:64px 0}

  /* Product grid: full-width, honors the store's column setting (default 4), 24px gutter */
  ul.products{grid-template-columns:repeat(var(--product-cols,4),1fr);gap:24px}
  .featured-products ul.products{grid-template-columns:repeat(var(--product-cols,4),1fr);gap:24px}
  .shop-main{padding:24px 32px}

  .category-grid{grid-template-columns:repeat(4,1fr)}
  .testimonial-grid{grid-template-columns:repeat(4,1fr)}
  .footer-widgets{grid-template-columns:repeat(4,1fr);padding:64px 32px}
  .footer-bottom-inner{flex-direction:row;justify-content:space-between;text-align:start}

  /* Single product: gallery 45% | details 55%, gap 48px, 32px side padding */
  .single-product .product-main{grid-template-columns:45% 55%;gap:48px;align-items:start;padding:0 32px}
  .woocommerce-breadcrumb{padding:24px 32px 32px}
  .woocommerce-tabs,.related.products,.upsells.products{padding:0 32px}
  .flex-control-thumbs li{flex:0 0 80px}
  .flex-control-thumbs img{width:80px;height:80px}
  .product-details .product_title,.single-product .product_title{font-size:28px}
  .product-details .price,.summary .price{font-size:24px}

  .hero{min-height:600px}
  .hero-heading{font-size:2.75rem}
  .hero-subheading{font-size:1.25rem}

  .post-list{grid-template-columns:repeat(2,1fr)}
}

/* ===================== MOBILE NAV (<1000px) ===================== */
@media (max-width:999px){
  .nav-toggle{display:flex}
  .primary-nav{position:absolute;top:100%;inset-inline:0;background:#fff;border-bottom:1px solid var(--border-color);box-shadow:0 8px 16px rgba(0,0,0,.08);max-height:0;overflow:hidden;transition:max-height .25s ease}
  .primary-nav.is-open{max-height:80vh;overflow:auto}
  .primary-menu{flex-direction:column;gap:0;padding:8px 16px}
  .primary-menu li{border-bottom:1px solid var(--light-gray)}
  .primary-menu a{display:block;padding:14px 0}
}

/* ===================== SMALL PHONES (<=380px) ===================== */
@media (max-width:380px){
  ul.products{gap:12px}
  .codpp-card-body{padding:12px}
  .hero-heading{font-size:1.75rem}
}

/* ===================== PRINT ===================== */
@media print{
  .site-header,.site-footer,.nav-toggle,.codfp-form-container{display:none!important}
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}