/*
 * Páginas interiores de liloo.studio (todo menos la portada, que lleva
 * inicio.css): iconos sin Font Awesome, formularios de WooCommerce (contraste
 * y tamaño de los controles), tablas que se desplazan, la ficha (un solo botón
 * lleno), la página 404 y la de pedido recibido. Se carga después de main.css,
 * comun.css y cesta.css (functions.php, liloo_paginas_recursos()).
 *
 * Paleta: Lemon Chiffon #FFF8CA (fondo), Coffee Bean #2D120D (texto, 16,2:1),
 * Rosewood #6B0B0C (marca, 11,6:1 sobre Lemon; NUNCA sobre Coffee Bean) y
 * Botticelli #CDE3E8 (acento; Coffee Bean encima da 13,1:1).
 *
 * Mobile-first. Puntos de corte de Bootstrap (lg = 992 px es "escritorio").
 */


/* ---------- Iconos con máscara (en lugar de Font Awesome) ----------
   La casita de la miga de pan y la lupa del buscador (filtros
   bootscore/icon/home y bootscore/icon/search en functions.php). Toman el
   color del texto. */

.liloo-icono {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.125em;
  background: currentColor;
  -webkit-mask: var(--liloo-icono) center / contain no-repeat;
  mask: var(--liloo-icono) center / contain no-repeat;
}

.liloo-icono--casa {
  --liloo-icono: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3 10.5 12 3l9 7.5'/%3e%3cpath d='M5.5 9v11.5h4.75V15h3.5v5.5h4.75V9'/%3e%3c/svg%3e");
}

.liloo-icono--lupa {
  --liloo-icono: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3e%3ccircle cx='10.5' cy='10.5' r='6.5'/%3e%3cpath d='m20 20-4.75-4.75'/%3e%3c/svg%3e");
}


/* ---------- Formularios (Mi cuenta, contraseña olvidada, buscador…) ----------
   El borde gris de Bootstrap (#dee2e6) daba 1,2:1 sobre Lemon Chiffon; WCAG
   1.4.11 pide 3:1 para el contorno de un control. Coffee Bean al 55 % = 3,9:1.
   La caja (bloques de WooCommerce) ya trae sus bordes oscuros: no se toca;
   sí su página de pedido recibido (el correo que pide para enseñar el pedido).
   Los − y + de la cantidad (.input-group-text) llevan el mismo borde que el campo. */

:is(body:not(.woocommerce-checkout), body.woocommerce-order-received) .site-main :is(input.input-text, .form-control, .form-select, select, textarea, .input-group-text),
:is(body:not(.woocommerce-checkout), body.woocommerce-order-received) .site-main .form-check-input:not(:checked) {
  border-color: rgba(45, 18, 13, .55);
}

/* El ojo de "mostrar contraseña" de WooCommerce medía 22 × 22: el toque llega
   a 30 × 30 (WCAG 2.5.8 pide 24) sin mover el dibujo. */
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
  box-sizing: content-box;
  margin: -4px -4px 0 0;
  padding: 4px;
}


/* ---------- Tablas que se desplazan a lo ancho ----------
   Las de las páginas legales y la caja no caben en un móvil y se desplazan.
   comun.js les da tabindex="0" solo cuando de verdad se desplazan (WCAG 2.1.1:
   con teclado también); aquí, que se vea el foco. */

.liloo-tabla-desplazable:focus-visible {
  outline: 2px solid #6B0B0C;
  outline-offset: 2px;
}


/* ---------- Ficha: una sola llamada a la acción ----------
   "Añadir a la cesta" de la lámpara que se está viendo es el único botón
   lleno de la página; los de "Productos relacionados" (y "Quizá te guste")
   van con borde, como acción secundaria. En la tienda y las categorías cada
   tarjeta mantiene su botón lleno: allí es la acción principal. */

.single-product :is(.related, .upsells) .btn-primary {
  --bs-btn-color: #6B0B0C;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #6B0B0C;
  --bs-btn-hover-color: #FFF8CA;
  --bs-btn-hover-bg: #6B0B0C;
  --bs-btn-hover-border-color: #6B0B0C;
  --bs-btn-active-color: #FFF8CA;
  --bs-btn-active-bg: #6B0B0C;
  --bs-btn-active-border-color: #6B0B0C;
}


/* ---------- Ficha: la galería no salta al montarse ----------
   Mientras el JS de WooCommerce monta la galería (flexslider) la galería va
   con opacidad 0 (estilo en línea de WooCommerce) y pasa por estados con las
   fotos en columna o a lo ancho de todas: todo lo de debajo bajaba y subía
   de golpe (CLS 0,30 en móvil y 0,11 en escritorio, medido con PageSpeed).
   Durante ese rato la caja de la galería tiene ya su proporción final
   (--liloo-galeria: primera foto + filas de miniaturas, la calcula
   liloo_ficha_galeria_proporcion() en functions.php) y recorta lo que sobre. */

.woocommerce div.product div.images.woocommerce-product-gallery[style*="opacity: 0"] {
  aspect-ratio: var(--liloo-galeria, auto);
  min-height: 0;
  overflow: hidden;
}


/* ---------- Botones de las páginas interiores ---------- */

.liloo-btn--marca {
  --bs-btn-bg: #6B0B0C;
  --bs-btn-color: #FFF8CA;
  --bs-btn-hover-bg: #2D120D;
  --bs-btn-hover-color: #FFF8CA;
  --bs-btn-active-bg: #2D120D;
  --bs-btn-active-color: #FFF8CA;
}

.liloo-btn--borde {
  --bs-btn-bg: transparent;
  --bs-btn-color: #2D120D;
  --bs-btn-border-width: 1.5px;
  --bs-btn-border-color: #2D120D;
  --bs-btn-hover-bg: #2D120D;
  --bs-btn-hover-color: #FFF8CA;
  --bs-btn-hover-border-color: #2D120D;
  --bs-btn-active-bg: #2D120D;
  --bs-btn-active-color: #FFF8CA;
  --bs-btn-active-border-color: #2D120D;
}

:is(.liloo-btn--marca, .liloo-btn--borde):focus-visible {
  outline: 2px solid #6B0B0C;
  outline-offset: 3px;
}


/* ---------- Página 404 (404.php) ----------
   Etiqueta, titular y texto del diseño, dos salidas (la tienda llena, la
   portada con borde) y cuatro lámparas en tarjeta. */

.liloo-404 {
  padding-block: clamp(24px, 5vw, 64px) clamp(56px, 8vw, 104px);
}

.liloo-404__intro {
  max-width: 760px;
}

.liloo-404 .liloo-etiqueta {
  color: #6B0B0C;
}

.liloo-404__titulo {
  margin: 12px 0 0;
  font-size: clamp(40px, 7vw, 84px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.liloo-404__texto {
  max-width: 560px;
  margin: 20px 0 0;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.5;
}

.liloo-404__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.liloo-404__lamparas {
  margin-top: clamp(48px, 7vw, 88px);
}

.liloo-404__subtitulo {
  margin: 0 0 20px;
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: -.01em;
}

.liloo-404__lampara {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  color: #2D120D;
  text-decoration: none;
}

.liloo-404__lampara img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin-bottom: 10px;
  border-radius: 20px;
  object-fit: cover;
  background: rgba(45, 18, 13, .06);
  transition: transform .3s ease;
}

.liloo-404__nombre {
  font-family: var(--liloo-font-titulos);
  font-size: 17px;
  font-weight: 700;
}

.liloo-404__precio {
  font-size: 15px;
}

.liloo-404__lampara:hover {
  color: #2D120D;
}

.liloo-404__lampara:hover .liloo-404__nombre {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.liloo-404__lampara:hover img {
  transform: scale(1.02);
}

.liloo-404__lampara:focus-visible {
  outline: 2px solid #6B0B0C;
  outline-offset: 4px;
  border-radius: 20px;
}


/* ---------- Pedido recibido (WooCommerce, transferencia) ----------
   Resumen en una tarjeta Botticelli en vez del verde de alerta de Bootstrap;
   los datos de la transferencia en una tarjeta con borde, con el IBAN fácil de
   seleccionar; tablas y direcciones con el borde de la marca. Sin el icono
   de Font Awesome que ponía Bootscore delante de las listas. */

.woocommerce-order .woocommerce-thankyou-order-received {
  margin: 0 0 20px;
  font-family: var(--liloo-font-titulos);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1.25;
}

.woocommerce .woocommerce-order ul.order_details::before {
  content: none;
  display: none;
}

.woocommerce .woocommerce-order ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 36px;
  margin: 0 0 32px;
  padding: 20px 24px;
  border: 0;
  border-radius: 20px;
  background: #CDE3E8;
  color: #2D120D;
  list-style: none;
}

.woocommerce .woocommerce-order ul.order_details li {
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 12px;
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.woocommerce .woocommerce-order ul.order_details li strong {
  display: block;
  margin-top: 4px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.woocommerce-order .woocommerce-bacs-bank-details {
  margin: 0 0 36px;
  padding: 20px 24px 24px;
  border: 1.5px solid #2D120D;
  border-radius: 20px;
}

.woocommerce-order .wc-bacs-bank-details-heading {
  margin: 0 0 4px;
  font-size: clamp(22px, 2.2vw, 26px);
  font-weight: 700;
}

.woocommerce-order .wc-bacs-bank-details-account-name {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
}

.woocommerce .woocommerce-order ul.bacs_details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-order ul.bacs_details .iban strong {
  font-variant-numeric: tabular-nums;
  -webkit-user-select: all;
  user-select: all;
}

.woocommerce-order :is(.woocommerce-table--order-details, .woocommerce-customer-details address) {
  border-color: rgba(45, 18, 13, .2);
}

.woocommerce-order .woocommerce-table--order-details :is(th, td) {
  border-color: rgba(45, 18, 13, .14);
}

@media (min-width: 768px) {
  .woocommerce .woocommerce-order ul.woocommerce-order-overview li + li {
    padding-left: 36px;
    border-left: 1px solid rgba(45, 18, 13, .25);
  }

  .woocommerce .woocommerce-order ul.woocommerce-order-overview {
    gap: 16px 0;
  }

  .woocommerce .woocommerce-order ul.woocommerce-order-overview li {
    padding-right: 36px;
  }
}


/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  .liloo-404__lampara img {
    transition: none;
  }

  .liloo-404__lampara:hover img {
    transform: none;
  }
}