/* ===== CamisQuality · capa móvil (v2.1) =====
   1) Sin desplazamiento lateral: causas raíz + red de seguridad
   2) Hero móvil rediseñado (camisetas enteras, sin solapes)
   3) UX móvil: cabecera, menú, tarjetas, ficha, carrito/checkout, pie */

/* --- 1. Red de seguridad anti-overflow (clip no rompe position:sticky) --- */
html,body{max-width:100%;overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
img,svg,video{max-width:100%}
/* Contenedores con contenido animado/ancho: recortan su propio contenido */
.topbar,.ticker,.crests,.hero,.cqpills{contain:paint;max-width:100vw}
/* Paneles fuera de pantalla: invisibles cuando están cerrados (iOS no los cuenta para el scroll) */
.drawer{visibility:hidden;transition:transform .55s var(--ease),visibility 0s .55s}
.drawer.on{visibility:visible;transition:transform .55s var(--ease)}
.cqmob{visibility:hidden}
.cqmob.on{visibility:visible}
.toast{max-width:calc(100vw - 32px)}
/* Textos largos (URLs, emails, nombres) no empujan el ancho */
.cq-entry,.pdp-info,.wc-block-components-product-name,.woocommerce-order{overflow-wrap:anywhere}
.cq-entry table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* --- Cabecera compacta (raíz del overflow: logo + iconos > 390px) --- */
@media (max-width:560px){
  header.nav .wrap{gap:8px;height:64px}
  .logo{font-size:clamp(15px,4.6vw,19px);gap:7px;min-width:0;flex:0 1 auto;overflow:hidden}
  .logo .mark{width:22px;height:22px;border-radius:6px;flex:none}
  .logo .mark::after{inset:6px}
  .actions{gap:0;flex:none}
  .actions .icon-btn{width:44px;height:44px}
  .icon-btn svg{width:22px;height:22px}
  .hero{margin-top:-64px}
}
.badge-count{pointer-events:none}

/* --- Menú móvil --- */
.cqmob svg{width:20px;height:20px;flex:none}
.cqmob__close{width:44px;height:44px;display:grid;place-items:center;margin-right:-10px}
.cqmob__close svg{width:24px;height:24px}
.cqmob__hd{position:sticky;top:0;background:#fff;z-index:2;padding:10px 20px}
.cqmob__hd-logo{font-stretch:125%;font-weight:900;font-size:17px}
.cqmob__sect-btn,.cqmob__sect--direct .cqmob__sect-link{font-size:17px;font-stretch:115%;padding:16px 20px;min-height:56px;text-transform:uppercase}
.cqmob__l2-btn,.cqmob__direct{min-height:48px;font-size:15px}
.cqmob__l3,.cqmob__seeall{min-height:44px;display:flex;align-items:center}
.cqmob__l3{font-size:14.5px}
.cqmob__arrow svg,.cqmob__sect-btn svg{width:18px;height:18px}
.cqmob__extra{padding:18px 20px 28px;display:grid;gap:10px;border-top:1px solid #e7e3da}
.cqmob__extra a{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600}
.cqmob__extra svg{width:20px;height:20px}

/* --- 2. Hero móvil --- */
@media (max-width:820px){
  .hero{height:clamp(680px,calc(100svh - 36px),820px);min-height:0;max-height:none}
  .slide .wrap{display:flex;flex-direction:column;height:100%;padding-top:84px;padding-bottom:78px;gap:0}
  .slide .copy{flex:none;position:relative;z-index:3}
  .copy .eyebrow{margin-bottom:12px;font-size:11.5px}
  .copy h1{font-size:clamp(30px,9vw,46px);line-height:.95}
  .copy p{font-size:15px;line-height:1.45;margin:12px 0 16px;max-width:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .ctas{flex-wrap:nowrap;gap:10px}
  .ctas .btn{flex:1 1 0;min-width:0;justify-content:center;padding:0 12px;height:50px;font-size:14px;gap:8px;white-space:nowrap}
  .ctas .btn svg{width:16px;height:16px;flex:none}
  .price-line{margin-top:14px;font-size:13px}
  .price-line b{font-size:21px}
  /* zona de imagen: ocupa el resto, camisetas enteras y centradas */
  .slide .visual{flex:1 1 auto;min-height:0;height:auto;width:100%;position:relative;display:block;margin-top:6px}
  .slide .shirt,.slide .shirt.front,.slide .shirt.back,.slide .shirt.cut{position:absolute;top:50%;left:50%;right:auto;bottom:auto;width:auto!important;height:auto;max-width:72%;max-height:100%;object-fit:contain;
     transform:translate(-50%,-50%) scale(.94) rotate(var(--r,0deg))}
  .slide.is-active .shirt,.slide.is-active .shirt.front,.slide.is-active .shirt.back,.slide.is-active .shirt.cut{transform:translate(-50%,-50%) rotate(var(--r,0deg))}
  .slide .shirt.back{left:34%;max-width:56%;max-height:86%;top:46%}
  .slide .shirt.front{left:64%;max-width:60%;max-height:92%;top:54%}
  .slide .shirt.cut{max-width:64%;max-height:100%;filter:drop-shadow(0 24px 30px rgb(0 0 0 / .55))}
  .slide .stars{top:2%}
  .slide .cardcap{left:6%;bottom:8%;font-size:11.5px;padding:7px 11px}
  .slide .glow{width:90%}
  /* palabra gigante de fondo: dentro del hero y discreta */
  .bg-word{font-size:clamp(120px,44vw,240px);top:auto;bottom:90px;transform:translateX(-50%);opacity:.8}
  .hero-ui{bottom:14px}
  .hero-ui .wrap{align-items:center}
  .dots{gap:6px}
  .arrow{width:44px;height:44px}
}
@media (max-width:360px){
  .ctas .btn svg{display:none}
  .ctas .btn{font-size:13.5px;padding:0 10px}
}

/* --- Ticker y barra superior --- */
@media (max-width:560px){
  .ticker{padding:14px 0}
  .ticker span{font-size:20px;gap:28px}
  .ticker .track{gap:28px}
  .topbar{font-size:12px;height:34px}
}

/* --- Tarjetas y listados: siempre 2 columnas en móvil --- */
@media (max-width:820px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 10px}
  .card .media{border-radius:14px}
  .card .info{padding:10px 2px 0}
  .card h4{font-size:13.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .card .meta{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .card .price{white-space:normal}
  .card .price b{font-size:15.5px}
  .card .price s{font-size:12.5px}
  .card .off,.card .new{top:8px;left:8px;font-size:11px;padding:4px 7px}
  .card .new+.off{left:auto;right:48px}
  .card .wish{width:36px;height:36px;top:6px;right:6px}
  .toolbar{gap:10px;flex-wrap:wrap}
  .woocommerce-ordering select{min-height:44px;font-size:16px}
  .subcats{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 6px;display:flex;gap:8px}
  .subcats::-webkit-scrollbar{display:none}
  .subcats a{flex:none;min-height:44px}
  .woocommerce-pagination ul{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
  .woocommerce-pagination a,.woocommerce-pagination span{min-width:44px;min-height:44px;display:grid;place-items:center}
}

/* --- Ficha de producto --- */
.pdp-main{touch-action:pan-y}
.pdp-dots{display:none}
.pdp-custom-fields>*{min-width:0}
.pdp-custom-fields input{width:100%;min-width:0}
@media (max-width:820px){
  .pdp{padding-top:4px}
  .pdp-main{border-radius:18px}
  .pdp-thumbs{gap:8px;padding-bottom:2px}
  .pdp-thumbs button{width:64px;height:64px;border-radius:12px}
  .pdp-dots{display:flex;justify-content:center;gap:6px;margin-top:-4px}
  .pdp-dots i{width:6px;height:6px;border-radius:50%;background:var(--line,#ddd)}
  .pdp-dots i.on{background:var(--ink);width:18px;border-radius:3px}
  .pdp-title{font-size:clamp(26px,7.4vw,36px)}
  .pdp-sizes{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}
  .pdp-sizes button{height:50px;min-height:44px;font-size:15px}
  .pdp-choice button{min-height:56px;padding:12px 14px}
  .pdp-custom summary{min-height:52px;align-items:center}
  .pdp-acc summary{min-height:52px}
  .pdp-add{height:56px}
  .pdp-wish{width:56px;height:56px;flex:none}
  .pdp-sticky .wrap{height:64px}
  .pdp-sticky .t{display:none}
  .pdp-sticky b{font-size:18px;margin-right:auto}
  .pdp-sticky .btn{flex:0 0 auto;min-width:56%;justify-content:center;height:48px}
  body.single-product footer{padding-bottom:96px}
}

/* --- Carrito / checkout / mi cuenta: inputs grandes, sin zoom (≥16px) --- */
@media (max-width:820px){
  .is-wc input,.is-wc select,.is-wc textarea,
  .woocommerce form input.input-text,.woocommerce form select,.woocommerce form textarea,
  .wc-block-components-text-input input,.wc-block-components-combobox input,.wc-blocks-components-select__select,
  .wc-block-components-textarea{font-size:16px!important}
  .wc-block-components-text-input input,.wc-block-components-combobox .components-combobox-control__input,.wc-blocks-components-select__select{min-height:54px}
  .is-wc .wc-block-components-checkout-place-order-button,.is-wc .wc-block-cart__submit-button{min-height:58px;font-size:16px!important;width:100%}
  .is-wc .wc-block-components-sidebar{padding:18px!important;border-radius:18px}
  .wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]{width:22px;height:22px;min-width:22px}
  .wc-block-components-checkbox label{min-height:44px;align-items:flex-start}
  .wc-block-components-quantity-selector{min-height:44px}
  .wc-block-components-quantity-selector__button{min-width:44px!important}
  .wc-block-cart-item__remove-link{min-width:44px;min-height:44px}
  .wc-block-components-radio-control__option{min-height:56px}
  .is-wc .wc-block-components-main,.is-wc .wc-block-components-sidebar{min-width:0;max-width:100%}
}
/* Teléfono = WhatsApp: indicación clara */
.wc-block-components-address-form__phone::after,.wc-block-components-text-input.wc-block-components-address-form__phone::after{
  content:"Lo usaremos para confirmar tu pedido por WhatsApp. Incluye el prefijo (ej. +34 612 345 678).";display:block;position:static;white-space:normal;max-width:100%;overflow-wrap:anywhere;font-size:13px;color:var(--muted,#72706a);margin-top:6px;line-height:1.35}
/* Paso de confirmación por WhatsApp */
.cq-wa-steps{background:#fff;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);padding:16px 18px;margin:0 0 18px}
.cq-wa-steps h3{font-size:15px;font-weight:800;margin:0 0 10px;display:flex;gap:8px;align-items:center}
.cq-wa-steps ol{margin:0;padding-left:20px;display:grid;gap:6px;font-size:14px;line-height:1.4}
.cq-wa-steps svg{width:20px;height:20px;color:#25d366}
/* Mi cuenta (formularios clásicos) */
.woocommerce-form-login,.woocommerce-form-register,.woocommerce-ResetPassword,.woocommerce-EditAccountForm,.woocommerce-address-fields{max-width:480px}
.woocommerce form .form-row{display:grid;gap:6px;margin:0 0 14px}
.woocommerce form .form-row label{font-weight:600;font-size:14px}
.woocommerce form input.input-text,.woocommerce form select,.woocommerce form textarea{width:100%;min-height:52px;border-radius:12px;border:1px solid var(--line);padding:12px 14px;font:inherit;font-size:16px;background:#fff}
.woocommerce form .woocommerce-form-login__rememberme{display:flex;gap:8px;align-items:center;min-height:44px}
.woocommerce form button.button,.woocommerce-Button,.woocommerce button.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:15px;border:0}
.woocommerce-LostPassword a,.woocommerce-MyAccount-navigation a{display:inline-flex;min-height:44px;align-items:center}
@media (max-width:820px){
  .woocommerce form button.button,.woocommerce-Button{width:100%}
  .woocommerce-MyAccount-navigation ul{display:flex;gap:6px;overflow-x:auto;padding:0;list-style:none;scrollbar-width:none}
  .woocommerce-MyAccount-navigation li a{white-space:nowrap;padding:0 14px;border-radius:999px;background:var(--card)}
  .woocommerce table.shop_table{display:block;overflow-x:auto}
}

/* --- Pie --- */
@media (max-width:560px){
  footer{padding-top:56px}
  .foot ul{gap:0}
  .foot ul a{display:flex;align-items:center;min-height:44px}
  .legal a{display:inline-block;padding:10px 4px}
  .club form input{font-size:16px}
}
/* Accesibilidad: objetivos táctiles mínimos */
@media (pointer:coarse){
  .arrow,.icon-btn,.dot{min-width:44px;min-height:44px}
  .dot{min-width:0}
}
/* Movimiento reducido */
@media (prefers-reduced-motion:reduce){
  .topbar .track,.ticker .track,.crests .track{animation:none}
}
/* Raíz del overflow en portada: las camisetas giradas de las tarjetas "bento" sobresalían (clip-path no limita el scroll) */
.bento .tile{contain:paint}
@supports (overflow:clip){.bento .tile{overflow:clip!important}}
.ucl .fan{contain:paint}

/* Carrito (bloques) en móvil: 3 columnas reales, el total nunca se corta */
@media (max-width:820px){
  .wc-block-cart .wc-block-cart-items,.wc-block-cart .wc-block-cart-items tbody{display:block;width:100%}
  .wc-block-cart .wc-block-cart-items__row{display:grid!important;grid-template-columns:72px minmax(0,1fr) max-content!important;column-gap:12px;width:100%;padding:16px 0}
  .wc-block-cart .wc-block-cart-item__image{grid-column:1 / 2!important;grid-row:1 / 3!important;padding:0!important}
  .wc-block-cart .wc-block-cart-item__image img{width:72px;height:auto}
  .wc-block-cart .wc-block-cart-item__product{grid-column:2 / 3!important;grid-row:1 / 3!important;min-width:0;width:auto!important;max-width:100%;padding:0!important}
  .wc-block-cart .wc-block-cart-item__wrap{min-width:0}
  .wc-block-cart .wc-block-cart-item__total{grid-column:3 / 4!important;grid-row:1 / 2!important;align-self:start;text-align:right;padding:0!important;width:auto!important;min-width:max-content;white-space:nowrap;justify-content:flex-end}
  .wc-block-cart .wc-block-cart-item__total .wc-block-components-sale-badge{display:none}
  .wc-block-cart .wc-block-cart-items__header{display:none}
}
/* Contraste legible en la barra superior (morado claro sobre negro) */
.topbar b{color:#9DB8FF}
/* La foto principal aparece sin animación (no retrasa el LCP) */
.pdp-main img#pdpMain{animation:none}
/* Checkout: los <fieldset> tienen min-width:min-content por defecto y empujaban el ancho */
.wc-block-checkout fieldset,.wc-block-components-checkout-step,.wc-block-components-checkout-step__container,.wc-block-components-address-form,.wc-block-checkout__main{min-width:0;max-width:100%}
.wc-block-components-address-form>*{min-width:0}
/* Avisos flotantes de WooCommerce (snackbar): nunca más anchos que la pantalla */
.wc-block-components-notices__snackbar,.wc-block-components-notice-snackbar-list{max-width:calc(100vw - 32px)!important;width:auto!important;left:16px!important;right:16px!important;box-sizing:border-box}

/* Newsletter mensajes */
.cq-nl-msg{margin:10px 0 4px;padding:10px 14px;border-radius:12px;font-size:14px;line-height:1.4}
.cq-nl-msg.ok{background:rgba(46,160,67,.15);color:inherit;border:1px solid rgba(46,160,67,.5)}
.cq-nl-msg.err{background:rgba(200,16,46,.12);color:inherit;border:1px solid rgba(200,16,46,.5)}
.club small a{color:inherit}

/* --- Proporciones de imagen: las etiquetas <img> llevan width/height (CLS),
       así que la altura debe ser automática para no deformarlas --- */
img{height:auto}
.tile img,.promo img,.ucl .fan figure img,.slide .shirt{object-fit:contain;aspect-ratio:auto}
.ucl .fan figure img{display:block;width:100%;height:auto}

/* --- Safari 26 (barra flotante "liquid glass"): Safari tiñe la zona bajo la barra con el color
       de los elementos fijos que tocan el borde inferior, aunque tengan opacity:0. Los fondos
       oscuros de los overlays inactivos (rgba(0,0,0,.4)) se veían como una franja gris.
       Solución: overlays inactivos sin fondo y ocultos; fondo del documento = color de la página. --- */
html{background:var(--paper)}
.cqmob-backdrop,.scrim,.cqnav-overlay{background:transparent;visibility:hidden}
.cqmob-backdrop.on{background:rgb(0 0 0 / .4);visibility:visible}
.scrim.on{background:rgb(10 10 10 / .4);visibility:visible}
.cqnav-overlay.is-visible{background:rgb(0 0 0 / .18);visibility:visible}
.mnav:not(.on),.cqmob:not(.on){visibility:hidden;transition:transform .3s,visibility 0s .3s}
.mnav.on,.cqmob.on{visibility:visible}
.toast:not(.on){background:transparent;box-shadow:none}
footer{padding-bottom:max(30px,env(safe-area-inset-bottom))}