/* ================================================================
   SOKONI — Mobile-First Layout Fix  (mobile.css)
   Included by all hub pages to ensure excellent phone display.
   Breakpoints: 480px (small phones), 600px (phones), 768px (phablets)
================================================================ */

/* ── PREVENT HORIZONTAL SCROLL EVERYWHERE ── */
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* ── BETTER TAP TARGETS ── */
button, a, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── GLOBAL BODY PADDING BOTTOM for fixed bottom nav ── */
body { padding-bottom: max(80px, env(safe-area-inset-bottom, 80px)); }

/* ════════════════════════════════════════
   PHONE  ≤ 600px
════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── Sticky Navbars ── */
  .bk-nav, .fd-nav, .sv-nav, .hc-nav {
    padding: 10px 14px;
    gap: 8px;
  }
  .bk-nav-logo, .fd-nav-logo, .sv-nav-logo, .hc-nav-logo { height: 30px; }
  .bk-nav-right, .fd-nav-right, .sv-nav-right, .hc-nav-right { gap: 6px; }

  /* Shrink nav link text on phones */
  .bk-nav-link i, .fd-nav-link i, .sv-nav-link i, .hc-nav-link i { margin-right: 0; }
  .bk-nav-link, .fd-nav-link, .sv-nav-link, .hc-nav-link {
    padding: 7px 10px;
    font-size: 11px;
  }

  /* ── Hero Sections ── */
  .bk-hero, .fd-hero { padding: 28px 16px 24px; }
  .sv-hero, .hc-hero { padding: 28px 16px 24px; }
  .bk-hero h1, .fd-hero h1 { font-size: clamp(20px, 6vw, 26px); }
  .sv-hero h1, .hc-hero h1 { font-size: clamp(20px, 6vw, 26px); }
  .bk-hero p, .fd-hero p { font-size: 13px; margin-bottom: 16px; }
  .bk-hero-stats { gap: 16px; }
  .bk-stat-num { font-size: 18px; }

  /* Search bars: stack vertically */
  .bk-search-bar, .fd-search-row, .hc-search-bar, .sv-search-bar {
    flex-direction: column !important;
    gap: 8px !important;
    max-width: 100% !important;
  }
  .bk-search-btn, .fd-search-btn, .hc-search-btn, .sv-search-btn {
    width: 100% !important;
    padding: 13px !important;
  }
  .bk-search-bar input, .fd-search-row input,
  .hc-search-bar input, .sv-search-bar input {
    width: 100% !important;
  }

  /* ── Quick Action Tiles ── */
  .qa-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 6px !important;
  }
  .qa-tile { padding: 10px 4px !important; }
  .qa-tile .qa-icon { font-size: 20px !important; margin-bottom: 5px !important; }
  .qa-tile .qa-label { font-size: 8px !important; line-height: 1.2; }

  /* ── Tabs: horizontal scroll, no wrap ── */
  .bk-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
    gap: 6px !important;
    margin: 16px 0 14px !important;
  }
  .bk-tabs::-webkit-scrollbar { display: none; }
  .bk-tab {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  .sv-cats {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .sv-cats::-webkit-scrollbar { display: none; }
  .fd-cuisine-row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .fd-cuisine-row::-webkit-scrollbar { display: none; }

  /* ── All card grids → 1 column ── */
  .bank-grid, .sacco-grid, .inv-grid,
  .hub-grid, .mpesa-steps,
  .promo-row, .chama-invest-grid, .dl-grid {
    grid-template-columns: 1fr !important;
  }

  /* Insurance → 1 col */
  .ins-grid { grid-template-columns: 1fr !important; }

  /* ── Loan Calculator ── */
  .calc-grid { grid-template-columns: 1fr !important; }
  .calc-result {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Form grids → single col ── */
  .g2 { grid-template-columns: 1fr !important; }

  /* ── Alert Banners ── */
  .alert-banner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .alert-btn { width: 100% !important; text-align: center !important; }
  .alert-icon { font-size: 28px !important; }

  /* ── Bank Cards ── */
  .bank-card { padding: 16px 14px !important; }
  .bank-card-top { gap: 10px !important; }
  .bank-logo-circle { width: 44px !important; height: 44px !important; font-size: 20px !important; }
  .bank-name { font-size: 14px !important; }
  .bank-apply-btn { padding: 11px !important; }

  /* ── SACCO Cards ── */
  .sacco-card, .ins-card, .inv-card { padding: 16px 14px !important; }

  /* ── Floating Cart (food page) ── */
  .float-cart {
    left: 12px !important;
    right: 12px !important;
    bottom: 74px !important;
    transform: none !important;
    min-width: unset !important;
    width: calc(100% - 24px) !important;
    border-radius: 16px !important;
  }
  .float-cart:hover { transform: none !important; }

  /* ── Restaurant Cards ── */
  .rest-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .rest-cover, .rest-cover-emoji { height: 120px !important; }
  .rest-name { font-size: 13px !important; }
  .rest-meta { gap: 6px !important; font-size: 10px !important; }
  .rest-tags { gap: 4px !important; }
  .rest-tag { font-size: 9px !important; padding: 1px 6px !important; }
  .rest-order-btn { font-size: 12px !important; padding: 9px !important; }

  /* ── Restaurant Modal ── */
  .rest-modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .rest-modal {
    border-radius: 20px 20px 0 0 !important;
    min-height: 85vh !important;
    max-height: 95vh !important;
    overflow-y: auto !important;
  }
  .rest-modal-cover, .rest-modal-cover-emoji {
    height: 140px !important;
    border-radius: 20px 20px 0 0 !important;
  }
  .rest-modal-name { font-size: 16px !important; }
  .cat-tabs-modal { gap: 6px !important; padding: 10px 14px 8px !important; }
  .cat-tab-m { padding: 6px 10px !important; font-size: 11px !important; }
  .menu-item { flex-direction: row !important; gap: 10px !important; }
  .menu-item-emoji, .menu-item-img {
    width: 64px !important;
    height: 64px !important;
    font-size: 28px !important;
    flex-shrink: 0 !important;
  }
  .menu-item-name { font-size: 13px !important; }
  .menu-item-desc { font-size: 10px !important; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .menu-item-price { font-size: 14px !important; }
  .add-btn { padding: 7px 10px !important; font-size: 11px !important; }

  /* ── Application Modal ── */
  .modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .modal-box {
    border-radius: 22px 22px 0 0 !important;
    max-height: 94vh !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 16px !important;
  }

  /* ── Forex Table ── */
  #forexRatesGrid table { font-size: 11px !important; }
  #forexRatesGrid th, #forexRatesGrid td { padding: 8px 6px !important; }

  /* ── Hub CTA Banners ── */
  .sv-cta { flex-direction: column !important; text-align: center !important; padding: 20px 16px !important; }
  .sv-cta-btn { width: 100% !important; text-align: center !important; }

  /* ── Section headings ── */
  .bk-section-h, .fd-section-h, .sv-section-h, .hc-section-h {
    font-size: 13px !important;
    margin: 20px 0 12px !important;
  }

  /* ── Body padding ── */
  .bk-body, .fd-body, .sv-body, .hc-body {
    padding: 16px 14px 70px !important;
  }

  /* ── M-Pesa steps ── */
  .mpesa-steps { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .mpesa-step { padding: 14px !important; }
  .step-title { font-size: 12px !important; }
  .step-desc { font-size: 10px !important; }

  /* ── Promo cards ── */
  .promo-card { padding: 12px 14px !important; }
  .promo-card .pc-icon { font-size: 26px !important; }
  .promo-card h4 { font-size: 12px !important; }
  .promo-card p { font-size: 10px !important; }

  /* ── Bottom Nav ── */
  .bottom-nav {
    padding: 10px 0 env(safe-area-inset-bottom, 8px) !important;
  }
  .bnav-item { min-width: 44px !important; font-size: 9px !important; }
  .bnav-item i { font-size: 20px !important; }

  /* ── Mogo / Digital loan inline grids ── */
  [style*="grid-template-columns:repeat(auto-fill,minmax(200px"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns:repeat(auto-fill,minmax(170px"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ════════════════════════════════════════
   VERY SMALL PHONES  ≤ 380px
════════════════════════════════════════ */
@media (max-width: 380px) {

  /* Restaurant cards → single col */
  .rest-grid { grid-template-columns: 1fr !important; }

  /* Quick action: 4 per row */
  .qa-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .qa-tile .qa-label { display: none !important; }

  /* Promo cards → 1 col */
  .promo-row { grid-template-columns: 1fr !important; }

  /* Calc result → 2 cols */
  .calc-result { grid-template-columns: 1fr 1fr !important; }

  /* M-Pesa steps → 1 col */
  .mpesa-steps { grid-template-columns: 1fr !important; }

  /* Nav: icon only */
  .bk-nav-link, .fd-nav-link, .sv-nav-link, .hc-nav-link {
    padding: 7px 8px !important;
    font-size: 0 !important; /* hide text */
  }
  .bk-nav-link i, .fd-nav-link i, .sv-nav-link i, .hc-nav-link i {
    font-size: 15px !important;
  }
}

/* ════════════════════════════════════════
   PHABLETS / LARGE PHONES  601–768px
════════════════════════════════════════ */
@media (min-width: 601px) and (max-width: 768px) {

  /* 2-col grids on phablets */
  .bank-grid, .sacco-grid, .ins-grid, .inv-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Restaurant cards 2-col */
  .rest-grid { grid-template-columns: 1fr 1fr !important; }

  /* Tabs scrollable */
  .bk-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  .bk-tabs::-webkit-scrollbar { display: none; }

  .bk-body, .fd-body { padding-left: 18px !important; padding-right: 18px !important; }
}

/* ════════════════════════════════════════
   INDEX.HTML — HOMEPAGE MOBILE FIXES
════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Category cards grid */
  .categories { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .cat-card-premium {
    padding: 14px 10px !important;
    border-radius: 14px !important;
    min-height: 90px !important;
  }
  .ccp-icon { font-size: 28px !important; }
  .ccp-info h3 { font-size: 11px !important; }
  .ccp-info p { font-size: 9px !important; display: none; }

  /* Hub cards on homepage */
  [style*="grid-template-columns:repeat(auto-fill,minmax(240px"] {
    grid-template-columns: 1fr !important;
  }

  /* Products grid — 3 columns on homepage too */
  .products-grid { grid-template-columns: repeat(3, 1fr) !important; padding: 5px 7px 80px !important; gap: 5px !important; }
  .product-card { border-radius: 8px !important; }
  .product-card .card-title { font-size: 10px !important; }
  .product-card .card-price { font-size: 11px !important; }

  /* Flash sale grid */
  .flash-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Hero */
  .hero-section { padding: 28px 16px 20px !important; }
  .hero-title { font-size: clamp(22px, 7vw, 32px) !important; }
  .hero-sub { font-size: 13px !important; }
  .hero-btns { flex-direction: column !important; gap: 8px !important; }
  .hero-btns a, .hero-btns button { width: 100% !important; text-align: center !important; }

  /* Navbar on homepage */
  .navbar { padding: 10px 14px !important; }
  .search-bar { max-width: calc(100vw - 160px) !important; }

  /* Section titles */
  .section-title h2 { font-size: 16px !important; }
  .section-sub { font-size: 11px !important; }

  /* Community / tools strip */
  [style*="display:flex;gap:10px;flex-wrap:wrap"] a[style*="min-width:150px"] {
    min-width: calc(50% - 5px) !important;
    flex: unset !important;
    font-size: 12px !important;
    padding: 10px 12px !important;
  }
}

/* ════════════════════════════════════════
   CATEGORY.HTML MOBILE FIXES
════════════════════════════════════════ */
@media (max-width: 600px) {
  .cat-page-header { padding: 24px 16px 16px !important; }
  .cat-page-icon { font-size: 36px !important; }
  .cat-page-header h1 { font-size: 20px !important; }
  .cat-nav-pills { gap: 6px !important; overflow-x: auto !important; flex-wrap: nowrap !important; -ms-overflow-style: none; scrollbar-width: none; }
  .cat-nav-pills::-webkit-scrollbar { display: none; }
  .cat-pill { flex-shrink: 0 !important; font-size: 11px !important; padding: 6px 12px !important; }
  .cat-sort-bar { padding: 10px 14px !important; gap: 6px !important; flex-wrap: wrap !important; }
  .cat-filter-btn { padding: 7px 12px !important; font-size: 12px !important; }
}

/* ════════════════════════════════════════
   SELLER / PROFILE / MESSAGES FIXES
════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Messages page */
  .messages-page { padding: 0 !important; }
  .convo-preview { max-width: 140px !important; }

  /* Profile page */
  .profile-page, .seller-page { padding: 16px 14px 80px !important; }

  /* Invoice / track pages */
  .track-page { padding: 16px 14px 80px !important; }
}

/* ════════════════════════════════════════
   FOOD.HTML — EXTRA MOBILE POLISH
════════════════════════════════════════ */
@media (max-width: 600px) {
  .fd-hero::before { display: none !important; }
  .fd-hero-stats { gap: 10px !important; }
  .fd-hs strong { font-size: 13px !important; }
  .fd-hs { font-size: 11px !important; }
}

/* ════════════════════════════════════════
   BANKING.HTML — EXTRA MOBILE POLISH
════════════════════════════════════════ */
@media (max-width: 600px) {
  .bk-hero::before { display: none; }
  .calc-box { padding: 16px !important; }
  .calc-result-val { font-size: 17px !important; }
  .calc-result-lbl { font-size: 9px !important; }
  .calc-result-box { padding: 10px !important; }

  /* Chama reg form */
  #chamaRegForm { padding: 16px !important; }
}

/* ════════════════════════════════════════
   SERVICES.HTML — PROVIDER CARDS
════════════════════════════════════════ */
@media (max-width: 600px) {
  .sv-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .sv-card-img { height: 110px !important; }
  .sv-card-emoji { height: 110px !important; font-size: 44px !important; }
  .sv-card-body { padding: 10px 12px !important; }
  .sv-card-title { font-size: 12px !important; }
  .sv-book-btn { font-size: 11px !important; padding: 8px !important; }

  /* Provider cards */
  .pv-card { padding: 14px !important; }
  .pv-avatar { width: 44px !important; height: 44px !important; font-size: 18px !important; }
  .pv-name { font-size: 13px !important; }
  .pv-rate { font-size: 13px !important; }
  .pv-book-btn { font-size: 12px !important; padding: 9px !important; }

  /* Provider register form */
  #pane-dashboard [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════
   HEALTHCARE / ENTERTAINMENT HUBS
════════════════════════════════════════ */
@media (max-width: 600px) {
  .hc-grid { grid-template-columns: 1fr !important; }
  .hc-cats { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .hc-cat-tile { padding: 14px 8px !important; border-radius: 12px !important; }
  .hc-cat-tile .ct-icon { font-size: 22px !important; }
  .hc-cat-tile .ct-label { font-size: 10px !important; }
}

/* ════════════════════════════════════════
   UTILITY — Touch-friendly scrolling
════════════════════════════════════════ */
.bk-tabs, .sv-cats, .fd-cuisine-row, .cat-nav-pills,
.cat-tabs-modal, .rest-modal, .modal-box {
  -webkit-overflow-scrolling: touch;
}

/* Smooth scroll for modals */
.rest-modal, .modal-box { scroll-behavior: smooth; }

/* Fix images not stretching */
img { max-width: 100%; height: auto; }

/* Ensure inputs are readable on mobile (prevent iOS zoom) */
input, select, textarea {
  font-size: max(16px, 1em) !important;
}
@media (min-width: 601px) {
  input, select, textarea { font-size: 13px !important; }
}

/* ════════════════════════════════════════════════════
   COMPACT PRODUCT GRID — All screens
   Goal: Shopee/TikTok-shop density — see more, scroll less
════════════════════════════════════════════════════ */

/* ── Base override: smaller min-width, tighter gap ── */
.products-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 10px !important;
  padding: 10px 12px 80px !important;
}

/* Card: slimmer radius, no overflow on images */
.product-card {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Image: always square, no fixed height */
.product-img-wrap img,
.product-card > img {
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center top !important;
}

/* Body: tight */
.product-body { padding: 8px 0 2px !important; }
.product-body .product-top-row,
.product-body .product-name,
.product-body .price,
.product-body .price-row,
.product-body .view-counter {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Name: 2-line clamp */
.product-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-bottom: 4px !important;
  white-space: normal !important;
}

/* Price: tight */
.price { font-size: 13px !important; padding: 0 0 4px !important; }
.price-row { padding-bottom: 2px !important; margin-bottom: 0 !important; }

/* Hide space-consuming elements */
.product-desc-text { display: none !important; }
.product-rating-row { display: none !important; }
.view-counter { display: none !important; }
.dist-badge { display: none !important; }
.demand-badge { display: none !important; }
.wholesale-badge { display: none !important; }

/* ── Desktop  901–1400px: 5 columns ── */
@media (min-width: 901px) and (max-width: 1400px) {
  .products-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 10px !important;
    padding: 10px 20px 30px !important;
  }
}

/* ── Wide  > 1400px: 6 columns ── */
@media (min-width: 1401px) {
  .products-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 12px !important;
    padding: 10px 28px 30px !important;
  }
}

/* ── Tablet  601–900px: 4 columns ── */
@media (min-width: 601px) and (max-width: 900px) {
  .products-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    padding: 8px 12px 80px !important;
  }
  .product-name { font-size: 12px !important; }
  .price { font-size: 12px !important; }
}

/* ── Phone  ≤ 600px: 3 columns ── */
@media (max-width: 600px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
    padding: 5px 7px 80px !important;
  }

  .product-card { border-radius: 8px !important; }

  .product-body { padding: 5px 0 2px !important; }
  .product-body .product-top-row,
  .product-body .product-name,
  .product-body .price,
  .product-body .price-row,
  .product-body .view-counter {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .product-name {
    font-size: 10px !important;
    margin-bottom: 1px !important;
    -webkit-line-clamp: 2 !important;
  }

  .price {
    font-size: 11px !important;
    font-weight: 900 !important;
    color: #71ff00 !important;
    padding: 0 0 2px !important;
  }

  /* Compare button: hidden on phone */
  .compare-icon-btn { display: none !important; }

  /* Badges: tiny */
  .product-badge { font-size: 7px !important; padding: 2px 5px !important; top: 4px !important; right: 4px !important; }
  .adult-card-badge { font-size: 7px !important; padding: 2px 4px !important; top: 4px !important; left: 4px !important; }
  .kebs-badge { font-size: 7px !important; padding: 1px 4px !important; }
  .verified-owner-badge { display: none !important; }

  /* Action buttons: ultra-compact icons */
  .product-body > div[style*="display:flex"][style*="padding"] {
    padding: 3px 5px 6px !important;
    gap: 3px !important;
  }
  .product-body > div[style*="display:flex"][style*="padding"] button {
    font-size: 12px !important;
    padding: 5px 3px !important;
    border-radius: 6px !important;
    min-width: 0 !important;
  }
  /* Hide secondary "Share / Offer" row on phone */
  .product-body > div[style*="display:flex"][style*="padding"]:nth-of-type(2) {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════
   COMPACT SELLER / STORE CARDS
════════════════════════════════════════════════════ */

/* Base: tighter grid */
.seller-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 10px !important;
  padding: 10px 16px 20px !important;
}

/* Card: tighter */
.seller-card {
  padding: 14px 10px 12px !important;
  border-radius: 14px !important;
}

/* Avatar: smaller */
.seller-avatar {
  width: 56px !important;
  height: 56px !important;
  margin-bottom: 8px !important;
}

.seller-card h3 { font-size: 12px !important; margin-bottom: 2px !important; }
.seller-location-tag { font-size: 10px !important; margin: 1px 0 4px !important; }
.seller-stars { font-size: 11px !important; margin-bottom: 2px !important; }
.seller-rating-text { font-size: 10px !important; }
.seller-tag { font-size: 9px !important; padding: 2px 6px !important; }
.seller-visit-btn { font-size: 11px !important; padding: 7px 10px !important; }

/* Desktop sellers: 5 per row */
@media (min-width: 901px) {
  .seller-container {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 12px !important;
    padding: 10px 24px 24px !important;
  }
}

/* Tablet sellers: 4 per row */
@media (min-width: 601px) and (max-width: 900px) {
  .seller-container { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }
}

/* Phone sellers: 3 per row — compact avatar-style */
@media (max-width: 600px) {
  .seller-container {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 6px 10px 20px !important;
  }
  .seller-card { padding: 10px 6px 10px !important; border-radius: 10px !important; text-align: center !important; }
  .seller-avatar { width: 44px !important; height: 44px !important; margin: 0 auto 6px !important; }
  .seller-card h3 { font-size: 10px !important; line-height: 1.3 !important; }
  .seller-location-tag { font-size: 9px !important; }
  .seller-stars,
  .seller-rating-text,
  .seller-tag { display: none !important; }
  .seller-visit-btn {
    font-size: 9px !important;
    padding: 5px 8px !important;
    margin-top: 5px !important;
    width: 100% !important;
  }
}

/* ════════════════════════════════════════════════════
   TRENDING / PTREND GRID — Also compact
════════════════════════════════════════════════════ */
.ptrend-grid {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
  gap: 8px !important;
  padding: 0 12px 16px !important;
}

/* ── PHONE: 10×11 ultra-compact — 110 products per screen ── */
@media (max-width: 600px) {
  /* ID+class selector beats compact-grid.css's plain ID rule */
  #productsContainer.ptrend-grid {
    grid-template-columns: repeat(10, 1fr) !important;
    gap: 1px !important;
    padding: 0 0 8px !important;
  }

  /* Cards: no radius, no hover lift, borderless */
  #productsContainer.ptrend-grid .product-card {
    border-radius: 3px !important;
    border: none !important;
    background: rgba(255,255,255,0.04) !important;
    overflow: hidden !important;
  }
  #productsContainer.ptrend-grid .product-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  #productsContainer.ptrend-grid .product-card:active {
    opacity: 0.75 !important;
  }

  /* Image: fixed 38px — drives the 10×11 math */
  #productsContainer.ptrend-grid .product-img-wrap {
    height: 38px !important;
    aspect-ratio: unset !important;
    border-radius: 0 !important;
    position: relative !important;
  }

  /* Price overlay on image — neon green pill */
  #productsContainer.ptrend-grid .product-img-wrap::before {
    content: attr(data-price) !important;
    position: absolute !important;
    bottom: 2px !important; left: 0 !important; right: 0 !important;
    text-align: center !important;
    font-size: 7px !important; font-weight: 900 !important;
    color: #71ff00 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9) !important;
    z-index: 2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }

  /* Body: name only */
  #productsContainer.ptrend-grid .product-body {
    padding: 1px 2px 1px !important;
    gap: 0 !important;
  }

  /* Name: 7px, single line */
  #productsContainer.ptrend-grid .product-name {
    font-size: 7px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
    max-height: 1.2em !important;
    margin: 0 !important;
    color: rgba(255,255,255,0.8) !important;
  }

  /* Hide all non-essential elements */
  #productsContainer.ptrend-grid .price,
  #productsContainer.ptrend-grid .product-top-row,
  #productsContainer.ptrend-grid .rating-stars,
  #productsContainer.ptrend-grid .loc-tag,
  #productsContainer.ptrend-grid .product-actions,
  #productsContainer.ptrend-grid .add-to-cart-btn,
  #productsContainer.ptrend-grid .wishlist-btn,
  #productsContainer.ptrend-grid .product-footer,
  #productsContainer.ptrend-grid .product-badge-row,
  #productsContainer.ptrend-grid .seller-tag,
  #productsContainer.ptrend-grid .stock-bar-wrap {
    display: none !important;
  }
}

/* ── VERY SMALL PHONES ≤ 360px: same 10 cols, tighter image ── */
@media (max-width: 360px) {
  #productsContainer.ptrend-grid .product-img-wrap { height: 34px !important; }
  #productsContainer.ptrend-grid .product-name { font-size: 6px !important; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .ptrend-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

@media (min-width: 901px) {
  .ptrend-grid { grid-template-columns: repeat(5, 1fr) !important; }
}

/* ════════════════════════════════════════════════════
   CATEGORY GRID in category.html — also 3 on phone
════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  #catProductsGrid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
    padding: 0 7px 80px !important;
  }
  #catProductsGrid .product-card img {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  #catProductsGrid { grid-template-columns: repeat(4, 1fr) !important; }
}

@media (min-width: 901px) {
  #catProductsGrid { grid-template-columns: repeat(5, 1fr) !important; }
}