/* =====================================================================
   Kodai Hills Spot — responsive layer
   ---------------------------------------------------------------------
   The pages were written phone-first. This file leaves phones exactly as
   they are and adds layouts for tablets (768px+), laptops (1024px+) and
   large monitors (1440px+).

   Every rule is scoped by a body class (pg-home, pg-cart, ...) because
   the pages reuse class names like .card and .header with different
   styles. Linked LAST in each page's <head> so it wins over the inline
   styles. Do not load it before them.
   ===================================================================== */

html { -webkit-text-size-adjust: 100%; }
body { min-width: 320px; }

/* Never let long words / emails push a page sideways on small phones */
.pg-home, .pg-products, .pg-cart, .pg-checkout, .pg-orders, .pg-profile,
.pg-edit, .pg-track { overflow-wrap: anywhere; }

/* Keyboard users get a visible focus ring everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(46,125,50,.45);
  outline-offset: 2px;
}

/* Very small phones (<=360px): tighten a little */
@media (max-width: 360px) {
  .pg-home .products, .pg-products .products { gap: 8px; }
  .pg-home .card, .pg-products .card { padding: 8px; }
  .pg-home .new-price, .pg-products .price { font-size: 17px; }
  .pg-home .btn, .pg-home .buy-btn, .pg-products .add-btn,
  .pg-products button.buy-btn { font-size: 13px; padding: 10px 6px; }
}

/* =====================================================================
   TABLET  (>= 768px)
   ===================================================================== */
@media (min-width: 768px) {

  /* ---------- HOME ---------- */
  .pg-home .navbar {
    padding-left:  max(20px, calc((100% - 1240px) / 2 + 20px));
    padding-right: max(20px, calc((100% - 1240px) / 2 + 20px));
  }
  .pg-home .home-layout { max-width: 1240px; margin: 0 auto; width: 100%; padding: 0 4px; }
  .pg-home .hero    { padding: 16px 16px 6px; }
  .pg-home .search, .pg-home .category-section, .pg-home .section { padding-left: 16px; padding-right: 16px; }
  .pg-home .slider  { height: clamp(180px, 26vw, 260px); border-radius: 22px; }
  .pg-home .search input { font-size: 16px; padding: 14px 18px; }
  .pg-home .products {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
  }
  .pg-home .card img { height: clamp(140px, 18vw, 190px); }
  .pg-home .card h3  { font-size: 16px; }
  .pg-home .title    { font-size: 24px; }

  /* ---------- PRODUCTS ---------- */
  .pg-products { max-width: 1240px; margin: 0 auto; padding: 24px 24px 100px; }
  .pg-products .cart-btn { right: max(20px, calc((100vw - 1240px) / 2 + 24px)); top: 24px; }
  .pg-products .products {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
  }
  .pg-products .card-img { height: clamp(150px, 20vw, 210px); }
  .pg-products .filter-btn { width: auto; min-width: 220px; padding: 13px 24px; }
  .pg-products .search { max-width: 640px; display: block; }

  /* ---------- CART ---------- */
  .pg-cart { max-width: 820px; margin: 0 auto; padding-bottom: 150px; }
  .pg-cart .summary {
    left: 0; right: 0; margin: 0 auto; width: min(820px, 100%);
    border-radius: 20px 20px 0 0;
  }
  .pg-cart .card img { width: 120px; height: 120px; }

  /* ---------- CHECKOUT ---------- */
  .pg-checkout .co-grid { max-width: 760px; margin: 0 auto; padding: 0 4px 110px; }
  .pg-checkout .header {
    padding-left:  max(16px, calc((100% - 760px) / 2));
    padding-right: max(16px, calc((100% - 760px) / 2));
  }
  .pg-checkout .bottom {
    left: 0; right: 0; margin: 0 auto; width: min(760px, 100%);
    border-radius: 18px 18px 0 0;
  }
  /* Address form: phone + alt phone, and state + district, sit side by side.
     checkout.js shows/hides the form with an inline display style, so the
     grid only applies while it is shown (inline "display: block"). */
  .pg-checkout #addressForm[style*="display: block"] {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px;
  }
  .pg-checkout #addressForm input[id="name"],
  .pg-checkout #addressForm input[id="email"],
  .pg-checkout #addressForm input[id="area"],
  .pg-checkout #addressForm input[id="street"],
  .pg-checkout #addressForm input[id="pincode"] { grid-column: 1 / -1; }
  .pg-checkout #addressForm input,
  .pg-checkout #addressForm .customSelect { margin: 0; }

  /* ---------- ORDERS ---------- */
  .pg-orders { max-width: 1100px; margin: 0 auto; padding: 24px 24px 100px; }
  .pg-orders .popup-overlay, .pg-orders .review-overlay { align-items: center; }
  .pg-orders .popup-sheet {
    max-width: 580px; border-radius: 26px; max-height: 90vh;
    animation: none;
  }
  .pg-orders .review-box { max-width: 480px; margin: 0 auto; }

  /* ---------- PROFILE ---------- */
  .pg-profile { max-width: 680px; margin: 0 auto; padding: 24px 24px 110px; }

  /* ---------- EDIT PROFILE ---------- */
  .pg-edit { display: flex; align-items: flex-start; justify-content: center; padding-top: 32px; }
  .pg-edit > .card { width: 100%; max-width: 640px; }

  /* ---------- ABOUT ---------- */
  .pg-about .card, .pg-about > .back-btn {
    max-width: 880px; margin-left: auto; margin-right: auto;
  }
  .pg-about > .back-btn { width: calc(100% - 32px); }

  /* ---------- POLICY PAGES ---------- */
  .pg-policy .container { max-width: 820px; padding: 0 28px; font-size: 15.5px; }

  /* ---------- TRACK ORDER ---------- */
  .pg-track .wrap { max-width: 720px; padding-top: 32px; }

  /* ---------- BOTTOM NAV: floating centered bar ---------- */
  .pg-home .bottom-nav, .pg-products .bottom-nav,
  .pg-orders .bottom-nav, .pg-profile .bottom-nav {
    left: 0; right: 0; bottom: 14px; margin: 0 auto;
    width: min(640px, calc(100% - 32px));
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,.18);
  }
  .pg-home .bottom-nav a, .pg-products .bottom-nav a,
  .pg-orders .bottom-nav a, .pg-profile .bottom-nav a { padding: 2px 14px; }
  .pg-home .bottom-nav a:hover, .pg-products .bottom-nav a:hover,
  .pg-orders .bottom-nav a:hover, .pg-profile .bottom-nav a:hover { color: #2e7d32; }

  /* ---------- ADMIN (shared column) ---------- */
  .pg-a-home, .pg-a-orders, .pg-a-analytics, .pg-a-banners, .pg-a-products,
  .pg-a-add, .pg-a-pending, .pg-a-suggest, .pg-a-complaints, .pg-a-users {
    max-width: 1100px; margin: 0 auto; padding-left: 20px; padding-right: 20px;
  }
}

/* =====================================================================
   LAPTOP  (>= 1024px)
   ===================================================================== */
@media (min-width: 1024px) {

  /* ---------- HOME: small banner on the LEFT, products fill the RIGHT ---------- */
  .pg-home .home-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    padding: 8px 8px 0;
  }
  .pg-home .hero {
    position: sticky; top: 112px;           /* stays visible while products scroll */
    padding: 16px 0 16px 8px; margin: 0; max-width: none;
  }
  .pg-home .slider {
    height: 420px;                         /* tall, narrow poster - not a full-width strip */
    border-radius: 20px;
  }
  .pg-home .home-main { min-width: 0; }
  .pg-home .search { padding-top: 16px; }
  .pg-home .search input { max-width: 520px; display: block; }
  .pg-home .category-scroll { flex-wrap: wrap; overflow: visible; gap: 10px; }
  .pg-home .category-card { transition: background .2s, color .2s, transform .2s; }
  .pg-home .category-card:hover { transform: translateY(-2px); }
  .pg-home .products {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px;
  }
  .pg-home .card img { height: 180px; }
  .pg-products .products {
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 22px;
  }
  .pg-products .category-scroll { flex-wrap: wrap; overflow: visible; }
  .pg-home .card, .pg-products .card { padding: 12px; }
  .pg-home .card:hover, .pg-products .card:hover { box-shadow: 0 10px 26px rgba(0,0,0,.14); }

  /* ---------- CART: items left, sticky summary right ---------- */
  .pg-cart {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: 28px; align-items: start;
    max-width: 1180px; padding: 0 24px 60px;
  }
  .pg-cart .back-container, .pg-cart .cart-header { grid-column: 1 / -1; padding-left: 0; }
  .pg-cart .back-container { padding-top: 22px; }
  .pg-cart #cartItems { grid-column: 1; padding: 0; }
  .pg-cart .summary {
    grid-column: 2; grid-row: 3;
    position: sticky; top: 24px; bottom: auto; left: auto; right: auto;
    width: auto; margin: 0; padding: 22px; border-radius: 20px;
    box-shadow: 0 6px 24px rgba(0,0,0,.1);
  }
  .pg-cart .popup-container { grid-column: 1; }

  /* ---------- CHECKOUT: form + items left, sticky summary right ---------- */
  .pg-checkout .co-grid {
    max-width: 1180px; padding: 0 24px 50px;
    display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
    column-gap: 24px; align-items: start;
  }
  .pg-checkout .header {
    padding-left:  max(24px, calc((100% - 1180px) / 2 + 24px));
    padding-right: max(24px, calc((100% - 1180px) / 2 + 24px));
  }
  .pg-checkout .co-side { position: sticky; top: 90px; }
  .pg-checkout .bottom {
    position: static; width: auto; margin: 0; padding: 0; background: none;
    box-shadow: none; border-radius: 0;
  }
  .pg-checkout .place-btn { width: 100%; }

  /* ---------- ORDERS: two columns of cards ---------- */
  .pg-orders #orders {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 16px;
  }
  .pg-orders .order-card { margin-bottom: 0; }
  .pg-orders .order-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.14); transform: translateY(-2px); }
  .pg-orders .header { display: grid; grid-template-columns: 1fr 240px; gap: 0 14px; align-items: center; }
  .pg-orders .header h1 { grid-column: 1 / -1; }

  /* ---------- ABOUT ---------- */
  .pg-about .hero { padding-top: 64px; padding-bottom: 76px; }

  /* ---------- ADMIN ---------- */
  .pg-a-home .nav-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .pg-a-home .stats-row { grid-template-columns: repeat(2, 1fr); }
  .pg-a-orders #allOrders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: start; }
  .pg-a-orders #allOrders > .status-section-header { grid-column: 1 / -1; }
  .pg-a-orders #allOrders > .order-card { margin-bottom: 0; }
  .pg-a-orders .popup-overlay { align-items: center; }
  .pg-a-orders .popup-sheet { max-width: 520px; border-radius: 24px; }
  .pg-a-analytics .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .pg-a-products #products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
  .pg-a-products .product-card { margin-bottom: 0; }
  .pg-a-products .popup-overlay { align-items: center; }
  .pg-a-users #users { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: start; }
  .pg-a-users .user-card { margin-bottom: 0; }
  .pg-a-banners, .pg-a-add { max-width: 860px; }
  .pg-a-pending, .pg-a-suggest, .pg-a-complaints { max-width: 900px; }
}

/* =====================================================================
   LARGE MONITORS  (>= 1440px)
   ===================================================================== */
@media (min-width: 1440px) {
  .pg-home .navbar { padding-left: calc((100% - 1320px) / 2 + 20px); padding-right: calc((100% - 1320px) / 2 + 20px); }
  .pg-home .home-layout { max-width: 1320px; grid-template-columns: 340px minmax(0, 1fr); }
  .pg-home .slider { height: 460px; }
  .pg-products { max-width: 1320px; }
  .pg-products .cart-btn { right: calc((100vw - 1320px) / 2 + 24px); }
  .pg-home .products { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .pg-products .products { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
  .pg-cart, .pg-checkout .co-grid { max-width: 1240px; }
  .pg-a-products { max-width: 1240px; }
  .pg-a-products #products { grid-template-columns: repeat(4, 1fr); }
}

/* Respect people who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}