/**
 * Estilos de la librería (WooCommerce).
 *
 * @package RojekaLibros
 */

/* ------------------------------------------------------------------ Barra de la tienda */

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 1px solid var(--rjk-border);
	border-inline-start: 3px solid var(--rjk-primary);
	border-radius: var(--rjk-radius);
	background: var(--rjk-bg-alt);
	list-style: none;
	font-size: .94rem;
}
.woocommerce-error { border-inline-start-color: var(--rjk-accent); }
.woocommerce-message .button,
.woocommerce-info .button { float: inline-end; margin-inline-start: 16px; }

.woocommerce-result-count { margin: 0; color: var(--rjk-text-muted); font-size: .88rem; }

.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select { width: auto; min-width: 220px; padding-block: 9px; }

.woocommerce .rjk-content > .woocommerce-notices-wrapper + form.woocommerce-ordering,
.rjk-shop-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 26px;
}

.woocommerce .rjk-content .woocommerce-result-count { order: 1; }
.woocommerce .rjk-content .woocommerce-ordering { order: 2; margin-inline-start: auto; }

@media (max-width: 600px) {
	.rjk-shop-bar { gap: 10px; }
	.woocommerce .rjk-content .woocommerce-ordering { margin-inline-start: 0; width: 100%; }
	.woocommerce-ordering select { width: 100%; min-width: 0; }
	ul.products { gap: 24px 14px; }
}

/* ------------------------------------------------------------------ Catálogo */

/*
 * WooCommerce añade ::before y ::after a ul.products para limpiar floats. En
 * una rejilla esos pseudoelementos cuentan como celdas y dejan huecos, así que
 * se anulan.
 */
body.woocommerce ul.products::before,
body.woocommerce ul.products::after,
body.woocommerce-page ul.products::before,
body.woocommerce-page ul.products::after,
.rjk-ew-grid::before,
.rjk-ew-grid::after { content: none; display: none; }

ul.products {
	display: grid;
	/* Dos portadas por fila ya en el móvil, que es como se mira una librería */
	grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
	gap: 30px 18px;
	margin: 0 0 36px;
	padding: 0;
	list-style: none;
	clear: both;
}

@media (min-width: 820px) {
	ul.products { grid-template-columns: repeat(var(--rjk-shop-cols), minmax(0, 1fr)); }
}

ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	text-align: start;
}

/* Portada con proporción de libro */
.rjk-cover {
	position: relative;
	display: block;
	margin-bottom: 10px;
	border-radius: var(--rjk-radius);
	background: var(--rjk-bg-alt);
	overflow: hidden;
	aspect-ratio: 2 / 3;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
	transition: transform .2s ease, box-shadow .2s ease;
}

ul.products li.product:hover .rjk-cover {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
}

.rjk-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rjk-cover .woocommerce-placeholder { opacity: .4; }

/* Botón de vista rápida */
.rjk-qv {
	position: absolute;
	inset-inline-end: 8px;
	bottom: 8px;
	z-index: 2;
	display: inline-flex;
	padding: 9px;
	border: 0;
	background: rgba(var(--rjk-surface-rgb), .94);
	color: var(--rjk-text);
	border-radius: 50%;
	cursor: pointer;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
ul.products li.product:hover .rjk-qv,
ul.products li.product:focus-within .rjk-qv { opacity: 1; transform: none; }
.rjk-qv:hover { background: var(--rjk-primary); color: var(--rjk-on-primary); }

/* En pantallas táctiles el botón se ve siempre */
@media (hover: none) {
	.rjk-qv { opacity: 1; transform: none; }
}

ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 0;
	font-size: .98rem;
	line-height: 1.3;
}
ul.products li.product .woocommerce-loop-product__link { text-decoration: none; color: inherit; }
ul.products li.product .woocommerce-loop-product__title a { color: var(--rjk-heading); }
/* En el listado de WooCommerce el enlace envuelve toda la ficha y no lleva
   subrayado; las fichas de los widgets llevan enlaces sueltos, así que aquí
   se iguala y el subrayado se reserva para el hover. */
ul.products li.product .woocommerce-loop-product__title a { text-decoration: none; }
ul.products li.product .woocommerce-loop-product__title a:hover,
ul.products li.product .woocommerce-loop-product__title a:focus { text-decoration: underline; }

.rjk-loop-author {
	margin: 0;
	font-size: .82rem;
	color: var(--rjk-text-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.rjk-loop-meta {
	margin: 0;
	font-size: .8rem;
	color: var(--rjk-text-muted);
}

ul.products li.product .price {
	display: block;
	margin: 2px 0 6px;
	color: var(--rjk-primary);
	font-size: 1.05rem;
	font-weight: 700;
}
ul.products li.product .price del { color: var(--rjk-text-muted); font-weight: 400; font-size: .88rem; margin-inline-end: 6px; }
ul.products li.product .price ins { text-decoration: none; }

ul.products li.product .button {
	align-self: flex-start;
	margin-top: auto;
	padding: 9px 16px;
	font-size: .85rem;
}

ul.products li.product .added_to_cart { align-self: flex-start; font-size: .82rem; }

/* Corazón de deseos */
.rjk-wish {
	position: absolute;
	top: 10px; inset-inline-end: 10px;
	z-index: 3;
	display: inline-flex;
	padding: 8px;
	border: 0;
	background: rgba(var(--rjk-surface-rgb), .9);
	color: var(--rjk-text-muted);
	border-radius: 50%;
	cursor: pointer;
	transition: color .16s ease, background .16s ease;
}
.rjk-wish:hover { color: var(--rjk-accent); }
.rjk-wish.is-on { color: var(--rjk-accent); }
.rjk-wish.is-on svg { fill: currentColor; }

/* ------------------------------------------------------------------ Ficha del libro */

.single-product div.product {
	display: grid;
	gap: 36px 48px;
	margin-bottom: 50px;
}

@media (min-width: 880px) {
	.single-product div.product {
		grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
		align-items: start;
	}
	.single-product div.product .woocommerce-product-gallery { grid-column: 1; grid-row: 1 / span 2; }
	.single-product div.product .summary { grid-column: 2; grid-row: 1; }
	.single-product div.product .woocommerce-tabs,
	.single-product div.product .related,
	.single-product div.product .upsells { grid-column: 1 / -1; }
}

.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery__wrapper img { border-radius: var(--rjk-radius); box-shadow: 0 14px 36px rgba(0, 0, 0, .16); }
.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs li { width: 68px; }
.woocommerce-product-gallery .flex-control-thumbs img { border-radius: 4px; box-shadow: none; cursor: pointer; }

.product_title { margin-bottom: .15em; }

.rjk-subtitle {
	margin: 0 0 .4em;
	font-family: var(--rjk-font-heading);
	font-size: 1.15rem;
	font-weight: 400;
	color: var(--rjk-text-muted);
	font-style: italic;
}

.rjk-byline {
	margin: 0 0 1em;
	font-size: 1rem;
	color: var(--rjk-text-muted);
}
.rjk-byline a { color: var(--rjk-primary); font-weight: 600; }
.rjk-pub { font-style: italic; }

.summary .price {
	display: block;
	margin: 0 0 .2em;
	color: var(--rjk-primary);
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.1;
}
.summary .price del { font-size: 1.05rem; color: var(--rjk-text-muted); font-weight: 400; margin-inline-end: 8px; }
.summary .price ins { text-decoration: none; }

.rjk-isbn-line {
	margin: 0 0 1em;
	font-size: .86rem;
	color: var(--rjk-text-muted);
}
.rjk-isbn { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }

.woocommerce-product-details__short-description { margin-bottom: 1.4em; font-size: .97rem; }

.stock.in-stock { color: var(--rjk-primary); font-weight: 600; }
.stock.out-of-stock { color: var(--rjk-accent); font-weight: 600; }

form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 1.4em; }
form.cart .quantity input { width: 86px; text-align: center; }
form.cart .button { padding: 14px 28px; }

.rjk-sample { margin: 0 0 1.4em; }

.product_meta { font-size: .86rem; color: var(--rjk-text-muted); }
.product_meta > span { display: block; margin-bottom: 4px; }
.product_meta a { color: var(--rjk-primary); }

/* Pestañas */

.woocommerce-tabs { margin-top: 20px; }
.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 22px;
	padding: 0 0 2px;
	list-style: none;
	border-bottom: 1px solid var(--rjk-border);
}
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 11px 18px;
	color: var(--rjk-text-muted);
	font-weight: 600;
	font-size: .93rem;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--rjk-primary); border-bottom-color: var(--rjk-primary); }
.woocommerce-tabs .panel { max-width: 72ch; }
.woocommerce-tabs .panel > h2:first-child { margin-top: 0; }

.rjk-sheet { width: 100%; border-collapse: collapse; max-width: 620px; }
.rjk-sheet th,
.rjk-sheet td { padding: 11px 14px; border-bottom: 1px solid var(--rjk-border); text-align: start; vertical-align: top; }
.rjk-sheet th { width: 190px; font-weight: 600; color: var(--rjk-text-muted); font-size: .9rem; }
.rjk-sheet a { color: var(--rjk-primary); }

/* Relacionados */

.related > h2,
.upsells > h2,
.cross-sells > h2 { margin-bottom: 22px; }

/* ------------------------------------------------------------------ Botones */

/*
 * WooCommerce pinta sus botones con selectores de dos clases, que ganan a los
 * del tema. Se repiten aquí sus mismos selectores para que los botones usen
 * el color del estilo elegido.
 */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border: 1px solid var(--rjk-primary);
	border-radius: var(--rjk-btn-radius);
	background: var(--rjk-primary);
	color: var(--rjk-on-primary);
	font-family: inherit;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-shadow: none;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
	background: var(--rjk-primary-hover);
	border-color: var(--rjk-primary-hover);
	color: var(--rjk-on-primary);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
	background: var(--rjk-bg-alt);
	border-color: var(--rjk-border);
	color: var(--rjk-text-muted);
}

.rjk-btn-upper .woocommerce a.button,
.rjk-btn-upper .woocommerce button.button,
.rjk-btn-upper .woocommerce input.button {
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .85rem;
}

/* La portada no debe comerse la ficha */
.single-product .woocommerce-product-gallery { max-width: 420px; }
@media (min-width: 880px) {
	.single-product div.product { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ Cesta y pago */

.rjk-ship {
	margin: 0 0 22px;
	padding: 14px 18px;
	background: var(--rjk-bg-alt);
	border-radius: var(--rjk-radius);
}
.rjk-ship-t { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .9rem; }
.rjk-ship-bar { height: 7px; border-radius: 4px; background: rgba(var(--rjk-text-rgb), .13); overflow: hidden; }
.rjk-ship-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--rjk-primary); transition: width .35s ease; }

.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 26px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--rjk-border);
	text-align: start;
	vertical-align: middle;
}
.woocommerce table.shop_table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rjk-text-muted); }
.woocommerce table.shop_table img { width: 58px; height: auto; border-radius: 3px; }

.woocommerce .cart_totals,
.woocommerce-checkout #order_review {
	padding: 24px;
	background: var(--rjk-bg-alt);
	border-radius: var(--rjk-radius);
}

.woocommerce-checkout .form-row { margin-bottom: 16px; }
.woocommerce-checkout label { display: block; margin-bottom: 5px; font-size: .9rem; font-weight: 600; }
.woocommerce-checkout .required { color: var(--rjk-accent); }

#payment ul.payment_methods { margin: 0 0 20px; padding: 0; list-style: none; }
#payment ul.payment_methods li { padding: 12px 0; border-bottom: 1px solid var(--rjk-border); }
#payment .payment_box { margin-top: 10px; font-size: .88rem; color: var(--rjk-text-muted); }

.woocommerce-mini-cart { margin: 0; padding: 0; list-style: none; }
.woocommerce-mini-cart-item {
	display: grid;
	grid-template-columns: 52px 1fr auto;
	gap: 12px;
	align-items: start;
	padding: 12px 0;
	border-bottom: 1px solid var(--rjk-border);
}
.woocommerce-mini-cart-item img { width: 52px; height: 78px; object-fit: cover; border-radius: 3px; }
.woocommerce-mini-cart-item a { color: var(--rjk-heading); font-weight: 600; font-size: .9rem; text-decoration: none; }
.woocommerce-mini-cart-item .quantity { display: block; font-size: .84rem; color: var(--rjk-text-muted); }
.woocommerce-mini-cart-item .remove_from_cart_button { color: var(--rjk-text-muted); text-decoration: none; font-size: 1.2rem; line-height: 1; }

.woocommerce-mini-cart__total { display: flex; justify-content: space-between; margin: 16px 0; font-weight: 700; }
.woocommerce-mini-cart__buttons { display: grid; gap: 10px; }
.woocommerce-mini-cart__buttons .button { width: 100%; }
.woocommerce-mini-cart__empty-message { color: var(--rjk-text-muted); }

/* Mi cuenta */

.woocommerce-account .woocommerce { display: grid; gap: 34px; }
@media (min-width: 820px) {
	.woocommerce-account .woocommerce { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
}
.woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--rjk-border); }
.woocommerce-MyAccount-navigation a { display: block; padding: 11px 4px; color: var(--rjk-text); text-decoration: none; font-weight: 600; font-size: .93rem; }
.woocommerce-MyAccount-navigation li.is-active a { color: var(--rjk-primary); }

/* Formularios de acceso */

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon {
	padding: 24px;
	border: 1px solid var(--rjk-border);
	border-radius: var(--rjk-radius);
	margin-bottom: 26px;
}

/* Valoraciones */

.woocommerce .star-rating { color: var(--rjk-accent); }
#reviews .commentlist { margin: 0; padding: 0; list-style: none; }
#reviews .commentlist li { padding: 18px 0; border-bottom: 1px solid var(--rjk-border); }
#reviews .comment-text { margin-inline-start: 62px; }
#reviews img.avatar { float: inline-start; width: 46px; border-radius: 50%; }

/* Ajustes finos por estilo */

.rjk-style-clasica .rjk-cover { box-shadow: 0 4px 10px rgba(0, 0, 0, .14); }
.rjk-style-poesia .rjk-cover { box-shadow: none; border: 1px solid var(--rjk-border); }
.rjk-style-poesia ul.products li.product:hover .rjk-cover { transform: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .1); }
.rjk-style-infantil .rjk-cover { box-shadow: 0 8px 0 rgba(var(--rjk-primary-rgb), .18); }
.rjk-style-educativo ul.products { gap: 26px 20px; }