/* Ajustes para celular (Peyote FC): buscador del catálogo, botones de tarjetas, zonas de toque,
   menú de secciones, pestañas de Mi colección, textos chicos y enlace del carrito vacío. Solo estilo. */
html:root body{--mp-ink:#121212;--mp-accent:#ff8346;--mp-line:#e4e0d4;--mp-mono:"IBM Plex Mono","DM Mono",ui-monospace,Menlo,Consolas,monospace}

/* Enlace "Ver catálogo" del carrito vacío (antes salía azul del navegador) */
html:root body.checkout-page .empty-cart a{color:var(--mp-accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}

@media(max-width:760px){
  /* 1. Buscador del catálogo: fila completa arriba de "Ordenar" y "Filtrar" */
  html:root body .catalog-with-team-filters .catalog-results-tools{gap:10px}
  html:root body .catalog-with-team-filters .catalog-results-tools .search{order:-1;flex:1 1 100%;width:100%;max-width:none;min-width:0;min-height:46px;margin:0 0 2px;padding:0 16px;display:flex;align-items:center;gap:10px;box-sizing:border-box;border:1.5px solid var(--mp-line);border-radius:999px;background:#fff;transform:none;position:static}
  html:root body .catalog-with-team-filters .catalog-results-tools .search span{flex:0 0 auto;color:var(--mp-accent);font-size:16px}
  html:root body .catalog-with-team-filters .catalog-results-tools .search input{flex:1 1 auto;width:100%;min-width:0;height:44px;padding:0;border:0;background:transparent;color:var(--mp-ink);font:500 14px Raleway,Arial,sans-serif;outline:0}
  html:root body .catalog-with-team-filters .catalog-results-tools .search:focus-within{border-color:var(--mp-ink);box-shadow:0 0 0 3px #ff834633}

  html:root body .catalog-with-team-filters .catalog-results-tools>.catalog-sort-control{flex:1 1 0;min-width:0;margin:0}
  html:root body .catalog-with-team-filters .catalog-results-tools>.catalog-sort-control select{width:100%;max-width:none}

  /* 4. "Lo tengo / Lo quiero" sin partirse en dos renglones */
  html:root body .catalog .products .card .collection-card-toggle{white-space:nowrap;padding:0 2px!important;font-size:9.5px!important;letter-spacing:.02em!important}

  /* 5. Zonas de toque más grandes (sin mover nada de lugar) */
  html:root body .topbar .menu-icon,html:root body .topbar .header-tool,html:root body .topbar .cart-link,html:root body .topbar .search-mini{position:relative}
  html:root body .topbar .menu-icon::before,html:root body .topbar .header-tool::before,html:root body .topbar .cart-link::before,html:root body .topbar .search-mini::before{content:"";position:absolute;top:50%;left:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}
  html:root body .site-footer .footer-grid a{display:inline-block;padding-block:6px}
  /* Los íconos de redes no llevan ese espacio extra: así quedan centrados en su círculo. */
  html:root body .site-footer .footer-grid .social-links a{display:grid;padding:0}

  /* 7. Menú de secciones: más compacto para que quepan las 6 secciones en pantallas de 360 px o más */
  html:root body .store-nav{gap:13px!important;padding-inline:14px!important}
  html:root body .store-nav::-webkit-scrollbar{display:none}

  /* 8. Textos que estaban demasiado chicos */
  html:root body.checkout-page .checkout-delivery p{font-size:10.5px}
  html:root body.checkout-page .checkout-delivery span,html:root body.checkout-page .checkout-delivery a,html:root body.checkout-page .carrier-preference small{font-size:10.5px}
  html:root body .tracking-form label{font-size:10.5px}
  html:root body .tracking-form button{font-size:10.5px}
  html:root body .size-page .announcement{font-size:10px}
  html:root body .category-size-table-wrap th,html:root body .size-page th{font-size:10px}
}

/* 3. Pestañas de Mi colección: que el texto quepa en pantallas de 360 px o menos */
@media(max-width:400px){
  html:root body .collection-status-tabs button strong{font-size:12px;letter-spacing:0;white-space:nowrap}
  html:root body .collection-status-tabs .collection-tab-kicker{letter-spacing:.08em}
}

/* 6. Encabezado en pantallas muy chicas (320 px): que no se pase del ancho */
@media(max-width:340px){
  html:root body .topbar{padding-inline:14px!important}
  html:root body .topbar .header-actions{gap:4px!important}
  html:root body .topbar .header-left{gap:8px!important}
}

/* Tarjetas del catálogo: ahora son enlaces <a>; se ven igual que antes cuando eran botones. */
a.card-open{color:inherit;text-decoration:none;font:400 13.3333px Arial,sans-serif}

/* 8. Más fácil de tocar y sin zoom al escribir (celular). Solo amplía la zona de toque; no mueve nada ni cambia cómo se ve. */
@media(max-width:760px){
  /* "Lo tengo" y "Lo quiero" de las tarjetas: botones de 26 px de alto. */
  html:root body .catalog .products .card .collection-card-toggle{position:relative}
  html:root body .catalog .products .card .collection-card-toggle::after{content:"";position:absolute;inset:-9px -2px}
  /* Enlaces de texto chicos: se les agrega zona de toque invisible arriba y abajo. */
  html:root body .cart-drawer .cart-drawer-continue,html:root body a.back,html:root body .pr-size-help,html:root body .rb-all,html:root body .ep2-go,html:root body .ep2-all,html:root body .hx-link{position:relative}
  html:root body .cart-drawer .cart-drawer-continue::after,html:root body a.back::after,html:root body .pr-size-help::after,html:root body .rb-all::after,html:root body .ep2-go::after,html:root body .ep2-all::after,html:root body .hx-link::after{content:"";position:absolute;inset:-14px -6px}
  /* Con letra menor de 16 px, el iPhone amplía la pantalla al tocar un campo. */
  html:root body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]),html:root body select,html:root body textarea{font-size:16px!important;text-overflow:ellipsis}
}

/* 9. Catálogo en celular: botón "Ver más" (catalogo-ver-mas.js). Las tarjetas de más se esconden hasta que se pide. */
html:root body #products .card.vm-oculta{display:none!important}
html:root body .vm-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin:26px 0 8px;padding:0 16px}
html:root body .vm-wrap[hidden]{display:none}
html:root body .vm-count{margin:0;font:500 12px/1.3 var(--mp-mono);color:#6b665a}
html:root body .vm-more{width:100%;max-width:360px;min-height:52px;border:0;border-radius:999px;background:var(--mp-ink);color:#fff;font:700 16px/1 "Raleway",system-ui,sans-serif;cursor:pointer}
html:root body .vm-more:focus-visible{outline:3px solid var(--mp-accent);outline-offset:3px}

/* 10. Catálogos en celular: el botón de WhatsApp se esconde al hacer scroll (wa-descanso.js). */
@media(max-width:760px){
  html:root body.wa-descansa .whatsapp-widget{opacity:0!important;pointer-events:none!important}
  html:root body .whatsapp-widget{transition:opacity .25s}
}

/* 11. Páginas sueltas (404, regalo, pase, pedido confirmado, sobre, vestidor): zonas de toque en celular. */
@media(max-width:760px){
  html:root body .pq-link,html:root body .rg-logo,html:root body .rg-help,html:root body .sb-help a,html:root body .hint a{position:relative}
  html:root body .pq-link::after,html:root body .rg-logo::after,html:root body .rg-help::after,html:root body .sb-help a::after,html:root body .hint a::after{content:"";position:absolute;inset:-12px -6px}
  /* En "Sobre" el campo ya usa letra de 19 px: se respeta (el ajuste de 16 px es solo para campos más chicos). */
  html:root body.sobre-page.sobre-page.sobre-page .sb-form.sb-form.sb-form input{font-size:19px!important}
}