/* ==========================================================================
   Kwinty Mall - Storefront responsive layer (tablet + mobile)
   Loads AFTER store.css; contains only @media overrides. Safe / additive.
   Breakpoints: tablet <=1024px, mobile <=640px
   ========================================================================== */

/* ---------- TABLET (<=1024px) ---------- */
@media (max-width: 1024px) {
  /* Promo banners: 2 across on tablet */
  .promo-grid, .promos, .promo-banners, .promo-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Hero: let the category sidebar hide, hero carousel go full width */
  .cat-sidebar { display: none !important; }
  .hero-row, .hero-wrap { grid-template-columns: 1fr !important; }

  /* Footer: 2 columns on tablet */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
}

/* ---------- MOBILE (<=640px) ---------- */
@media (max-width: 640px) {
  /* Promo banners: 1 per row on mobile */
  .promo-grid, .promos, .promo-banners, .promo-row {
    grid-template-columns: 1fr !important;
  }

  /* Tighten section spacing + headings */
  .section { margin: 18px 0 !important; }
  .section-head h2 { font-size: 18px !important; }
  .wrap { padding-left: 12px !important; padding-right: 12px !important; }

  /* Product card text a touch smaller so 2-up fits */
  .catalog-card .cc-name, .product-card .p-name { font-size: 13px !important; }
  .catalog-card .cc-price, .product-card .p-price { font-size: 14px !important; }

  /* Footer: single column, centered-ish */
  .footer-grid { grid-template-columns: 1fr !important; gap: 22px !important; padding: 28px 16px 20px !important; }

  /* Brand chips wrap nicely */
  .brand-chips, .trust-badges { flex-wrap: wrap !important; }

  /* Trust row -> tidy 2x2 chips with icon tiles (was a cramped single column) */
  .trust-row{grid-template-columns:1fr 1fr !important;gap:10px !important;padding:12px !important;border-radius:14px !important}
  .trust-item{flex-direction:column;align-items:flex-start;gap:8px;background:#faf9ff;border:1px solid #efecfa;border-radius:12px;padding:12px}
  .trust-item i{font-size:22px;color:#e88600;background:#fff4e6;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center}
  .trust-item strong{font-size:13.5px}
  .trust-item span{font-size:12px;color:#7a7a8e}

  /* Account page hub stacks */
  .acct-stats { grid-template-columns: 1fr 1fr 1fr !important; }
  .acct-hero { flex-direction: row !important; }

  /* Leave room for the fixed bottom nav */
  body { padding-bottom: 64px !important; }
}

/* ---------- Bottom nav visibility ---------- */
.km-bottomnav { display: none; }
@media (max-width: 1024px) {
  .km-bottomnav { display: flex; }
}

/* ---------- Bottom nav styling ---------- */
.km-bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:900;background:#fff;border-top:1px solid #eee;
  box-shadow:0 -3px 14px rgba(0,0,0,.06);justify-content:space-around;align-items:stretch;height:60px;padding-bottom:env(safe-area-inset-bottom,0)}
.kbn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-decoration:none;color:#8a8a97;font-size:10.5px;font-weight:600;transition:color .15s}
.kbn-item i{font-size:22px}
.kbn-item:active,.kbn-item:hover{color:#fe9900}
.kbn-ico-wrap{position:relative;display:inline-flex}
.kbn-badge{position:absolute;top:-6px;right:-9px;background:#e74c3c;color:#fff;font-size:9px;font-weight:800;
  min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.kbn-search i{background:linear-gradient(120deg,#fe9900,#ffb340);color:#fff;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-top:-14px;box-shadow:0 4px 12px rgba(254,153,0,.4)}

/* ==========================================================================
   Mobile header + drawer (shown <=1024px). Desktop header hidden there.
   ========================================================================== */
.m-header, .m-drawer, .m-drawer-ov { display: none; }

@media (max-width: 1024px) {
  /* hide the desktop topstrip + full header */
  .topstrip, .store-header { display: none !important; }

  /* show the mobile header (two rows: logo, then burger/search/account) */
  .m-header{display:block;position:sticky;top:0;z-index:800;background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.06);padding:8px 12px 10px}
  .m-header-logo{display:flex;justify-content:center;padding:4px 0 8px}
  .m-logo img{height:34px;width:auto;object-fit:contain}
  .m-logo span{font-weight:800;font-size:20px;color:var(--orange,#fe9900)}
  .m-logo span span{color:var(--kwinty-blue,#16b6e6)}
  .m-header-row{display:flex;align-items:center;gap:10px}
  .m-burger{flex-shrink:0;width:42px;height:42px;border:0;background:#f4f4f7;border-radius:11px;
    color:#333;font-size:22px;display:flex;align-items:center;justify-content:center;cursor:pointer}
  .m-search{flex:1;display:flex;align-items:center;gap:8px;background:#f4f4f7;border-radius:11px;padding:0 12px;height:42px}
  .m-search i{color:#999;font-size:18px}
  .m-search input{flex:1;border:0;background:none;outline:0;font-size:14px;height:100%}
  .m-acct{flex-shrink:0;width:42px;height:42px;border-radius:11px;background:linear-gradient(120deg,var(--orange,#fe9900),#ffb340);
    color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;text-decoration:none}

  /* drawer overlay + panel */
  .m-drawer-ov{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:998;opacity:0;visibility:hidden;transition:.25s}
  .m-drawer-ov.open{opacity:1;visibility:visible}
  .m-drawer{display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;width:78%;max-width:320px;
    background:#fff;z-index:999;transform:translateX(-100%);transition:transform .25s ease;box-shadow:4px 0 24px rgba(0,0,0,.15)}
  .m-drawer.open{transform:translateX(0)}
  .m-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 14px;border-bottom:1px solid #eee}
  .m-drawer-brand{font-weight:800;font-size:19px;color:var(--orange,#fe9900)}
  .m-drawer-brand span{color:var(--kwinty-blue,#16b6e6)}
  .m-drawer-x{border:0;background:#f4f4f7;width:36px;height:36px;border-radius:9px;font-size:20px;color:#555;cursor:pointer}
  .m-drawer-nav{flex:1;overflow-y:auto;padding:10px 0}
  .m-drawer-hi{padding:12px 20px;font-weight:800;color:#26263a;font-size:16px;display:flex;align-items:center;gap:8px}
  .m-drawer-hi i{color:var(--orange,#fe9900);font-size:22px}
  .m-drawer-nav a{display:flex;align-items:center;gap:13px;padding:14px 20px;color:#333;text-decoration:none;font-size:15px;font-weight:600}
  .m-drawer-nav a i{font-size:21px;color:#8a8a97;width:22px;text-align:center}
  .m-drawer-nav a:active{background:#fff5e6}
  .m-drawer-logout{color:#e74c3c !important;border-top:1px solid #f0f0f0;margin-top:8px}
  .m-drawer-logout i{color:#e74c3c !important}
  .m-drawer-deliver{padding:14px 20px;border-top:1px solid #eee;font-size:13px;color:#777;display:flex;align-items:center;gap:7px}
  .m-drawer-deliver i{color:var(--orange,#fe9900)}
}



/* ==========================================================================
   products.php top bar: back row · category breadcrumb · price filter
   (shows on all screen sizes; stacks cleanly on mobile)
   ========================================================================== */
.pcat-topbar{display:flex;flex-direction:column;gap:12px;margin:14px 0 18px}
.pcat-backrow{display:flex;gap:10px;align-items:center}
.pcat-backrow .pcat-bk-home{margin-left:auto}
.pcat-bk{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:30px;font-size:13.5px;
  font-weight:700;text-decoration:none;background:#fff;border:1.5px solid #eee;color:#555;transition:.15s}
.pcat-bk:hover{border-color:var(--orange,#fe9900);color:var(--orange,#fe9900)}
.pcat-bk-home{background:#fff5e6;border-color:#ffe0b3;color:var(--orange,#fe9900)}
.pcat-bk-home:hover{background:var(--orange,#fe9900);color:#fff;border-color:var(--orange,#fe9900)}

.pcat-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:#8a8a97}
.pcat-crumb a{display:inline-flex;align-items:center;gap:5px;color:var(--orange,#fe9900);text-decoration:none;font-weight:600}
.pcat-crumb a:hover{text-decoration:underline}
.pcat-crumb i{font-size:15px;color:#c4c4d0}
.pcat-crumb a i{color:var(--orange,#fe9900)}
.pcat-crumb-cur{font-weight:700;color:#26263a}

.pcat-price{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid #eee;
  border-radius:12px;padding:8px 10px;width:fit-content;max-width:100%}
.pcat-price-lbl{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:#555;padding:0 4px}
.pcat-price-lbl i{color:var(--orange,#fe9900);font-size:16px}
.pcat-price input{width:92px;padding:9px 11px;border:1px solid #e2e0ea;border-radius:8px;font-size:13.5px}
.pcat-price input:focus{outline:0;border-color:var(--orange,#fe9900)}
.pcat-dash{color:#aaa}
.pcat-go{padding:9px 20px !important}
@media(max-width:520px){
  .pcat-price{width:100%}
  .pcat-price input{flex:1;width:auto;min-width:0}
}

/* ==========================================================================
   Bottom-nav Categories slide-up sheet (with sub-categories)
   ========================================================================== */
.kbn-catbtn{background:none;border:0;cursor:pointer;font-family:inherit}
.kbn-cats-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:901;opacity:0;visibility:hidden;transition:.25s}
.kbn-cats-ov.open{opacity:1;visibility:visible}
.kbn-cats{position:fixed;left:0;right:0;bottom:0;z-index:902;background:#fff;border-radius:18px 18px 0 0;
  transform:translateY(100%);transition:transform .28s ease;max-height:78vh;display:flex;flex-direction:column;
  box-shadow:0 -6px 24px rgba(0,0,0,.18)}
.kbn-cats.open{transform:translateY(0)}
.kbn-cats-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #eee;flex-shrink:0}
.kbn-cats-head strong{display:flex;align-items:center;gap:9px;font-size:16px;color:#26263a}
.kbn-cats-head strong i{color:var(--orange,#fe9900);font-size:21px}
.kbn-cats-head button{border:0;background:#f4f4f7;width:34px;height:34px;border-radius:9px;font-size:19px;color:#555;cursor:pointer}
.kbn-cats-list{overflow-y:auto;padding:8px 0 calc(10px + env(safe-area-inset-bottom,0))}

.kbn-cat-group{border-bottom:1px solid #f2f2f5}
.kbn-cat-main{display:flex;align-items:center;gap:12px;padding:13px 18px;color:#26263a;text-decoration:none;font-size:15px;font-weight:700}
.kbn-cat-main:active{background:#fff5e6}
.kbn-cat-ico{width:38px;height:38px;border-radius:10px;background:#fff5e6;color:var(--orange,#fe9900);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kbn-cat-ico i{font-size:20px}
.kbn-cat-name{flex:1;min-width:0}
.kbn-cat-chev{color:#ccc;font-size:18px}

/* sub-categories: horizontal wrap chips under the parent */
.kbn-subs{display:flex;flex-wrap:wrap;gap:7px;padding:2px 18px 14px 68px}
.kbn-sub{display:inline-flex;align-items:center;gap:6px;background:#f5f5f8;border-radius:18px;padding:7px 13px;
  font-size:12.5px;font-weight:600;color:#555;text-decoration:none}
.kbn-sub:active{background:#fff5e6;color:var(--orange,#fe9900)}
.kbn-sub-ico{display:inline-flex;align-items:center}
.kbn-sub-ico i{font-size:14px;color:var(--kwinty-blue,#16b6e6)}

.kbn-cats-all{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;color:var(--orange,#fe9900);
  font-weight:800;text-decoration:none;font-size:15px}
.kbn-cats-all i{font-size:19px}

/* category icon IMAGES (uploaded) inside the bottom-nav sheet */
.kbn-cat-ico img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}
.kbn-sub-ico img{width:18px;height:18px;object-fit:cover;border-radius:5px;display:block}
.kbn-sub-ico{width:18px;height:18px}

/* ==========================================================================
   Catalog columns — respect Branding settings across REAL device widths.
   Your store.css switches to mobile only at <=600px, but many phones report
   601-768px and fall into the "tablet" band. These rules close that gap so
   your Branding "mobile columns" value applies on actual phones, and the
   sidebar collapses across the whole tablet range.
   Uses your --catalog-cols-* variables (from Branding) — no hardcoding.
   ========================================================================== */
@media (max-width: 1024px) {
  .catalog-layout { grid-template-columns: 1fr !important; }
  .catalog-filters { display: none !important; }
  /* flex tiling (see store.css). Force 3-up on tablet. Covers BOTH card renderers. */
  .catalog-grid { gap: 14px; }
  .catalog-grid > .p-card,
  .catalog-grid > .pl-card { --cg-cols: 3; --cg-gap: 14px; }
}
@media (max-width: 768px) {
  /* Force 2-up on phones. */
  .catalog-grid { gap: 10px; }
  .catalog-grid > .p-card,
  .catalog-grid > .pl-card { --cg-cols: 2; --cg-gap: 10px; }
}

/* Bottom-nav labels: match the footer font (Times New Roman) and make them dark */
.km-bottomnav .kbn-item{color:#161626}
.km-bottomnav .kbn-item span{font-family:'Times New Roman',Times,Georgia,serif;color:#161626;font-weight:700;font-size:11.5px;letter-spacing:.2px}
.km-bottomnav .kbn-item:active span,.km-bottomnav .kbn-item:hover span{color:#fe9900}

/* Hero: use tablet/mobile image when provided, else fall back to desktop */
@media (max-width: 1024px){
  .hero-slide{background-image:var(--hero-img-t, var(--hero-img))}
}
@media (max-width: 600px){
  .hero-slide{background-image:var(--hero-img-m, var(--hero-img-t, var(--hero-img)))}
}