/* ==========================================================================
   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; }
}

/* --------------------------
   Contact Form Mobile
   -------------------------- */

/* Responsive: put name and email on one line on wider screens */
@media (min-width: 700px) {
  .form-row-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

/* ==========================================================================
   MOBILE HEADER — Logo, Links, then Menu + Search on one row
   ========================================================================== */
@media (max-width: 768px) {
  .brand-nav .wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "links"
      "search";
    align-items: center;
    justify-items: center;
    gap: 8px;
    padding: 8px 10px;
    height: auto;
  }
  .brand-nav .logo    { grid-area: logo; }
  .header-links       { grid-area: links; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
  .search-box         { grid-area: search; width: 100%; }

  /* Menu | [search input] | SEARCH on one line */
  .search-box form {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
  }
  .search-box .button--menu {
    display: inline-block;      /* override desktop hidden */
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .search-box input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px;
  }
  .search-box button.button[type="submit"] {
    flex: 0 0 auto;
    padding: 8px 10px;
  }
}

/* ==========================================================================
   MOBILE OFF-CANVAS SIDEBAR (scrolling actions)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Show the Menu button on mobile */
  .button--menu { display: inline-block; }

  /* Sidebar behaves as a drawer */
  html body #mobileSidebar {
    position: fixed !important;      /* remove from normal flow */
    top: 0; left: 0;
    height: 100vh;
    width: 92vw;
    max-width: 360px;
    background: #fff;
    box-shadow: 2px 0 16px rgba(0,0,0,.15);
    transform: translateX(-100%) !important; /* start fully hidden */
    transition: transform .28s ease-out;
    overflow-y: auto;
    padding: 14px;                   /* normal padding (no extra bottom) */
    z-index: 2000;                   /* above overlay/header on mobile */
    will-change: transform;
  }
  html body #mobileSidebar.is-open {
    transform: translateX(0) !important;
  }

  /* Close button visible on mobile */
  #mobileSidebar .drawer-close { display: block; }

  /* Page layout stacks; ensure no left gap remains */
  .container { flex-direction: column; }
  .sidebar   { width: 100%; position: static; }

  /* Overlay above header on mobile too */
  .drawer-overlay { z-index: 1500; }
}

/* ==========================================================================
   Apply button — normal flow under the sliders (still full width)
   ========================================================================== */
@media (max-width: 1024px) {
  #mobileSidebar .form-actions--drawer-fixed {
    position: static;               /* no pinning */
    left: auto; right: auto; bottom: auto;
    margin: 10px 0 0;
    padding: 0;
    background: transparent;
    border-top: none;
  }
  #mobileSidebar .form-actions--drawer-fixed .button {
    width: 100%;
  }
}

/* ==========================================================================
   Tags: one per line on mobile
   ========================================================================== */
@media (max-width: 768px) {
  #mobileSidebar .tags {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  #mobileSidebar .tag {
    display: block;
    width: 100%;
    text-align: left;
  }
}

/* ============================================================
   CHECKOUT — mobile polish (≤ 768px + tighter at ≤ 560px)
   Applies to checkout.php only (scoped by .checkout-page)
   ============================================================ */
@media (max-width: 768px) {
  /* Layout: stack content first, summary second */
  body.checkout-page .container {
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }
  body.checkout-page .content       { order: 1; width: 100%; }
  body.checkout-page .order-summary { order: 2; width: 100%; flex: 1 1 auto; }

  /* Form grid: one column on mobile */
  body.checkout-page .form-grid.two-col { grid-template-columns: 1fr; }

  /* Inputs full-width with comfy touch targets */
  body.checkout-page .form-control {
    width: 100%;
    padding: 10px 12px;
    font-size: 16px;               /* avoids iOS zoom */
  }

  /* Actions: full-width buttons */
  body.checkout-page .form-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 12px;
  }
  body.checkout-page .form-actions .button { width: 100%; }

  /* Delivery/Payment cards: tighter spacing on mobile */
  body.checkout-page .checkout-block { padding: 12px; }
  body.checkout-page .checkout-block .block-title {
    font-size: 1.05rem;
    margin-bottom: 10px;
  }
  body.checkout-page .option-card { padding: 10px 12px; }
  body.checkout-page .option-card .option-row {
    gap: 10px;
    align-items: center;
    justify-content: space-between;
  }

  /* Order summary list: clearer rows */
  body.checkout-page .order-summary ul { margin: 0 0 12px; }
  body.checkout-page .order-summary li {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-gray);
  }
  body.checkout-page .order-summary img {
    width: 44px;
    height: 44px;
  }
  body.checkout-page .order-summary p,
  body.checkout-page .order-summary .badge-free { font-size: 1rem; }
}

@media (max-width: 560px) {
  /* Slightly tighter typography on very small phones */
  body.checkout-page .content h1 { font-size: 1.5rem; }
  body.checkout-page .checkout-block .block-title { font-size: 1rem; }

  /* Buttons remain full width */
  body.checkout-page .button { padding: 10px 14px; }
}


/* Cart page: stack coupon input above the button on mobile */
@media (max-width: 768px) {
  body.cart-page .coupon-section { width: 100%; }

  body.cart-page .coupon-update {
    display: flex;
    flex-direction: column;   /* field above button */
    align-items: stretch;
    gap: 8px;
  }

  body.cart-page .coupon-input { width: 100%; }
  body.cart-page .coupon-button { width: 100%; }
}

@media (max-width: 768px) {
  /* Hide the table header */
  body.cart-page .basket-items-table thead {
    display: none;
  }

  /* Make each row a card */
  body.cart-page .basket-items-table,
  body.cart-page .basket-items-table tbody,
  body.cart-page .basket-items-table tr,
  body.cart-page .basket-items-table td {
    display: block;
    width: 100%;
  }

  body.cart-page .basket-items-table tr {
    border: 1px solid var(--border-gray);
    border-radius: var(--corner-radius);
    padding: 10px;
    margin: 10px 0;
    background: #fff;
  }

  /* Label before each cell’s value */
  body.cart-page .basket-items-table td {
    position: relative;
    padding-left: 42%;
    border: 0;                 /* remove row dividers */
    white-space: normal;       /* allow wrapping */
  }
  body.cart-page .basket-items-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    top: 10px;
    width: 32%;
    font-weight: 600;
    color: #555;
  }

  /* Product cell can be full-width above others if you like */
  body.cart-page .basket-items-table .col-product {
    padding-left: 10px;
  }
  body.cart-page .basket-items-table .col-product::before { content: none; }

  /* Keep remove “×” accessible */
  body.cart-page .basket-items-table .col-remove {
    padding-left: 10px;
    text-align: left;
  }
  body.cart-page .basket-items-table .col-remove::before { content: "Remove"; }

  /* Qty and totals look tidy */
  body.cart-page .quantity-input { width: 80px; }
}

/* Cart (mobile): allow product titles to wrap inside the card */
@media (max-width: 768px) {
  /* Ensure the grid text column can shrink/wrap */
  body.cart-page .product-info { 
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 10px;
  }
  body.cart-page .product-info .product-text {
    min-width: 0;              /* critical for grid text wrapping */
  }

  /* Wrap product name (and any long words/URLs) */
  body.cart-page .product-info .product-text a {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;    /* modern */
    word-break: break-word;     /* fallback */
  }

  /* Make sure the table cells don’t force nowrap anywhere */
  body.cart-page .basket-items-table,
  body.cart-page .basket-items-table td {
    white-space: normal !important;
  }
}

/* Cart (mobile): hide "Remove" label and keep the × clear */
@media (max-width: 768px) {
  body.cart-page .basket-items-table td.col-remove {
    padding-left: 0;                /* no space for a label */
    text-align: right;              /* keep × on the right */
    position: relative;
  }
  body.cart-page .basket-items-table td.col-remove::before {
    content: none !important;       /* remove the "Remove" text label */
  }
  body.cart-page .basket-items-table td.col-remove .remove-item {
    position: relative;
    z-index: 1;                     /* make sure it sits above anything else */
  }
}

/* Cart (mobile): place the × in the top-right, inline with the thumb */
@media (max-width: 768px) {
  /* Make each row a positioned container */
  body.cart-page .basket-items-table tbody tr {
    position: relative;
  }

  /* Absolutely position the remove cell; no label */
  body.cart-page .basket-items-table td.col-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0;
    width: auto;
    height: auto;
    text-align: right;
    z-index: 2;
  }
  body.cart-page .basket-items-table td.col-remove::before {
    content: none !important;   /* hide the "Remove" label */
  }

  /* Tighten the × button itself */
  body.cart-page .basket-items-table td.col-remove .remove-item {
    font-size: 18px;
    line-height: 1;
    padding: 0;
    width: auto;
    height: auto;
  }

  /* Give a little breathing room so the × doesn't overlap product text */
  body.cart-page .basket-items-table td.col-product {
    padding-right: 32px;        /* room for the × */
  }
}

/* Product page � make main image square on mobile */
@media (max-width: 768px) {
  body.product-page .product-gallery .main-image {
    position: relative;
    width: 100%;
    border: 1px solid var(--border-gray);
    overflow: hidden;
  }
  /* Fallback to create a square box even without aspect-ratio support */
  body.product-page .product-gallery .main-image::before {
    content: "";
    display: block;
    padding-top: 100%; /* square */
  }
  body.product-page .product-gallery .main-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;  /* crops to square without distortion */
  }
}