/* TCGStoreCR.fun V17 - Mobile First UX
   Mejora de lectura en celulares sin crear una segunda web.
   Mantiene la versión de escritorio, pero en pantallas pequeñas activa:
   - menú compacto
   - navegación inferior rápida
   - filtros plegables
   - tarjetas más limpias y botones táctiles
*/
:root{
  --mobile-bottom-nav-h: 72px;
}

.mobileMenuToggle,
.mobileFilterToggle,
.mobileBottomNav{display:none;}

@media (max-width: 860px){
  html{scroll-behavior:smooth;}
  body{padding-bottom:calc(var(--mobile-bottom-nav-h) + env(safe-area-inset-bottom,0px));}
  .container{width:min(100% - 22px, var(--max));}

  .top-contact-bar{font-size:.82rem;}
  .top-contact-bar__inner{gap:8px;overflow-x:auto;white-space:nowrap;padding:7px 0;scrollbar-width:none;}
  .top-contact-bar__inner::-webkit-scrollbar{display:none;}
  .contact-label{display:none;}

  .topbar{top:0;background:rgba(5,8,16,.94);}
  .topbar__inner{min-height:64px;gap:10px;}
  .brand{min-height:64px;padding-left:70px;min-width:0;flex:1;}
  .brand__logo{width:62px;max-height:52px;}
  .brand__text strong{font-size:1rem;line-height:1;}
  .brand__text span{font-size:.72rem;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  .mobileMenuToggle{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    min-width:46px;height:44px;padding:0 12px;border-radius:14px;
    border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
    color:#fff;font-weight:900;cursor:pointer;
  }
  .mobileMenuToggle__icon{font-size:1.2rem;line-height:1;}
  .mobileMenuToggle__text{font-size:.78rem;}

  .topbar .menu{
    display:none;position:fixed;left:11px;right:11px;top:74px;z-index:250;
    max-height:calc(100vh - 92px);overflow:auto;padding:12px;
    border:1px solid rgba(255,255,255,.12);border-radius:20px;
    background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(2,6,23,.98));
    box-shadow:0 22px 70px rgba(0,0,0,.55);
    grid-template-columns:1fr 1fr;gap:9px;
  }
  .topbar.is-menu-open .menu{display:grid;}
  .topbar .menu a{
    min-height:46px;display:flex;align-items:center;justify-content:center;text-align:center;
    padding:10px 8px;border-radius:14px;background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);color:#e5eefc;font-weight:850;font-size:.9rem;
  }
  .topbar .menu a[aria-current="page"]{background:linear-gradient(135deg,rgba(217,22,86,.7),rgba(139,28,255,.55));color:#fff;}
  body.mobile-menu-open::before{content:"";position:fixed;inset:0;z-index:210;background:rgba(2,6,23,.54);backdrop-filter:blur(3px);}

  .hero,.pageHero,.deckHero{padding:18px 0 10px;}
  .hero__grid,.storeHeroLayout,.catalogHero,.promoMediaGrid,.homeLiveGrid,.deckShell,.deckTop{grid-template-columns:1fr !important;}
  .heroCard,.infoCard,.pageHeroCard,.deckHeroCard,.catalogHero,.deckWorkspace,.deckSidebar,.deckSummary,.deckPanel{border-radius:20px !important;padding:16px !important;}
  .heroCard h1,.pageHeroCard h1,.deckHeroCard h1,.catalogHero h1{font-size:clamp(1.72rem,8vw,2.38rem)!important;line-height:1.02;margin-bottom:10px;}
  .hero__text,.catalogHero p,.deckHeroCard p,.pageHeroCard p{font-size:.98rem;line-height:1.52;}
  .hero__actions,.deckActions,.miniDexCta__actions,.cardActionRow{display:grid!important;grid-template-columns:1fr;gap:10px;width:100%;}
  .btn,.cardBtn,.loadMoreBtn{min-height:46px;border-radius:14px;font-size:.93rem;}
  .heroStats,.heroStats--4,.deckSummaryGrid{grid-template-columns:1fr 1fr!important;gap:9px;}
  .heroStat,.deckMetric{padding:11px;border-radius:14px;}
  .priceNoteInline,.deckBadgeRow,.deckModeRow{display:flex;gap:8px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none;}
  .priceNoteInline::-webkit-scrollbar,.deckBadgeRow::-webkit-scrollbar,.deckModeRow::-webkit-scrollbar{display:none;}
  .noticePill,.deckBadge{white-space:nowrap;}

  .miniDexCta{display:grid!important;grid-template-columns:1fr!important;gap:12px;border-radius:18px!important;padding:14px!important;}
  .catalogHero__contact{display:grid;grid-template-columns:1fr;gap:9px;}
  .catalogMeta{display:grid!important;grid-template-columns:1fr;gap:8px;font-size:.88rem;}
  #priceInfo{font-size:.82rem;color:#9fb0c9;}

  .mobileFilterToggle{
    display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
    margin:14px 0 0;padding:13px 14px;min-height:50px;border-radius:16px;
    border:1px solid rgba(255,255,255,.11);background:linear-gradient(135deg,rgba(29,78,216,.24),rgba(217,22,86,.16));
    color:#fff;font-weight:950;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.18);
  }
  .mobileFilterToggle small{color:#cbd5e1;font-weight:800;}
  .toolbar{grid-template-columns:1fr!important;gap:10px!important;margin-top:10px!important;padding:12px;border-radius:18px;background:rgba(15,23,42,.72);border:1px solid rgba(255,255,255,.08);}
  .toolbar .field{min-width:0!important;grid-column:auto!important;}
  .toolbar input,.toolbar select,.toolbar button{min-height:46px!important;border-radius:14px!important;font-size:16px!important;}
  .toolbar:not(.is-open) .field:not(:first-child){display:none!important;}
  .toolbar.is-open{box-shadow:0 16px 44px rgba(0,0,0,.28);}

  .catalogGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;margin-top:14px!important;}
  .homeSinglesGrid,.selladoGrid,.newsGrid,.tcgBrandStrip,.videoList{grid-template-columns:1fr!important;gap:12px!important;}
  .card,.singleCard,.selladoCard,.newsCard,.tcgBrandCard{border-radius:16px!important;padding:9px!important;}
  .card{gap:6px!important;}
  .card__imagewrap{border-radius:12px!important;}
  .card h3{font-size:.87rem!important;line-height:1.17!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.05em;}
  .muted{font-size:.76rem!important;line-height:1.25!important;}
  .badgeRow{gap:4px!important;}
  .badge{font-size:.68rem!important;padding:3px 6px!important;}
  .card__actions{display:grid!important;grid-template-columns:1fr;gap:6px!important;margin-top:5px!important;}
  .cardBtn{width:100%;padding:9px 8px!important;font-size:.76rem!important;min-height:38px!important;}
  .card:hover,.card:focus-visible{transform:none!important;}
  .card:hover img,.card:focus-visible img{transform:none!important;}

  .modalCardWrap{grid-template-columns:1fr!important;}
  .cardModal{padding:10px!important;align-items:flex-end!important;}
  .cardModal__dialog{max-height:92vh;border-radius:20px 20px 0 0!important;padding:16px!important;}
  .modalImageWrap{max-width:76vw;margin-inline:auto;}

  .deckSidebar{position:static!important;}
  .deckSidebar p{font-size:.9rem;}
  #deckList{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;}
  #deckList::-webkit-scrollbar{display:none;}
  .deckCardBtn{min-width:236px;width:236px!important;grid-template-columns:54px 1fr!important;padding:8px!important;border-radius:16px!important;}
  .deckCardBtn img{width:54px!important;height:76px!important;}
  .deckCover{max-width:160px!important;margin-inline:auto;}
  .deckBuilderGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;}
  .deckBuilderCard{min-height:auto!important;border-radius:13px!important;padding:5px!important;}
  .deckBuilderQty{right:5px;bottom:34px;min-width:26px;height:26px;border-radius:8px;font-size:.82rem;}
  .deckBuilderCard strong{font-size:.68rem!important;}
  .deckBuilderCard small{font-size:.62rem!important;}
  .deckTableWrap{border-radius:16px!important;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .deckTableWrap::before{content:"Deslizá la tabla hacia los lados para ver variantes, stock y acciones";display:block;padding:9px 10px;color:#bfdbfe;font-size:.78rem;background:rgba(29,78,216,.14);border-bottom:1px solid rgba(255,255,255,.08);}
  .deckTable{min-width:860px!important;}

  .section{padding:16px 0 8px;}
  .sectionHead{display:grid;grid-template-columns:1fr;gap:8px;}
  .section h2{font-size:1.55rem;line-height:1.08;margin:0;}
  .footer{padding-bottom:calc(var(--mobile-bottom-nav-h) + 12px)!important;}
  .footer__inner,.footer__inner--stack{display:grid!important;grid-template-columns:1fr!important;text-align:center;gap:10px;}
  .footerContact{display:grid!important;grid-template-columns:1fr;gap:7px;}
  .fabWhatsapp{right:14px!important;bottom:calc(var(--mobile-bottom-nav-h) + 16px)!important;z-index:190!important;}

  .mobileBottomNav{
    display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:180;
    min-height:var(--mobile-bottom-nav-h);padding:7px 7px calc(7px + env(safe-area-inset-bottom,0px));
    background:rgba(5,8,16,.96);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 -18px 44px rgba(0,0,0,.42);
  }
  .mobileBottomNav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:14px;color:#cbd5e1;font-size:.68rem;font-weight:850;min-width:0;}
  .mobileBottomNav a strong{font-size:1.05rem;line-height:1;}
  .mobileBottomNav a.is-active{background:linear-gradient(135deg,rgba(217,22,86,.55),rgba(139,28,255,.4));color:#fff;}
}

@media (max-width: 390px){
  .catalogGrid{gap:8px!important;}
  .card{padding:7px!important;}
  .brand__text span{display:none;}
  .brand{padding-left:64px;}
  .brand__logo{width:56px;}
  .mobileBottomNav a{font-size:.62rem;}
  .deckBuilderGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}