/* Cart mobile tweaks (<=480px)
   Works even if /scripts/cart.js injects its own styles —
   using slightly higher specificity so these still win. */
@media (max-width: 480px) {
  :root { --pad-x: clamp(12px, 4vw, 16px); }

  /* Drawer fills the screen; no awkward borders */
  html .cart-drawer {
    width: 100vw;
    min-width: auto;
    max-width: none;
    border-left: 0;
    border-radius: 0;
  }

  /* Tighter padding on head/body/foot, with safe-area */
  html .cart-head,
  html .cart-foot { padding: 14px var(--pad-x); }
  html .cart-body {
    padding: 12px var(--pad-x);
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden; /* prevent sideways scroll */
  }

  /* Reflow each line item to 2 columns + price on its own row */
  html .cart-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "img meta"
      "price price";
    align-items: start;
    gap: 10px 12px;
    padding: 12px 0;
    overflow-x: hidden;
  }
  html .cart-item img {
    grid-area: img;
    width: 56px; height: 56px; border-radius: 8px; object-fit: cover;
  }
  html .cart-item__meta {
    grid-area: meta;
    display: grid;
    gap: 6px;
    min-width: 0; /* allow wrapping */
  }
  html .cart-item__title {
    font-size: 13.5px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  html .cart-item__qty {
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; /* keeps Remove on the same block */
  }
  html .qty-btn {
    width: 36px; height: 32px; border-radius: 8px;
    font-size: 18px; line-height: 1;
  }
  html .qty-input {
    width: 50px; height: 32px;
    font-size: 14px; text-align: center;
  }
  html .remove-btn {
    margin-left: auto; /* push to the right edge */
    font-size: 13px; font-weight: 700;
  }

  /* Price gets its own full-width row, aligned right */
  html .cart-item__price {
    grid-area: price;
    justify-self: end;
    font-weight: 800;
    font-size: 14px;
  }

  /* Buttons & header sizing tuned for thumb use */
  html .cart-title { font-size: 16px; }
  html .cart-close { width: 36px; height: 36px; }
  html .cart-checkout { padding: 14px 16px; font-size: 15px; border-radius: 1px; }

  /* Badge remains readable on smaller icons */
  html .cart-badge {
    top: -6px; right: -6px;
    min-width: 20px; height: 20px; font-size: 12px;
  }

  /* Utility in case .muted wasn’t defined elsewhere */
  html .muted { color: var(--muted, #667085); }
}
@media (max-width: 480px) {
  :root { --pad-x: clamp(12px, 4vw, 16px); }

  /* ...keep your other rules... */

  /* Footer: add extra bottom padding with safe-area support */
  html .cart-foot {
    /* Fallback for browsers without env() */
    padding: 14px var(--pad-x) 20px;
    /* If env() exists, this safely wins */
    padding: 14px var(--pad-x) calc(max(20px, env(safe-area-inset-bottom)) + 8px);
  }

  /* (Optional) Small visual gap above the button */
  html .cart-checkout {
    margin-top: 8px;
  }
}
@media (max-width: 480px) {
  /* Use the *dynamic* viewport so the drawer matches the visible screen */
  @supports (height: 100dvh) {
    html .cart-drawer { height: 100dvh; }
  }

  /* Lift footer above any bottom UI (gesture bar / overlays) */
  html .cart-foot {
    /* fallback if env()/JS var not available */
    padding: 14px var(--pad-x) 44px;
    /* iOS safe area + Android computed inset (set by JS below) */
    padding: 14px var(--pad-x)
             calc(max(44px, env(safe-area-inset-bottom), var(--android-safe-bottom, 0px)) + 8px);
  }

  /* tiny gap above button for breathing room */
  html .cart-checkout { margin-top: 8px; }
}
