/*
Theme Name: Astra Child
Theme URI: https://coolook.pe
Description: Tema hijo de Astra para coolook.pe. Contiene el sistema visual de la marca, replicado del original coolook.es (Shopify Dawn), y las plantillas estructurales de la tienda.
Author: coolook.pe
Author URI: https://coolook.pe
Template: astra
Version: 2.1.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Domain Path: /languages
*/
/* ==========================================================================
SISTEMA VISUAL COOLOOK
Valores medidos sobre coolook.es el 02/09/2026. No inventar: si hace falta
un valor nuevo, medirlo en el original y anadirlo aqui como variable.
========================================================================== */
:root {
/* --- Color ----------------------------------------------------------- */
--coolook-tinta: #121212;
--coolook-texto: rgba(18, 18, 18, .75); /* cuerpo: tinta al 75% */
--coolook-tenue: rgba(18, 18, 18, .55);
--coolook-papel: #ffffff;
--coolook-arena: #efe2ce; /* acento de marca: botones */
--coolook-arena-hover: #e5d4b8;
--coolook-linea: rgba(18, 18, 18, .12);
--coolook-velo: rgba(18, 18, 18, .04);
/* --- Tipografia ------------------------------------------------------ */
/* Una sola familia para titulos y cuerpo, como el original. */
--coolook-fuente: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--coolook-peso-titulo: 400; /* los titulares NUNCA van en negrita */
--coolook-peso-fuerte: 600;
--coolook-ls-titulo: .6px;
--coolook-ls-boton: 1px;
--coolook-ls-etiqueta: .14em;
/* --- Medidas --------------------------------------------------------- */
--coolook-ancho: 1600px;
--coolook-gutter: 8px; /* separacion de rejilla en escritorio */
--coolook-radio: 0px; /* esquinas rectas en TODO */
--coolook-margen: 24px; /* aire lateral en movil */
--coolook-transicion: .2s cubic-bezier(0, 0, .3, 1);
}
@media (max-width: 749px) {
:root {
--coolook-gutter: 4px;
--coolook-margen: 16px;
}
}
/* ==========================================================================
BASE
========================================================================== */
body.coolook-theme {
font-family: var(--coolook-fuente);
font-size: 15px;
line-height: 1.6;
color: var(--coolook-texto);
background-color: var(--coolook-papel);
-webkit-font-smoothing: antialiased;
}
.coolook-theme h1,
.coolook-theme h2,
.coolook-theme h3,
.coolook-theme h4,
.coolook-theme h5,
.coolook-theme h6 {
font-family: var(--coolook-fuente);
font-weight: var(--coolook-peso-titulo);
letter-spacing: var(--coolook-ls-titulo);
color: var(--coolook-tinta);
text-wrap: balance;
}
/* Esquinas rectas en todo, que es la firma visual de la marca. */
.coolook-theme .ast-button,
.coolook-theme button,
.coolook-theme input,
.coolook-theme select,
.coolook-theme textarea,
.coolook-theme img,
.coolook-theme .wp-block-button__link {
border-radius: var(--coolook-radio);
}
/* ==========================================================================
ESTRUCTURA
========================================================================== */
.coolook-ancho {
max-width: var(--coolook-ancho);
margin-inline: auto;
padding-inline: var(--coolook-margen);
}
/*
* Ancho completo. El original va a sangre de borde a borde: medido sobre
* coolook.es, cada sección ocupa 1265px en una ventana de 1280. Astra envuelve
* el contenido en `.ast-container`, con un máximo de 1240px y 20px de aire
* lateral, y eso dejaba el prototipo 65px más estrecho que el original.
*
* Estas reglas SON el mecanismo, no un parche: `.coolook-full .ast-container`
* (0,2,0) gana por especificidad a las `.ast-container` (0,1,0) que Astra emite
* en su CSS dinámico. Comprobado quitándolas en caliente: sin ellas el ancho
* vuelve a 1240/1200.
*
* Solo aplica donde `coolook_es_ancho_completo()` pone la clase en el body,
* para no romper el ancho de lectura de las páginas de texto.
*/
/*
* Se listan las dos formas a proposito. La corta cubre el caso general; la
* larga existe porque en el archivo de tienda Astra emite
* `.ast-woo-shop-archive .site-content > .ast-container { max-width: 1200px }`,
* con tres clases, que gana a la corta. Anadiendo `.site-content` empatamos en
* clases y desempatamos con el elemento.
*/
.coolook-full .ast-container,
body.coolook-full .site-content > .ast-container {
max-width: 100%;
width: 100%;
margin-inline: 0;
padding-inline: 0;
}
.coolook-full .site-content,
.coolook-full #primary,
.coolook-full .site-main {
max-width: none;
margin: 0;
padding: 0;
}
/*
* En el original las secciones no tienen separacion vertical: los bloques de
* imagen van pegados, a sangre. Ese "sin aire" es parte del diseno.
*/
.coolook-seccion {
margin: 0;
padding: 0;
}
.coolook-seccion + .coolook-seccion {
margin-top: var(--coolook-gutter);
}
/* Titulo de seccion: mayusculas, ligero, muy espaciado. */
.coolook-titulo-seccion {
font-size: clamp(1.25rem, 2.4vw, 1.75rem);
font-weight: var(--coolook-peso-titulo);
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tinta);
text-align: center;
margin: 0;
padding: 56px var(--coolook-margen) 28px;
}
.coolook-subtitulo-seccion {
text-align: center;
color: var(--coolook-tenue);
letter-spacing: var(--coolook-ls-titulo);
text-transform: uppercase;
font-size: .8125rem;
margin: -16px 0 28px;
padding-inline: var(--coolook-margen);
}
/* ==========================================================================
BOTONES
========================================================================== */
.coolook-boton {
display: inline-block;
background: var(--coolook-arena);
color: var(--coolook-tinta);
border: 0;
border-radius: var(--coolook-radio);
box-shadow: none;
font-family: var(--coolook-fuente);
font-size: 15px;
font-weight: var(--coolook-peso-titulo);
letter-spacing: var(--coolook-ls-boton);
line-height: 1.4;
padding: 14px 32px;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color var(--coolook-transicion);
}
.coolook-boton:hover,
.coolook-boton:focus-visible {
background: var(--coolook-arena-hover);
color: var(--coolook-tinta);
}
.coolook-boton--contorno {
background: transparent;
border: 1px solid var(--coolook-tinta);
}
.coolook-boton--contorno:hover,
.coolook-boton--contorno:focus-visible {
background: var(--coolook-tinta);
color: var(--coolook-papel);
}
.coolook-boton--claro {
background: var(--coolook-papel);
}
/* Foco visible y coherente en toda la tienda. */
.coolook-theme a:focus-visible,
.coolook-theme button:focus-visible,
.coolook-boton:focus-visible {
outline: 2px solid var(--coolook-tinta);
outline-offset: 3px;
}
/* ==========================================================================
REJILLAS
Gutter de 8px: el catalogo se lee como un mosaico continuo, no como tarjetas
separadas. Es lo que da la sensacion de editorial y no de tienda generica.
========================================================================== */
.coolook-rejilla {
display: grid;
gap: var(--coolook-gutter);
margin: 0;
padding: 0 var(--coolook-gutter) var(--coolook-gutter);
list-style: none;
}
.coolook-rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.coolook-rejilla--3 { grid-template-columns: repeat(2, 1fr); }
.coolook-rejilla--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 750px) {
.coolook-rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.coolook-rejilla--4 { grid-template-columns: repeat(4, 1fr); }
}
/*
* Las rejillas de PRODUCTO no van a sangre: coolook.es las encierra en su
* ancho de pagina (160rem = 1600px) con 50px de aire a cada lado, y las
* tarjetas quedan en 4 columnas de ~367px. Lo demas de la portada (el trio de
* categorias, el hero) sigue a sangre.
*/
.coolook-rejilla--ancho {
max-width: var(--coolook-ancho);
margin-inline: auto;
padding: 0 16px var(--coolook-gutter);
}
@media (min-width: 750px) {
.coolook-rejilla--ancho { padding: 0 50px var(--coolook-gutter); }
}
/* A sangre: sin aire lateral, pegado al borde de la ventana. */
.coolook-rejilla--sangre {
padding: 0;
gap: var(--coolook-gutter);
}
/* ==========================================================================
TARJETA DE PRODUCTO
========================================================================== */
.coolook-producto {
display: flex;
flex-direction: column;
gap: 8px;
background: var(--coolook-papel);
margin: 0;
}
.coolook-producto__media {
position: relative;
display: block;
overflow: hidden;
background: var(--coolook-velo);
/* 4:5, como la tarjeta de coolook.es (--ratio-percent: 125%). */
aspect-ratio: 4 / 5;
}
.coolook-producto__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/*
* Al pasar el raton aparece la segunda foto de la galeria, como alli
* (media--hover-effect): va encima, invisible, y se funde en hover. Solo
* donde hay raton: en el telefono no hay hover y taparia la principal al
* tocar.
*/
.coolook-producto__media .coolook-producto__segunda {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity var(--coolook-transicion);
}
@media (hover: hover) {
.coolook-producto:hover .coolook-producto__media--doble .coolook-producto__segunda { opacity: 1; }
}
.coolook-producto__cuerpo {
display: flex;
flex-direction: column;
gap: 3px;
padding: 0 0 14px;
}
.coolook-producto__titulo {
font-size: 17px;
font-weight: var(--coolook-peso-titulo);
letter-spacing: var(--coolook-ls-titulo);
line-height: 1.35;
margin: 0;
}
.coolook-producto__titulo a {
color: var(--coolook-tinta);
text-decoration: none;
}
.coolook-producto__titulo a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.coolook-producto__precio {
font-size: 15px;
color: var(--coolook-texto);
font-variant-numeric: tabular-nums;
}
.coolook-producto__precio del { opacity: .5; margin-right: 6px; }
.coolook-producto__precio ins { text-decoration: none; }
.coolook-producto__etiqueta {
position: absolute;
top: 10px;
left: 10px;
background: var(--coolook-arena);
color: var(--coolook-tinta);
font-size: 11px;
letter-spacing: var(--coolook-ls-boton);
text-transform: uppercase;
padding: 4px 10px;
}
/* Respeta a quien pide menos movimiento. */
@media (prefers-reduced-motion: reduce) {
.coolook-producto__media img,
.coolook-producto__segunda,
.coolook-tarjeta__media img { transition: none; }
.coolook-tarjeta:hover .coolook-tarjeta__media img { transform: none; }
}
/* ==========================================================================
TARJETA DE CATEGORIA / COLECCION
El trio de imagenes con rotulo encima es el patron que mas se repite en la
home del original.
========================================================================== */
.coolook-tarjeta {
position: relative;
display: block;
overflow: hidden;
text-decoration: none;
background: var(--coolook-velo);
aspect-ratio: 3 / 4;
}
.coolook-tarjeta__media,
.coolook-tarjeta__media img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.coolook-tarjeta__media img {
transition: transform 3s cubic-bezier(0, 0, .3, 1);
}
.coolook-tarjeta:hover .coolook-tarjeta__media img {
transform: scale(1.04);
}
.coolook-tarjeta__capa {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 6px;
padding: 32px 20px;
text-align: center;
background: linear-gradient(to top, rgba(18, 18, 18, .42) 0%, rgba(18, 18, 18, .08) 45%, transparent 75%);
}
.coolook-tarjeta__rotulo {
color: #fff;
font-size: clamp(1.125rem, 2vw, 1.5rem);
font-weight: var(--coolook-peso-titulo);
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
margin: 0;
}
.coolook-tarjeta__pie {
color: rgba(255, 255, 255, .85);
font-size: .8125rem;
letter-spacing: var(--coolook-ls-titulo);
text-transform: uppercase;
margin: 0;
}
/*
* Categoria sin foto asignada: en lugar de un hueco gris con texto blanco
* ilegible, se pinta sobre arena. Se ve intencionado y le senala al operador
* que ahi falta una imagen.
*/
.coolook-tarjeta--sin-imagen {
background: var(--coolook-arena);
}
.coolook-tarjeta--sin-imagen .coolook-tarjeta__capa {
background: none;
justify-content: center;
}
.coolook-tarjeta--sin-imagen .coolook-tarjeta__rotulo { color: var(--coolook-tinta); }
.coolook-tarjeta--sin-imagen .coolook-tarjeta__pie { color: var(--coolook-tenue); }
/* Variante con el rotulo debajo de la imagen, sobre papel. */
.coolook-tarjeta--rotulo-fuera .coolook-tarjeta__capa {
position: static;
background: none;
padding: 14px 8px 24px;
}
.coolook-tarjeta--rotulo-fuera .coolook-tarjeta__rotulo { color: var(--coolook-tinta); }
.coolook-tarjeta--rotulo-fuera .coolook-tarjeta__pie { color: var(--coolook-tenue); }
.coolook-tarjeta--rotulo-fuera { aspect-ratio: auto; }
.coolook-tarjeta--rotulo-fuera .coolook-tarjeta__media { aspect-ratio: 3 / 4; }
/* ==========================================================================
BANNER A SANGRE
========================================================================== */
.coolook-banner {
position: relative;
display: grid;
min-height: clamp(340px, 56vw, 620px);
overflow: hidden;
background: var(--coolook-velo);
}
.coolook-banner__media,
.coolook-banner__media img {
grid-area: 1 / 1;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.coolook-banner__contenido {
grid-area: 1 / 1;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
text-align: center;
padding: 48px var(--coolook-margen);
background: rgba(18, 18, 18, .28);
}
.coolook-banner__titulo {
color: #fff;
font-size: clamp(1.75rem, 4.5vw, 3.25rem);
font-weight: var(--coolook-peso-titulo);
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
margin: 0;
max-width: 20ch;
}
.coolook-banner__texto {
color: rgba(255, 255, 255, .92);
font-size: clamp(.9375rem, 1.6vw, 1.125rem);
letter-spacing: var(--coolook-ls-titulo);
max-width: 46ch;
margin: 0;
}
/* Variante sobre papel, sin imagen: para la franja de MyCoolook. */
.coolook-banner--arena { background: var(--coolook-arena); min-height: 0; }
.coolook-banner--arena .coolook-banner__contenido { background: none; padding-block: clamp(56px, 8vw, 96px); }
.coolook-banner--arena .coolook-banner__titulo,
.coolook-banner--arena .coolook-banner__texto { color: var(--coolook-tinta); }
/* ==========================================================================
DUO EDITORIAL: imagen + texto al lado
========================================================================== */
.coolook-duo {
display: grid;
gap: var(--coolook-gutter);
grid-template-columns: 1fr;
}
@media (min-width: 750px) {
.coolook-duo { grid-template-columns: 1fr 1fr; }
.coolook-duo--invertido .coolook-duo__media { order: 2; }
}
.coolook-duo__media {
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--coolook-velo);
}
.coolook-duo__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coolook-duo__texto {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 18px;
padding: clamp(32px, 5vw, 72px);
background: var(--coolook-velo);
}
.coolook-duo__titulo {
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: var(--coolook-peso-titulo);
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
margin: 0;
}
.coolook-duo__cuerpo { margin: 0; max-width: 46ch; }
/* ==========================================================================
AVISO SUPERIOR
========================================================================== */
.coolook-aviso {
background: var(--coolook-arena);
color: var(--coolook-tinta);
margin: 0;
text-align: center;
font-size: 13px;
letter-spacing: var(--coolook-ls-boton);
text-transform: uppercase;
padding: 10px var(--coolook-margen);
}
.coolook-aviso a { color: inherit; }
/* ==========================================================================
UTILIDADES
========================================================================== */
.coolook-centrado { text-align: center; }
.coolook-acciones {
display: flex;
justify-content: center;
padding: 8px var(--coolook-margen) 56px;
}
.screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
white-space: nowrap;
}
/* ==========================================================================
CABECERA
Medido en coolook.es: barra de 92px, fondo blanco, sin borde inferior.
Los rotulos van en mayusculas por CSS para que el resultado sea el mismo
escriba el operador New In o NEW IN.
========================================================================== */
.coolook-cabecera { position: relative; background: var(--coolook-papel); z-index: 50; }
.coolook-cabecera__barra {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
max-width: var(--coolook-ancho);
margin-inline: auto;
padding: 20px var(--coolook-margen);
min-height: 92px;
}
.coolook-cabecera__logo { display: flex; align-items: center; }
.coolook-cabecera__logo img { display: block; width: auto; max-height: 52px; }
.coolook-cabecera__logo a { color: var(--coolook-tinta); text-decoration: none; font-size: 1.5rem; letter-spacing: .12em; text-transform: uppercase; }
.coolook-nav { justify-self: center; }
.coolook-nav__lista {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 4px 26px;
margin: 0; padding: 0; list-style: none;
}
/* Estatico a proposito: el panel se posiciona contra la cabecera, no contra
el elemento, y asi ocupa todo el ancho de la ventana. */
.coolook-nav__item { position: static; }
.coolook-nav__enlace {
display: inline-block;
background: none;
border: 0;
padding: 8px 0;
font-family: var(--coolook-fuente);
font-size: 14px; /* medido en coolook.es */
font-weight: var(--coolook-peso-titulo);
letter-spacing: var(--coolook-ls-titulo);
color: var(--coolook-tinta);
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
}
.coolook-nav__enlace:hover,
.coolook-nav__item--con-panel:hover > .coolook-nav__enlace {
text-decoration: underline;
text-underline-offset: 5px;
}
.coolook-mega {
position: absolute;
inset-inline: 0;
top: 100%;
background: var(--coolook-papel);
border-top: 1px solid var(--coolook-linea);
border-bottom: 1px solid var(--coolook-linea);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity var(--coolook-transicion), transform var(--coolook-transicion), visibility var(--coolook-transicion);
z-index: 60;
}
/*
* El panel abre al PULSAR, no al pasar el raton.
*
* Con hover no se podia usar: el panel se posiciona contra la cabecera, no
* contra el elemento, y entre el fondo del y el borde del panel quedaban
* 25px de hueco muerto. Al bajar el raton se perdia el hover antes de entrar
* al panel y se cerraba. Ademas, en tactil el hover no existe.
*
* Se mantiene `:focus-within` para quien navega con teclado.
*/
.coolook-nav__item--con-panel:focus-within > .coolook-mega,
.coolook-nav__item--abierto > .coolook-mega {
opacity: 1;
visibility: visible;
transform: none;
}
/* Flecha que indica que la opcion despliega, y gira al abrirse. */
.coolook-nav__item--con-panel > .coolook-nav__enlace::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-left: 7px;
vertical-align: 2px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg);
transition: transform var(--coolook-transicion);
}
.coolook-nav__item--abierto > .coolook-nav__enlace::after {
transform: rotate(-135deg);
vertical-align: -1px;
}
/* Enlace a la propia categoria dentro del panel: al pasar a toggle, pulsar
«Outlet» ya no navega, asi que su destino tiene que estar aqui dentro. */
.coolook-mega__vertodo {
grid-column: 1 / -1;
order: -1;
padding: 0 0 6px;
font-size: 13px;
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tinta);
text-decoration: underline;
text-underline-offset: 4px;
}
.coolook-mega__interior {
max-width: var(--coolook-ancho);
margin-inline: auto;
padding: 32px var(--coolook-margen) 40px;
}
/*
* Rejilla, no columnas CSS: en «Joyas» cada celda es un grupo con su rotulo
* (Pendientes, Collares...) y debajo sus subcategorias. En paneles planos como
* «Colecciones» cada celda es un enlace suelto y se reparte igual de bien.
*/
.coolook-mega__lista {
margin: 0; padding: 0; list-style: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 8px 36px;
align-items: start;
}
.coolook-mega__sublista { margin: 6px 0 0; padding: 0; list-style: none; }
/* Rotulo de columna: es un titulo, no un enlace mas. */
.coolook-mega__titulo {
display: block;
padding: 7px 0;
font-size: 13px;
font-weight: var(--coolook-peso-fuerte);
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tinta);
text-decoration: none;
}
a.coolook-mega__titulo:hover,
a.coolook-mega__titulo:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.coolook-mega__enlace {
display: block;
padding: 7px 0;
font-size: 15px;
letter-spacing: var(--coolook-ls-titulo);
color: var(--coolook-texto);
text-decoration: none;
}
.coolook-mega__enlace:hover,
.coolook-mega__enlace:focus-visible {
color: var(--coolook-tinta);
text-decoration: underline;
text-underline-offset: 4px;
}
.coolook-cabecera__acciones { display: flex; align-items: center; gap: 6px; justify-self: end; }
.coolook-accion {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
color: var(--coolook-tinta);
text-decoration: none;
}
.coolook-icono { width: 21px; height: 21px; flex-shrink: 0; }
.coolook-accion__contador {
position: absolute;
top: 4px; right: 2px;
min-width: 16px; height: 16px;
padding: 0 4px;
border-radius: 8px;
background: var(--coolook-tinta);
color: var(--coolook-papel);
font-size: 10px;
line-height: 16px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.coolook-cabecera__hamburguesa {
display: none;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
padding: 0; /* Astra pone 10px 20px en linea: con 40px de ancho no quedaba sitio y el icono salia a 0. */
background: none; border: 0;
color: var(--coolook-tinta);
cursor: pointer;
}
@media (max-width: 991px) {
.coolook-cabecera__barra { min-height: 68px; padding-block: 12px; }
.coolook-nav { display: none; }
.coolook-cabecera__hamburguesa { display: inline-flex; }
.coolook-cabecera__logo { justify-self: center; }
.coolook-cabecera__logo img { max-height: 38px; }
}
/* --- Barra de busqueda --------------------------------------------------- */
.coolook-busqueda {
border-top: 1px solid var(--coolook-linea);
background: var(--coolook-papel);
}
.coolook-busqueda__form {
display: flex;
align-items: center;
gap: 8px;
max-width: var(--coolook-ancho);
margin-inline: auto;
padding: 12px var(--coolook-margen);
}
.coolook-busqueda__campo {
flex: 1;
min-width: 0;
padding: 12px 14px;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
background: var(--coolook-papel);
color: var(--coolook-tinta);
font-family: var(--coolook-fuente);
font-size: 16px; /* 16px o mas: iOS hace zoom con menos. */
}
.coolook-busqueda__campo:focus {
outline: 2px solid var(--coolook-tinta);
outline-offset: 1px;
}
.coolook-busqueda__campo::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Fondo y color en reposo, hover y foco: Astra pinta los suyos en linea. */
.coolook-busqueda__enviar,
.coolook-busqueda__cerrar {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: var(--coolook-radio);
cursor: pointer;
}
.coolook-busqueda__enviar { background: var(--coolook-arena); color: var(--coolook-tinta); }
.coolook-busqueda__enviar:hover,
.coolook-busqueda__enviar:focus { background: var(--coolook-tinta); color: var(--coolook-papel); }
.coolook-busqueda__cerrar { background: transparent; color: var(--coolook-tinta); }
.coolook-busqueda__cerrar:hover,
.coolook-busqueda__cerrar:focus { background: var(--coolook-velo); color: var(--coolook-tinta); }
.coolook-cabecera__acciones button.coolook-accion {
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
}
.coolook-cabecera__acciones button.coolook-accion:hover,
.coolook-cabecera__acciones button.coolook-accion:focus,
.coolook-cabecera__acciones button.coolook-accion[aria-expanded="true"] { background: var(--coolook-velo); color: var(--coolook-tinta); }
/* --- Cajon movil --------------------------------------------------------- */
.coolook-velo-fondo { position: fixed; inset: 0; background: rgba(18, 18, 18, .45); z-index: 90; }
.coolook-cajon {
position: fixed;
inset-block: 0;
inset-inline-start: 0;
width: min(88vw, 380px);
background: var(--coolook-papel);
z-index: 100;
overflow-y: auto;
padding-bottom: 40px;
}
.coolook-cajon__cabeza {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px var(--coolook-margen);
border-bottom: 1px solid var(--coolook-linea);
}
.coolook-cajon__titulo { font-size: 13px; letter-spacing: var(--coolook-ls-etiqueta); text-transform: uppercase; }
.coolook-cajon__cerrar { background: none; border: 0; color: var(--coolook-tinta); cursor: pointer; padding: 6px; display: inline-flex; }
.coolook-cajon__lista,
.coolook-cajon__lista .sub-menu { margin: 0; padding: 0; list-style: none; }
.coolook-cajon__lista > li { position: relative; border-bottom: 1px solid var(--coolook-linea); }
.coolook-cajon__lista a {
display: block;
padding: 15px var(--coolook-margen);
color: var(--coolook-tinta);
text-decoration: none;
font-size: 15px;
letter-spacing: var(--coolook-ls-titulo);
text-transform: uppercase;
}
.coolook-cajon__desplegar {
position: absolute;
top: 4px;
inset-inline-end: 8px;
width: 44px; height: 44px;
background: none; border: 0;
font-size: 20px; line-height: 1;
color: var(--coolook-tinta);
cursor: pointer;
}
.coolook-cajon__lista .sub-menu { display: none; background: var(--coolook-velo); }
.coolook-cajon__item--abierto > .sub-menu { display: block; }
.coolook-cajon__lista .sub-menu a { text-transform: none; font-size: 14px; padding-left: calc(var(--coolook-margen) + 14px); color: var(--coolook-texto); }
body.coolook-sin-scroll { overflow: hidden; }
/* ==========================================================================
PIE
Medido en coolook.es: fondo blanco, texto al 75%, borde superior muy tenue,
titulos de columna a 18px en peso 400 y sin mayusculas.
========================================================================== */
.coolook-pie {
background: var(--coolook-papel);
color: var(--coolook-texto);
border-top: 1px solid rgba(18, 18, 18, .08);
margin-top: 64px;
}
.coolook-pie__columnas {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 36px 40px;
max-width: var(--coolook-ancho);
margin-inline: auto;
padding: 48px var(--coolook-margen);
}
.coolook-pie__titulo {
font-size: 18px;
font-weight: var(--coolook-peso-titulo);
letter-spacing: var(--coolook-ls-titulo);
color: var(--coolook-tinta);
margin: 0 0 14px;
}
.coolook-pie__lista,
.coolook-pie__redes {
margin: 0; padding: 0; list-style: none;
display: flex; flex-direction: column; gap: 9px;
}
.coolook-pie__lista a,
.coolook-pie__redes a { color: var(--coolook-texto); text-decoration: none; font-size: 15px; }
.coolook-pie__lista a:hover,
.coolook-pie__redes a:hover { color: var(--coolook-tinta); text-decoration: underline; text-underline-offset: 4px; }
.coolook-pie__texto { margin: 0 0 16px; max-width: 38ch; font-size: 15px; }
.coolook-pie__redes { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
.coolook-pie__base {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 24px;
max-width: var(--coolook-ancho);
margin-inline: auto;
padding: 20px var(--coolook-margen) 40px;
border-top: 1px solid rgba(18, 18, 18, .08);
font-size: 13px;
}
.coolook-pie__firma { margin: 0; }
.coolook-pie__reclamaciones {
color: var(--coolook-tinta);
text-decoration: none;
border: 1px solid var(--coolook-linea);
padding: 7px 14px;
font-size: 12px;
letter-spacing: var(--coolook-ls-boton);
text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
.coolook-mega { transition: none; }
}
/* ==========================================================================
CATALOGO: tienda, categoria y coleccion
========================================================================== */
.coolook-catalogo__cabecera {
max-width: var(--coolook-ancho);
margin-inline: auto;
padding: 56px var(--coolook-margen) 32px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.coolook-catalogo__titulo {
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: var(--coolook-peso-titulo);
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tinta);
margin: 0;
}
.coolook-catalogo__texto { max-width: 62ch; margin: 0; color: var(--coolook-texto); }
.coolook-catalogo__conteo {
margin: 0;
font-size: 13px;
letter-spacing: var(--coolook-ls-boton);
text-transform: uppercase;
color: var(--coolook-tenue);
font-variant-numeric: tabular-nums;
}
/* La rejilla del catalogo usa el mismo mosaico de 8px que la portada. */
/* El aire lateral lo pone ya .coolook-rejilla--ancho. */
.coolook-producto__etiqueta--agotado {
top: auto;
bottom: 10px;
background: var(--coolook-papel);
color: var(--coolook-tenue);
}
/* Woo mete sus propias clases al ; las neutralizamos para que la tarjeta
sea la misma que en la portada y no haya dos definiciones. */
.coolook-rejilla--catalogo > li {
width: auto !important;
margin: 0 !important;
/* Astra pone `padding: 0 20px` al li.product: entre fotos habia 48px y no 8. */
padding: 0 !important;
float: none !important;
clear: none !important;
list-style: none;
}
.coolook-rejilla--catalogo > li::before,
.coolook-rejilla--catalogo > li::after { content: none; }
/* Vacio: una categoria sin stock no debe parecer un error. */
.coolook-catalogo__vacio {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
padding: 64px var(--coolook-margen) 96px;
background: var(--coolook-velo);
margin: 0 var(--coolook-gutter) var(--coolook-gutter);
}
.coolook-catalogo__vacio-titulo {
font-size: 1.25rem;
color: var(--coolook-tinta);
letter-spacing: var(--coolook-ls-titulo);
margin: 0;
}
.coolook-catalogo__vacio p { margin: 0; }
/* Ordenacion y paginacion */
/* Woo la saca con `float: right` y la rejilla se envolvia a su alrededor,
quedandose en 940px de los 1265 disponibles. */
.coolook-theme .woocommerce-ordering {
float: none;
width: 100%;
max-width: var(--coolook-ancho);
margin: 0 auto 20px;
padding-inline: var(--coolook-margen);
display: flex;
justify-content: flex-end;
}
.coolook-theme .woocommerce-result-count { display: none; }
.coolook-theme .woocommerce-ordering select {
/* Astra pone `width: 100%` a todo campo de formulario; aqui estorba. */
width: auto;
min-width: 220px;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
padding: 10px 14px;
font-family: var(--coolook-fuente);
font-size: 14px;
color: var(--coolook-tinta);
background: var(--coolook-papel);
}
.coolook-theme .woocommerce-pagination {
padding: 40px var(--coolook-margen) 72px;
text-align: center;
}
.coolook-theme .woocommerce-pagination ul {
display: inline-flex;
gap: 4px;
border: 0 !important;
margin: 0;
padding: 0;
}
.coolook-theme .woocommerce-pagination ul li { border: 0 !important; margin: 0; }
.coolook-theme .woocommerce-pagination ul li a,
.coolook-theme .woocommerce-pagination ul li span {
min-width: 42px;
padding: 11px 12px;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
color: var(--coolook-tinta);
font-size: 14px;
font-variant-numeric: tabular-nums;
background: var(--coolook-papel);
}
.coolook-theme .woocommerce-pagination ul li span.current {
background: var(--coolook-tinta);
color: var(--coolook-papel);
border-color: var(--coolook-tinta);
}
/* ==========================================================================
FICHA DE PRODUCTO
========================================================================== */
.coolook-theme.single-product div.product {
max-width: var(--coolook-ancho);
margin-inline: auto;
padding: 32px var(--coolook-margen) 0;
}
/* Galeria + resumen. Es un grid PROPIO y no div.product entero a proposito:
el resumen pegajoso toma como limite el grid que lo contiene, y si ese grid
incluia a los relacionados, bajaba encima de ellos. */
.coolook-theme.single-product .coolook-ficha {
display: grid;
grid-template-columns: 1fr;
gap: 0 clamp(32px, 5vw, 72px);
}
@media (min-width: 900px) {
.coolook-theme.single-product .coolook-ficha {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
align-items: start;
}
/* Los datos acompañan a la galeria mientras se hace scroll. */
.coolook-theme.single-product div.product .summary {
position: sticky;
top: 32px;
}
}
/*
* Astra fija `width: 50%` a la galeria y `48%` al resumen, pensando en un
* layout flotado. Dentro de nuestra rejilla, ese porcentaje se calcula sobre
* la celda y deja cada columna a la mitad de su sitio.
*
* Se antepone `body` a proposito: la regla de Astra tiene la misma
* especificidad que la nuestra y su CSS dinamico va en linea, despues del
* archivo del tema, asi que a igualdad ganaria el suyo.
*/
/*
* El `#content` no es decoracion: la regla de Astra que hay que superar es
* `.woocommerce #content .ast-woocommerce-container div.product div.images`,
* dentro de `@media (min-width: 922px)` y con `width: 50%`. Lleva un ID, y un
* ID gana a cualquier cantidad de clases. Repitiendolo y sumando las nuestras
* ganamos por especificidad, sin recurrir a `!important`.
*/
body.coolook-theme.single-product #content .ast-woocommerce-container div.product div.images,
body.coolook-theme.single-product #content .ast-woocommerce-container div.product .woocommerce-product-gallery,
body.coolook-theme.single-product #content .ast-woocommerce-container div.product .summary.entry-summary {
float: none;
width: 100%;
max-width: 100%;
margin: 0;
}
.coolook-theme.single-product .woocommerce-product-gallery__wrapper,
.coolook-theme.single-product .woocommerce-product-gallery__image { width: 100%; }
.coolook-theme.single-product .woocommerce-product-gallery__image img { width: 100%; height: auto; }
.coolook-theme.single-product div.product .woocommerce-product-gallery img { border-radius: var(--coolook-radio); }
.coolook-theme.single-product div.product .summary {
float: none;
width: 100%;
margin: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.coolook-theme.single-product .product_title {
font-size: clamp(1.5rem, 3vw, 2.125rem);
font-weight: var(--coolook-peso-titulo);
letter-spacing: var(--coolook-ls-titulo);
color: var(--coolook-tinta);
margin: 0;
}
.coolook-theme.single-product div.product p.price,
.coolook-theme.single-product div.product span.price,
.coolook-theme.single-product div.product .price .amount {
font-size: 1.25rem;
/* Astra lo pone en negrita; la marca no usa negrita en nada. */
font-weight: var(--coolook-peso-titulo);
color: var(--coolook-tinta);
margin: 0;
font-variant-numeric: tabular-nums;
}
.coolook-theme.single-product div.product p.price del { opacity: .5; margin-right: 8px; }
.coolook-theme.single-product div.product p.price ins { text-decoration: none; }
.coolook-theme.single-product .woocommerce-product-details__short-description {
color: var(--coolook-texto);
max-width: 54ch;
}
.coolook-theme.single-product form.cart {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 8px;
margin: 0;
}
.coolook-theme.single-product form.cart .quantity input.qty {
width: 76px;
height: 100%;
min-height: 48px;
padding: 12px;
text-align: center;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
font-family: var(--coolook-fuente);
font-size: 15px;
}
/* El boton de comprar hereda el acento arena de la marca. */
.coolook-theme .button,
.coolook-theme button.button,
.coolook-theme a.button,
.coolook-theme input.button,
.coolook-theme .woocommerce-Button,
.coolook-theme button[type="submit"].single_add_to_cart_button {
background: var(--coolook-arena);
color: var(--coolook-tinta);
border: 0;
border-radius: var(--coolook-radio);
box-shadow: none;
font-family: var(--coolook-fuente);
font-size: 15px;
font-weight: var(--coolook-peso-titulo);
letter-spacing: var(--coolook-ls-boton);
padding: 15px 32px;
min-height: 48px;
text-transform: none;
transition: background-color var(--coolook-transicion);
}
.coolook-theme .button:hover,
.coolook-theme button.button:hover,
.coolook-theme a.button:hover,
.coolook-theme input.button:hover {
background: var(--coolook-arena-hover);
color: var(--coolook-tinta);
}
.coolook-theme .single_add_to_cart_button { flex: 1 1 200px; }
.coolook-ficha__garantias {
margin: 4px 0 0;
padding: 18px 0 0;
list-style: none;
border-top: 1px solid var(--coolook-linea);
display: flex;
flex-direction: column;
gap: 9px;
font-size: 14px;
color: var(--coolook-texto);
}
.coolook-ficha__garantias li { position: relative; padding-left: 18px; }
.coolook-ficha__garantias li::before {
content: "";
position: absolute;
left: 0;
top: .62em;
width: 6px;
height: 6px;
background: var(--coolook-arena);
}
/* --- Pestanas ------------------------------------------------------------ */
.coolook-theme.single-product .woocommerce-tabs {
grid-column: 1 / -1;
max-width: var(--coolook-ancho);
margin: 56px auto 0;
padding-inline: var(--coolook-margen);
}
.coolook-theme.single-product .woocommerce-tabs ul.tabs {
display: flex;
flex-wrap: wrap;
gap: 0 28px;
margin: 0 0 22px;
padding: 0 0 0 0;
border-bottom: 1px solid var(--coolook-linea);
list-style: none;
}
.coolook-theme.single-product .woocommerce-tabs ul.tabs::before,
.coolook-theme.single-product .woocommerce-tabs ul.tabs li::before,
.coolook-theme.single-product .woocommerce-tabs ul.tabs li::after {
content: none;
display: none;
}
.coolook-theme.single-product .woocommerce-tabs ul.tabs li {
background: none;
border: 0;
border-radius: 0;
margin: 0;
padding: 0;
}
.coolook-theme.single-product .woocommerce-tabs ul.tabs li a {
display: block;
padding: 12px 0;
border-bottom: 2px solid transparent;
color: var(--coolook-tenue);
font-size: 13px;
font-weight: var(--coolook-peso-titulo);
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
text-decoration: none;
}
.coolook-theme.single-product .woocommerce-tabs ul.tabs li.active a {
color: var(--coolook-tinta);
border-bottom-color: var(--coolook-tinta);
}
.coolook-theme.single-product .woocommerce-Tabs-panel { color: var(--coolook-texto); max-width: 72ch; }
.coolook-theme.single-product .woocommerce-Tabs-panel h2 { display: none; }
/* --- Relacionados -------------------------------------------------------- */
.coolook-theme.single-product .related,
.coolook-theme.single-product .up-sells {
grid-column: 1 / -1;
margin: 72px 0 0;
padding: 0;
width: 100%;
}
.coolook-theme.single-product .related > h2,
.coolook-theme.single-product .up-sells > h2 {
font-size: clamp(1.25rem, 2.4vw, 1.75rem);
font-weight: var(--coolook-peso-titulo);
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
text-align: center;
color: var(--coolook-tinta);
margin: 0;
padding: 0 var(--coolook-margen) 28px;
}
/* --- Avisos de Woo ------------------------------------------------------- */
.coolook-theme .woocommerce-message,
.coolook-theme .woocommerce-info,
.coolook-theme .woocommerce-error {
border-top-color: var(--coolook-tinta);
border-radius: var(--coolook-radio);
background: var(--coolook-velo);
color: var(--coolook-texto);
max-width: var(--coolook-ancho);
margin-inline: auto;
}
.coolook-theme .woocommerce-message::before,
.coolook-theme .woocommerce-info::before { color: var(--coolook-tinta); }
/* ==========================================================================
LIBRO DE RECLAMACIONES
Obligatorio por la Ley 29571. Se lee y se rellena en el movil, asi que va
a una sola columna salvo en pantallas anchas.
========================================================================== */
.coolook-libro {
max-width: 860px;
margin-inline: auto;
padding: 8px 0 56px;
}
.coolook-libro__intro {
color: var(--coolook-texto);
margin: 0 0 14px;
max-width: 68ch;
}
.coolook-libro__form {
display: flex;
flex-direction: column;
gap: 28px;
margin-top: 32px;
}
.coolook-libro__bloque {
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
padding: 24px;
margin: 0;
}
.coolook-libro__bloque legend {
padding: 0 10px;
font-size: 13px;
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tinta);
}
.coolook-libro__rejilla {
display: grid;
grid-template-columns: 1fr;
gap: 18px 20px;
}
@media (min-width: 700px) {
.coolook-libro__rejilla { grid-template-columns: 1fr 1fr; }
.coolook-libro__campo--ancho { grid-column: 1 / -1; }
}
.coolook-libro__campo {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
}
.coolook-libro__campo label {
font-size: 14px;
color: var(--coolook-tinta);
letter-spacing: var(--coolook-ls-titulo);
}
.coolook-libro__campo abbr {
color: var(--coolook-tinta);
text-decoration: none;
margin-left: 2px;
}
.coolook-libro__campo input,
.coolook-libro__campo select,
.coolook-libro__campo textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
background: var(--coolook-papel);
font-family: var(--coolook-fuente);
font-size: 15px;
color: var(--coolook-tinta);
}
.coolook-libro__campo input:focus,
.coolook-libro__campo select:focus,
.coolook-libro__campo textarea:focus {
outline: 2px solid var(--coolook-tinta);
outline-offset: 1px;
border-color: var(--coolook-tinta);
}
.coolook-libro__campo textarea { resize: vertical; min-height: 96px; }
.coolook-libro__ayuda {
font-size: 13px;
color: var(--coolook-tenue);
}
.coolook-libro__aviso {
background: var(--coolook-arena);
color: var(--coolook-tinta);
padding: 16px 20px;
margin: 0;
font-size: 14px;
}
.coolook-libro__form .coolook-boton { align-self: flex-start; }
/* La trampa antirrobots no la ve nadie, pero sigue existiendo para ellos. */
.coolook-libro__trampa {
position: absolute !important;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* --- Acuse de recibo ------------------------------------------------------ */
.coolook-libro__acuse {
max-width: 620px;
margin: 40px auto 72px;
padding: 40px;
border: 1px solid var(--coolook-linea);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.coolook-libro__acuse-titulo {
font-size: 1.5rem;
font-weight: var(--coolook-peso-titulo);
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tinta);
margin: 0;
}
.coolook-libro__acuse p { margin: 0; color: var(--coolook-texto); }
.coolook-libro__acuse .coolook-boton { margin-top: 10px; }
/* ==========================================================================
PANEL DEL OPERADOR
Una tabla de trabajo, no una pagina de tienda: prima la densidad y que se
lea de un vistazo. Mantiene la tipografia, el acento arena y el radio 0.
========================================================================== */
.coolook-panel {
max-width: var(--coolook-ancho);
margin-inline: auto;
padding: 8px var(--coolook-margen) 64px;
}
.coolook-panel__aviso {
max-width: 560px;
margin: 48px auto;
padding: 32px;
border: 1px solid var(--coolook-linea);
text-align: center;
}
/* --- Barra de filtros ---------------------------------------------------- */
.coolook-panel__barra {
display: grid;
gap: 8px;
grid-template-columns: 1fr;
margin-bottom: 14px;
}
@media (min-width: 780px) {
.coolook-panel__barra { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
}
.coolook-panel__busca { display: block; }
.coolook-panel__barra input,
.coolook-panel__barra select {
width: 100%;
padding: 11px 13px;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
background: var(--coolook-papel);
font-family: var(--coolook-fuente);
font-size: 14px;
color: var(--coolook-tinta);
}
.coolook-panel__barra input:focus,
.coolook-panel__barra select:focus {
outline: 2px solid var(--coolook-tinta);
outline-offset: 1px;
}
.coolook-panel__conteo {
margin: 0 0 10px;
font-size: 13px;
letter-spacing: var(--coolook-ls-boton);
text-transform: uppercase;
color: var(--coolook-tenue);
font-variant-numeric: tabular-nums;
}
/* --- Tabla --------------------------------------------------------------- */
.coolook-panel__tabla-scroll {
overflow-x: auto;
border: 1px solid var(--coolook-linea);
}
.coolook-panel__tabla {
width: 100%;
min-width: 780px;
border-collapse: collapse;
font-size: 14px;
background: var(--coolook-papel);
}
.coolook-panel__tabla th {
text-align: left;
padding: 12px 14px;
font-size: 11px;
font-weight: var(--coolook-peso-fuerte);
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tenue);
background: var(--coolook-velo);
border-bottom: 1px solid var(--coolook-linea);
white-space: nowrap;
}
.coolook-panel__th-img { width: 60px; }
.coolook-panel__th-num { width: 118px; }
.coolook-panel__th-sw { width: 104px; text-align: center !important; }
.coolook-panel__th-acc { width: 62px; }
.coolook-panel__tabla td {
padding: 10px 14px;
border-bottom: 1px solid var(--coolook-velo);
vertical-align: middle;
}
.coolook-panel__tabla tr:last-child td { border-bottom: 0; }
.coolook-panel__tabla tbody tr { transition: background-color var(--coolook-transicion); }
.coolook-panel__tabla tbody tr:hover { background: var(--coolook-velo); }
.coolook-panel__img {
display: block;
width: 44px;
height: 44px;
object-fit: cover;
background: var(--coolook-velo);
}
.coolook-panel__nombre a {
color: var(--coolook-tinta);
text-decoration: none;
letter-spacing: var(--coolook-ls-titulo);
}
.coolook-panel__nombre a:hover { text-decoration: underline; text-underline-offset: 3px; }
.coolook-panel__meta {
display: block;
font-size: 12px;
color: var(--coolook-tenue);
margin-top: 2px;
}
.coolook-panel__td-num { text-align: right; }
.coolook-panel__td-sw { text-align: center; }
.coolook-panel__td-acc { text-align: right; }
.coolook-panel__td-acc a {
font-size: 13px;
color: var(--coolook-tenue);
text-decoration: underline;
text-underline-offset: 3px;
}
.coolook-panel__num {
width: 100%;
max-width: 104px;
padding: 8px 10px;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
font-family: var(--coolook-fuente);
font-size: 14px;
text-align: right;
font-variant-numeric: tabular-nums;
color: var(--coolook-tinta);
background: var(--coolook-papel);
}
.coolook-panel__num:focus {
outline: 2px solid var(--coolook-tinta);
outline-offset: 1px;
}
/* El precio original de Espana, como referencia al fijar el de aqui. */
.coolook-panel__eur {
display: block;
font-size: 11px;
color: var(--coolook-tenue);
margin-top: 3px;
font-variant-numeric: tabular-nums;
}
.coolook-panel__variable {
font-size: 12px;
color: var(--coolook-tenue);
font-style: italic;
}
.coolook-panel__cargando {
padding: 40px !important;
text-align: center;
color: var(--coolook-tenue);
}
/* Aviso de guardado: verde un instante, rojo si algo falla. */
.coolook-panel__fila--ok { background: rgba(53, 102, 71, .10) !important; }
.coolook-panel__fila--error { background: rgba(169, 60, 40, .12) !important; }
/* --- Interruptor --------------------------------------------------------- */
.coolook-sw {
display: inline-flex;
align-items: center;
cursor: pointer;
}
.coolook-sw input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.coolook-sw__pista {
display: block;
width: 40px;
height: 22px;
background: var(--coolook-linea);
border-radius: 11px;
position: relative;
transition: background-color var(--coolook-transicion);
}
.coolook-sw__pista::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 16px;
height: 16px;
background: var(--coolook-papel);
border-radius: 50%;
transition: transform var(--coolook-transicion);
}
.coolook-sw--on .coolook-sw__pista { background: var(--coolook-tinta); }
.coolook-sw--on .coolook-sw__pista::after { transform: translateX(18px); }
.coolook-sw input:focus-visible + .coolook-sw__pista {
outline: 2px solid var(--coolook-tinta);
outline-offset: 2px;
}
/* --- Pie ----------------------------------------------------------------- */
.coolook-panel__pie {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
padding: 20px 0 8px;
font-size: 13px;
color: var(--coolook-tenue);
font-variant-numeric: tabular-nums;
}
.coolook-panel__pie .coolook-boton { padding: 9px 20px; font-size: 13px; }
.coolook-panel__pie .coolook-boton:disabled { opacity: .35; cursor: not-allowed; }
.coolook-panel__nota {
text-align: center;
font-size: 13px;
color: var(--coolook-tenue);
margin: 6px 0 0;
}
@media (prefers-reduced-motion: reduce) {
.coolook-sw__pista,
.coolook-sw__pista::after,
.coolook-panel__tabla tbody tr { transition: none; }
}
/* ==========================================================================
CARRUSEL DE PORTADA
A sangre, sin texto encima, como el original. Las diapositivas se apilan en
la misma celda de rejilla y se cruzan con opacidad: asi no hay salto de
altura al cambiar.
========================================================================== */
.coolook-hero {
position: relative;
overflow: hidden;
background: var(--coolook-velo);
}
.coolook-hero__pista {
display: grid;
grid-template-areas: "slide";
}
.coolook-hero__slide {
grid-area: slide;
opacity: 0;
visibility: hidden;
transition: opacity .6s cubic-bezier(0, 0, .3, 1), visibility .6s;
}
.coolook-hero__slide--activa {
opacity: 1;
visibility: visible;
}
.coolook-hero__slide picture,
.coolook-hero__enlace { display: block; }
.coolook-hero__img {
display: block;
width: 100%;
height: auto;
}
/* --- Flechas ------------------------------------------------------------- */
.coolook-hero__flecha {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .82);
border: 0;
border-radius: var(--coolook-radio);
cursor: pointer;
transition: background-color var(--coolook-transicion);
}
.coolook-hero__flecha:hover { background: var(--coolook-papel); }
.coolook-hero__flecha--ant { left: 14px; }
.coolook-hero__flecha--sig { right: 14px; }
/* La punta de flecha se dibuja con dos bordes: sin iconos ni SVG. */
.coolook-hero__flecha span[aria-hidden] {
width: 9px;
height: 9px;
border-top: 1px solid var(--coolook-tinta);
border-right: 1px solid var(--coolook-tinta);
}
.coolook-hero__flecha--ant span[aria-hidden] { transform: rotate(-135deg); margin-left: 3px; }
.coolook-hero__flecha--sig span[aria-hidden] { transform: rotate(45deg); margin-right: 3px; }
.coolook-hero__flecha:focus-visible {
outline: 2px solid var(--coolook-tinta);
outline-offset: 2px;
}
/* --- Puntos -------------------------------------------------------------- */
.coolook-hero__puntos {
position: absolute;
left: 0;
right: 0;
bottom: 16px;
z-index: 2;
display: flex;
justify-content: center;
gap: 8px;
}
.coolook-hero__punto {
width: 9px;
height: 9px;
padding: 0;
border: 1px solid var(--coolook-tinta);
border-radius: 50%;
background: rgba(255, 255, 255, .7);
cursor: pointer;
transition: background-color var(--coolook-transicion);
}
.coolook-hero__punto--activo { background: var(--coolook-tinta); }
.coolook-hero__punto:focus-visible {
outline: 2px solid var(--coolook-tinta);
outline-offset: 3px;
}
@media (max-width: 749px) {
.coolook-hero__flecha { width: 36px; height: 36px; }
.coolook-hero__flecha--ant { left: 8px; }
.coolook-hero__flecha--sig { right: 8px; }
.coolook-hero__puntos { bottom: 10px; }
}
/*
* Quien pide menos movimiento recibe la primera diapositiva y nada mas: el JS
* ya no la hace avanzar, y aqui se quita tambien el fundido.
*/
@media (prefers-reduced-motion: reduce) {
.coolook-hero__slide { transition: none; }
}
/* --- Editor de diapositivas en el admin ---------------------------------- */
.coolook-hero-admin {
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
max-width: 1100px;
}
.coolook-hero-admin__slide {
border: 1px solid #dcdcde;
background: #fff;
padding: 14px 16px;
}
.coolook-hero-admin__slide legend {
padding: 0 6px;
font-weight: 600;
text-transform: uppercase;
font-size: 11px;
letter-spacing: .1em;
}
.coolook-hero-admin__campo { margin-bottom: 14px; }
.coolook-hero-admin__campo strong { display: block; margin-bottom: 5px; font-size: 12px; }
.coolook-hero-admin__previa {
min-height: 60px;
margin-bottom: 6px;
background: #f6f7f7;
}
.coolook-hero-admin__previa img { max-width: 220px; height: auto; display: block; }
/* ==========================================================================
PANEL: PESTANAS Y FORMULARIOS
========================================================================== */
.coolook-panel__pestanas {
display: flex;
flex-wrap: wrap;
gap: 0 4px;
border-bottom: 1px solid var(--coolook-linea);
margin-bottom: 22px;
}
.coolook-panel__pestana {
padding: 13px 18px;
margin-bottom: -1px;
border-bottom: 2px solid transparent;
color: var(--coolook-tenue);
text-decoration: none;
font-size: 13px;
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
white-space: nowrap;
transition: color var(--coolook-transicion);
}
.coolook-panel__pestana:hover { color: var(--coolook-tinta); }
.coolook-panel__pestana--activa {
color: var(--coolook-tinta);
border-bottom-color: var(--coolook-tinta);
}
.coolook-panel__pestana:focus-visible {
outline: 2px solid var(--coolook-tinta);
outline-offset: -2px;
}
/* --- Secciones dentro de una pestana ------------------------------------- */
.coolook-panel__seccion {
padding-bottom: 34px;
margin-bottom: 34px;
border-bottom: 1px solid var(--coolook-velo);
}
.coolook-panel__seccion:last-child { border-bottom: 0; margin-bottom: 0; }
.coolook-panel__titulo {
font-size: 1.125rem;
font-weight: var(--coolook-peso-titulo);
letter-spacing: var(--coolook-ls-titulo);
color: var(--coolook-tinta);
margin: 0 0 8px;
}
.coolook-panel__subtitulo {
font-size: 12px;
font-weight: var(--coolook-peso-fuerte);
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tenue);
margin: 22px 0 8px;
}
.coolook-panel__ayuda {
color: var(--coolook-texto);
font-size: 14px;
max-width: 74ch;
margin: 0 0 12px;
}
.coolook-panel__form { margin-top: 16px; }
.coolook-panel__form .coolook-boton { margin-top: 18px; }
.coolook-panel__aviso-guardado {
padding: 11px 15px;
margin: 0 0 16px;
font-size: 14px;
border-left: 3px solid var(--coolook-tinta);
background: var(--coolook-velo);
max-width: 74ch;
}
.coolook-panel__aviso-guardado--bien { border-left-color: #356647; }
.coolook-panel__aviso-guardado--mal { border-left-color: #a93c28; }
/* --- Campos --------------------------------------------------------------- */
.coolook-panel__campos {
display: grid;
gap: 16px 20px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
max-width: 900px;
}
.coolook-panel__campo { display: flex; flex-direction: column; gap: 5px; }
.coolook-panel__campo > span {
font-size: 13px;
color: var(--coolook-tinta);
letter-spacing: var(--coolook-ls-titulo);
}
.coolook-panel__campo em { color: #a93c28; font-style: normal; }
.coolook-panel__campo input {
padding: 11px 13px;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
background: var(--coolook-papel);
font-family: var(--coolook-fuente);
font-size: 14px;
color: var(--coolook-tinta);
}
.coolook-panel__campo textarea {
padding: 11px 13px;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
background: var(--coolook-papel);
font-family: var(--coolook-fuente);
font-size: 14px;
line-height: 1.5;
color: var(--coolook-tinta);
resize: vertical;
}
.coolook-panel__campo textarea:focus,
.coolook-panel__campo input:focus {
outline: 2px solid var(--coolook-tinta);
outline-offset: 1px;
}
.coolook-panel__campo small { font-size: 12px; color: var(--coolook-tenue); }
.coolook-panel__campo select {
padding: 11px 13px;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
background: var(--coolook-papel);
font-family: var(--coolook-fuente);
font-size: 14px;
color: var(--coolook-tinta);
}
.coolook-panel__campo select:focus {
outline: 2px solid var(--coolook-tinta);
outline-offset: 1px;
}
/* --- Panel: alta de producto --------------------------------------------- */
.coolook-alta {
margin-bottom: 14px;
border: 1px solid var(--coolook-linea);
background: var(--coolook-papel);
}
.coolook-alta__abrir {
display: flex;
align-items: center;
gap: 10px;
list-style: none;
cursor: pointer;
padding: 12px 16px;
font-size: 13px;
letter-spacing: var(--coolook-ls-boton);
text-transform: uppercase;
color: var(--coolook-tinta);
user-select: none;
}
.coolook-alta__abrir::-webkit-details-marker { display: none; }
.coolook-alta__abrir::before {
content: '+';
width: 18px;
font-size: 18px;
line-height: 1;
text-align: center;
}
.coolook-alta[open] .coolook-alta__abrir::before { content: '–'; }
.coolook-alta__abrir:hover { background: var(--coolook-velo); }
.coolook-alta__abrir:focus-visible { outline: 2px solid var(--coolook-tinta); outline-offset: -2px; }
.coolook-alta__form {
display: flex;
flex-direction: column;
gap: 24px;
padding: 18px 16px 22px;
border-top: 1px solid var(--coolook-linea);
}
.coolook-alta__form .coolook-panel__campos { max-width: none; }
.coolook-alta__ancho { grid-column: 1 / -1; }
.coolook-alta__fotos {
display: grid;
gap: 22px 40px;
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.coolook-alta__fotos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
}
.coolook-alta__foto { display: flex; flex-direction: column; gap: 12px; }
.coolook-alta__foto h4 {
font-size: 11px;
font-weight: var(--coolook-peso-fuerte);
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tenue);
margin: 0;
}
.coolook-alta__pie {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 24px;
}
.coolook-alta__publicar {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--coolook-tinta);
cursor: pointer;
}
.coolook-alta__publicar input { margin: 0; accent-color: var(--coolook-tinta); }
/* --- Diapositivas y medios ------------------------------------------------ */
.coolook-diapos {
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.coolook-diapo {
position: relative;
border: 1px solid var(--coolook-linea);
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.coolook-diapo__num {
position: absolute;
top: 10px;
right: 12px;
font-size: 11px;
color: var(--coolook-tenue);
font-variant-numeric: tabular-nums;
}
.coolook-diapo__medio { display: flex; flex-direction: column; gap: 6px; }
.coolook-diapo__etiqueta {
font-size: 11px;
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tenue);
}
/* La previa es un marco con la proporcion del sitio donde va la pieza, y la
pieza se ve entera dentro (contain): antes el alto se topaba a 150px y el
ancho no seguia, y una foto vertical de movil salia aplastada. */
.coolook-diapo__previa {
aspect-ratio: 16 / 9;
width: 100%;
background: var(--coolook-velo);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.coolook-diapo__previa img,
.coolook-diapo__previa video {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* La de movil, con forma de telefono: se lee como lo que es. */
.coolook-diapo__previa--mov {
aspect-ratio: 9 / 16;
width: 108px;
justify-self: center;
}
/* --- Carrusel: orden y visibilidad --------------------------------------- */
.coolook-diapo__cabeza {
display: flex;
align-items: center;
gap: 6px;
min-height: 30px;
}
.coolook-diapo--carrusel .coolook-diapo__num {
position: static;
margin-right: 4px;
font-size: 12px;
}
.coolook-diapo__mover {
width: 30px;
height: 30px;
padding: 0;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
background: var(--coolook-papel);
color: var(--coolook-tinta);
font-size: 14px;
line-height: 1;
cursor: pointer;
transition: background-color var(--coolook-transicion);
}
.coolook-diapo__mover:hover:not(:disabled),
.coolook-diapo__mover:focus:not(:disabled) { background: var(--coolook-arena); color: var(--coolook-tinta); }
.coolook-diapo__mover:disabled { opacity: .3; cursor: default; }
.coolook-diapo__visible {
margin-left: auto;
gap: 8px;
font-size: 12px;
color: var(--coolook-tinta);
}
.coolook-diapo--oculta { border-style: dashed; }
.coolook-diapo--oculta .coolook-diapo__previa { opacity: .35; }
.coolook-diapo--oculta .coolook-diapo__visible { color: var(--coolook-tenue); }
.coolook-diapo__campo { display: flex; flex-direction: column; gap: 4px; }
.coolook-diapo__campo span {
font-size: 11px;
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tenue);
}
.coolook-diapo__campo input {
padding: 8px 10px;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
font-family: var(--coolook-fuente);
font-size: 13px;
color: var(--coolook-tinta);
background: var(--coolook-papel);
}
.coolook-panel__mini {
padding: 7px 12px;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
background: var(--coolook-papel);
font-family: var(--coolook-fuente);
font-size: 12px;
letter-spacing: var(--coolook-ls-boton);
color: var(--coolook-tinta);
cursor: pointer;
transition: background-color var(--coolook-transicion);
}
.coolook-panel__mini:hover { background: var(--coolook-arena); }
.coolook-panel__mini--quitar { color: var(--coolook-tenue); }
.coolook-diapo__medio { flex-direction: column; }
.coolook-diapo__medio .coolook-panel__mini { align-self: flex-start; }
/* Los dos botones, en linea. */
.coolook-diapo__medio {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "et et" "pv pv" "el qu";
gap: 6px;
}
.coolook-diapo__etiqueta { grid-area: et; }
.coolook-diapo__previa { grid-area: pv; }
.coolook-diapo__medio [data-elegir] { grid-area: el; }
.coolook-diapo__medio [data-quitar] { grid-area: qu; }
/* --- Visibilidad del menu ------------------------------------------------- */
.coolook-visib,
.coolook-visib__hijos { list-style: none; margin: 0; padding: 0; }
.coolook-visib__hijos { padding-left: 22px; }
.coolook-visib__fila {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 10px;
border-bottom: 1px solid var(--coolook-velo);
cursor: pointer;
font-size: 14px;
}
.coolook-visib__fila:hover { background: var(--coolook-velo); }
.coolook-visib__nombre { flex: 1 1 auto; color: var(--coolook-tinta); }
.coolook-visib__item--n0 > .coolook-visib__fila .coolook-visib__nombre {
font-weight: var(--coolook-peso-fuerte);
}
.coolook-visib__estado {
font-size: 12px;
white-space: nowrap;
padding: 2px 8px;
}
.coolook-visib__estado--ok { color: #356647; background: rgba(53, 102, 71, .10); }
.coolook-visib__estado--pendiente { color: #85631a; background: rgba(133, 99, 26, .12); }
@media (max-width: 640px) {
.coolook-panel__pestanas { gap: 0; }
.coolook-panel__pestana { padding: 12px 12px; font-size: 12px; }
.coolook-visib__estado { display: none; }
}
/* ==========================================================================
PANEL: LA ESCENA DEL CONFIGURADOR
========================================================================== */
.coolook-escena__alt {
margin-top: 14px;
max-width: 520px;
}
.coolook-escena {
display: grid;
gap: 20px;
grid-template-columns: 1fr;
align-items: start;
margin: 18px 0 22px;
}
@media (min-width: 780px) {
.coolook-escena { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px; }
}
/* --- El lienzo ------------------------------------------------------------ */
.coolook-escena__lienzo {
position: relative;
background: var(--coolook-velo);
border: 1px solid var(--coolook-linea);
line-height: 0;
cursor: crosshair;
overflow: hidden;
/* Arrastrar sobre la foto no debe hacer scroll en el movil. */
touch-action: none;
-webkit-user-select: none;
user-select: none;
}
.coolook-escena__lienzo > img {
display: block;
width: 100%;
height: auto;
}
/*
* La pieza cuelga DEL anclaje: centrada en horizontal y hacia abajo en
* vertical, igual que una joya real. De ahi el `translateX(-50%)` sin
* desplazamiento vertical.
*/
.coolook-escena__pieza {
position: absolute;
transform: translateX(-50%);
height: auto;
pointer-events: none;
}
/* --- El anclaje ----------------------------------------------------------- */
.coolook-escena__ancla {
position: absolute;
width: 28px;
height: 28px;
margin: -14px 0 0 -14px;
padding: 0;
border: 0;
background: none;
cursor: grab;
touch-action: none;
z-index: 2;
}
.coolook-escena--arrastrando .coolook-escena__ancla { cursor: grabbing; }
/*
* Una cruz de dos lineas, no un circulo relleno: hay que ver EXACTAMENTE
* que punto de la oreja se esta marcando, y un disco tapa justo eso.
*/
.coolook-escena__ancla::before,
.coolook-escena__ancla::after {
content: "";
position: absolute;
background: var(--coolook-tinta);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .9);
}
.coolook-escena__ancla::before {
left: 50%;
top: 0;
width: 1px;
height: 100%;
margin-left: -.5px;
}
.coolook-escena__ancla::after {
top: 50%;
left: 0;
height: 1px;
width: 100%;
margin-top: -.5px;
}
/* El hueco central deja ver el punto exacto. */
.coolook-escena__ancla span {
position: absolute;
left: 50%;
top: 50%;
width: 9px;
height: 9px;
margin: -4.5px 0 0 -4.5px;
background: var(--coolook-papel);
border: 1px solid var(--coolook-tinta);
border-radius: 50%;
}
.coolook-escena__ancla:focus-visible {
outline: 2px solid var(--coolook-tinta);
outline-offset: 3px;
}
/* --- Los mandos ----------------------------------------------------------- */
.coolook-escena__mandos {
display: flex;
flex-direction: column;
gap: 14px;
}
.coolook-escena__refe {
margin: 0;
font-size: 14px;
color: var(--coolook-texto);
padding: 10px 13px;
background: var(--coolook-velo);
border-left: 3px solid var(--coolook-arena);
}
.coolook-escena__refe--falta { border-left-color: #a93c28; }
.coolook-escena__barra {
display: flex;
flex-direction: column;
gap: 6px;
}
.coolook-escena__barra > span {
font-size: 12px;
font-weight: var(--coolook-peso-fuerte);
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tenue);
}
.coolook-escena__barra input[type="range"] {
width: 100%;
max-width: 420px;
accent-color: var(--coolook-tinta);
}
.coolook-escena__lectura {
margin: 0;
font-size: 14px;
color: var(--coolook-texto);
font-variant-numeric: tabular-nums;
}
.coolook-escena__lectura strong { color: var(--coolook-tinta); font-weight: var(--coolook-peso-fuerte); }
/* ==========================================================================
CONFIGURADOR MYCOOLOOK
Movil primero, y no como concesion: aqui se compra desde el telefono. En
movil la modelo se queda fija arriba y el catalogo corre por debajo, para
que nunca haya que decidir entre ver la joya y elegir la pieza. A partir de
980px pasa a dos columnas, con el catalogo a la izquierda y la modelo a la
derecha, como en coolook.es.
========================================================================== */
.coolook-cfg {
display: grid;
grid-template-columns: 1fr;
gap: 0;
max-width: var(--coolook-ancho);
margin: 0 auto;
}
/*
* Un hijo de grid no baja de su ancho de contenido si no se le dice: los pasos
* llevan `white-space: nowrap` y estiraban la columna a 531px dentro de una
* pantalla de 375, sacando la pagina por la derecha. Su `overflow-x` no sirve
* de nada mientras el padre pueda crecer.
*/
.coolook-cfg > * { min-width: 0; }
/*
* Astra trae `.entry-content p { margin-bottom: 1.6em }`, que son DOS clases y
* gana a cualquier `.coolook-cfg__loquesea` de una sola. Sin esto, cada parrafo
* de la barra de abajo arrastraba 21px de aire y la barra ocupaba 221px en una
* pantalla de 812: mas que el catalogo. Aqui el espaciado lo pone el `gap` del
* contenedor, no los margenes de cada hijo.
*/
.coolook-cfg p,
.coolook-cfg ul,
.coolook-cfg li {
margin: 0;
}
.coolook-cfg__vacio {
max-width: 60ch;
margin: 60px auto;
padding: 0 var(--coolook-margen);
color: var(--coolook-texto);
text-align: center;
}
/* --- La escena ------------------------------------------------------------ */
.coolook-cfg__escena {
position: sticky;
top: 0;
z-index: 3;
background: var(--coolook-papel);
border-bottom: 1px solid var(--coolook-linea);
display: flex;
justify-content: center;
}
.coolook-cfg__lienzo {
position: relative;
line-height: 0;
/* La cabecera del sitio ya come 110px y la barra de abajo otros 110:
a la foto le toca lo justo para ver la joya, no mas. */
max-height: 30vh;
}
.coolook-cfg__lienzo > img {
display: block;
width: auto;
height: 30vh;
max-width: 100%;
object-fit: contain;
}
/*
* Lo montado cuelga DEL anclaje: centrado en horizontal y hacia abajo, como
* cuelga una joya de verdad. El `left`/`top` en porcentaje lo pone el PHP con
* los valores de la escena y el `translateX` lo centra en ese punto.
*
* El ancho es el de la foto, no cero. Parece contraintuitivo —el anclaje es un
* punto— pero cada pieza se dimensiona en % del ancho de la FOTO, y un
* porcentaje de un contenedor de ancho cero es cero: las piezas se dibujaban
* con 0px de alto y no se veia nada.
*/
.coolook-cfg__montaje {
position: absolute;
width: 100%;
transform: translateX(-50%);
pointer-events: none;
}
/*
* Cada pieza se coloca por sus puntos de enganche (left y margin-top en % del
* ancho de la foto, calculados en el JS), no en columna: asi el arito de una
* cae sobre el aro de la anterior, como en la joya fisica.
*/
.coolook-cfg__puesta {
position: absolute;
top: 0;
display: block;
height: auto;
max-width: none;
}
/* --- El taller ------------------------------------------------------------ */
.coolook-cfg__taller {
padding: 0 var(--coolook-margen);
}
/* --- Los pasos ------------------------------------------------------------ */
.coolook-cfg__pasos {
display: flex;
gap: 0 4px;
border-bottom: 1px solid var(--coolook-linea);
margin: 0 0 16px;
overflow-x: auto;
scrollbar-width: none;
}
.coolook-cfg__pasos::-webkit-scrollbar { display: none; }
.coolook-cfg__paso {
flex: 1 1 auto;
display: flex;
align-items: baseline;
justify-content: center;
gap: 7px;
padding: 15px 12px;
margin-bottom: -1px;
border: 0;
border-bottom: 2px solid transparent;
background: none;
font-family: var(--coolook-fuente);
font-size: 13px;
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tenue);
white-space: nowrap;
cursor: pointer;
transition: color var(--coolook-transicion);
}
.coolook-cfg__paso:hover,
.coolook-cfg__paso:focus,
.coolook-cfg__paso:focus-visible {
background: none;
color: var(--coolook-tinta);
}
.coolook-cfg__paso--activo {
color: var(--coolook-tinta);
border-bottom-color: var(--coolook-tinta);
}
.coolook-cfg__paso:focus-visible {
outline: 2px solid var(--coolook-tinta);
outline-offset: -2px;
}
.coolook-cfg__paso-cuenta {
font-size: 11px;
letter-spacing: 0;
color: var(--coolook-tenue);
font-variant-numeric: tabular-nums;
}
/* --- Controles ------------------------------------------------------------ */
.coolook-cfg__controles {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 16px;
}
/* El buscador ocupa la fila entera; los dos filtros se reparten la siguiente. */
.coolook-cfg__buscar { grid-column: 1 / -1; }
@media (min-width: 620px) {
.coolook-cfg__controles { grid-template-columns: 1fr auto auto; align-items: end; }
.coolook-cfg__buscar { grid-column: auto; }
}
.coolook-cfg__buscar input,
.coolook-cfg__filtro select {
width: 100%;
padding: 11px 13px;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
background: var(--coolook-papel);
font-family: var(--coolook-fuente);
font-size: 14px;
color: var(--coolook-tinta);
}
.coolook-cfg__filtro {
display: flex;
flex-direction: column;
gap: 4px;
}
.coolook-cfg__filtro > span {
font-size: 11px;
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tenue);
}
.coolook-cfg__buscar input:focus,
.coolook-cfg__filtro select:focus {
outline: 2px solid var(--coolook-tinta);
outline-offset: 1px;
}
.coolook-cfg__ayuda {
font-size: 14px;
color: var(--coolook-texto);
max-width: 68ch;
margin: 0 0 14px;
}
.coolook-cfg__nada {
font-size: 14px;
color: var(--coolook-tenue);
padding: 24px 0;
}
.coolook-cfg__panel--oculto { display: none; }
/* --- La rejilla de piezas ------------------------------------------------- */
.coolook-cfg__rejilla {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--coolook-gutter);
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.coolook-cfg__pieza[hidden] { display: none; }
.coolook-cfg__elegir {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 12px 14px;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
background: var(--coolook-papel);
font-family: var(--coolook-fuente);
text-align: left;
cursor: pointer;
transition: border-color var(--coolook-transicion), background-color var(--coolook-transicion);
}
/*
* Astra emite en linea `button:hover { background: var(--ast-global-color-2);
* color: #fff }` —azul marino y texto blanco— y cualquier boton nuestro que no
* declare fondo y color en hover lo hereda: la tarjeta se ponia negra y no se
* leia nada. Aqui se declaran los dos siempre, en reposo, en hover y elegida.
*/
.coolook-cfg__elegir:hover:not(:disabled) {
background: var(--coolook-arena);
color: var(--coolook-tinta);
}
/*
* Y `button:focus`, que Astra tambien pinta de azul marino: tras el clic el
* boton se queda con el foco y la tarjeta que se acababa de quitar quedaba
* negra. El foco solo se marca con el contorno, y solo desde teclado.
*/
.coolook-cfg__elegir:focus {
background: var(--coolook-papel);
color: var(--coolook-tinta);
outline: none;
}
.coolook-cfg__elegir:focus-visible {
outline: 2px solid var(--coolook-tinta);
outline-offset: 2px;
}
.coolook-cfg__pieza--puesta .coolook-cfg__elegir,
.coolook-cfg__pieza--puesta .coolook-cfg__elegir:hover {
border-color: var(--coolook-tinta);
box-shadow: inset 0 0 0 1px var(--coolook-tinta);
background: var(--coolook-arena);
color: var(--coolook-tinta);
}
.coolook-cfg__elegir:disabled {
cursor: not-allowed;
opacity: .45;
}
/*
* La miniatura se centra en una caja de alto fijo. No se escala a tamano real
* aqui a proposito: en el listado hay que RECONOCER la pieza, y una de 10mm
* seria un punto. El tamano real es la promesa de la escena, no del catalogo,
* y por eso cada pieza lleva su medida escrita debajo.
*/
.coolook-cfg__mini {
display: flex;
align-items: center;
justify-content: center;
height: 72px;
}
.coolook-cfg__mini img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
display: block;
}
.coolook-cfg__nombre {
font-size: 13px;
line-height: 1.35;
color: var(--coolook-tinta);
}
.coolook-cfg__datos {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin-top: auto;
}
.coolook-cfg__precio {
font-size: 13px;
color: var(--coolook-tinta);
font-variant-numeric: tabular-nums;
}
.coolook-cfg__precio .woocommerce-Price-amount { font-size: inherit; }
.coolook-cfg__mm {
font-size: 12px;
color: var(--coolook-tenue);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.coolook-cfg__agotada {
font-size: 11px;
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tenue);
}
/* --- La cuenta ------------------------------------------------------------ */
.coolook-cfg__cuenta {
position: sticky;
bottom: 0;
z-index: 4;
background: var(--coolook-papel);
border-top: 1px solid var(--coolook-linea);
padding: 10px var(--coolook-margen) 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.coolook-cfg__montado {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
/* La lista no puede comerse la pantalla: a partir de tres piezas se
desplaza dentro de su propia caja. */
max-height: 96px;
overflow-y: auto;
}
.coolook-cfg__montado-vacio {
font-size: 13px;
line-height: 1.4;
color: var(--coolook-tenue);
padding: 0;
/* Una sola linea: es una pista, no un parrafo, y en movil cada linea
que ocupa aqui es una linea que le falta al catalogo. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.coolook-cfg__montado-item {
display: flex;
align-items: baseline;
gap: 10px;
font-size: 13px;
padding: 3px 0;
}
.coolook-cfg__montado-nombre {
flex: 1 1 auto;
color: var(--coolook-texto);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.coolook-cfg__montado-precio {
color: var(--coolook-tinta);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.coolook-cfg__quitar {
border: 0;
background: none;
padding: 0;
font-family: var(--coolook-fuente);
font-size: 12px;
color: var(--coolook-tenue);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.coolook-cfg__quitar:hover { background: none; color: var(--coolook-tinta); }
.coolook-cfg__quitar:focus-visible {
outline: 2px solid var(--coolook-tinta);
outline-offset: 2px;
}
.coolook-cfg__barra {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
padding-top: 8px;
border-top: 1px solid var(--coolook-velo);
}
.coolook-cfg__cifras {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.coolook-cfg__largo,
.coolook-cfg__total {
margin: 0;
font-size: 13px;
color: var(--coolook-tenue);
font-variant-numeric: tabular-nums;
}
.coolook-cfg__largo strong,
.coolook-cfg__total strong {
color: var(--coolook-tinta);
font-weight: var(--coolook-peso-fuerte);
}
.coolook-cfg__total strong { font-size: 16px; }
.coolook-cfg__anadir {
white-space: nowrap;
padding-left: 20px;
padding-right: 20px;
}
.coolook-cfg__anadir:disabled {
opacity: .4;
cursor: not-allowed;
}
.coolook-cfg__estado {
font-size: 13px;
color: var(--coolook-texto);
}
/* Vacio no reserva sitio: es un aviso ocasional, no una fila fija. */
.coolook-cfg__estado:empty { display: none; }
.coolook-cfg__estado--mal { color: #a93c28; }
/* --- Escritorio ----------------------------------------------------------- */
@media (min-width: 980px) {
.coolook-cfg {
grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
grid-template-areas:
"taller escena"
"cuenta escena";
gap: 0 40px;
padding: 0 var(--coolook-margen);
align-items: start;
}
.coolook-cfg__taller { grid-area: taller; padding: 0; }
.coolook-cfg__escena { grid-area: escena; }
.coolook-cfg__cuenta { grid-area: cuenta; }
/* La modelo se queda a la vista mientras se recorre el catalogo. */
.coolook-cfg__escena {
position: sticky;
top: 20px;
border-bottom: 0;
align-self: start;
}
.coolook-cfg__lienzo { max-height: none; }
.coolook-cfg__lienzo > img {
width: 100%;
height: auto;
}
.coolook-cfg__cuenta {
position: sticky;
bottom: 20px;
border: 1px solid var(--coolook-linea);
border-top: 1px solid var(--coolook-linea);
padding: 18px 20px 20px;
margin-top: 24px;
}
.coolook-cfg__montado { max-height: 30vh; }
.coolook-cfg__barra { grid-template-columns: 1fr; gap: 14px; }
.coolook-cfg__cifras { flex-direction: row; justify-content: space-between; align-items: baseline; }
.coolook-cfg__anadir { width: 100%; }
.coolook-cfg__montado-vacio { white-space: normal; }
.coolook-cfg__rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
.coolook-cfg * { transition: none !important; }
}
/* ==========================================================================
LA JOYA EN EL CARRITO
Cada pieza es una fila —asi descuenta su stock y sale en el albaran— pero
se leen como UNA joya: cabecera «Tu MyCoolook» con la miniatura montada, y
las demas piezas sangradas debajo, sin borde entre ellas.
========================================================================== */
.coolook-joya__titulo {
display: block;
font-size: 15px;
color: var(--coolook-tinta);
letter-spacing: var(--coolook-ls-titulo);
margin-bottom: 4px;
}
.coolook-joya__titulo small {
font-size: 12px;
color: var(--coolook-tenue);
letter-spacing: 0;
margin-left: 6px;
font-variant-numeric: tabular-nums;
}
.coolook-joya__pieza {
display: block;
font-size: 14px;
}
.coolook-joya__pieza--colgante { padding-left: 14px; }
.coolook-joya__parte {
display: inline-block;
font-size: 11px;
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tenue);
margin-right: 8px;
}
.coolook-joya__mini {
display: block;
width: 96px;
height: 96px;
object-fit: cover;
}
.coolook-joya__cantidad {
display: inline-block;
min-width: 2em;
text-align: center;
color: var(--coolook-texto);
}
/* Las filas de una misma joya van pegadas: la linea las separaria en cosas
distintas, y no lo son. Astra pone el borde con `.woocommerce table.shop_table td`
(dos clases y dos elementos); se iguala y se desempata por orden. */
.woocommerce table.shop_table tr.coolook-joya__fila--pieza td,
.woocommerce table.shop_table tr.coolook-joya__fila--cabecera td {
border-top: 0;
}
.woocommerce table.shop_table tr.coolook-joya__fila--pieza td.product-thumbnail img {
width: 40px;
height: auto;
opacity: .75;
}
.woocommerce table.shop_table tr.coolook-joya__fila--ultima td {
padding-bottom: 18px;
}
/* ==========================================================================
CONFIGURADOR: COMPARTIR Y MONTAJES DE PARTIDA
========================================================================== */
/* --- Compartir: dos enlaces discretos bajo el boton, no otro boton ------- */
.coolook-cfg__compartir {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
padding-top: 2px;
}
.coolook-cfg__compartir[hidden] { display: none; }
.coolook-cfg__enlace {
border: 0;
background: none;
padding: 0;
font-family: var(--coolook-fuente);
font-size: 13px;
color: var(--coolook-texto);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.coolook-cfg__enlace:hover { background: none; color: var(--coolook-tinta); }
.coolook-cfg__enlace:focus-visible {
outline: 2px solid var(--coolook-tinta);
outline-offset: 2px;
}
/* --- Montajes de partida: una fila de joyas hechas, deslizable en movil ---
Se llaman "propuesta" y no "montaje": `.coolook-cfg__montaje` ya es el
contenedor de la escena donde cuelga lo montado, y el chip le ponia fondo
blanco y borde: una barra cruzando la cara de la modelo. --- */
.coolook-cfg__propuestas {
margin: 0 0 18px;
padding-top: 14px;
}
.coolook-cfg__propuestas-titulo {
font-size: 12px;
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tenue);
margin: 0 0 10px;
}
.coolook-cfg__propuestas-lista {
list-style: none;
margin: 0;
padding: 0 0 6px;
display: flex;
gap: var(--coolook-gutter);
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.coolook-cfg__propuestas-lista::-webkit-scrollbar { display: none; }
.coolook-cfg__propuestas-lista > li {
flex: 0 0 auto;
width: 150px;
scroll-snap-align: start;
}
.coolook-cfg__propuesta {
width: 100%;
display: flex;
flex-direction: column;
gap: 6px;
padding: 0 0 10px;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
background: var(--coolook-papel);
font-family: var(--coolook-fuente);
text-align: left;
cursor: pointer;
overflow: hidden;
transition: border-color var(--coolook-transicion);
}
.coolook-cfg__propuesta:hover {
border-color: var(--coolook-tinta);
background: var(--coolook-arena);
color: var(--coolook-tinta);
}
.coolook-cfg__propuesta:focus-visible {
outline: 2px solid var(--coolook-tinta);
outline-offset: 2px;
}
.coolook-cfg__propuesta img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.coolook-cfg__propuesta-nombre {
font-size: 13px;
color: var(--coolook-tinta);
padding: 0 10px;
}
.coolook-cfg__propuesta-datos {
font-size: 12px;
color: var(--coolook-tenue);
padding: 0 10px;
font-variant-numeric: tabular-nums;
}
.coolook-cfg__propuesta-datos .woocommerce-Price-amount { font-size: inherit; }
@media (min-width: 980px) {
.coolook-cfg__propuestas-lista > li { width: 170px; }
}
/* --- Panel: filas de montajes -------------------------------------------- */
.coolook-montajes { grid-template-columns: 1fr; }
.coolook-montaje {
display: grid;
gap: 10px 16px;
grid-template-columns: 1fr;
padding: 14px 0;
border-bottom: 1px solid var(--coolook-velo);
}
@media (min-width: 700px) {
.coolook-montaje { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
}
/* ==========================================================================
FICHA DE PRODUCTO, COMO LA DE COOLOOK.ES
Galeria a la izquierda (~62%), todas las fotos del mismo tamano en dos
columnas; datos a la derecha, pegajosos; el detalle en acordeones y no en
pestanas. En movil la galeria es un carrusel con asomo de la siguiente foto.
Estas reglas van despues del bloque FICHA DE PRODUCTO original y lo afinan.
========================================================================== */
@media (min-width: 900px) {
.coolook-theme.single-product .coolook-ficha {
grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
gap: 0 clamp(32px, 4vw, 64px);
}
}
/* --- La galeria ----------------------------------------------------------- */
.coolook-galeria { min-width: 0; }
.coolook-galeria__lista {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: var(--coolook-gutter);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.coolook-galeria__lista::-webkit-scrollbar { display: none; }
/* En movil cada foto ocupa el 86%: se asoma la siguiente, que es la pista de
que hay mas. Igual que en Dawn (`grid--peek`). */
.coolook-galeria__item {
flex: 0 0 86%;
scroll-snap-align: start;
min-width: 0;
}
.coolook-galeria--una .coolook-galeria__item { flex-basis: 100%; }
/*
* Todas del mismo tamano: una caja 4:5 que la foto llena. Dos fotos con
* proporciones distintas se ven iguales, que es lo que hace `media-fit-cover`
* en la ficha de Espana. 4:5 porque es la proporcion en la que la marca
* fotografia (500x625, 2400x3000).
*/
.coolook-galeria__ampliar {
display: block;
aspect-ratio: 4 / 5;
background: var(--coolook-velo);
overflow: hidden;
cursor: zoom-in;
}
.coolook-galeria__ampliar img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--coolook-radio);
}
.coolook-galeria__ampliar:focus-visible {
outline: 2px solid var(--coolook-tinta);
outline-offset: 2px;
}
.coolook-galeria__mando {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
padding: 12px 0 4px;
font-size: 13px;
color: var(--coolook-tenue);
font-variant-numeric: tabular-nums;
}
.coolook-galeria__flecha {
border: 0;
background: none;
padding: 6px 10px;
font-family: var(--coolook-fuente);
font-size: 16px;
color: var(--coolook-tinta);
cursor: pointer;
}
.coolook-galeria__flecha:hover { background: none; color: var(--coolook-tinta); }
@media (min-width: 900px) {
/* Escritorio: rejilla de dos columnas, sin carrusel ni mandos. */
.coolook-galeria__lista {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
overflow: visible;
scroll-snap-type: none;
}
.coolook-galeria__item { flex: none; }
/* Con una sola foto, a todo el ancho de la galeria pero sin desbordar. */
.coolook-galeria--una .coolook-galeria__lista { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.coolook-galeria__mando { display: none; }
}
/* --- Ampliar ---------------------------------------------------------------- */
.coolook-ampliar {
position: fixed;
inset: 0;
z-index: 9999;
background: var(--coolook-papel);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
cursor: zoom-out;
}
.coolook-ampliar img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.coolook-ampliar__cerrar {
position: absolute;
top: 12px;
right: 16px;
border: 0;
background: none;
font-size: 34px;
line-height: 1;
color: var(--coolook-tinta);
cursor: pointer;
}
.coolook-ampliar__cerrar:hover { background: none; color: var(--coolook-tinta); }
body.coolook-ampliando { overflow: hidden; }
/* --- Los datos -------------------------------------------------------------- */
.coolook-theme.single-product div.product .summary { gap: 14px; }
.coolook-ficha__guia {
align-self: flex-start;
font-size: 12px;
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tinta);
text-decoration: underline;
text-underline-offset: 4px;
}
.coolook-ficha__stock {
margin: 0;
font-size: 13px;
color: var(--coolook-texto);
display: flex;
align-items: center;
gap: 8px;
}
.coolook-ficha__stock::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #356647;
}
.coolook-ficha__stock--no::before { background: #a93c28; }
/* El boton, a todo el ancho, como «Anadir a la cesta». En los productos con
talla WooCommerce envuelve cantidad y boton en otra caja: se estira igual. */
.coolook-theme.single-product form.cart { gap: 10px; }
.coolook-theme.single-product .single_add_to_cart_button { flex: 1 1 100%; }
.coolook-theme.single-product form.cart .woocommerce-variation-add-to-cart {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 10px;
width: 100%;
}
.coolook-theme.single-product form.cart table.variations { margin: 0; }
.coolook-theme.single-product form.cart table.variations td,
.coolook-theme.single-product form.cart table.variations th { padding: 0 0 6px; border: 0; }
.coolook-theme.single-product form.cart table.variations select {
width: 100%;
padding: 11px 13px;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
background: var(--coolook-papel);
font-family: var(--coolook-fuente);
font-size: 14px;
color: var(--coolook-tinta);
}
.coolook-theme.single-product form.cart table.variations label {
font-size: 12px;
font-weight: var(--coolook-peso-titulo);
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tenue);
}
/* --- Ficha: las tallas en una línea de píldoras, medidas en coolook.es ---
Etiqueta encima; píldora 14px con 10px 20px de aire, borde al 55%, radio
40px; la elegida en tinta sobre papel y sin radio (así está en Dawn); la
agotada con el borde al 10%, el texto al 60% y tachada. ---------------- */
.coolook-theme.single-product form.cart table.variations tr,
.coolook-theme.single-product form.cart table.variations th,
.coolook-theme.single-product form.cart table.variations td { display: block; width: 100%; }
.coolook-theme.single-product form.cart table.variations th { padding-bottom: 0; }
.coolook-theme.single-product form.cart table.variations th label {
font-size: 13px;
letter-spacing: .4px;
text-transform: none;
color: var(--coolook-texto);
}
.coolook-pildoras select,
.coolook-pildoras + .reset_variations { display: none !important; }
.coolook-pildoras__lista { display: flex; flex-wrap: wrap; align-items: flex-start; }
.coolook-pildoras__radio {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
opacity: 0;
overflow: hidden;
clip: rect(0 0 0 0);
}
.coolook-pildoras__pildora {
display: inline-block;
margin: 7px 5px 2px 0;
padding: 10px 20px;
border: 1px solid var(--coolook-tenue);
border-radius: 40px;
background: var(--coolook-papel);
color: var(--coolook-tinta);
font-size: 14px;
line-height: 14px;
letter-spacing: 1px;
text-align: center;
cursor: pointer;
transition: background-color var(--coolook-transicion), color var(--coolook-transicion);
}
.coolook-pildoras__radio:checked + .coolook-pildoras__pildora {
background: var(--coolook-tinta);
color: var(--coolook-papel);
border-color: var(--coolook-tinta);
border-radius: 0;
}
.coolook-pildoras__radio:focus-visible + .coolook-pildoras__pildora {
outline: 2px solid var(--coolook-tinta);
outline-offset: 2px;
}
.coolook-pildoras__pildora--agotada {
border-color: rgba(18, 18, 18, .1);
color: rgba(18, 18, 18, .6);
text-decoration: line-through;
}
.coolook-pildoras__radio:checked + .coolook-pildoras__pildora--agotada {
background: var(--coolook-papel);
color: rgba(18, 18, 18, .6);
border-color: rgba(18, 18, 18, .1);
}
/* Cantidad con − y + */
.coolook-theme.single-product form.cart .quantity.coolook-cantidad {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
}
.coolook-theme.single-product form.cart .quantity.coolook-cantidad input.qty {
width: 56px;
border: 0;
min-height: 46px;
-moz-appearance: textfield;
}
.coolook-theme.single-product form.cart .quantity.coolook-cantidad input.qty::-webkit-outer-spin-button,
.coolook-theme.single-product form.cart .quantity.coolook-cantidad input.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.coolook-cantidad__paso {
border: 0;
background: none;
padding: 0 14px;
font-family: var(--coolook-fuente);
font-size: 18px;
color: var(--coolook-tinta);
cursor: pointer;
}
.coolook-cantidad__paso:hover { background: var(--coolook-velo); color: var(--coolook-tinta); }
.coolook-ficha__sello {
margin: 0;
font-size: 11px;
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tenue);
}
/* --- Compartir -------------------------------------------------------------- */
.coolook-compartir {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 16px;
font-size: 13px;
}
.coolook-compartir__rotulo {
font-size: 11px;
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tenue);
}
.coolook-compartir__enlace {
border: 0;
background: none;
padding: 0;
font-family: var(--coolook-fuente);
font-size: 13px;
color: var(--coolook-texto);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.coolook-compartir__enlace:hover { background: none; color: var(--coolook-tinta); }
.coolook-compartir__aviso { font-size: 12px; color: var(--coolook-tenue); }
/* --- Acordeones ------------------------------------------------------------- */
.coolook-acordeones {
margin-top: 6px;
border-top: 1px solid var(--coolook-linea);
}
.coolook-acordeon { border-bottom: 1px solid var(--coolook-linea); }
.coolook-acordeon__titulo {
list-style: none;
cursor: pointer;
padding: 15px 28px 15px 0;
position: relative;
font-size: 12px;
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tinta);
}
.coolook-acordeon__titulo::-webkit-details-marker { display: none; }
/* El + que se vuelve − : dos trazos, sin icono. */
.coolook-acordeon__titulo::before,
.coolook-acordeon__titulo::after {
content: "";
position: absolute;
right: 4px;
top: 50%;
background: var(--coolook-tinta);
transition: transform var(--coolook-transicion);
}
.coolook-acordeon__titulo::before { width: 11px; height: 1px; margin-top: -.5px; }
.coolook-acordeon__titulo::after { width: 1px; height: 11px; margin-top: -5.5px; right: 9px; }
.coolook-acordeon[open] .coolook-acordeon__titulo::after { transform: scaleY(0); }
.coolook-acordeon__titulo:focus-visible {
outline: 2px solid var(--coolook-tinta);
outline-offset: 2px;
}
.coolook-acordeon__cuerpo {
padding: 0 0 18px;
font-size: 14px;
line-height: 1.6;
color: var(--coolook-texto);
}
.coolook-acordeon__cuerpo p { margin: 0 0 10px; }
.coolook-acordeon__cuerpo p:last-child { margin-bottom: 0; }
.coolook-acordeon__sku {
font-size: 12px;
color: var(--coolook-tenue);
font-variant-numeric: tabular-nums;
}
/* --- Relacionados: «You may also like» ------------------------------------- */
.coolook-theme.single-product .related.products {
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid var(--coolook-linea);
}
.coolook-theme.single-product .related.products > h2 {
font-size: 1.25rem;
font-weight: var(--coolook-peso-titulo);
letter-spacing: var(--coolook-ls-titulo);
margin: 0 0 20px;
}
/* --- Piedras: la misma joya en otras piedras --------------------------------
Bolitas de 44px con la foto de cada hermana, como en coolook.es. La actual
lleva un aro de tinta. ---------------------------------------------------- */
.coolook-piedras { display: flex; flex-direction: column; gap: 8px; }
.coolook-piedras__rotulo {
margin: 0;
font-size: 13px;
color: var(--coolook-texto);
}
.coolook-piedras__rotulo strong { color: var(--coolook-tinta); font-weight: var(--coolook-peso-fuerte); }
.coolook-piedras__lista {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.coolook-piedras__bola {
display: block;
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
border: 1px solid var(--coolook-linea);
background: var(--coolook-velo);
transition: border-color var(--coolook-transicion);
}
.coolook-piedras__bola img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
a.coolook-piedras__bola:hover { border-color: var(--coolook-tinta); }
a.coolook-piedras__bola:focus-visible {
outline: 2px solid var(--coolook-tinta);
outline-offset: 2px;
}
.coolook-piedras__bola--actual {
border-color: var(--coolook-tinta);
box-shadow: 0 0 0 2px var(--coolook-papel), 0 0 0 3px var(--coolook-tinta);
}
/* ==========================================================================
PANEL: EL DETALLE DESPLEGABLE DE CADA PRODUCTO
Se llama "detalle" y no "ficha": .coolook-ficha ya es el envoltorio de la
ficha de producto, y el max-width de este bloque la encogia a 980px.
Fotos y, si es pieza del configurador, hueco y alto. Se abre debajo de la
fila con el boton «Ficha».
========================================================================== */
.coolook-panel__th-acc { width: 110px; }
.coolook-panel__td-acc {
display: flex;
gap: 10px;
align-items: center;
white-space: nowrap;
}
.coolook-panel__ficha {
padding: 5px 10px;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
background: var(--coolook-papel);
font-family: var(--coolook-fuente);
font-size: 12px;
letter-spacing: var(--coolook-ls-boton);
color: var(--coolook-tinta);
cursor: pointer;
transition: background-color var(--coolook-transicion);
}
.coolook-panel__ficha:hover,
.coolook-panel__ficha--abierta {
background: var(--coolook-arena);
color: var(--coolook-tinta);
}
.coolook-panel__ficha:focus-visible {
outline: 2px solid var(--coolook-tinta);
outline-offset: 2px;
}
.coolook-panel__titulo-fila { display: block; color: var(--coolook-tinta); }
.coolook-panel__pieza {
display: inline-block;
margin: 2px 0 0;
padding: 1px 7px;
font-size: 10px;
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
background: var(--coolook-arena);
color: var(--coolook-tinta);
}
/* --- La fila desplegada --------------------------------------------------- */
.coolook-panel__tabla tbody tr.coolook-panel__detalle:hover { background: var(--coolook-velo); }
.coolook-panel__detalle > td {
background: var(--coolook-velo);
padding: 18px 16px 22px !important;
}
.coolook-detalle {
display: grid;
gap: 24px 40px;
grid-template-columns: 1fr;
max-width: 980px;
}
@media (min-width: 900px) {
.coolook-detalle { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
.coolook-detalle__bloque { display: flex; flex-direction: column; gap: 12px; }
.coolook-detalle h4 {
font-size: 11px;
font-weight: var(--coolook-peso-fuerte);
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tenue);
margin: 0;
}
.coolook-detalle__ayuda,
.coolook-detalle__vacio {
margin: 0;
font-size: 13px;
color: var(--coolook-texto);
max-width: 60ch;
}
.coolook-detalle__principal {
display: flex;
gap: 14px;
align-items: flex-start;
}
.coolook-detalle__principal img {
width: 120px;
height: 120px;
object-fit: cover;
display: block;
background: var(--coolook-papel);
border: 1px solid var(--coolook-linea);
}
.coolook-detalle__mandos { display: flex; gap: 4px; }
.coolook-detalle__mandos--fila { flex-direction: column; gap: 6px; }
.coolook-detalle__galeria {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.coolook-detalle__galeria li {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
}
.coolook-detalle__galeria img {
width: 72px;
height: 72px;
object-fit: cover;
display: block;
background: var(--coolook-papel);
border: 1px solid var(--coolook-linea);
}
.coolook-detalle__galeria button {
width: 24px;
height: 22px;
padding: 0;
border: 1px solid var(--coolook-linea);
background: var(--coolook-papel);
color: var(--coolook-tinta);
font-size: 12px;
line-height: 1;
cursor: pointer;
}
.coolook-detalle__galeria button:hover:not(:disabled) { background: var(--coolook-arena); color: var(--coolook-tinta); }
.coolook-detalle__galeria button:disabled { opacity: .35; cursor: default; }
.coolook-detalle__campo { display: flex; flex-direction: column; gap: 5px; max-width: 360px; }
.coolook-detalle__campo > span {
font-size: 13px;
color: var(--coolook-tinta);
}
.coolook-detalle__campo select,
.coolook-detalle__campo input {
padding: 9px 12px;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
background: var(--coolook-papel);
font-family: var(--coolook-fuente);
font-size: 14px;
color: var(--coolook-tinta);
}
.coolook-detalle__campo select:focus,
.coolook-detalle__campo input:focus {
outline: 2px solid var(--coolook-tinta);
outline-offset: 1px;
}
.coolook-detalle__campo small { font-size: 12px; color: var(--coolook-tenue); }
.coolook-detalle__campo textarea {
padding: 9px 12px;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
background: var(--coolook-papel);
font-family: var(--coolook-fuente);
font-size: 14px;
line-height: 1.5;
color: var(--coolook-tinta);
resize: vertical;
}
.coolook-detalle__campo textarea:focus {
outline: 2px solid var(--coolook-tinta);
outline-offset: 1px;
}
/* --- Panel: datos del producto en la ficha ------------------------------ */
.coolook-detalle__bloque--datos { grid-column: 1 / -1; }
.coolook-detalle__datos {
display: grid;
gap: 18px 32px;
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.coolook-detalle__datos { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
}
.coolook-detalle__columna { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.coolook-detalle__columna .coolook-detalle__campo--ancho { max-width: none; }
.coolook-detalle__lista {
max-height: 260px;
overflow-y: auto;
border: 1px solid var(--coolook-linea);
background: var(--coolook-papel);
padding: 4px 0;
}
.coolook-detalle__casilla {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 8px;
font-size: 13px;
color: var(--coolook-tinta);
cursor: pointer;
}
.coolook-detalle__casilla:hover { background: var(--coolook-velo); }
/* --- Panel: tallas ------------------------------------------------------- */
.coolook-tallas__scroll { overflow-x: auto; max-width: 820px; }
.coolook-tallas {
width: 100%;
min-width: 560px;
border-collapse: collapse;
font-size: 13px;
background: var(--coolook-papel);
border: 1px solid var(--coolook-linea);
}
.coolook-tallas th {
text-align: left;
padding: 8px 10px;
font-size: 10px;
font-weight: var(--coolook-peso-fuerte);
letter-spacing: var(--coolook-ls-etiqueta);
text-transform: uppercase;
color: var(--coolook-tenue);
background: var(--coolook-velo);
border-bottom: 1px solid var(--coolook-linea);
white-space: nowrap;
}
.coolook-tallas td {
padding: 6px 10px;
border-bottom: 1px solid var(--coolook-linea);
vertical-align: middle;
}
.coolook-tallas tr:last-child td { border-bottom: 0; }
.coolook-tallas__nombre { font-weight: var(--coolook-peso-fuerte); white-space: nowrap; }
.coolook-tallas .coolook-panel__num { width: 92px; }
.coolook-tallas .coolook-tallas__sku { width: 150px; text-align: left; }
.coolook-tallas__anadir {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.coolook-tallas__anadir select,
.coolook-tallas__anadir input {
padding: 8px 10px;
border: 1px solid var(--coolook-linea);
border-radius: var(--coolook-radio);
background: var(--coolook-papel);
font-family: var(--coolook-fuente);
font-size: 13px;
color: var(--coolook-tinta);
}
.coolook-tallas__anadir input { width: 110px; text-transform: uppercase; }
.coolook-tallas__anadir select:focus,
.coolook-tallas__anadir input:focus { outline: 2px solid var(--coolook-tinta); outline-offset: 1px; }
.coolook-sw--inactivo { opacity: .35; cursor: not-allowed; }
.coolook-detalle__peligro {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
margin-top: 6px;
padding-top: 14px;
border-top: 1px solid var(--coolook-linea);
font-size: 12px;
color: var(--coolook-tenue);
}
.coolook-panel__mini--borrar { color: #a93c28; border-color: #a93c28; }
.coolook-panel__mini--borrar:hover { background: #a93c28; color: #fff; }
.coolook-panel__mini--borrar:disabled { opacity: .5; cursor: wait; }
.coolook-detalle__casilla input { margin: 0; flex: 0 0 auto; accent-color: var(--coolook-tinta); }
/* --- Panel: los puntos de enganche sobre el recorte ---------------------- */
.coolook-detalle__campo--ancho { max-width: 420px; }
/* Fondo a cuadros para ver el recorte transparente entero. */
.coolook-enganche {
position: relative;
display: inline-block;
max-width: 100%;
line-height: 0;
border: 1px solid var(--coolook-linea);
background-color: #fff;
background-image:
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
background-size: 16px 16px;
background-position: 0 0, 8px 8px;
cursor: crosshair;
touch-action: none;
-webkit-user-select: none;
user-select: none;
}
.coolook-enganche img {
display: block;
width: 100%;
max-width: 400px;
height: auto;
}
.coolook-enganche__punto {
position: absolute;
width: 22px;
height: 22px;
margin: -11px 0 0 -11px;
padding: 0;
border: 2px solid var(--coolook-tinta);
border-radius: 50%;
background: rgba(255, 255, 255, .85);
cursor: grab;
touch-action: none;
z-index: 2;
}
.coolook-enganche--arrastrando .coolook-enganche__punto { cursor: grabbing; }
.coolook-enganche__punto span {
position: absolute;
left: 50%;
top: 50%;
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
border-radius: 50%;
}
.coolook-enganche__punto--arriba span,
.coolook-enganche__leyenda--arriba { background: #8d6a2c; }
.coolook-enganche__punto--abajo span,
.coolook-enganche__leyenda--abajo { background: #1a5661; }
.coolook-enganche__punto:hover { background: #fff; }
.coolook-enganche__punto:focus-visible {
outline: 2px solid var(--coolook-tinta);
outline-offset: 3px;
}
.coolook-enganche__leyenda {
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
vertical-align: middle;
margin-right: 3px;
}
.coolook-enganche__aviso {
display: block;
margin: 6px 0 2px;
padding: 6px 10px;
background: var(--coolook-arena);
color: var(--coolook-tinta);
}
/* Carrito: volver al configurador con la joya montada. */
.coolook-joya__cambiar {
display: inline-block;
margin-left: 10px;
font-size: 12px;
color: var(--coolook-texto);
text-decoration: underline;
text-underline-offset: 3px;
}
.coolook-joya__cambiar:hover { color: var(--coolook-tinta); }
/* --- Configurador: sin pendiente, los otros huecos esperan --------------- */
.coolook-cfg__bloqueo {
display: none;
margin: -6px 0 14px;
padding: 9px 13px;
font-size: 14px;
color: var(--coolook-tinta);
background: var(--coolook-arena);
}
.coolook-cfg--sin-base .coolook-cfg__bloqueo { display: block; }
.coolook-cfg--sin-base #coolook-rejilla-intermedio .coolook-cfg__rejilla,
.coolook-cfg--sin-base #coolook-rejilla-final .coolook-cfg__rejilla {
opacity: .5;
}
/* --- Carrito: la joya montada en su cuadro ------------------------------- */
.coolook-joyas {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0 0 22px;
}
.coolook-joya-cuadro {
display: flex;
gap: 18px;
align-items: center;
padding: 14px;
border: 1px solid var(--coolook-linea);
background: var(--coolook-velo);
}
.coolook-joya-cuadro__mini {
flex: 0 0 auto;
width: 150px;
height: 150px;
object-fit: cover;
display: block;
border: 1px solid var(--coolook-linea);
background: var(--coolook-papel);
}
.coolook-joya-cuadro__texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.coolook-joya-cuadro__titulo {
margin: 0 !important;
font-size: 17px;
color: var(--coolook-tinta);
}
.coolook-joya-cuadro__titulo small {
font-size: 12px;
color: var(--coolook-tenue);
margin-left: 8px;
font-variant-numeric: tabular-nums;
}
.coolook-joya-cuadro__piezas {
margin: 0 !important;
font-size: 14px;
color: var(--coolook-texto);
}
.coolook-joya-cuadro .coolook-joya__cambiar { margin: 4px 0 0; align-self: flex-start; }
@media (max-width: 560px) {
.coolook-joya-cuadro { align-items: flex-start; }
.coolook-joya-cuadro__mini { width: 96px; height: 96px; }
}