/*
Theme Name: miaguau
Theme URI: https://miaguau.com
Description: Tema a medida de miaguau — tienda de accesorios personalizados para perros y gatos (Print on Demand) sobre WooCommerce. Diseño hi-fi propio (Editorial cálida).
Author: Comercia Studio
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: miaguau
*/

/* ===== Tokens ===== */
:root{
  --cream:#f5f1e8; --paper:#fbf8f1; --ink:#2b2722; --ink-mid:#5d564c; --ink-soft:#7c756a;
  --border:#e4dccd; --border-2:#ddd2bd;
  --coral:#cf6b4d; --coral-d:#b95636; --sage:#7e8c63; --lilac:#9b7fb0; --lilac-d:#86699c;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;-webkit-font-smoothing:antialiased;background:var(--cream);color:var(--ink);font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:16px;line-height:1.55}
.woocommerce,.woocommerce-page,.woocommerce table,.woocommerce p,.woocommerce label,.woocommerce input,.woocommerce select{font-size:16px}
img{max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--coral);color:var(--paper)}
h1,h2,h3{font-family:'Instrument Serif',serif;font-weight:400}

/* ===== Animaciones ===== */
@keyframes mg-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mg-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[data-reveal]{animation:mg-rise both linear;animation-timeline:view();animation-range:entry 0% entry 55%}
@supports not (animation-timeline: view()){[data-reveal]{animation:none;opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){[data-reveal]{animation:none;opacity:1}*{scroll-behavior:auto}}

/* ===== Hovers (convertidos de style-hover del prototipo) ===== */
.mgh-coral,.mgh-lilac,.mgh-card,.mgh-link{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease}
.mgh-coral:hover{background:var(--coral-d) !important}
.mgh-lilac:hover{background:var(--lilac-d) !important}
.mgh-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(43,39,34,0.12)}
.mgh-link:hover{color:var(--coral) !important}

/* ===== Menú móvil ===== */
.mg-mobile{display:none;padding:8px 24px 22px;flex-direction:column;gap:4px;border-top:1px solid var(--border)}
.mg-mobile.open{display:flex}
.mg-mobile a{text-decoration:none;color:var(--ink);font-weight:500;padding:12px 8px;font-size:17px}

/* ===== Responsive ===== */
@media(max-width:920px){
  [data-desktop-nav]{display:none !important}
  [data-burger]{display:flex !important}
  [data-hero]{grid-template-columns:1fr !important}
  [data-cols-2]{grid-template-columns:1fr !important}
  [data-cols-3]{grid-template-columns:1fr !important}
  [data-cols-4]{grid-template-columns:1fr 1fr !important}
}
@media(min-width:921px){[data-burger]{display:none !important}}
@media(max-width:560px){[data-cols-4]{grid-template-columns:1fr !important}}

/* ===== WooCommerce ===== */
/* Grid propio (clase mg-grid) para no chocar con .columns-N de WooCommerce */
.woocommerce ul.products.mg-grid{display:grid !important;gap:20px;list-style:none;margin:0;padding:0;float:none}
.mg-grid-2{grid-template-columns:repeat(2,1fr)}
.mg-grid-3{grid-template-columns:repeat(3,1fr)}
.mg-grid-4{grid-template-columns:repeat(4,1fr)}
.woocommerce ul.products li.product{width:auto !important;margin:0 !important;float:none !important;clear:none !important}
.woocommerce ul.products li.product::before{display:none}
/* clearfix de WooCommerce que en grid crea celdas fantasma (hueco delante) */
.woocommerce ul.products.mg-grid::before,.woocommerce ul.products.mg-grid::after{content:none;display:none}
@media(max-width:920px){.mg-grid-3,.mg-grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mg-grid-2,.mg-grid-3,.mg-grid-4{grid-template-columns:1fr}}

/* Sidebar de filtros (líneas) */
.mg-fbtn{display:flex;align-items:center;gap:9px;text-decoration:none;font-size:14px;border-radius:8px;padding:9px 12px;color:var(--ink);transition:all .12s}
.mg-fbtn:hover{background:rgba(43,39,34,0.05)}
.mg-fbtn.active{background:var(--ink);color:var(--cream);font-weight:600}

/* Result count + ordering */
.woocommerce .woocommerce-result-count{color:var(--ink-soft);font-size:14px;margin:0}
.woocommerce .woocommerce-ordering select{font-family:inherit;font-size:13px;color:var(--ink);background:var(--paper);border:1px solid var(--border-2);border-radius:999px;padding:8px 14px}

/* Botones de WooCommerce → marca */
.woocommerce a.button,.woocommerce button.button,.woocommerce .button,.woocommerce #respond input#submit,
.woocommerce-page a.button,.woocommerce-page button.button,.wc-block-components-button,.wp-element-button{
  background:var(--ink) !important;color:var(--cream) !important;border:none !important;border-radius:999px !important;
  font-family:inherit !important;font-weight:600 !important;padding:13px 24px !important;transition:background .2s ease}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button:hover,.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover,.wp-element-button:hover{background:var(--coral) !important}
/* Retrato: flujo guiado por pasos */
.mg-step{margin:0 0 22px}
.mg-step-h{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:12px}
.mg-step-n{width:26px;height:26px;border-radius:50%;background:var(--lilac);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.mg-upload{display:flex;align-items:center;gap:14px;border:2px dashed #cdbcd6;border-radius:12px;padding:18px;cursor:pointer;background:var(--paper)}
.mg-upload.has{border-color:var(--sage);background:#eef2e6}
.mg-upload-ic{width:44px;height:44px;border-radius:10px;background:#efe6f0;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.mg-upload-tx{flex:1;font-size:14px;line-height:1.3}
.mg-upload-btn{color:var(--lilac);font-weight:600;font-size:14px}
.mg-pg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mg-pg-card{display:block;text-align:center;border:1px solid var(--border-2);border-radius:12px;padding:16px;font-size:16px;font-weight:600;background:var(--paper);transition:all .12s}
.mg-pg-opt input:checked + .mg-pg-card{background:var(--lilac);border-color:var(--lilac);color:#fff}
.mg-estilos{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.mg-estilo-opt{cursor:pointer;text-align:center;display:block}
.mg-estilo-sw{display:block;aspect-ratio:1;border-radius:10px;border:2px solid transparent;box-shadow:0 0 0 1px var(--border-2)}
.mg-estilo-opt input:checked + .mg-estilo-sw{box-shadow:0 0 0 2px var(--ink)}
.mg-estilo-lbl{display:block;font-size:12px;color:var(--ink-soft);margin-top:6px}
.mg-is-retrato .variations .label{display:none}
.mg-is-retrato .variations{margin-bottom:8px}
/* soporte en retrato: pills más grandes en 2 columnas con precio */
.mg-is-retrato .mg-swatches{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mg-is-retrato .mg-sw-pill{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-radius:12px;font-size:15px}
.mg-sw-price{font-family:'Instrument Serif',serif;font-size:17px;color:inherit}
@media(max-width:560px){.mg-estilos{grid-template-columns:repeat(3,1fr)}}

/* Variaciones nativas estilizadas como el v4 */
.woocommerce .variations{display:flex;flex-direction:column;gap:18px;margin:0 0 18px;border:0;width:100%}
.woocommerce .variations tbody,.woocommerce .variations tr,.woocommerce .variations td,.woocommerce .variations th{display:block;border:0;padding:0;background:none;width:auto}
.woocommerce .variations .label{font-size:13px;font-weight:700;margin-bottom:10px;color:var(--ink)}
.woocommerce .variations .label label{font-weight:700}
.woocommerce .reset_variations{display:inline-block;font-size:13px;color:var(--coral);margin-top:8px}
.woocommerce .woocommerce-variation-price{font-family:'Instrument Serif',serif;font-size:28px;color:var(--ink);margin:6px 0}
.woocommerce .woocommerce-variation-price .price{color:var(--ink)}
.mg-swatches{display:flex;flex-wrap:wrap;gap:10px}
.mg-swatches-est{gap:14px;padding-bottom:22px}
.mg-sw{cursor:pointer;font-family:inherit;transition:all .12s}
.mg-sw-pill{border:1px solid var(--border-2);background:var(--paper);border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600;color:var(--ink)}
.mg-sw-pill.active{background:var(--lilac);border-color:var(--lilac);color:#fff}
.mg-sw-color{width:46px;height:46px;border-radius:10px;border:2px solid transparent;box-shadow:0 0 0 1px var(--border-2);position:relative;text-indent:-9999px}
.mg-sw-color .mg-sw-lbl{position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);text-indent:0;font-size:11px;font-weight:500;color:var(--ink-soft);white-space:nowrap}
.mg-sw-color.active{box-shadow:0 0 0 2px var(--ink)}

/* Add-to-cart de ficha: ancho completo, cantidad en su línea */
.woocommerce form.cart{display:flex;flex-direction:column;gap:14px;align-items:stretch;margin-top:6px}
.woocommerce form.cart .quantity{display:none}/* sin selector de unidades en ficha (como el diseño); se ajusta en el carrito */
.woocommerce form.cart .quantity .qty{height:48px;border:1px solid var(--border-2);border-radius:10px;background:#fff;font-family:inherit;font-size:15px;width:80px;text-align:center}
.woocommerce form.cart .single_add_to_cart_button,.woocommerce .single_add_to_cart_button{width:100% !important;background:var(--ink) !important;color:var(--cream) !important;border-radius:999px !important;padding:17px !important;font-size:16px !important;text-align:center;display:block}
.woocommerce .single_add_to_cart_button:hover{background:var(--coral) !important}
/* Retrato → botón lila */
.mg-is-retrato .single_add_to_cart_button{background:var(--lilac) !important}
.mg-is-retrato .single_add_to_cart_button:hover{background:var(--lilac-d) !important}

/* Precios y títulos */
.woocommerce .price,.woocommerce-Price-amount{color:var(--ink);font-family:'Instrument Serif',serif}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--ink)}

/* Paginación */
.woocommerce nav.woocommerce-pagination ul{border:none;margin-top:34px}
.woocommerce nav.woocommerce-pagination ul li{border:none}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{
  border-radius:999px;color:var(--ink);padding:8px 14px}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--ink);color:var(--cream)}

/* Avisos */
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--coral);background:var(--paper);border-radius:10px}
.woocommerce-message{border-top-color:var(--sage)}

/* Breadcrumb */
.woocommerce-breadcrumb{color:var(--ink-soft);font-size:13px;margin-bottom:12px}
.woocommerce-breadcrumb a{color:var(--ink-soft);text-decoration:none}

/* Toggle perro/gato (guía de tallas) */
.mg-pet-btn{cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;border-radius:999px;padding:9px 16px;background:var(--paper);color:var(--ink);border:1px solid var(--border-2);transition:all .12s}
.mg-pet-btn.active{background:var(--coral);color:var(--paper);border-color:var(--coral)}

/* Swatch de estampado (radio) */
.mg-swatch{display:block;width:40px;height:40px;border-radius:9px;border:2px solid transparent;box-shadow:0 0 0 1px var(--border-2);transition:all .12s}
input:checked + .mg-swatch{border-color:#fff;box-shadow:0 0 0 2px var(--ink)}

/* Chips de estilo (radio) */
.mg-chip{display:inline-block;border:1px solid var(--border-2);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;color:var(--ink);background:var(--paper);transition:all .12s}
input:checked + .mg-chip{background:var(--lilac);border-color:var(--lilac);color:#fff}
label:hover .mg-chip{border-color:var(--lilac)}

/* Acordeón de detalles de producto */
.mg-acc{border-bottom:1px solid var(--border)}
.mg-acc>summary{list-style:none;cursor:pointer;padding:15px 2px;font-size:15px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.mg-acc>summary::-webkit-details-marker{display:none}
.mg-acc>summary::after{content:"+";color:var(--coral)}
.mg-acc[open]>summary::after{content:"\2013"}
.mg-acc p{font-size:14px;line-height:1.6;color:var(--ink-mid);margin:0 0 16px}

/* Inputs de formularios del tema */
.mg-inp{width:100%;background:#fff;border:1px solid var(--border-2);border-radius:10px;padding:12px 14px;font-family:inherit;font-size:14px;color:var(--ink);outline:none}
.mg-inp:focus{border-color:var(--coral)}

/* FAQ (details nativo) */
.mg-faq{border-bottom:1px solid var(--border)}
.mg-faq>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;font-weight:600;font-size:17px;color:var(--ink)}
.mg-faq>summary::-webkit-details-marker{display:none}
.mg-faq>summary::after{content:"+";color:var(--coral);font-size:24px;font-weight:400;line-height:1}
.mg-faq[open]>summary::after{content:"\2013"}
.mg-faq .mg-faq-a{padding:0 4px 20px;color:var(--ink-mid);font-size:15px;line-height:1.6}

/* Contenido de páginas (legal, etc.) */
.mg-content h2{font-size:30px;margin:32px 0 10px}
.mg-content h3{font-size:22px;margin:24px 0 8px}
.mg-content a{color:var(--coral)}
.mg-content ul{padding-left:20px}