/**
 * Jarrucheo · Interfaz transversal.
 *
 * Piezas que pueden aparecer en cualquier página y por tanto no caben en las
 * hojas por plantilla (home, tienda, compra): panel del menú, buscador,
 * carrito lateral, venta cruzada, cookies y pop-up.
 *
 * Se carga en todo el sitio, así que aquí solo entra lo que de verdad es
 * transversal. Todo lo demás va a su hoja.
 */

/* -------------------------------------------------------------------------
 * Piezas compartidas
 * ---------------------------------------------------------------------- */
.j-sin-scroll{ overflow:hidden; }

/* El botón «Actualizar cesta» solo hace falta sin JavaScript; con JS la
   cesta se recalcula sola al cambiar una cantidad. */
.j-solo-sin-js{
	position:absolute;width:1px;height:1px;min-height:0;
	margin:0;padding:0;border:0;
	overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

.j-barra-progreso{
	height:9px;background:color-mix(in srgb, currentColor 16%, transparent);
	overflow:hidden;
}
.j-barra-progreso span{ display:block;height:100%;background:currentColor;transition:width .3s ease; }

.j-interruptor{ display:inline-flex;align-items:center;cursor:pointer; }
.j-interruptor input{ position:absolute;opacity:0;width:0;height:0; }
.j-interruptor span[aria-hidden]{
	width:46px;height:24px;border-radius:999px;
	background:color-mix(in srgb, currentColor 30%, transparent);
	position:relative;transition:background-color .15s ease;
}
.j-interruptor span[aria-hidden]::after{
	content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;
	width:18px;height:18px;border-radius:50%;background:var(--j-crema);
	transition:transform .15s ease;
}
.j-interruptor input:checked + span[aria-hidden]{ background:currentColor; }
.j-interruptor input:checked + span[aria-hidden]::after{ transform:translateX(22px); }
.j-interruptor input:focus-visible + span[aria-hidden]{ outline:2px solid currentColor;outline-offset:3px; }

/* Contador de unidades: menos y más a los lados de una caja de texto. */
.j-contador{
	display:inline-flex;align-items:center;
	border:1px solid color-mix(in srgb, currentColor 35%, transparent);
	background:var(--j-blanco);
}
.j-contador button{
	width:32px;height:34px;display:grid;place-items:center;
	background:none;border:0;cursor:pointer;color:inherit;
	font-family:var(--j-fuente-texto);font-size:17px;line-height:1;
}
.j-contador button:hover{ background:color-mix(in srgb, currentColor 10%, transparent); }
.j-contador input{
	width:38px;height:34px;padding:0;text-align:center;
	border:0;border-inline:1px solid color-mix(in srgb, currentColor 20%, transparent);
	background:transparent;color:inherit;
	font-family:var(--j-fuente-texto);font-size:15px;font-weight:600;
}
.j-contador input::-webkit-outer-spin-button,
.j-contador input::-webkit-inner-spin-button{ appearance:none;margin:0; }
.j-contador input[type=number]{ appearance:textfield;-moz-appearance:textfield; }

/* -------------------------------------------------------------------------
 * Menú desplegable
 *
 * El enlace sigue llevando a la categoría; el panel lo abre el botón de la
 * flecha. Así el menú funciona igual con el teclado y sin JavaScript.
 * ---------------------------------------------------------------------- */
.j-nav__item{ display:flex;align-items:center;gap:4px;position:static; }
button.j-nav__flecha{
	background:none;border:0;padding:2px;cursor:pointer;color:inherit;
	display:grid;place-items:center;
}
button.j-nav__flecha svg{ width:15px;height:15px;transition:transform .18s ease; }
.j-nav__item.es-abierto .j-nav__flecha svg{ transform:rotate(180deg); }
.j-nav__item.es-abierto > a{ color:var(--j-lima);text-decoration:underline;text-underline-offset:5px; }

.j-panel{
	position:absolute;inset-inline:0;inset-block-start:100%;
	background:var(--j-burdeos);
	border-block-start:1px solid color-mix(in srgb, var(--j-oliva) 45%, transparent);
	box-shadow:0 18px 40px rgba(0,0,0,.35);
	z-index:30;
}
.j-panel__inner{
	display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2.1fr);gap:56px;
	padding-block:38px 42px;
}
.j-panel__titulo{
	margin:0 0 20px;
	font-family:var(--j-fuente-titulos);font-weight:400;font-size:26px;
	line-height:1.1;letter-spacing:.02em;text-transform:uppercase;
	color:var(--j-lima);
}
/*
 * El panel cuelga del <nav>, y `.j-nav a` deja los enlaces del menú en una
 * sola línea y en color crema. Dentro del panel eso no vale: los nombres de
 * producto son largos y tienen que partir.
 */
.j-panel .j-panel__producto,
.j-panel .j-panel__cats a,
.j-panel .j-panel__todos{ white-space:normal; }

.j-panel__cats{ margin:0 0 26px;padding:0;list-style:none;display:grid;gap:12px; }
.j-panel__cats a{
	font-size:15px;letter-spacing:.02em;text-decoration:none;
	color:var(--j-crema);
}
.j-panel__cats a:hover{ color:var(--j-lima);text-decoration:underline;text-underline-offset:4px; }
.j-panel .j-panel__todos{
	min-height:42px;padding-inline:26px;font-size:14px;
	/* `.j-nav a` pinta los enlaces del menú en crema y le ganaba al botón. */
	color:var(--j-btn1-texto);
}

.j-panel__rotulo{
	margin:0 0 18px;font-size:12px;font-weight:600;
	letter-spacing:.14em;text-transform:uppercase;
	color:color-mix(in srgb, var(--j-crema) 65%, transparent);
}
.j-panel__productos{
	margin:0;padding:0;list-style:none;
	display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
}
.j-panel__productos > li{ display:flex;flex-direction:column;align-items:flex-start;min-width:0; }
.j-panel__producto{
	display:grid;grid-template-columns:minmax(0,1fr);gap:10px;width:100%;min-width:0;
	text-decoration:none;color:var(--j-crema);
}
.j-panel__datos{ display:grid;grid-template-columns:minmax(0,1fr);gap:4px;min-width:0; }
.j-panel__foto{
	display:block;background:color-mix(in srgb, var(--j-crema) 6%, transparent);
}
/*
 * La proporción va en la imagen, no en el contenedor: con `aspect-ratio` en
 * el <span> y `height:100%` en el <img>, las fotos con proporciones muy
 * distintas se salían de su caja y se pisaban entre columnas.
 */
.j-panel__foto img{ width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block;padding:8px; }
.j-panel__nombre{
	display:block;font-size:14px;line-height:1.25;letter-spacing:.02em;
	text-transform:uppercase;overflow-wrap:anywhere;
}
.j-panel__producto:hover .j-panel__nombre{ color:var(--j-lima); }
.j-panel__precio{ display:block;font-size:14px;font-weight:700;color:var(--j-lima); }
.j-panel__precio del{ opacity:.6;font-weight:400;margin-inline-end:6px; }

.j-panel__anadir{
	margin-block-start:10px;display:inline-flex;align-items:center;gap:8px;
	padding:7px 14px;border:1px solid var(--j-lima);
	background:transparent;color:var(--j-lima);
	font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	text-decoration:none;border-radius:0;
}
.j-panel__anadir:hover{ background:var(--j-lima);color:var(--j-burdeos); }
.j-panel__anadir svg{ width:15px;height:15px;fill:none;stroke:currentColor; }
.j-panel__anadir.loading{ opacity:.6; }
.j-panel__anadir.added::after{ content:none; }

/* -------------------------------------------------------------------------
 * Buscador
 * ---------------------------------------------------------------------- */
.j-buscador{ position:fixed;inset:0;z-index:1000; }
.j-buscador__velo{
	position:absolute;inset:0;background:rgba(20,34,35,.55);
	opacity:0;transition:opacity .22s ease;
}
.j-buscador.es-abierta .j-buscador__velo{ opacity:1; }
.j-buscador__panel{
	position:relative;background:var(--j-crema);color:var(--j-burdeos);
	padding:30px clamp(24px,6vw,80px) 40px;
	max-height:min(84vh,760px);overflow:auto;
	transform:translateY(-14px);opacity:0;
	transition:transform .22s ease,opacity .22s ease;
}
.j-buscador.es-abierta .j-buscador__panel{ transform:none;opacity:1; }

.j-buscador__forma{
	display:flex;align-items:center;gap:14px;
	width:min(100%,860px);margin-inline:auto;
	border-block-end:1px solid color-mix(in srgb, var(--j-burdeos) 40%, transparent);
	padding-block-end:12px;
}
.j-buscador__forma svg{ width:24px;height:24px;flex:none; }
.j-buscador__forma input[type=search]{
	flex:1;min-width:0;border:0;background:transparent;color:inherit;
	font-family:var(--j-fuente-texto);font-size:22px;
	padding-block:6px;
}
.j-buscador__forma input[type=search]:focus{ outline:none; }
.j-buscador__forma input[type=search]::-webkit-search-cancel-button{ appearance:none; }
button.j-buscador__cerrar{
	background:none;border:0;padding:4px;cursor:pointer;color:inherit;flex:none;
}
button.j-buscador__cerrar svg{ width:22px;height:22px; }

.j-buscador__resultados{ width:min(100%,860px);margin:26px auto 0; }
.j-buscador__resultados[aria-busy=true]{ opacity:.5; }
.j-buscador__rotulo{
	margin:0 0 12px;font-size:12px;font-weight:600;
	letter-spacing:.14em;text-transform:uppercase;opacity:.65;
}
.j-buscador__cats{
	margin:0 0 26px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px;
}
.j-buscador__cats a{
	display:inline-flex;align-items:center;gap:8px;
	padding:7px 14px;border:1px solid color-mix(in srgb, var(--j-burdeos) 35%, transparent);
	font-size:13px;letter-spacing:.04em;text-transform:uppercase;
	text-decoration:none;color:inherit;
}
.j-buscador__cats a:hover{ background:var(--j-burdeos);color:var(--j-crema); }
.j-buscador__cats span{ opacity:.6;font-size:12px; }

.j-buscador__lista{ margin:0;padding:0;list-style:none;display:grid;gap:2px; }
.j-buscador__lista a{
	display:grid;grid-template-columns:60px minmax(0,1fr) auto;align-items:center;gap:16px;
	padding:10px 12px;text-decoration:none;color:inherit;
}
.j-buscador__lista a:hover{ background:var(--j-blanco); }
.j-buscador__lista img{
	width:60px;height:60px;object-fit:contain;display:block;
	background:var(--j-blanco);
}
.j-buscador__nombre{ font-size:16px;line-height:1.3;letter-spacing:.02em;text-transform:uppercase; }
.j-buscador__precio{ font-size:16px;font-weight:700;white-space:nowrap; }
.j-buscador__todos{
	display:inline-block;margin-block-start:18px;
	font-size:14px;letter-spacing:.06em;text-transform:uppercase;
	color:inherit;text-decoration:underline;text-underline-offset:5px;
}
.j-buscador__vacio{ margin:0;font-size:17px;opacity:.75; }

/* -------------------------------------------------------------------------
 * Carrito lateral
 * ---------------------------------------------------------------------- */
.j-cajon{ position:fixed;inset:0;z-index:1000; }
.j-cajon__velo{
	position:absolute;inset:0;background:rgba(20,34,35,.55);
	opacity:0;transition:opacity .24s ease;
}
.j-cajon.es-abierta .j-cajon__velo{ opacity:1; }
.j-cajon__panel{
	position:absolute;inset-block:0;inset-inline-end:0;
	width:min(100%,470px);
	display:flex;flex-direction:column;
	background:var(--j-crema);color:var(--j-burdeos);
	transform:translateX(100%);transition:transform .26s ease;
}
.j-cajon.es-abierta .j-cajon__panel{ transform:none; }
.j-cajon__panel:focus{ outline:none; }
.j-cajon.es-ocupado .j-cajon__cuerpo{ opacity:.55;pointer-events:none; }

.j-cajon__cab{
	flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
	padding:26px 28px 18px;
	border-block-end:1px solid color-mix(in srgb, var(--j-burdeos) 20%, transparent);
}
.j-cajon__cab h2{
	margin:0;font-family:var(--j-fuente-titulos);font-weight:400;
	font-size:28px;line-height:1.05;letter-spacing:.02em;text-transform:uppercase;
	color:var(--j-burdeos);
}
.j-cajon__cuenta{ margin:6px 0 0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.7; }
button.j-cajon__cerrar{ background:none;border:0;padding:4px;cursor:pointer;color:inherit; }
button.j-cajon__cerrar svg{ width:22px;height:22px; }

/*
 * Scroll: el cuerpo entero, no solo la lista. Con la lista como única zona
 * desplazable, en pantallas cortas se quedaba en dos dedos de alto entre la
 * barra de envío y el pie. Así se desplaza todo y los totales se quedan
 * pegados abajo, que es lo que hace falta tener siempre a la vista.
 */
.j-cajon__cuerpo{
	flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
	display:flex;flex-direction:column;
	transition:opacity .15s ease;
}
.j-cajon__vacia{ padding:48px 28px;display:grid;gap:22px;justify-items:start; }
.j-cajon__vacia p{ margin:0;font-size:17px; }

.j-cajon__envio{ flex:none;padding:18px 28px;background:var(--j-blanco); }
.j-cajon__extras{ flex:none; }
.j-cajon__envio-cab{
	display:flex;align-items:center;gap:10px;margin:0 0 10px;
	font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.j-cajon__envio-cab svg{ width:20px;height:20px;flex:none; }
.j-cajon__envio-pie{ margin:10px 0 0;font-size:13px;line-height:1.4; }
.j-cajon__envio-pie .amount{ font-weight:700; }

.j-cajon__lista{
	flex:1 0 auto;
	margin:0;padding:0 28px;list-style:none;
}
.j-cajon__linea{
	display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:16px;
	padding-block:20px;
	border-block-end:1px solid color-mix(in srgb, var(--j-burdeos) 15%, transparent);
}
.j-cajon__foto{ background:var(--j-blanco); }
.j-cajon__foto img{ width:100%;height:100%;object-fit:contain;display:block;padding:6px; }
.j-cajon__datos h3{
	margin:0 0 4px;font-family:var(--j-fuente-texto);font-weight:600;
	font-size:15px;line-height:1.25;letter-spacing:.02em;text-transform:uppercase;
}
.j-cajon__datos h3 a{ color:inherit;text-decoration:none; }
.j-cajon__meta{ margin:0 0 10px;font-size:12px;opacity:.7; }
.j-cajon__importe{ display:grid;justify-items:end;align-content:space-between;gap:10px; }
button.j-cajon__quitar{ background:none;border:0;padding:0;cursor:pointer;color:inherit;opacity:.55; }
button.j-cajon__quitar:hover{ opacity:1;color:var(--j-error); }
button.j-cajon__quitar svg{ width:20px;height:20px; }
.j-cajon__precio{ margin:0;font-size:17px;font-weight:700;white-space:nowrap; }
.j-cajon__unidad{ margin:2px 0 0;font-size:11px;opacity:.65;white-space:nowrap; }

.j-cajon__extras{ flex:none;padding:16px 28px;border-block-start:1px solid color-mix(in srgb, var(--j-burdeos) 15%, transparent); }
.j-cajon__cupon summary{
	display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
	font-size:13px;letter-spacing:.04em;text-transform:uppercase;
}
.j-cajon__cupon summary::-webkit-details-marker{ display:none; }
.j-cajon__cupon svg{ width:20px;height:20px;flex:none; }
.j-cajon__cupon-caja{ display:flex;gap:10px;margin-block-start:12px; }
.j-cajon__cupon-caja input{
	flex:1;min-width:0;height:40px;padding-inline:12px;border-radius:0;
	border:1px solid color-mix(in srgb, var(--j-burdeos) 35%, transparent);
	background:var(--j-blanco);color:inherit;
	font-family:var(--j-fuente-texto);font-size:14px;
}
.j-cajon__cupon-caja .j-btn{ min-height:40px;padding-inline:20px;font-size:13px;box-shadow:none; }
.j-cajon__aviso{ margin:8px 0 0;font-size:13px; }
.j-cajon__aviso.es-error{ color:var(--j-error); }

.j-cajon__regalo{ margin-block-start:16px; }
.j-cajon__regalo-cab{
	display:flex;align-items:center;gap:10px;margin:0;
	font-size:13px;letter-spacing:.04em;text-transform:uppercase;
}
.j-cajon__regalo-cab svg{ width:20px;height:20px;flex:none; }
.j-cajon__regalo-cab .j-interruptor{ margin-inline-start:auto; }
.j-cajon__regalo-caja{ display:grid;gap:8px;margin-block-start:12px; }
.j-cajon__regalo-caja label{ font-size:13px; }
.j-cajon__regalo-caja textarea{
	width:100%;padding:10px 12px;border-radius:0;resize:vertical;
	border:1px solid color-mix(in srgb, var(--j-burdeos) 35%, transparent);
	background:var(--j-blanco);color:inherit;
	font-family:var(--j-fuente-texto);font-size:14px;
}
.j-cajon__guardado{ margin:0;font-size:12px;opacity:.7;min-height:1em; }

.j-cajon__pie{
	flex:none;position:sticky;inset-block-end:0;
	padding:20px 28px 26px;
	background:var(--j-blanco);
	border-block-start:1px solid color-mix(in srgb, var(--j-burdeos) 15%, transparent);
}
.j-cajon__totales{
	margin:0 0 12px;display:grid;grid-template-columns:1fr auto;gap:6px 16px;
	font-size:14px;
}
.j-cajon__totales dt,
.j-cajon__totales dd{ margin:0; }
.j-cajon__totales dd{ text-align:end; }
.j-cajon__totales .j-descuento{ color:var(--j-error); }
.j-cajon__total{
	display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
	margin:0 0 18px;padding-block-start:12px;
	border-block-start:1px solid color-mix(in srgb, var(--j-burdeos) 25%, transparent);
}
.j-cajon__total span{ font-size:16px;letter-spacing:.02em;text-transform:uppercase; }
.j-cajon__total small{ display:block;font-size:11px;letter-spacing:.08em;opacity:.65;text-transform:none; }
.j-cajon__total strong{ font-size:26px;font-weight:700;white-space:nowrap; }
.j-cajon__pie .j-btn{ width:100%;margin-block-end:10px; }
.j-cajon__seguro{
	margin:12px 0 0;text-align:center;font-size:11px;
	letter-spacing:.1em;text-transform:uppercase;opacity:.65;
}
.j-cajon__ver{
	display:block;margin-block-start:8px;text-align:center;
	font-size:13px;letter-spacing:.04em;text-transform:uppercase;
	color:inherit;text-decoration:underline;text-underline-offset:4px;
}

/* -------------------------------------------------------------------------
 * Compra rápida
 * ---------------------------------------------------------------------- */
button.j-comprar-ya{
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	width:100%;min-height:54px;margin-block-start:12px;padding:8px 24px;
	background:transparent;color:var(--j-burdeos);
	border:1px solid var(--j-burdeos);border-radius:0;
	box-shadow:var(--j-relieve);cursor:pointer;
	font-family:var(--j-fuente-texto);font-size:17px;font-weight:700;
	letter-spacing:.04em;line-height:1.1;text-transform:uppercase;
	transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
button.j-comprar-ya small{
	font-size:10px;font-weight:500;letter-spacing:.12em;opacity:.7;
	margin-block-start:3px;
}
button.j-comprar-ya:hover{
	background:var(--j-burdeos);color:var(--j-crema);
	box-shadow:none;transform:translate(2px,2px);
}

/* -------------------------------------------------------------------------
 * Venta cruzada · «Pa disfrutar como Dios manda»
 * ---------------------------------------------------------------------- */
.j-lote{ padding-block:var(--j-e-50) var(--j-e-60);display:flow-root; }
.j-lote .j-antetitulo{
	margin:0 0 34px;font-size:var(--j-t-antetitulo);
	letter-spacing:.04em;text-transform:uppercase;color:var(--j-oliva);
}
.j-lote__caja{ display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:44px;align-items:start; }
.j-lote__lista{ margin:0;padding:0;list-style:none;display:grid;gap:0; }
.j-lote__linea{
	display:flex;align-items:center;gap:18px;
	padding-block:20px;
	border-block-end:1px solid var(--j-borde);
}
.j-lote__linea:first-child{ border-block-start:1px solid var(--j-borde); }
.j-lote__marca{ display:grid;place-items:center;width:22px;flex:none; }
.j-lote__marca svg{ width:20px;height:20px;fill:none;stroke:currentColor;opacity:.5; }
.j-lote__marca input[type=checkbox]{
	width:22px;height:22px;margin:0;accent-color:var(--j-acento);cursor:pointer;
}
.j-lote__linea label{
	flex:1;display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:20px;
	cursor:pointer;
}
.j-lote__marca input[disabled] ~ label,
.j-lote__marca:has(input[disabled]) + label{ cursor:default; }
.j-lote__foto{ display:block;background:color-mix(in srgb, currentColor 8%, transparent); }
.j-lote__foto img{ width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block;padding:8px; }
.j-lote__datos{ display:grid;grid-template-columns:minmax(0,1fr);gap:6px; }
.j-lote__nombre{
	font-size:18px;line-height:1.25;letter-spacing:.02em;text-transform:uppercase;
}
.j-lote__nombre em{
	display:inline-block;margin-inline-start:10px;font-style:normal;
	font-size:10px;letter-spacing:.12em;padding:3px 8px;
	border:1px solid var(--j-borde);opacity:.75;
}
.j-lote__nota{ font-size:14px;line-height:1.4;opacity:.75; }
.j-lote__precio{ font-size:19px;font-weight:700;white-space:nowrap; }
.j-lote__precio del{ opacity:.55;font-weight:400;margin-inline-end:8px; }

.j-lote__resumen{ padding:30px 28px 26px; }
.j-lote__resumen dl{
	margin:0 0 14px;display:grid;grid-template-columns:1fr auto;gap:8px 16px;font-size:15px;
}
.j-lote__resumen dt,
.j-lote__resumen dd{ margin:0; }
.j-lote__resumen dd{ text-align:end; }
.j-lote__total{
	display:flex;align-items:center;justify-content:space-between;gap:16px;
	margin:0 0 20px;padding-block-start:14px;
	border-block-start:1px solid var(--j-borde);
	font-size:17px;letter-spacing:.02em;text-transform:uppercase;
}
.j-lote__total strong{ font-size:28px;font-weight:700; }
.j-lote__resumen .j-btn{ width:100%; }
.j-lote__seguro{
	margin:14px 0 0;text-align:center;font-size:11px;
	letter-spacing:.1em;text-transform:uppercase;opacity:.65;
}
.j-lote__avisos{
	margin:16px 0 0;padding:0;list-style:none;
	display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;
	font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.7;
}

/* -------------------------------------------------------------------------
 * Cookies
 *
 * Abajo a la derecha y sin velo: el diseño lo plantea como aviso, no como
 * barrera. Rechazar está al mismo alcance que aceptar.
 * ---------------------------------------------------------------------- */
.j-cookies{
	position:fixed;inset-block-end:0;inset-inline-end:0;z-index:900;
	width:min(100%,712px);
	background:var(--j-crema);color:var(--j-burdeos);
	box-shadow:0 -6px 30px rgba(0,0,0,.18);
	transform:translateY(12px);opacity:0;
	transition:transform .26s ease,opacity .26s ease;
}
.j-cookies.es-visible{ transform:none;opacity:1; }
.j-cookies__banner{ position:relative;padding:34px 40px 28px; }
button.j-cookies__x{
	position:absolute;inset-block-start:18px;inset-inline-end:22px;
	background:none;border:0;padding:4px;cursor:pointer;color:inherit;opacity:.75;
}
button.j-cookies__x:hover{ opacity:1; }
button.j-cookies__x svg{ width:20px;height:20px; }
.j-cookies__banner h2{
	display:flex;align-items:center;gap:14px;margin:0 0 12px;
	font-family:var(--j-fuente-titulos);font-weight:400;
	font-size:26px;line-height:1.1;letter-spacing:.02em;text-transform:uppercase;
	color:var(--j-burdeos);
}
.j-cookies__banner h2 svg{ width:28px;height:28px;flex:none;fill:none;stroke:currentColor; }
.j-cookies__banner > p{ margin:0;font-size:12.5px;line-height:1.55;max-width:74ch; }

.j-cookies__preferencias{ display:grid;gap:10px;margin-block-start:18px; }
.j-cookies__fila{
	display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
	padding:12px 14px;background:var(--j-blanco);
	border:1px solid color-mix(in srgb, var(--j-burdeos) 15%, transparent);
	cursor:pointer;
}
.j-cookies__fila strong{ display:block;font-size:14px;letter-spacing:.02em; }
.j-cookies__fila small{ display:block;margin-block-start:2px;font-size:12px;opacity:.7; }
.j-cookies__fila input{ flex:none;width:20px;height:20px;margin-block-start:2px;accent-color:var(--j-burdeos); }
.j-cookies__fila input[disabled]{ opacity:.5; }

.j-cookies__botones{ display:flex;flex-wrap:wrap;gap:14px;margin-block-start:20px; }
.j-cookies__botones .j-btn{
	flex:1 1 190px;min-height:30px;padding-inline:16px;
	font-size:13px;letter-spacing:.06em;box-shadow:none;
}
.j-cookies__botones .j-btn:hover{ transform:none; }

.j-cookies__legal{ margin:16px 0 0;font-size:11px;opacity:.75; }
.j-cookies__legal a{ color:inherit;text-decoration:none; }
.j-cookies__legal a:hover{ text-decoration:underline;text-underline-offset:3px; }
.j-cookies__legal:empty{ display:none; }

button.j-cookies__reabrir{
	background:none;border:0;padding:0;cursor:pointer;color:inherit;
	font-family:inherit;font-size:inherit;
	text-decoration:underline;text-underline-offset:4px;
}

/* -------------------------------------------------------------------------
 * Pop-up de bienvenida
 * ---------------------------------------------------------------------- */
.j-popup{ position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:24px; }
.j-popup__velo{
	position:absolute;inset:0;background:rgba(20,34,35,.45);
	opacity:0;transition:opacity .24s ease;
}
.j-popup.es-abierto .j-popup__velo{ opacity:1; }
.j-popup__caja{
	position:relative;
	display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	width:min(100%,942px);
	background:var(--j-crema);color:var(--j-burdeos);
	box-shadow:0 24px 60px rgba(0,0,0,.35);
	transform:scale(.97);opacity:0;
	transition:transform .24s ease,opacity .24s ease;
}
.j-popup.es-abierto .j-popup__caja{ transform:none;opacity:1; }
.j-popup__foto{ overflow:hidden;min-height:340px; }
.j-popup__foto img{ width:100%;height:100%;object-fit:cover;display:block; }
.j-popup__texto{ position:relative;padding:56px 48px 60px; }
button.j-popup__x{
	position:absolute;inset-block-start:18px;inset-inline-end:20px;
	background:none;border:0;padding:4px;cursor:pointer;color:inherit;opacity:.6;
}
button.j-popup__x:hover{ opacity:1; }
button.j-popup__x svg{ width:20px;height:20px; }
.j-popup__texto .j-antetitulo{
	margin:0 0 14px;font-size:var(--j-t-antetitulo);
	letter-spacing:.04em;text-transform:uppercase;color:var(--j-oliva);
}
.j-popup__texto h2{
	margin:0 0 22px;
	font-family:var(--j-fuente-titulos);font-weight:400;
	font-size:clamp(30px,3.4vw,46px);line-height:1.2;letter-spacing:.02em;
	text-transform:uppercase;color:var(--j-burdeos);
}
.j-popup__cuerpo p{ margin:0 0 14px;font-size:19px;line-height:1.55; }
.j-popup__cuerpo p:last-child{ margin-block-end:0; }
.j-popup__cupon{
	margin:18px 0 0;padding:10px 14px;background:var(--j-lima);
	font-size:14px;font-weight:600;letter-spacing:.02em;
}
.j-popup__botones{ display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-block-start:30px; }
.j-popup__botones .j-btn{ width:min(100%,336px); }

/* -------------------------------------------------------------------------
 * Pedido de regalo en «Mi cuenta»
 * ---------------------------------------------------------------------- */
.j-pedido-regalo{
	margin-block:28px;padding:20px 24px;
	border:1px solid var(--j-borde);background:var(--j-superficie);
}
.j-pedido-regalo h2{
	margin:0 0 8px;font-family:var(--j-fuente-titulos);font-weight:400;
	font-size:22px;letter-spacing:.02em;text-transform:uppercase;
}
.j-pedido-regalo p{ margin:0;font-size:15px; }
.j-pedido-regalo blockquote{
	margin:12px 0 0;padding-inline-start:14px;
	border-inline-start:3px solid var(--j-acento);font-size:15px;
}

/* -------------------------------------------------------------------------
 * Adaptación
 * ---------------------------------------------------------------------- */
@media (max-width:1100px){
	.j-lote__caja{ grid-template-columns:1fr;gap:32px; }
	.j-lote__resumen{ max-width:420px; }
	.j-panel__inner{ grid-template-columns:1fr;gap:32px; }
	.j-panel__productos{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:900px){
	/* En móvil el menú es una lista vertical: el panel se pliega dentro
	   de su entrada en lugar de desplegarse sobre la página. */
	.j-cabecera .j-nav{ position:absolute;inset-inline:0;inset-block-start:100%;
		flex-direction:column;gap:0;background:var(--j-burdeos);
		padding:8px 24px 24px;display:none;z-index:40; }
	.j-cabecera .j-nav.es-abierto{ display:flex; }
	.j-cabecera .j-nav > a,
	.j-nav__item{ padding-block:14px;
		border-block-end:1px solid color-mix(in srgb, var(--j-oliva) 35%, transparent); }
	.j-nav__item{ justify-content:space-between; }
	button.j-nav__flecha{ padding:6px; }
	.j-panel{ position:static;box-shadow:none;border:0;background:transparent; }
	.j-panel__inner{ width:100%;padding-block:6px 18px; }
	.j-panel__titulo{ display:none; }
	.j-panel__productos{ grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }

	.j-cajon__panel{ width:100%; }
	.j-cajon__linea{ grid-template-columns:64px minmax(0,1fr) auto;gap:12px; }
	.j-cajon__cab,
	.j-cajon__lista,
	.j-cajon__extras,
	.j-cajon__envio,
	.j-cajon__pie{ padding-inline:20px; }

	.j-lote__linea label{ grid-template-columns:72px minmax(0,1fr);gap:14px; }
	.j-lote__precio{ grid-column:2;justify-self:start; }

	.j-cookies{ width:100%; }
	.j-cookies__banner{ padding:26px 22px 22px; }
	.j-cookies__botones .j-btn{ flex:1 1 100%; }

	.j-popup__caja{ grid-template-columns:1fr;max-height:88vh;overflow:auto; }
	.j-popup__foto{ min-height:0;aspect-ratio:16/10; }
	.j-popup__texto{ padding:32px 26px 36px; }
	.j-popup__botones .j-btn{ width:100%; }

	.j-buscador__panel{ padding:24px 20px 30px;max-height:100vh;min-height:100vh; }
	.j-buscador__forma input[type=search]{ font-size:18px; }
	.j-buscador__lista a{ grid-template-columns:52px minmax(0,1fr);gap:12px; }
	.j-buscador__lista img{ width:52px;height:52px; }
	.j-buscador__precio{ grid-column:2; }
}

@media (prefers-reduced-motion:reduce){
	.j-cajon__panel,
	.j-cajon__velo,
	.j-buscador__panel,
	.j-buscador__velo,
	.j-popup__caja,
	.j-popup__velo,
	.j-cookies,
	.j-barra-progreso span{ transition:none; }
}