/* ============================================================
   PRODUCTO - single-product.php (galeria, tabs, relacionados).
   Se carga solo en is_product() (ver inc/enqueue.php).
   Portado del prototipo aprobado (Design System v1.0).
   ============================================================ */

/* 20 . Grid principal (galeria | info+compra) - antes vivia como style
   inline en single-product.php ("display:grid;grid-template-columns:1fr 1fr")
   sin NINGUN ajuste para mobile desde que se construyo esta plantilla -
   confirmado en vivo el 2026-08-05: en un telefono de 390px, forzar 2
   columnas iguales dejaba cada una en ~195px, aplastando tanto la
   galeria como la columna de compra (el boton real "Personalizar y
   Comprar" SI se dibujaba, pero tan angosto/empujado hacia abajo que
   parecia no estar). Un estilo inline no se puede sobreescribir con un
   media query normal (gana por especificidad) - por eso se movio a una
   clase real aqui, para poder agregarle el colapso a 1 columna en
   pantallas chicas. */
  .pg-product-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
  @media (max-width:900px){
    .pg-product-grid{grid-template-columns:1fr;gap:28px;}
  }

/* 21 . Product Gallery */
  .pg-gallery{display:grid;grid-template-columns:84px 1fr;gap:14px;}
  .pg-main{aspect-ratio:1/1;background:var(--bg-raised);border:1px solid var(--line);overflow:hidden;position:relative;cursor:zoom-in;}
  .pg-main img{width:100%;height:100%;object-fit:cover;}
  .pg-main .zoom-tag{position:absolute;right:8px;bottom:8px;font-family:'Oswald';font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);background:rgba(13,11,8,.65);padding:4px 8px;border-radius:20px;}
  .pg-thumbs{display:flex;flex-direction:column;gap:8px;}
  .pg-thumb{aspect-ratio:1/1;border:1px solid var(--line);overflow:hidden;cursor:pointer;}
  .pg-thumb.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);}
  .pg-thumb img{width:100%;height:100%;object-fit:cover;}

/* 21b . Caja de compra (productos sin opciones, ej. Cajas Misteriosas) -
   precio+disponibilidad+boton dentro de un recuadro propio, en vez de un
   boton suelto - pedido explicito del cliente el 2026-08-07 ("como tiene
   Amazon"). El precio/resenas van FUERA de este bloque (se imprimen
   igual para todos los productos, con o sin opciones) - aqui solo entra
   la disponibilidad real y el boton de compra. */
  .tf-buybox{border:1px solid var(--line);background:var(--bg-raised);border-radius:var(--radius,10px);padding:20px 22px;max-width:420px;}
  .tf-buybox-stock .stock{margin:0 0 16px;font-family:'Oswald';font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center;gap:8px;}
  .tf-buybox-stock .stock::before{content:'';width:8px;height:8px;border-radius:50%;flex-shrink:0;}
  .tf-buybox-stock .stock.in-stock{color:#3fae6a;}
  .tf-buybox-stock .stock.in-stock::before{background:#3fae6a;}
  .tf-buybox-stock .stock.out-of-stock{color:#c0553f;}
  .tf-buybox-stock .stock.out-of-stock::before{background:#c0553f;}
  .tf-buybox-stock .stock.available-on-backorder{color:var(--gold-dim);}
  .tf-buybox-stock .stock.available-on-backorder::before{background:var(--gold-dim);}

  /* Orden vertical tipo AliExpress (captura del cliente el 2026-08-07):
     disponibilidad -> cantidad sola en su fila -> "Comprar ahora"
     (boton principal, arriba) -> "Anadir al carrito" (boton secundario,
     abajo) - los 2 botones a todo el ancho, uno debajo del otro, no lado
     a lado como el primer intento (estilo Amazon horizontal). El campo
     de cantidad y el boton real de WooCommerce quedan DENTRO de
     ".tf-native-add-to-cart" > "form.cart" en el HTML (no se puede
     tocar esa estructura sin arriesgar que WooCommerce deje de guardar
     bien la cantidad/el producto) - "display:contents" en ambos
     envoltorios los vuelve items directos de este mismo flex para poder
     ordenarlos junto con "Comprar ahora" sin mover nada en el PHP. */
  .tf-buybox{display:flex;flex-direction:column;}
  .tf-buybox-stock{order:0;}
  .tf-buybox-qty-label{order:1;font-family:'Oswald';font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:8px;}
  .tf-buybox .tf-native-add-to-cart,
  .tf-buybox .tf-native-add-to-cart form.cart{display:contents;}
  .tf-buybox .quantity{
    order:2;align-self:flex-start;margin-bottom:16px;
    display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  }
  .tf-buybox .quantity .tf-qty-op{
    width:38px;height:44px;border:0;background:var(--bg-raised-2);color:var(--ink);
    font-family:'Oswald';font-size:16px;font-weight:600;cursor:pointer;flex-shrink:0;
  }
  .tf-buybox .quantity .tf-qty-op:hover{background:var(--line);}
  .tf-buybox .quantity input.qty{
    width:48px;height:44px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
    text-align:center;font-family:'Oswald';font-size:14px;font-weight:600;color:var(--ink);background:var(--bg-raised);
    -moz-appearance:textfield;
  }
  .tf-buybox .quantity input.qty::-webkit-outer-spin-button,
  .tf-buybox .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  .tf-buy-now-btn{order:3;width:100%;display:block;text-align:center;margin-bottom:10px;}
  .tf-buybox .tf-native-add-to-cart button[type="submit"]{
    order:4;width:100%;background:transparent;border:1.5px solid var(--ink);color:var(--ink);
    font-family:'Oswald';font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:13px;
    border-radius:6px;cursor:pointer;padding:12px;
  }
  .tf-buybox .tf-native-add-to-cart button[type="submit"]:hover{background:var(--bg-raised-2);}

/* 22 . Product Tabs */
  .pg-tabs{border-bottom:1px solid var(--line);display:flex;gap:26px;overflow-x:auto;margin-top:48px;}
  .pg-tab{font-family:'Oswald';font-weight:600;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);padding:13px 1px;border-bottom:2px solid transparent;white-space:nowrap;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;}
  .pg-tab.active{color:var(--gold);border-color:var(--gold);}
  .pg-panel{padding:22px 0 4px;color:var(--ink-muted);font-size:14px;line-height:1.7;max-width:64ch;}
  .pg-panel b{color:var(--ink);}