/* ==========================================================================
HATED · movil.css · v4.17.1 · SISTEMA RESPONSIVE DE MÓVIL (< 700 px)
   Archivo APARTE: se carga con media="(max-width:699px)" desde index.html, cart.html y wishlist.html,
   así que en tableta y escritorio ni se descarga ni se aplica: la web original no cambia.
   Va DESPUÉS de styles.css / tv-display.css y solo SUMA ajustes; no reemplaza ni borra nada del sitio original.
   Si algún día hace falta otro tamaño, se crea otro archivo igual (tableta.css, etc.) con su propio media.

   Escala de espacios (todo el móvil usa SOLO estos valores, para no andar acomodando cosas una por una):
     --m-xs 8 · --m-sm 14 · --m-md 24 · --m-lg 44 · --m-xl 72 · --m-xxl 96
   Ritmo: cada bloque grande se separa del siguiente con --m-xl; dentro de un bloque se usa --m-sm / --m-md.
========================================================================== */
:root{--m-xs:8px;--m-sm:14px;--m-md:24px;--m-lg:44px;--m-xl:72px;--m-xxl:96px;--gutter:20px}
html{font-size:14px}

/* ---- 1. Reproductor mínimo (la ventana grande no abre en móvil) ---- */
.hp-bar{zoom:.44}
.theme-dock{scale:.66!important;transform-origin:center right}

/* ---- 2. Secciones: mucho aire entre una y otra ---- */
.section{padding-top:var(--m-xl);padding-bottom:var(--m-xl)}

/* ---- 3. Encabezado de sección (marco de alambre de púas, más pequeño y siempre dentro de la pantalla) ---- */
:root:not([data-theme="xp"]) .sec-head{--out:16px;--ov:8px;box-sizing:border-box;width:calc(100% - 2 * var(--out) - 12px);max-width:none;margin:var(--m-xl) auto var(--m-xl);padding:var(--m-md) 28px var(--m-md)}
:root:not([data-theme="xp"]) .sec-head::before{top:calc(-16px - var(--ov));bottom:calc(-16px - var(--ov));background:
  var(--med) no-repeat left calc(var(--out) - 10px) top calc(var(--ov) + 5px)/20px 20px,
  var(--med) no-repeat right calc(var(--out) - 10px) top calc(var(--ov) + 5px)/20px 20px,
  var(--med) no-repeat left calc(var(--out) - 10px) bottom calc(var(--ov) + 5px)/20px 20px,
  var(--med) no-repeat right calc(var(--out) - 10px) bottom calc(var(--ov) + 5px)/20px 20px,
  var(--tip-l) no-repeat left top var(--ov)/26px 31px,
  var(--tip-l) no-repeat left bottom var(--ov)/26px 31px,
  var(--tip-r) no-repeat right top var(--ov)/26px 31px,
  var(--tip-r) no-repeat right bottom var(--ov)/26px 31px,
  var(--tip-t) no-repeat left calc(var(--out) - 16px) top 0/31px 26px,
  var(--tip-t) no-repeat right calc(var(--out) - 16px) top 0/31px 26px,
  var(--tip-b) no-repeat left calc(var(--out) - 16px) bottom 0/31px 26px,
  var(--tip-b) no-repeat right calc(var(--out) - 16px) bottom 0/31px 26px,
  var(--w-h) repeat-x 13px var(--ov)/67px 31px,
  var(--w-h) repeat-x 13px calc(100% - var(--ov))/67px 31px,
  var(--w-v) repeat-y left calc(var(--out) - 16px) top 13px/31px 67px,
  var(--w-v) repeat-y right calc(var(--out) - 16px) top 13px/31px 67px}
:root:not([data-theme="xp"]) .sec-head h1,:root:not([data-theme="xp"]) .sec-head h2{font-size:clamp(1.3rem,6.6vw,1.8rem);letter-spacing:.03em;margin-top:var(--m-xs)}
:root:not([data-theme="xp"]) .sec-head .sec-sub,:root:not([data-theme="xp"]) .sec-head .drop-meta{font-size:.64rem;letter-spacing:.14em}
:root:not([data-theme="xp"]) .sec-head .sec-text{font-size:.78rem;line-height:1.6;margin-top:var(--m-sm)!important}
:root:not([data-theme="xp"]) .sec-head h1::after,:root:not([data-theme="xp"]) .sec-head h2::after{display:none}

/* separador entre secciones más pequeño */
:root:not([data-theme="xp"]) main>.section+.section::before{height:36px;top:-18px;background-size:30px 30px,67px 31px}
:root[data-theme="light"] main>.section+.section::before{background-size:34px 34px,67px 31px}

/* ---- 4. Tarjetas: una sola columna vertical, angostas y muy separadas ---- */
.cat-grid,.cat-grid--few,.cat-grid--corbatas,.grid,
.cat-grid:has(> article:nth-child(3)):not(:has(> article:nth-child(4))),
.cat-grid[style*="grid-template-columns"],.grid[style*="grid-template-columns"]{display:flex!important;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:var(--m-xl)!important;width:100%;padding:0}
.cat-grid>.card,.cat-grid--few>.card,.grid>.card,.cat-grid[style*="grid-template-columns"]>.card,.grid[style*="grid-template-columns"]>.card,
.cat-grid:has(> article:nth-child(3)):not(:has(> article:nth-child(4)))>.card{flex:none;width:min(100%,236px)!important;max-width:236px!important;min-width:0;margin:0 auto!important}
.card .card-img,.card--large .card-img{aspect-ratio:5/4!important;width:auto!important;max-width:none!important;align-self:stretch;box-sizing:border-box;padding:10%}   /* width:auto + margen del tema = la imagen queda DENTRO del marco de la tarjeta */
.card .card-body{gap:var(--m-sm);padding:var(--m-sm) 6px 6px}
.card h3,.card .card-title{font-size:.9rem;line-height:1.2;overflow-wrap:anywhere}
.card .price{font-size:.9rem;margin:2px 0}
.card .card-note{font-size:.66rem}
.card .btn,.card .add{font-size:.74rem;letter-spacing:.08em;min-height:36px;padding:8px 10px;margin-top:var(--m-xs)}
.card .tag{font-size:.58rem;padding:3px 6px}
:root:not([data-theme="xp"]) .card::after{transform:scale(.72);transform-origin:top right}
[data-theme="xp"] .card>.card-img::before{transform:scale(.72);transform-origin:top right}

/* ---- 5. Barra de categorías de ropa con flechas (las crea theme.js; saltan a la categoría anterior / siguiente) ---- */
.cat-chips{display:flex;align-items:center;gap:var(--m-xs);padding:var(--m-xs) var(--m-sm)}
.cat-chips ul{flex:1 1 auto;min-width:0;padding:0 2px;gap:var(--m-xs);scroll-behavior:smooth}
.cat-chips a{min-height:30px;padding:0 12px;font-size:10px}
.cat-arrow{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;padding:0;margin:0;border:1px solid var(--blk-bd);border-radius:999px;background:transparent;color:inherit;cursor:pointer;line-height:0}
.cat-arrow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cat-arrow:hover:not(:disabled){border-color:var(--nav-on)}
.cat-arrow:focus-visible{outline:2px solid var(--nav-on);outline-offset:1px}
.cat-arrow:disabled{opacity:.3;cursor:default}
[data-theme="light"] .cat-arrow{border-radius:0;border:2px solid #16121b;background:#fff;color:#16121b;box-shadow:2px 2px 0 #16121b}
[data-theme="light"] .cat-arrow:active:not(:disabled){box-shadow:none;transform:translate(2px,2px)}
[data-theme="dark"] .cat-arrow,:root:not([data-theme]) .cat-arrow{border-color:#7c3aed;color:#c084fc;background:#12121a}

/* ---- 6. Botones flotantes y barra inferior más chicos ---- */
.shop-wa,.to-top{min-height:38px;min-width:38px;font-size:11px}
.shop-wa{padding:0 11px}.to-top{width:38px}
.bottom-nav{padding:4px 0 calc(4px + env(safe-area-inset-bottom))}
.bottom-nav-item{font-size:.6rem}

/* ---- 7. Marco de video contenido y ordenado ---- */
.xp-vid{max-width:100%;margin-left:auto;margin-right:auto}
.xp-vid-title{font-size:.78rem}
.xp-vid-menu{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 10px;font-size:.66rem;padding:3px 6px}
.xp-vid-screen{aspect-ratio:16/9;max-height:210px;overflow:hidden}
.xp-vid-screen video{width:100%;height:100%;object-fit:contain}
.xp-vid-status{font-size:.66rem}

/* ---- 8. Ventana de pieza y precios ---- */
.product-modal-price{font-size:1.1rem}

@media (prefers-reduced-motion:reduce){.cat-chips ul{scroll-behavior:auto}}
@media (forced-colors:active){.cat-arrow{border:1px solid CanvasText;forced-color-adjust:none;color:CanvasText;background:Canvas}}

/* ---- 9. Barra de tareas XP en móvil: sin botones de categorías; en su lugar, la sección actual (no es un enlace) ---- */
[data-theme="xp"] .xp-task-win{display:none}
[data-theme="xp"] .xp-task-apps{overflow:hidden}
[data-theme="xp"] .xp-task-app{display:none}
[data-theme="xp"] .xp-task-now{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;margin:3px 0;padding:0 10px;color:#fff;font:.7rem 'Pixelify Sans',Tahoma,sans-serif;background:linear-gradient(180deg,#1b46ad 0%,#1e52b7 100%);border:1px solid #0c3a9c;border-radius:3px;box-shadow:inset 1px 1px 3px rgba(0,0,0,.55);pointer-events:none;user-select:none}
[data-theme="xp"] .xp-task-now svg{width:14px;height:14px;flex:none}
[data-theme="xp"] .xp-task-now span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}