/* ===========================================================
   AmpleCart — responsive.css
   Breakpoints tested: 320 · 360 · 375 · 390 · 414 · 768 · 1024 · 1366 · 1920
   Mobile-first rules live in style.css; these are the overrides.
   =========================================================== */

/* ---------- Large desktop (1366px and up) ---------- */
@media (min-width: 1440px) {
  .container { max-width: 1360px; }
  .hero { padding: 4rem 0 4.4rem; }
  .hero-stack { height: 380px; }
}

@media (min-width: 1920px) {
  .container { max-width: 1440px; }
  body { font-size: 16px; }
}

/* ---------- Below 1200px ---------- */
@media (max-width: 1199.98px) {
  .listing-grid { grid-template-columns: 240px minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
  .footer-grid .footer-col:last-child { grid-column: 2 / -1; }
}

/* ===========================================================
   TABLET AND BELOW — under 992px
   The desktop sidebar becomes an offcanvas, bottom nav appears.
   =========================================================== */
@media (max-width: 991.98px) {
  :root { --header-h: 64px; }

  body { padding-bottom: 74px; } /* clearance for the bottom nav */
  .bottom-nav { display: grid; }
  .to-top { bottom: 96px; right: 14px; }

  /* Header collapses to logo + search + cart */
  .header-inner { gap: 10px; min-height: var(--header-h); }
  .brand-text { display: none; }
  .header-search { max-width: none; }
  .search-input { height: 42px; padding-right: 16px; }
  .search-submit { display: none; }

  /* 3 products per row on tablet */
  .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }

  .listing-grid { grid-template-columns: minmax(0, 1fr); }
  .filters { position: static; box-shadow: none; border: none; border-radius: 0; background: #fff; }
  .filters:not(.show):not(.offcanvas) { display: none; }
  .filters.offcanvas { width: 88vw; max-width: 340px; }

  .cart-layout { grid-template-columns: minmax(0, 1fr); }
  .checkout-layout { grid-template-columns: minmax(0, 1fr); }
  .sticky-summary { position: static; }
  .checkout-side { order: -1; } /* summary first on small screens */

  .acct-layout { grid-template-columns: minmax(0, 1fr); }
  .acct-nav { position: static; display: flex; overflow-x: auto; gap: .3rem; scrollbar-width: none; }
  .acct-nav::-webkit-scrollbar { display: none; }
  .acct-link { white-space: nowrap; }
  .acct-out { border-top: none; margin-top: 0; padding-top: .65rem; border-radius: 11px; }

  .pdp-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .pdp-highlights { grid-template-columns: 1fr 1fr; }

  .promo-row { grid-template-columns: 1fr 1fr; }
  .promo-lg { grid-column: 1 / -1; min-height: 160px; }

  .trust-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-grid .footer-col:last-child { grid-column: auto; }

  .admin-shell { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
  .admin-side { position: static; }
  .admin-side.offcanvas { width: 84vw; max-width: 300px; }
  .admin-nav { box-shadow: none; border: none; }

  .auth-grid { grid-template-columns: minmax(0, 1fr); }
  .auth-art { display: none; }

  .two-col { grid-template-columns: 1fr; }
}

/* ===========================================================
   MOBILE — under 768px
   =========================================================== */
@media (max-width: 767.98px) {
  .container { padding-inline: 14px; }

  /* 2 products per row, as specified */
  .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }

  .p-body { padding: .7rem .7rem .8rem; }

  /* Two side-by-side buttons ("Add to cart" with an icon, "Buy now")
     were splitting a roughly 170px-wide card in half — under 90px
     each, not enough room for either label, which is what "add to
     cart button all cut" was describing. Stacked instead of side by
     side, each button gets the card's full width and neither text
     needs to shrink or wrap to fit. */
  .p-actions { flex-direction: column; }
  .p-name { font-size: .85rem; }
  .p-cat { font-size: .65rem; }
  .price-now { font-size: 1rem; }
  .price-mrp { font-size: .76rem; }
  .p-save { font-size: .7rem; margin-bottom: .6rem; }
  .p-actions { grid-template-columns: 1fr; gap: .35rem; }
  .p-actions .btn { padding: .5rem .6rem; font-size: .78rem; }
  .p-wish { width: 32px; height: 32px; }

  /* At 2-per-row, a card is only ~170px wide but was still carrying a
     full-height column of content stacked on top of two full-width
     buttons — star rating, category label, a 2-line name, price, a
     save line, then both buttons one under the other. That much
     vertical content in that little width is what "thin" actually
     described: not the card's width, which is a normal 2-column
     layout, but its silhouette — tall and narrow, like a strip, once
     everything was stacked. The rest of this shortening lives in
     premium.css instead of here: this project loads style.css, then
     responsive.css, then premium.css, and premium.css's own
     (unscoped) .p-rating and .p-name rules load after this file and
     would silently win the cascade for the specific properties they
     both declare — confirmed directly in a real browser before
     settling on where this belongs, rather than assumed. */
  .p-cat { margin-bottom: .2rem; }
  .p-save { margin: .1rem 0 .55rem; }
  .p-badge { font-size: .64rem; padding: .18rem .45rem; }

  .hero { padding: 2.2rem 0 2.4rem; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .hero-title { font-size: 1.85rem; }
  .hero-sub { font-size: .95rem; margin-bottom: 1.2rem; }
  .hero-cta { gap: .5rem; }
  .hero-cta .btn { flex: 1 1 140px; }
  .hero-points { font-size: .78rem; gap: .45rem 1rem; }
  .hero-stack { height: 250px; }
  .hero-chip { width: 145px; padding: .6rem; }
  .hero-chip img { height: 84px; }
  .hc-name { font-size: .74rem; }

  .section { padding: 1.9rem 0 .4rem; }
  .section-head h2 { font-size: 1.25rem; }
  .page-title { font-size: 1.4rem; }
  .listing-head h1 { font-size: 1.35rem; }

  .cat-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
  .cat-tile { padding: .9rem .5rem; }
  .cat-icon { width: 46px; height: 46px; font-size: 1.05rem; border-radius: 15px; }
  .cat-name { font-size: .8rem; }
  .cat-count { font-size: .68rem; }

  .promo-row { grid-template-columns: 1fr; }
  .promo { min-height: 150px; padding: 1.3rem; }
  .promo h3 { font-size: 1.15rem; }

  .trust-grid { grid-template-columns: 1fr; gap: .9rem; }

  /* PDP */
  .pdp-stage img { padding: 16px; }
  .pdp-price .price-now { font-size: 1.6rem; }
  .pdp-highlights { grid-template-columns: 1fr; }
  .pdp-buy { gap: .5rem; }
  .pdp-buy .btn { min-width: 0; flex: 1 1 calc(50% - .25rem); }
  .qty-stepper { flex: 1 1 100%; justify-content: center; }
  .thumb { width: 62px; height: 62px; }
  .tab { padding: .8rem 1rem; font-size: .84rem; }
  .tab-panel { padding: 1.1rem; }
  .spec-table th { width: 130px; font-size: .8rem; }
  .spec-table th, .spec-table td { padding: .55rem .6rem; }

  /* PDP sticky bar sits above the bottom nav */
  .pdp-sticky { bottom: 66px; padding-bottom: .7rem; }
  .page-product { padding-bottom: 140px; }

  /* Cart lines become stacked cards */
  .cart-head { display: none; }
  .cart-lines { padding: .4rem .8rem .9rem; }
  .cart-line {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "product remove"
      "qty     total";
    row-gap: .7rem; padding: .95rem 0;
  }
  .cl-product { grid-area: product; }
  .cl-remove  { grid-area: remove; }
  .cl-qty     { grid-area: qty; }
  .cl-total   { grid-area: total; text-align: right; }
  .cl-price   { display: none; }
  .cl-thumb { width: 64px; height: 64px; }
  .cl-name { font-size: .87rem; }
  .cl-total::before { content: attr(data-label) ': '; font-size: .76rem; color: var(--muted); font-weight: 500; }
  .cart-foot { flex-direction: column; align-items: stretch; }
  .cart-foot .btn { width: 100%; }

  .sum-total strong { font-size: 1.3rem; }

  /* Checkout form stacks */
  .col-6, .col-4 { grid-column: span 12; }
  .co-card { padding: 1.1rem; }
  .co-title { font-size: 1rem; }
  .addr-picker { grid-template-columns: 1fr; }

  /* Account */
  .stat-row { grid-template-columns: 1fr; }
  .acct-hero { flex-direction: column; text-align: center; }
  .order-row, .order-row-wide {
    grid-template-columns: 1fr auto; gap: .5rem .8rem;
  }
  .or-items { grid-column: 1; font-size: .78rem; }
  .or-total { text-align: right; }
  .order-row .badge { justify-self: end; }
  .order-row-wide .btn { grid-column: 1 / -1; width: 100%; }

  .track { font-size: .68rem; }
  .track-dot { width: 26px; height: 26px; border-width: 2px; }
  .track-step::before { top: 12px; }

  .auth-card { padding: 1.4rem; }
  .auth-wrap { padding: 1.5rem 0 2.5rem; }

  .success-hero h1 { font-size: 1.5rem; }
  .success-tick { width: 66px; height: 66px; font-size: 1.7rem; }
  .success-actions .btn { width: 100%; }

  .err-code { font-size: 3.5rem; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .site-footer { padding: 2.2rem 0 1.2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: .5rem; }

  .toast-stack { left: 14px; right: 14px; bottom: 82px; max-width: none; }

  /* Admin */
  .adm-stats { grid-template-columns: 1fr 1fr; }
  .adm-card { padding: 1rem; }
  .map-row { grid-template-columns: 1fr; gap: .35rem; }
  .admin-top { padding: 0 .8rem; }
  .admin-body { padding-bottom: 0; }
  .admin-body .to-top { display: none; }
}

/* ---------- Small phones (414px and below) ---------- */
@media (max-width: 414px) {
  .container { padding-inline: 12px; }
  .p-grid { gap: .6rem; }
  .hero-title { font-size: 1.65rem; }
  .cat-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bn-item { font-size: .64rem; }
  .bn-item i { font-size: 1rem; }
}

/* ---------- Very small phones (360px and below) ---------- */
@media (max-width: 360px) {
  .p-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .p-body { padding: .6rem .55rem .7rem; }
  .p-name { font-size: .8rem; }
  .price-now { font-size: .95rem; }
  .p-actions .btn { font-size: .72rem; padding: .45rem .4rem; }
  .hero-title { font-size: 1.5rem; }
  .hero-cta .btn { flex: 1 1 100%; }
  .adm-stats { grid-template-columns: 1fr; }
  .pdp-sticky .btn { font-size: .78rem; padding: .6rem .4rem; }
  .sticky-price strong { font-size: .95rem; }
}

/* ---------- 320px floor: nothing may overflow ---------- */
@media (max-width: 320px) {
  .container { padding-inline: 10px; }
  .brand-mark { width: 34px; height: 34px; font-size: .9rem; }
  .icon-btn { width: 38px; height: 38px; }
  .search-input { height: 38px; font-size: 16px; padding-left: 34px; }
  .search-icon { left: 12px; }
  .p-media { aspect-ratio: 4 / 3; }
  .cat-tile { padding: .75rem .4rem; }
  .qty-btn { width: 34px; }
  .qty-input { width: 38px; }
}

/* ---------- Landscape phones: shorter hero ---------- */
@media (max-width: 991.98px) and (orientation: landscape) {
  .hero { padding: 1.6rem 0 1.8rem; }
  .hero-stack { height: 200px; }
  .filters.offcanvas, .mobile-menu, .cart-drawer { max-height: 100vh; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .bottom-nav, .to-top, .offer-strip,
  .pdp-sticky, .toast-stack, .cart-drawer, .mobile-menu, .btn { display: none !important; }
  body { background: #fff; padding: 0; }
  .co-card, .acct-card, .summary-card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
}