/* ==========================================================================
   responsive.css — media query overrides

   All breakpoint rules live here, consolidated so you can tune the whole
   responsive layout without hunting through framework/global/custom.
   Loaded LAST so it overrides everything.
   ========================================================================== */

/* ──────────────────────────────────────────────────────────
   Breakpoint: 900px
   ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    /* Home grids */
    .prod-grid     { grid-template-columns: repeat(2, 1fr); }
    .cat-grid      { grid-template-columns: 1fr; }
    .hero__features{ grid-template-columns: 1fr; }

    /* Cart */
    .cart-grid     { grid-template-columns: 1fr; }
    .cart-summary  { position: static; }
    .cart-item     { grid-template-columns: 60px 1fr auto; gap: var(--space-3); }
    .cart-item__qty-form,
    .cart-item__total,
    .cart-item__remove { grid-column: 2 / -1; justify-self: start; }

    /* Checkout */
    .co-grid       { grid-template-columns: 1fr; }
    .co-summary    { position: static; }
    .co-item       { grid-template-columns: 60px 1fr; gap: var(--space-3); }
    .co-item__qty,
    .co-item__total{ grid-column: 2; }

    /* Account order */
    .ord-grid      { grid-template-columns: 1fr; }
    .ord-summary   { position: static; }
}

/* ──────────────────────────────────────────────────────────
   Breakpoint: 768px
   ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Product detail */
    .pdp-grid           { grid-template-columns: 1fr; gap: var(--space-6); }

    /* Reviews */
    .reviews__summary   { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ──────────────────────────────────────────────────────────
   Breakpoint: 700px
   ────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    /* Account header */
    .acc-stats  { grid-template-columns: 1fr; }
    .acc-header { flex-direction: column; }
}