/* ═══════════════════════════════════════════════════════════════
   responsive.css — CCSHOP responsive design system
   Mobile-first additions, fluid values, breakpoint gaps
   Load after: base.css → nav.css → components.css → shop.css → cards.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Fluid Section & Hero Spacing ───────────────────────────── */
/* replaces the hard-coded @media(max-width:768px) section override */
.section{
  padding:clamp(60px,8vw,100px) clamp(16px,4vw,48px);
}
.hero{
  padding:clamp(88px,12vh,120px) clamp(16px,4vw,48px) clamp(48px,6vh,80px);
  min-height:100svh; /* respects dynamic browser chrome on mobile */
}

/* ── Products Grid: never narrower than 100% ────────────────── */
/* prevents horizontal overflow on very small screens */
.products-grid{
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  padding:0 clamp(16px,4vw,48px) clamp(48px,6vw,100px);
  gap:clamp(12px,2vw,20px);
}

/* ── Review & Portfolio Grids: fluid columns ────────────────── */
.review-grid{
  grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
}
.portfolio-grid{
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));
}

/* ══ EXTRA-SMALL: narrow phones < 480px ════════════════════════ */
@media(max-width:479px){

  /* Stats bar: 2×2 grid instead of single column */
  .stats-bar{
    grid-template-columns:1fr 1fr;
  }
  .stat-item{border-right:none}
  .stat-item:nth-child(odd){border-right:1px solid var(--border)}
  .stat-item:nth-child(1),
  .stat-item:nth-child(2){border-bottom:1px solid var(--border)}

  /* Tighten hero eyebrow letter-spacing */
  .hero-eyebrow{letter-spacing:.15em}

  /* Category cards: reduce excessive padding */
  .cat-card{padding:28px 22px}

  /* Section title slightly smaller */
  .section-title{font-size:clamp(22px,6vw,36px)}

  /* Marquee slightly slower */
  .marquee-track{animation-duration:40s}
}

/* ══ SMALL: phones 480px – 639px ═══════════════════════════════ */
@media(min-width:480px) and (max-width:639px){
  .cat-card{padding:36px 30px}
  .stats-bar{grid-template-columns:repeat(2,1fr)}
  .stat-item:nth-child(1),
  .stat-item:nth-child(2){border-bottom:1px solid var(--border)}
  .stat-item:nth-child(even){border-right:none}
}

/* ══ TABLET: 640px – 1023px ════════════════════════════════════ */
@media(min-width:640px) and (max-width:1023px){

  /* 2-column category grid */
  .cats-grid{grid-template-columns:repeat(2,1fr)}

  /* Intermediate section padding */
  .section{padding:80px 32px}

  /* 2-column stats */
  .stats-bar{grid-template-columns:repeat(2,1fr)}
  .stat-item:nth-child(1),
  .stat-item:nth-child(2){border-bottom:1px solid var(--border)}
  .stat-item:nth-child(even){border-right:none}

  /* Products grid: 2 columns */
  .products-grid{
    grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));
  }
}

/* ══ LARGE DESKTOP: 1280px + ══════════════════════════════════ */
@media(min-width:1280px){
  /* 4-column stats always */
  .stats-bar{grid-template-columns:repeat(4,1fr)}

  /* Wider product cards */
  .products-grid{
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  }
}

/* ══ TOUCH DEVICES: coarse pointer ════════════════════════════ */
/* Ensures all interactive elements meet 44×44px WCAG touch target */
@media(pointer:coarse){

  /* Card action button: min 44px height */
  .card-action{
    padding:12px 18px;
    min-height:44px;
    display:flex;
    align-items:center;
  }

  /* Nav links */
  .nav-link{padding:10px 16px;min-height:44px}

  /* Quantity buttons in cart */
  .qty-btn{width:36px;height:36px;font-size:16px}

  /* Dropdown items */
  .nav-dropdown-item{padding:12px 14px}

  /* FAQ questions */
  .faq-question{padding:20px}

  /* Hamburger */
  .hamburger{padding:10px 12px}

  /* Cart remove button */
  .cart-rm{padding:8px 10px;font-size:16px}
}

/* ══ PRINT: remove decorative elements ════════════════════════ */
@media print{
  .hero-orb-1,.hero-orb-2,.hero-orb-3,
  .grid-bg,.marquee-wrap,.scroll-ind,
  nav,.cart-drawer,.cart-overlay,
  #ann-banner{display:none}
  .section{padding:32px 0}
  body{background:#fff;color:#000}
}