/* css/mobile-compact.css — Mobile compact overrides for PrintPalette */
:root {
  --nav-h: 60px;
}
img { max-width: 100%; height: auto; }

/* ── Footer responsive ── */
@media (max-width: 900px) {
  .pp-footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .pp-footer-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; margin-bottom: 1.6rem !important; }
  .pp-footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: .45rem !important; padding-top: 1rem !important; }
}

@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  body { font-size: 14px; }

  /* Container — proper side padding */
  .pp-container { padding-left: 1rem !important; padding-right: 1rem !important; }
  .pp-section { padding: 2.5rem 0 !important; }

  /* Hero stats */
  #hero-content p br { display: none; }
  #hero-content > div[style*='display:flex;justify-content:center;gap:3rem'] { gap: 1.25rem !important; padding-top: 1.2rem !important; }
  .xt-stat { min-width: calc(50% - .75rem); }
  .xt-stat-num { font-size: 1rem !important; }
  .xt-stat-label { font-size: .68rem !important; }

  /* Product grid */
  .pp-cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .75rem !important; }
  #product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .75rem !important; }

  /* Cards */
  .product-card { border-radius: 14px !important; }
  .product-card img { height: 132px !important; }

  /* Modal bottom sheet */
  #product-modal { align-items: flex-end !important; padding: 0 !important; }
  #product-modal > div {
    max-width: none !important; width: 100% !important;
    max-height: 88vh !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 1rem !important;
    bottom: 0; left: 0; right: 0;
    position: fixed !important;
  }

  /* Footer */
  footer .pp-container { padding-top: 2rem !important; padding-bottom: 2rem !important; }

  /* Forms */
  .pp-input { font-size: 16px !important; padding: .72rem .85rem !important; min-height: 42px !important; }
  .btn-primary, .btn-secondary { padding: .7rem .95rem !important; font-size: .8rem !important; }
  .btn-ghost { font-size: .78rem !important; }

  /* Tailwind utility overrides */
  .text-4xl { font-size: 1.8rem !important; }
  .text-3xl { font-size: 1.45rem !important; }
  .text-2xl { font-size: 1.25rem !important; }
  .text-xl { font-size: 1.05rem !important; }
  .p-10, .p-8, .p-6, .p-5 { padding: 1rem !important; }
  .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .py-12 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .mb-10 { margin-bottom: 1.5rem !important; }
  .mb-8 { margin-bottom: 1.25rem !important; }
  .gap-6 { gap: 1rem !important; }
  .gap-5 { gap: .9rem !important; }
  .gap-4 { gap: .75rem !important; }
  .grid.md\:grid-cols-2, .grid.lg\:grid-cols-2, .grid.sm\:grid-cols-2 { grid-template-columns: 1fr !important; }
  .grid.md\:grid-cols-3 { grid-template-columns: 1fr !important; }
  table { font-size: .78rem; }

  /* Ticker */
  .xt-ticker-item { font-size: .68rem !important; }

  /* Toast */
  #pp-toast-container { left: 1rem !important; right: 1rem !important; bottom: 1rem !important; }
  .pp-toast { max-width: none !important; }
}

@media (max-width: 420px) {
  .pp-container { padding-left: .85rem !important; padding-right: .85rem !important; }
  .pp-cat-grid { gap: .65rem !important; }
  .product-card img { height: 122px !important; }
}


/* ── Mobile horizontal category scroller ── */
@media (max-width: 767px) {
  .pp-cat-section { margin-bottom: 2rem !important; }
  .pp-cat-products {
    display: flex !important;
    overflow-x: auto;
    gap: .85rem;
    padding: .15rem .05rem .5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pp-cat-products::-webkit-scrollbar { display: none; }
  .pp-cat-products .product-card {
    min-width: 76%;
    max-width: 76%;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .pp-flat-grid {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:.75rem !important;
  }
  .pp-floating-cart {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    z-index: 420;
    text-decoration:none;
  }
  .pp-floating-cart-badge {
    position:absolute;
    top:-3px;
    right:-2px;
    min-width:18px;
    height:18px;
    border-radius:999px;
    background:#fff;
    color:var(--color-accent);
    font-size:.65rem;
    font-weight:700;
    display:none;
    align-items:center;
    justify-content:center;
    padding:0 .25rem;
  }
  #pp-back-top {
    bottom: 5.2rem !important;
    right: 1rem !important;
  }
}

/* ── Shared SVG branding ─────────────────────────────────────── */
footer img[src$="assets/logo.svg"],
#sidebar img[src$="assets/logo.svg"],
body > .auth-shell img[src$="assets/logo.svg"] {
  display:block;
  width:auto;
  object-fit:contain;
}
html[data-theme="dark"] footer img[src$="assets/logo.svg"],
html[data-theme="dark"] #sidebar img[src$="assets/logo.svg"],
html[data-theme="dark"] body > .auth-shell img[src$="assets/logo.svg"] {
  filter: brightness(0) invert(1);
}
html[data-theme="light"] footer img[src$="assets/logo.svg"],
html[data-theme="light"] #sidebar img[src$="assets/logo.svg"],
html[data-theme="light"] body > .auth-shell img[src$="assets/logo.svg"] {
  filter: none;
}