/*
Theme Name: Ocio Juguetes · Shoptimizer Child
Template: shoptimizer
Version: 0.3.6
Description: Tema hijo de Ocio Juguetes. Todo cambio de PHP o CSS de la tienda va aquí, nunca en Shoptimizer.
Text Domain: ociojuguetes
*/

/* 0.1.0 (13-10-2026): arranque. El diseño (paleta, portada) lo hará Codex Astra cuando el catálogo esté dentro.
   0.2.0 (13-10-2026): tipografía de tiendacanarias.com (Ivan: «ponle las mismas fuentes»): Manrope variable 200–800,
   subconjunto latino servido en local (OFL en assets/fonts/manrope/). Los tamaños y pesos van en shoptimizer_settings.
   0.3.0 (13-10-2026): colores del logo de Ivan como variables --oj-* y tablas de contenido con ellos (Ivan: «que las tablas
   tengan un formato con nuestros colores corporativos»); más aire antes del pie («pon un poco más de espacio al final»).
   Las variables servirán al diseño completo de Codex Astra.
   0.3.1 (13-10-2026): la tabla de atributos de la ficha («Información adicional») sale de la regla de tablas de contenido y
   tiene estilo propio de ficha técnica (Ivan: «la tabla se ve fea, con el título pegado arriba… nada profesional»).
   0.3.2 (13-10-2026): banner de cookies sin barra de scroll ni texto cortado (Ivan: «hay una raya… y se corta texto»).
   0.3.3 (13-10-2026): aviso de envíos en la barra superior y en la ficha (Ivan: «pon que no enviamos a islas, Ceuta ni
   Melilla en la web»).
   0.3.4 (13-10-2026): tarjetas de producto sin el panel con sombra de Shoptimizer al pasar el ratón (Ivan: «no quiero que
   salga ese reborde… si eso otro efecto, quizás solo en la foto»). Shoptimizer no tiene opción para quitarlo.
   0.3.5 (13-10-2026): pie equilibrado (marca con logo transparente y frase, Descubre, Ayuda, Legal) y logos de pago en la
   barra inferior (Ivan: «columna de ayuda muy larga… logo en PNG transparente… formas de pago, lo típico de Stripe»). */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(assets/fonts/manrope/manrope-latin-wght-200-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{--wp--preset--font-family--primary:Manrope,sans-serif}

/* Marca: colores medidos en el icono y el logo (assets/brand/). Contrastes: blanco sobre morado 6,8:1; tinta sobre crema 13,3:1. */
:root{
  --oj-amarillo:#FBB30A;--oj-naranja:#FA8303;--oj-rojo:#F93B29;--oj-morado:#7037CB;--oj-verde:#99CF01;
  --oj-tinta:#2B2B2B;--oj-crema:#FFF7E3;--oj-lila:#F4EEFC;--oj-linea:#E6DCF5;--oj-radio:14px;
  --oj-arcoiris:linear-gradient(90deg,var(--oj-amarillo),var(--oj-naranja),var(--oj-rojo),var(--oj-morado),var(--oj-verde));
}

/* Tablas de contenido (legales, ayuda). Solo las hijas directas de .entry-content: las de WooCommerce van anidadas. */
.entry-content > table:not(.shop_attributes){
  width:100%;margin:1.75em 0 2.25em;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid var(--oj-linea);border-radius:var(--oj-radio);overflow:hidden;font-size:.95em;line-height:1.5;
  box-shadow:0 1px 2px rgba(43,43,43,.04),0 10px 24px -16px rgba(112,55,203,.35);
}
.entry-content > table:not(.shop_attributes) caption{caption-side:top;text-align:left;padding:0 0 .65em;font-weight:700;color:var(--oj-tinta)}
.entry-content > table:not(.shop_attributes) thead{background:var(--oj-arcoiris) top left/100% 4px no-repeat,var(--oj-morado)}
.entry-content > table:not(.shop_attributes) thead th{
  background:transparent;color:#fff;font-weight:700;text-align:left;vertical-align:bottom;
  padding:1.05em 1.1em .8em;border:0;letter-spacing:.01em;
}
.entry-content > table:not(.shop_attributes) tbody th,
.entry-content > table:not(.shop_attributes) tbody td{
  background:transparent;color:var(--oj-tinta);text-align:left;vertical-align:top;
  padding:.85em 1.1em;border:0;border-top:1px solid var(--oj-linea);
}
.entry-content > table:not(.shop_attributes) tbody tr:first-child > *{border-top:0}
.entry-content > table:not(.shop_attributes) tbody tr:nth-child(even){background:var(--oj-crema)}
.entry-content > table:not(.shop_attributes) tbody th{font-weight:700}
@media (max-width:600px){
  .entry-content > table:not(.shop_attributes){font-size:.875em}
  .entry-content > table:not(.shop_attributes) th,.entry-content > table:not(.shop_attributes) td{padding:.7em .75em}
}

/* Aire entre el contenido de las páginas y el pie. */
.page .site-main{padding-bottom:clamp(3rem,6vw,5.5rem)}

/* Ficha de producto · «Información adicional» como ficha técnica: etiqueta sobre lila muy suave y valor en tinta.
   El selector supera al de Shoptimizer (.woocommerce table.shop_attributes th), que deja padding-top:0. Contraste de la
   etiqueta #5E5470 sobre #FAF7FE: 6,6:1. */
.woocommerce .woocommerce-Tabs-panel table.shop_attributes{
  width:100%;max-width:none;margin:.5em 0 1.5em;border-collapse:separate;border-spacing:0;background:#fff;
  border:1px solid var(--oj-linea);border-radius:var(--oj-radio);overflow:hidden;font-size:.95rem;line-height:1.45;
}
.woocommerce .woocommerce-Tabs-panel table.shop_attributes tr{background:none}
.woocommerce .woocommerce-Tabs-panel table.shop_attributes th,
.woocommerce .woocommerce-Tabs-panel table.shop_attributes td{
  padding:.95em 1.25em;border:0;border-top:1px solid var(--oj-linea);vertical-align:middle;font-style:normal;text-align:left;
}
.woocommerce .woocommerce-Tabs-panel table.shop_attributes tr:first-child > *{border-top:0}
.woocommerce .woocommerce-Tabs-panel table.shop_attributes th{
  width:28%;background:#FAF7FE;color:#5E5470;font-weight:600;font-size:.875rem;letter-spacing:.01em;
}
.woocommerce .woocommerce-Tabs-panel table.shop_attributes td{color:var(--oj-tinta);font-weight:500}
.woocommerce .woocommerce-Tabs-panel table.shop_attributes td p{margin:0;padding:0}
.woocommerce .woocommerce-Tabs-panel table.shop_attributes td a{color:var(--oj-morado);text-decoration:underline;text-underline-offset:2px}
@media (max-width:600px){
  .woocommerce .woocommerce-Tabs-panel table.shop_attributes th{width:42%}
  .woocommerce .woocommerce-Tabs-panel table.shop_attributes th,
  .woocommerce .woocommerce-Tabs-panel table.shop_attributes td{padding:.8em .9em}
}

/* Banner de cookies (Complianz; su estilo de marca vive en assets/cookies.css). El mensaje traía un ancho fijo mayor que su
   caja (438 frente a 430 px): salía una barra de scroll horizontal (la raya) y se cortaba el final de cada línea.
   Selector reforzado con body para no depender del orden de carga de las hojas. */
body .cmplz-cookiebanner .cmplz-message{width:auto!important;max-width:100%;min-width:0}
body .cmplz-cookiebanner .cmplz-body{overflow-x:hidden}

/* Aviso de envíos: barra superior (escritorio) y bajo el botón de compra en la ficha (también en móvil). */
.top-bar .widget_text,.top-bar .textwidget{font-size:13px}
.top-bar .oj-envios-barra{margin:0;text-align:center;color:var(--oj-tinta)}
.top-bar .oj-envios-barra strong{color:var(--oj-morado)}
.oj-envio-ficha{margin:1.25em 0 0;padding:.85em 1em;border:1px solid var(--oj-linea);border-radius:12px;background:#FAF7FE;
  font-size:.875rem;line-height:1.5;color:var(--oj-tinta)}
.oj-envio-ficha p{margin:0 0 .35em}
.oj-envio-ficha p:last-child{margin:0}
.oj-envio-ficha strong{color:var(--oj-tinta)}
.oj-envio-ficha a{color:var(--oj-morado);text-decoration:underline;text-underline-offset:2px}
.top-bar .oj-envios-barra a{color:inherit;text-decoration:none}
.top-bar .oj-envios-barra a:hover,.top-bar .oj-envios-barra a:focus-visible{text-decoration:underline;text-underline-offset:2px}

/* Tarjetas de producto al pasar el ratón: fuera el panel blanco con sombra de Shoptimizer (li.product:hover::before) y su
   encogido de la foto. En su lugar, la foto crece un 4 % dentro de su marco, el marco toma el lila de la marca y el título
   el morado. Solo con ratón; sin movimiento si el usuario lo tiene desactivado. Misma receta que weprintjoy (0.3.5). */
ul.products li.product::before,ul.products li.product:hover::before{display:none!important;content:none!important}
ul.products li.product:not(.product-category):hover .woocommerce-image__wrapper{transform:none!important}
ul.products li.product .woocommerce-image__wrapper img{transition:transform .5s cubic-bezier(.2,.6,.2,1)}
ul.products li.product .woocommerce-image__wrapper{transition:border-color .2s}
ul.products li.product .woocommerce-loop-product__title a{transition:color .2s}
@media (hover:hover){
  ul.products li.product:not(.product-category):hover .woocommerce-image__wrapper img,
  ul.products li.product:not(.product-category):focus-within .woocommerce-image__wrapper img{transform:scale(1.04)!important}
  ul.products li.product:not(.product-category):hover .woocommerce-image__wrapper{border-color:#CDBAF0}
  body ul.products li.product:hover .woocommerce-loop-product__title a,body ul.products li.product:hover .woocommerce-loop-product__title a:visited{color:var(--oj-morado)!important}
}
@media (prefers-reduced-motion:reduce){
  ul.products li.product .woocommerce-image__wrapper img{transition:none}
  ul.products li.product:hover .woocommerce-image__wrapper img{transform:none!important}
}

/* Pie: marca con logo transparente y una frase; logos de pago en la barra inferior. */
.oj-footer-brand .oj-footer-logo{display:inline-block;line-height:0}
.oj-footer-brand .oj-footer-logo img{width:200px;height:auto}
.oj-footer-brand .oj-footer-lema{margin:14px 0 0;max-width:30ch;font-size:13px;line-height:1.6;color:#514953}
body footer.copyright .col-full{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
body footer.copyright .col-full>*{margin:0}
.oj-pagos{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.oj-pagos li{margin:0!important;line-height:0}
.oj-pagos img{width:auto;height:24px;border:0;border-radius:0;background:none;box-shadow:none}
@media (max-width:600px){body footer.copyright .col-full{flex-direction:column-reverse;align-items:flex-start}}