/* ============================================================================
   ShinyVerse — MOBILE EXPERIENCE LAYER (Clean Collector)
   Loaded AFTER style.css. Every rule lives inside @media (max-width: 991.98px)
   so desktop (>=992px) is untouched. Matches Bootstrap navbar-expand-lg.
   ============================================================================ */

@media (max-width: 991.98px) {

  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-tap-highlight-color: transparent; overflow-x: hidden; }

  /* ---------------- navbar: ONE compact row (logo · search · burger) ---------------- */
  .theme-nav > .container-fluid {
    padding: .5rem var(--gutter);
    gap: .5rem;
    min-height: 60px;
    /* container keeps flex-wrap:wrap (Bootstrap default) so ONLY the
       collapse drawer wraps below — the top-row items shrink instead */
  }
  .theme-nav .navbar-collapse { flex-basis: 100%; }
  .theme-nav .navbar-brand { margin: 0; flex-shrink: 0; }
  .brand-logo { height: 36px; }
  .sv-brand-name { font-size: 1rem; }

  .nav-search-sm {
    height: 42px;
    flex: 1 1 0;
    min-width: 0;
    margin: 0 !important;
  }
  .nav-search-sm .form-control { min-width: 0; width: 100%; flex: 1 1 0; }
  .theme-nav .navbar-toggler { flex-shrink: 0; padding: .4rem .55rem; }

  /* mobile drawer: clean white sheet */
  .theme-nav .navbar-collapse {
    background: var(--bg);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: 1rem 1.1rem;
    margin-top: .75rem;
    box-shadow: var(--shadow-pop);
  }
  .theme-nav .nav-link { min-height: 44px; display: flex; align-items: center; font-size: .95rem; }
  .theme-nav .nav-link::after { display: none; }
  .theme-nav .nav-link.sv-nav-active { color: var(--accent-ink); }
  .sv-nav-right { border-top: 1px solid var(--hairline); margin-top: .5rem; padding-top: .5rem; }
  .sv-icon-btn { width: auto; border-radius: var(--r-sm); justify-content: flex-start; }
  .sv-cart-count { position: static; margin-left: .4rem; }
  .sv-register-link { justify-content: center; margin-top: .25rem; }

  /* ---------------- forms: prevent iOS zoom ---------------- */
  input.form-control, select.form-select, textarea.form-control, textarea {
    font-size: 16px;
    min-height: 44px;
  }
  textarea.form-control { min-height: 110px; }

  /* ---------------- buttons ---------------- */
  .btn { min-height: 46px; }
  .btn-lg, .d-grid .btn { width: 100%; }

  /* ---------------- layout rhythm ---------------- */
  main#page-content { padding-top: .5rem; }
  .sv-section { padding: 40px 0; }
  .sv-page-head { padding-top: 1.5rem; }

  /* product grid: 2-up on phones, 1-up tiny */
  .browse-grid { gap: 1rem .8rem; }
  .sv-product-card, .browse-card-container { padding: .75rem .75rem 1rem; }

  /* momentum scrolling for any horizontal strips */
  .sv-home-strip, .card-track { -webkit-overflow-scrolling: touch; }

  /* ---------------- footer ---------------- */
  .sv-footer-bottom { flex-direction: column; align-items: flex-start; gap: .35rem; }
}

@media (max-width: 575.98px) {
  .brand-logo { height: 34px; }

  /* stacked actions in a narrow 2-up card; both fill the width */
  .sv-product-actions { grid-template-columns: 1fr; gap: .4rem; }
  .sv-product-actions .btn { width: 100%; min-height: 42px; font-size: .8rem; }

  /* tighter card chrome so two fit comfortably side by side */
  .sv-product-card, .browse-card-container { padding: .6rem .6rem .75rem; }
  .sv-product-media, .browse-card-img { margin-bottom: .7rem; }
  .sv-product-name { font-size: .88rem; }
  .sv-product-name a {
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* keep titles to 2 lines so cards stay even */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .new-price, .sv-price-main { font-size: 1rem; }
  .sv-brand-mini-badge { font-size: .55rem; padding: .18rem .4rem; }
  .sv-product-info, .bp-card-meta { font-size: .74rem; }
}