/* ==========================================================================
   style-mobile.css
   Mobile & tablet responsiveness for the existing desktop-first stylesheet.
   Place this AFTER style.css so these rules override cleanly.
   Breakpoints: 1024px (tablet), 768px (large phone), 560px (phone), 380px (xs)
   ========================================================================== */

/* --------------------------
   ≤ 1024px — tablet tweaks
   -------------------------- */
@media (max-width: 1024px) {
  .wrapper,
  .container,
  .interested-band .wrapper,
  body.product-page section.reviews,
  body.product-page section.related-products {
    padding: 0 12px;
  }

  .container { gap: 16px; }
  .sidebar { width: 220px; }

  body.products-page .products-grid { grid-template-columns: repeat(2, 1fr); }
  body.product-page .related-products .related-carousel { grid-template-columns: repeat(3, 1fr); }
  .interested-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

  .checkout-page .order-summary { flex: 0 0 300px; }
}

/* --------------------------
   ≤ 768px — phone layout
   -------------------------- */
@media (max-width: 768px) {
  /* Base rhythm + global overflow guard */
  html, body { overflow-x: hidden; }                 /* last-resort guard */
  body { line-height: 1.6; }
  .wrapper { max-width: 100%; }

  /* =========================
     TOP PROMO BANNER WRAP
     (covers common class names; harmless if absent)
     ========================= */
  .promo, .promo-bar, .top-banner, .announcement, .announcement-bar {
    display: block;
    padding: 6px 10px;
    text-align: center;
    white-space: normal !important;                  /* break long text */
    overflow-wrap: anywhere;
    word-break: break-word;
    box-sizing: border-box;
  }

  /* Also ensure any direct header notice wraps */
  header .notice, .brand-nav .notice {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  /* =========================
     HEADER: 3-row layout
     Row 1: centered logo
     Row 2: centered header links
     Row 3: full-width search bar
     ========================= */
  .brand-nav .wrapper {
    height: auto;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;          /* center rows */
    gap: 8px;
    text-align: center;
  }

  /* Row ordering */
  .brand-nav .logo    { order: 1; width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px; }
  .header-links       { order: 2; width: 100%; display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: 0; }
  .search-box         { order: 3; width: 100%; position: static; transform: none; margin: 0; z-index: 0; }

  .brand-nav .logo img { height: 32px; }

  .search-box form {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 6px;
  }
  .search-box input[type="search"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 8px 10px;
  }
  .search-box button.button {
    flex: 0 0 auto;
    padding: 8px 10px;
  }

  /* Breadcrumb wraps nicely */
  .breadcrumb { padding: 8px 0 10px; }
  .breadcrumb .wrapper { flex-wrap: wrap; row-gap: 4px; }


/* Promo bar — phone/tablet sizing */
@media (max-width: 768px) {
  .promo-bar .wrapper { padding: 8px 10px; }
  .promo-bar p {
    font-size: clamp(0.85rem, 2.8vw, 0.95rem);
  }
}


  /* =========================
     LAYOUT: sidebar above content
     ========================= */
  .container { flex-direction: column; gap: 16px; }
  .sidebar   { width: 100%; order: 0; }
  .content   { order: 1; }

  /* Sidebar controls */
  .sidebar .range-inputs { gap: 6px; }
  .sidebar .range-inputs input[type="number"] { width: 100%; }
  .sidebar .filter-group .button { width: 100%; }

  /* =========================
     PRODUCTS LIST PAGE
     ========================= */
  body.products-page .sorting {
    justify-content: space-between;
    gap: 8px;
  }
  body.products-page .sorting label { display: none; }
  body.products-page .sorting select { width: 100%; }

  body.products-page .products-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  body.products-page .product-card h3 { font-size: 0.95rem; }
  body.products-page .price { font-size: 1rem; }
  body.products-page .pagination { text-align: center; }

  /* =========================
     PRODUCT DETAIL PAGE
     ========================= */
  body.product-page .product-detail-container {
    flex-direction: column;
    gap: 18px;
    margin: 20px auto;
  }
  body.product-page .product-gallery,
  body.product-page .product-info { width: 100%; }
  body.product-page .thumbnails .thumb { width: 22%; }
  body.product-page .product-info h1 { font-size: 1.5rem; }
  body.product-page .product-info .price { font-size: 1.1rem; }
  body.product-page .product-info .actions {
    gap: 8px;
    flex-wrap: wrap;
  }
  body.product-page .product-info .actions .button {
    flex: 1 1 200px;
    text-align: center;
  }

  /* Related / Interested grids */
  body.product-page .related-products .related-carousel { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .interested-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }

  /* =========================
     CART PAGE
     ========================= */
  body.cart-page .basket-items-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  body.cart-page .basket-items-table thead th,
  body.cart-page .basket-items-table tbody td { white-space: nowrap; }

  body.cart-page .basket-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  body.cart-page .coupon-update { width: 100%; }
  body.cart-page .coupon-input { flex: 1 1 auto; width: 100%; }
  body.cart-page .update-section { margin-left: 0; }
  body.cart-page .update-button,
  body.cart-page .coupon-button,
  body.cart-page .checkout-button { width: 100%; }

  body.cart-page .suggestions-totals { flex-direction: column; gap: 20px; }
  body.cart-page .basket-totals { width: 100%; max-width: none; margin-left: 0; }

  /* =========================
     CHECKOUT PAGE
     ========================= */
  .checkout-page .container { gap: 24px; }
  .checkout-page .order-summary { flex: 1 1 auto; width: 100%; order: 2; }
  .checkout-page .content { order: 1; }
  .checkout-page .option-card { padding: 12px; }
  .checkout-page .option-card .option-row { gap: 10px; }

  /* =========================
     ORDER CONFIRMATION PAGE
     ========================= */
  body.order-confirmation-page .oc-grid { flex-direction: column; gap: 16px; }
  body.order-confirmation-page .oc-card--address,
  body.order-confirmation-page .oc-card--totals { flex: 1 1 auto; }

  /* Footer */
  .footer-links.wrapper { flex-wrap: wrap; gap: 10px 16px; }
  .bottom-bar.wrapper p, .bottom-bar.wrapper img { margin: 6px 8px; }
}

/* --------------------------
   ≤ 560px — tighter single-column
   -------------------------- */
@media (max-width: 560px) {
  .brand-nav .wrapper { gap: 8px; }
  .header-links { gap: 10px; font-size: 0.9rem; }

  .search-box form { gap: 4px; }
  .search-box input[type="search"] { padding: 8px 10px; }
  .search-box button.button { padding: 8px 10px; }

  /* Typography scale */
  body.product-page .product-info h1 { font-size: 1.35rem; }
  .interested-band h2,
  body.product-page section.reviews h2,
  body.product-page section.related-products h2,
  body.cart-page .basket-totals h2,
  .checkout-page .order-summary h2 { font-size: 1.1rem; }

  /* Product grid: 2 → 1 */
  body.products-page .products-grid { grid-template-columns: 1fr; gap: 10px; }
  body.products-page .product-card h3 { font-size: 1rem; }
  body.product-page .related-products .related-carousel { grid-template-columns: 1fr 1fr; }

  /* Buttons fill width where helpful */
  .button,
  body.products-page .pagination a { padding: 10px 14px; }
  body.product-page .product-info .actions .button { width: 100%; }

  /* Forms: force single column */
  .form-grid.two-col { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions--split { flex-direction: column; gap: 10px; }

  /* Breadcrumb spacing */
  .breadcrumb { padding: 8px 0; }
  .breadcrumb .wrapper { font-size: 0.95rem; }

  /* Tables: larger cells for fingers */
  body.cart-page .basket-items-table th,
  body.cart-page .basket-items-table td { padding: 10px; }

  /* Images keep square nicely */
  .interested-grid .img-wrapper,
  body.products-page .img-wrapper,
  body.product-page .related-products .img-wrapper { padding-top: 100%; }

  /* Footer stack */
  .footer-links.wrapper { justify-content: center; }
  .bottom-bar.wrapper { padding: 6px 0; }
}

/* --------------------------
   Ultra-small helpers (≤380px)
   -------------------------- */
@media (max-width: 380px) {
  .brand-nav .wrapper { gap: 6px; }
  .header-links { gap: 8px; font-size: 0.85rem; }
  .search-box input[type="search"] { font-size: 0.95rem; }
}