/* ═══════════════════════════════════════════
   Responsive — progressive enhancement
   Base = mobile, media queries add desktop
   ═══════════════════════════════════════════ */

/* ─── Small phones (<375px) ─── */
@media (max-width: 374px) {
  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .hero__trust-strip {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .goal-pill {
    padding: 8px 16px;
    font-size: var(--font-size-xs);
  }

  .flash-card {
    flex: 0 0 160px;
  }

  .category-card {
    min-height: 110px;
  }
}

/* ─── Mobile default (<768px) ─── */
@media (max-width: 767px) {
  /* Override layout variables for mobile */
  :root {
    --header-height: 48px;
    --promo-bar-height: 36px;
  }

  /* Hero */
  .home-hero { min-height: 70vh; }
  .home-hero .hero__subtitle { font-size: var(--font-size-body); }
  .hero { min-height: 400px; }
  .hero--short { min-height: 220px; }

  .hero__actions {
    flex-wrap: wrap;
  }

  .hero__trust-strip {
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    font-size: var(--font-size-xs);
  }

  /* Promo Bar — compact on mobile */
  .promo-bar__inner {
    font-size: 11px;
    letter-spacing: 0.02em;
  }

  /* Layout */
  .container { padding: 0 var(--space-md); }

  /* Header — shorter on mobile */
  .header-nav { display: none; }
  .mobile-toggle { display: flex; }

  .header-logo svg,
  .header-logo img {
    height: 26px;
  }

  /* Trust Banner */
  .trust-banner {
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-lg);
    padding: var(--space-md) var(--space-md);
  }

  .trust-banner__item {
    font-size: var(--font-size-xs);
  }

  /* Grids — 2-col on mobile */
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Category Grid */
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .category-card {
    min-height: 130px;
    padding: var(--space-md);
  }

  .category-card__name {
    font-size: var(--font-size-body);
  }

  /* Flash Deals */
  .flash-deals__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .flash-card {
    flex: 0 0 180px;
  }

  /* Product Card — compact on mobile */
  .product-card__body {
    padding: 10px 10px 12px;
  }

  .product-card__category {
    font-size: 9px;
    margin-bottom: 2px;
  }

  .product-card__name {
    font-size: var(--font-size-xs);
    margin-bottom: var(--space-xs);
  }

  .star-rating__stars {
    font-size: 11px;
  }

  .star-rating__count {
    font-size: 10px;
  }

  .price-current {
    font-size: var(--font-size-sm);
  }

  .price-compare {
    font-size: var(--font-size-xs);
  }

  .price-save {
    font-size: 10px;
  }

  .btn--add-to-cart {
    padding: 9px 10px;
    font-size: 11px;
  }

  /* Shop Layout — no sidebar on mobile */
  .shop-layout {
    flex-direction: column;
    gap: 0;
    padding-top: var(--space-lg);
  }

  .shop-sidebar {
    display: none;
  }

  .filter-bar {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-md);
    scrollbar-width: none;
  }

  .filter-bar::-webkit-scrollbar {
    display: none;
  }

  /* Shop Toolbar */
  .shop-toolbar {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .shop-toolbar__title {
    font-size: var(--font-size-h4);
  }

  /* Product Detail */
  .product-detail {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .product-info__name {
    font-size: var(--font-size-h3);
  }

  .product-info__pricing .price-current {
    font-size: var(--font-size-h4);
  }

  .product-meta {
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .product-actions {
    flex-direction: column;
  }

  .product-actions .qty-selector {
    width: 100%;
    justify-content: center;
  }

  .product-trust {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .product-image__thumb {
    width: 56px;
    height: 56px;
  }

  /* Sticky ATC — compact on mobile */
  .sticky-atc {
    padding: var(--space-xs) 0;
  }

  .sticky-atc__name {
    font-size: var(--font-size-xs);
    max-width: 140px;
  }

  .sticky-atc__price {
    font-size: var(--font-size-sm);
  }

  .sticky-atc .btn {
    padding: 10px 20px;
    font-size: var(--font-size-xs);
  }

  /* Cart */
  .cart-layout {
    grid-template-columns: 1fr;
  }

  .cart-title {
    font-size: var(--font-size-h3);
  }

  .cart-item {
    grid-template-columns: 64px 1fr;
    gap: var(--space-sm);
    position: relative;
    padding-right: 40px;
  }

  .cart-item__image {
    width: 64px;
    height: 64px;
    grid-row: 1 / 3;
  }

  .cart-item__price { display: none; }
  .cart-item__total { text-align: left; }
  .qty-selector { grid-column: 2; }

  .cart-item__remove {
    position: absolute;
    right: 0;
    top: var(--space-md);
  }

  .cart-summary {
    position: static;
  }

  /* Cross-sells */
  .cross-sell-section {
    padding: var(--space-2xl) 0;
    margin-top: var(--space-xl);
  }

  /* Newsletter */
  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form input,
  .newsletter-form .btn {
    width: 100%;
  }

  /* Goal Pills */
  .goal-pills {
    gap: var(--space-xs);
  }

  .goal-pill {
    padding: 8px 18px;
    font-size: var(--font-size-xs);
  }

  /* Footer */
  .footer-top {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .footer-links {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }

  /* About */
  .value-card {
    padding: var(--space-lg);
  }

  /* Toast — full width on mobile */
  .toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  /* Related/Cross-sell grids — horizontal scroll on mobile */
  .related-section .grid--4,
  .cross-sell-section .grid--4 {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--space-md);
  }

  .related-section .grid--4::-webkit-scrollbar,
  .cross-sell-section .grid--4::-webkit-scrollbar {
    display: none;
  }

  .related-section .grid--4 > *,
  .cross-sell-section .grid--4 > * {
    flex: 0 0 70%;
    max-width: 260px;
    scroll-snap-align: start;
  }
}

/* ─── Tablet (768px - 1023px) ─── */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(3, 1fr); }

  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Header — show nav on tablet */
  .header-nav { display: flex; }
  .mobile-toggle { display: none; }

  /* Shop — no sidebar, show filter pills */
  .shop-sidebar {
    display: none;
  }

  .filter-bar {
    display: flex;
    flex-wrap: wrap;
  }

  .shop-layout {
    flex-direction: column;
    gap: 0;
  }

  /* Product Detail */
  .product-detail {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  /* Cart */
  .cart-layout {
    grid-template-columns: 1fr 320px;
  }

  /* Footer */
  .footer-top {
    flex-direction: column;
    gap: var(--space-xl);
  }

  /* Flash card sizing */
  .flash-card {
    flex: 0 0 200px;
  }

  /* Trust banner */
  .trust-banner {
    gap: var(--space-lg);
  }
}

/* ─── Desktop (1024px+) ─── */
@media (min-width: 1024px) {
  .header-nav { display: flex; }
  .mobile-toggle { display: none; }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }

  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Product Detail */
  .product-detail {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
  }

  /* Cart */
  .cart-layout {
    grid-template-columns: 1fr 380px;
  }

  /* Shop — show sidebar, hide filter pills */
  .shop-sidebar {
    display: block;
  }

  .filter-bar {
    display: none;
  }

  .shop-layout {
    flex-direction: row;
    gap: var(--space-xl);
  }
}

/* ─── Large Desktop (1440px+) ─── */
@media (min-width: 1440px) {
  .container {
    padding: 0 var(--space-xl);
  }
}