/* ====================================================================
   BSS — Mobile App Shell (drop-in)
   Activa estilo "app nativa" solo en pantallas <=768px.
   Desktop NO se ve afectado.
   ==================================================================== */

/* Bottom nav oculto por default (siempre se inyecta pero solo visible en mobile) */
.bss-bnav { display: none; }

@media (max-width: 768px) {

  /* --- Variables específicas mobile (caen sobre :root del page) --- */
  :root {
    --bss-app-bg: #F8F4F4;
    --bss-app-surface: #FFFFFF;
    --bss-app-pink: #D4A5A5;
    --bss-app-pink-dark: #B87878;
    --bss-app-ink: #1F1714;
    --bss-app-mute: #8A7373;
    --bss-app-line: rgba(184,120,120,.12);
    --bss-app-shadow: 0 2px 12px rgba(135,68,68,.06);
    --bss-bottom-nav-h: 64px;
    --bss-top-nav-h: 56px;
  }

  html, body { background: var(--bss-app-bg) !important; }
  body {
    /* deja espacio para bottom-nav (incluye safe area iOS) */
    padding-bottom: calc(var(--bss-bottom-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* === Ocultar elementos desktop que no encajan en app shell === */
  .breadcrumb,
  .footer,
  .mobile-toggle,
  .header .mobile-toggle,
  .header-action span,
  .page-header .page-subtitle { display: none !important; }

  /* === Header móvil reducido y limpio === */
  .header {
    position: sticky !important;
    top: 0;
    z-index: 95;
    background: var(--bss-app-surface) !important;
    border-bottom: 1px solid var(--bss-app-line);
    box-shadow: none !important;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .header .container { padding: 0 14px !important; }
  .header-main {
    padding: 8px 0 !important;
    min-height: var(--bss-top-nav-h);
    gap: 10px !important;
  }
  .logo-svg, .header .logo svg { height: 30px !important; }
  .header-actions { gap: 6px !important; }
  .header-action {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #FFF6F6;
    align-items: center !important;
    justify-content: center;
    gap: 0 !important;
    color: var(--bss-app-pink-dark) !important;
  }
  .header-action i { font-size: 16px !important; }
  .header-action .badge {
    top: -2px !important; right: -2px !important;
    background: var(--bss-app-pink-dark) !important;
    border: 2px solid var(--bss-app-surface);
    font-size: 9px !important;
    width: 16px !important; height: 16px !important;
  }

  /* === Page header compacto === */
  .page-header { padding: 14px 0 6px !important; background: transparent !important; }
  .page-title {
    font-family: var(--font-display, 'Playfair Display', serif) !important;
    font-size: 24px !important;
    margin-bottom: 0 !important;
    padding: 0 14px;
    color: var(--bss-app-ink) !important;
  }

  /* === Barra de buscador estilo app === */
  .bss-app-search {
    margin: 10px 14px 4px;
    display: flex; align-items: center;
    background: var(--bss-app-surface);
    border-radius: 14px;
    padding: 11px 14px;
    border: 1px solid var(--bss-app-line);
    box-shadow: var(--bss-app-shadow);
  }
  .bss-app-search i { color: var(--bss-app-mute); margin-right: 10px; font-size: 14px; }
  .bss-app-search input {
    border: 0; outline: none; background: transparent;
    flex: 1; font: inherit; font-size: 14px; color: var(--bss-app-ink);
  }
  .bss-app-search input::placeholder { color: var(--bss-app-mute); }

  /* === Buscador existente — promoverlo a barra full-width === */
  .filters-right .search-wrap,
  .search-wrap {
    width: 100% !important;
    margin-bottom: 0 !important;
  }
  .filters-right .search-wrap input,
  .search-wrap input {
    width: 100% !important;
    padding: 12px 38px 12px 38px !important;
    border-radius: 14px !important;
    border: 1px solid var(--bss-app-line) !important;
    background: var(--bss-app-surface) !important;
    box-shadow: var(--bss-app-shadow);
    font-size: 14px !important;
  }
  .filters-right .view-toggle { display: none !important; }
  /* Mover search bar arriba del bar de chips */
  .filters-bar .filters-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .filters-bar .filters-right {
    order: -1 !important;
    width: 100% !important;
    padding: 0 14px !important;
    flex-wrap: wrap !important;
  }
  .filters-bar .filters-right > .search-wrap { order: -2 !important; flex: 1 1 100% !important; }
  .filters-bar .filters-right > .sort-select { flex: 1 1 100%; }

  /* === Chips de categoría / filtros — horizontal scroll sticky === */
  .filters-bar {
    position: sticky !important;
    top: calc(var(--bss-top-nav-h) + env(safe-area-inset-top, 0px)) !important;
    background: var(--bss-app-bg) !important;
    border-bottom: 0 !important;
    padding: 10px 0 8px !important;
    z-index: 90;
  }
  .filters-bar .container { padding: 0 !important; }
  .filters-inner { gap: 8px !important; padding: 0 14px !important; }
  .filters-left {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 0 !important;
    margin: 0 -14px;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .filters-left::-webkit-scrollbar { display: none; }
  .filter-btn {
    flex-shrink: 0;
    padding: 9px 16px !important;
    background: var(--bss-app-surface) !important;
    border: 1px solid var(--bss-app-line) !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--bss-app-mute) !important;
    box-shadow: var(--bss-app-shadow);
    transition: transform .08s ease, background .15s ease;
  }
  .filter-btn:active { transform: scale(.96); }
  .filter-btn.active {
    background: var(--bss-app-pink-dark) !important;
    color: #fff !important;
    border-color: var(--bss-app-pink-dark) !important;
  }
  .filters-right { padding: 0 14px !important; gap: 8px !important; }
  .sort-select, .filters-right select {
    padding: 8px 32px 8px 12px !important;
    border-radius: 12px !important;
    border: 1px solid var(--bss-app-line) !important;
    background: var(--bss-app-surface) !important;
    font-size: 13px !important;
    color: var(--bss-app-ink) !important;
  }

  /* === Grid productos: 2 columnas estilo cards app === */
  .products-section { padding: 8px 0 24px !important; }
  .products-section .container { padding: 0 12px !important; }
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .product-card {
    border-radius: 18px !important;
    overflow: hidden;
    background: var(--bss-app-surface) !important;
    box-shadow: var(--bss-app-shadow) !important;
    border: 1px solid var(--bss-app-line);
    display: flex; flex-direction: column;
  }
  .product-card .product-image,
  .product-card .product-img-wrap,
  .product-card .product-image-wrap,
  .product-card a img,
  .product-card .product-image img,
  .product-card .product-image-wrap img,
  .mayoreo-product-card .mayoreo-product-image,
  .mayoreo-product-card .mayoreo-product-image img {
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    background: #FBF6F6;
    width: 100% !important; height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 6px;
  }
  .product-card .product-image-wrap,
  .mayoreo-product-card .mayoreo-product-image {
    /* override min-height fijo de mayoreo.html original */
    min-height: 0 !important;
  }
  .product-info { padding: 10px 12px 12px !important; }
  .product-name {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--bss-app-ink) !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 32px;
    margin-bottom: 6px !important;
  }
  .product-brand, .product-meta {
    font-size: 10.5px !important;
    color: var(--bss-app-mute) !important;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 4px !important;
  }
  .product-price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--bss-app-pink-dark) !important;
  }
  .product-actions {
    margin-top: 10px !important;
    gap: 6px !important;
  }
  .btn-add-cart {
    padding: 10px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    background: var(--bss-app-pink-dark) !important;
    color: #fff !important;
    width: 100% !important;
    justify-content: center !important;
    min-height: 40px !important;
  }
  .product-wishlist {
    width: 38px !important; height: 38px !important;
    background: #fff !important;
    backdrop-filter: blur(8px);
    border-radius: 50% !important;
    top: 8px !important; right: 8px !important;
    box-shadow: 0 2px 10px rgba(135,68,68,.15);
    border: 1.5px solid var(--bss-app-line);
    color: var(--bss-app-pink-dark) !important;
  }
  .product-wishlist i { font-size: 16px !important; }
  .product-wishlist.active {
    background: var(--bss-app-pink-dark) !important;
    border-color: var(--bss-app-pink-dark) !important;
    color: #fff !important;
  }

  /* Botón ❤ en páginas individuales (al lado del Add to Cart) */
  .wishlist-btn {
    min-width: 56px !important;
    min-height: 56px !important;
    border-radius: 16px !important;
    background: #FFF6F6 !important;
    border: 2px solid var(--bss-app-pink) !important;
    color: var(--bss-app-pink-dark) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform .1s ease;
  }
  .wishlist-btn:active { transform: scale(.94); }
  .wishlist-btn i {
    font-size: 22px !important;
    color: var(--bss-app-pink-dark) !important;
  }
  .wishlist-btn.active {
    background: var(--bss-app-pink-dark) !important;
    border-color: var(--bss-app-pink-dark) !important;
  }
  .wishlist-btn.active i { color: #fff !important; }

  /* === BOTTOM NAVIGATION fija estilo app === */
  .bss-bnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--bss-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--bss-app-surface);
    border-top: 1px solid var(--bss-app-line);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    z-index: 1000;
    box-shadow: 0 -2px 18px rgba(135,68,68,.05);
  }
  .bss-bnav a {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--bss-app-mute);
    font-size: 10.5px;
    font-weight: 500;
    position: relative;
    transition: color .15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .bss-bnav a i { font-size: 19px; transition: transform .15s ease; }
  .bss-bnav a:active i { transform: scale(.9); }
  .bss-bnav a.bss-active { color: var(--bss-app-pink-dark); }
  .bss-bnav a.bss-active::before {
    content: ''; position: absolute; top: 6px;
    width: 28px; height: 3px; border-radius: 3px;
    background: var(--bss-app-pink-dark);
  }
  .bss-bnav .bss-bnav-badge {
    position: absolute;
    top: 6px;
    right: calc(50% - 18px);
    background: var(--bss-app-pink-dark);
    color: #fff;
    font-size: 9px; font-weight: 700;
    border-radius: 999px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bss-app-surface);
  }

  /* === Mobile drawer existente (compatibilidad) === */
  .mobile-nav { padding-bottom: calc(var(--bss-bottom-nav-h) + 20px) !important; }

  /* === Sticky CTA bottom (para páginas de producto) === */
  .bss-app-cta {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--bss-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--bss-app-surface);
    border-top: 1px solid var(--bss-app-line);
    z-index: 990;
    display: flex; gap: 10px;
    box-shadow: 0 -2px 18px rgba(135,68,68,.05);
  }
  .bss-app-cta .bss-app-cta-price {
    flex-shrink: 0;
    display: flex; flex-direction: column; justify-content: center;
    min-width: 90px;
  }
  .bss-app-cta .bss-app-cta-price small { font-size: 10px; color: var(--bss-app-mute); }
  .bss-app-cta .bss-app-cta-price b { font-size: 18px; color: var(--bss-app-ink); font-weight: 700; }
  .bss-app-cta button, .bss-app-cta .btn {
    flex: 1;
    background: var(--bss-app-pink-dark);
    color: #fff;
    border: 0;
    border-radius: 14px;
    font-weight: 600;
    font-size: 15px;
    padding: 12px;
    min-height: 48px;
  }

  /* === Botón back genérico estilo app === */
  .bss-app-back {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: #FFF6F6;
    color: var(--bss-app-pink-dark);
    text-decoration: none;
    border: 0;
  }
  .bss-app-back i { font-size: 16px; }

  /* === Filtros bar — esconder "products-found" en mobile (menos clutter) === */
  .products-found, .results-count { display: none !important; }

  /* === Page-header banner descuentos (lo dejamos pero compacto) === */
  .page-header > .container > div[style*="border-radius:16px"] {
    margin: 12px 14px 0 !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }
  .page-header > .container > div[style*="border-radius:16px"] > div[style*="display:flex"] {
    gap: 8px !important;
  }
  .page-header > .container > div[style*="border-radius:16px"] > div > div {
    min-width: 0 !important;
    flex: 1 1 calc(50% - 4px) !important;
    padding: 10px 8px !important;
  }
}