/* ==========================================================================
   BLK/MRKT — Responsive overrides
   Mobile-first structural adjustments layered on top of style.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base (< 576px) — phones
   -------------------------------------------------------------------------- */
.hero-grid{ grid-template-columns:1fr; gap:2.5rem; }
.hero-visual{ order:-1; max-width:360px; margin-inline:auto; width:100%; }
.hero-title{ text-align:left; }
.hero-countdown{ flex-wrap:wrap; }
.hero-bg-text{ display:none; }

.story-section .row{ flex-direction:column-reverse; }
.story-stats{ grid-template-columns:1fr 1fr; }

.pd-title-row{ flex-direction:column; }
.pd-actions .btn-brand, .pd-actions .btn-brand-outline{ min-width:140px; }
.trust-strip{ grid-template-columns:1fr; }

.products-grid-view.list .product-card{ flex-direction:column; }
.products-grid-view.list .product-media{ width:100%; aspect-ratio:1/1.08; }

.toolbar{ flex-direction:column; align-items:stretch; }
.toolbar-search{ max-width:none; }
.toolbar > *{ width:100%; }
.toolbar-sort select{ width:100%; }

.newsletter-form{ flex-direction:column; border-width:2px; }
.newsletter-form button{ padding:.9rem; }

.site-footer .col-footer{ margin-bottom:2rem; }

.gallery-thumbs button{ width:62px; height:62px; }

/* --------------------------------------------------------------------------
   >= 480px
   -------------------------------------------------------------------------- */
@media (min-width:480px){
  .story-stats{ grid-template-columns:repeat(3,1fr); }
}

/* --------------------------------------------------------------------------
   >= 576px — large phones / small tablets
   -------------------------------------------------------------------------- */
@media (min-width:576px){
  .toolbar{ flex-direction:row; align-items:center; }
  .toolbar > *{ width:auto; }
  .toolbar-sort select{ width:auto; }
  .newsletter-form{ flex-direction:row; }
}

/* --------------------------------------------------------------------------
   >= 768px — tablets
   -------------------------------------------------------------------------- */
@media (min-width:768px){
  .hero-grid{ grid-template-columns:1fr; }
  .pd-title-row{ flex-direction:row; }
  .trust-strip{ grid-template-columns:repeat(3,1fr); }
  .products-grid-view.list .product-card{ flex-direction:row; }
  .products-grid-view.list .product-media{ width:200px; aspect-ratio:1/1; }
  .hero-bg-text{ display:flex; }
}

/* --------------------------------------------------------------------------
   >= 992px — laptops (nav switches to full desktop header)
   -------------------------------------------------------------------------- */
@media (min-width:992px){
  .hero-grid{ grid-template-columns:1.05fr .95fr; }
  .hero-visual{ order:0; max-width:none; }
  .story-section .row{ flex-direction:row; }
}

/* --------------------------------------------------------------------------
   >= 1200px — desktop
   -------------------------------------------------------------------------- */
@media (min-width:1200px){
  .cd-box{ width:82px; }
}

/* --------------------------------------------------------------------------
   >= 1400px — large desktop
   -------------------------------------------------------------------------- */
@media (min-width:1400px){
  .hero-grid{ gap:4rem; }
}

/* --------------------------------------------------------------------------
   Down-level (max-width) fine tuning
   -------------------------------------------------------------------------- */
@media (max-width:991.98px){
  .main-nav, .header-search-btn{ display:none !important; }
  .site-header .navbar{ min-height:68px; padding-block:.6rem; }
  .cat-tile{ aspect-ratio:1/1; }
}

@media (max-width:767.98px){
  .section{ padding-block:clamp(2.75rem,10vw,4rem); }
  .cd-box{ width:62px; padding:.5rem .2rem; }
  .cd-box .num{ font-size:1.4rem; }
  .story-media{ margin-bottom:2rem; }
  .filters-panel{ margin-bottom:1.5rem; }
}

@media (max-width:575.98px){
  .brand-logo{ font-size:1.35rem; }
  .hero-visual .price-chip{ padding:.6rem .8rem; }
  .hero-visual .price-chip .val{ font-size:1.1rem; }
  .marquee-track span{ font-size:1.1rem; padding-inline:1rem; }
  .cart-line{ grid-template-columns:60px 1fr; }
  .cart-line img{ width:60px; height:60px; }
}

/* Ensure no horizontal scroll anywhere */
html, body{ max-width:100%; overflow-x:hidden; }