/*
Theme Name: Antojos & Brindis
Theme URI: https://antojosybrindis.com
Author: KarenStudio
Author URI: https://karenstudio.co
Description: Tienda completa de Antojos & Brindis para WooCommerce: diseño de la marca y funciones de la tienda (entregas por fecha y franja, domicilios solo en Chía y municipios cercanos, licores +18, WhatsApp y ocasiones). Requiere WooCommerce.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
Version: 1.4.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: antojos-brindis
Tags: e-commerce, block-patterns, full-site-editing, custom-colors
WC requires at least: 9.0
*/

:root {
	--ab-sombra: 0 18px 40px -24px rgba(58, 33, 24, 0.45);
}

/* Foco visible y movimiento reducido */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--dorado);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Separador "Lazo" (firma visual de la marca) ---------- */
.wp-block-separator.is-style-lazo {
	border: 0 !important;
	height: 40px;
	width: min(600px, 90%) !important;
	max-width: 600px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	background: url("assets/img/lazo.svg") center / contain no-repeat;
	opacity: 1;
}

/* ---------- Encabezado ---------- */
.ab-header { border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--dorado) 35%, transparent); }
.ab-header .wp-block-site-logo img { height: auto; }
.ab-topbar a { color: inherit; text-decoration: none; }
.ab-topbar a:hover { text-decoration: underline; }

/* ---------- Portada ---------- */
.ab-hero { position: relative; overflow: hidden; }
.ab-hero h1 { color: var(--wp--preset--color--crema); font-style: italic; max-width: 14ch; }
.ab-hero p { max-width: 46ch; }
.ab-hero .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--crema);
	border: 1.5px solid var(--wp--preset--color--dorado-suave);
	background: transparent;
}
.ab-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--crema);
	color: var(--wp--preset--color--vino);
}
.ab-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--wp--preset--color--dorado-suave);
	color: var(--wp--preset--color--vino);
}
.ab-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--wp--preset--color--crema);
}

/* Ilustración grande con el logo como etiqueta de regalo encima */
.ab-hero-visual { position: relative; padding-bottom: 2rem; }
.ab-hero-foto { margin: 0 !important; }
.ab-hero-foto img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 28px;
	box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .8);
}
.ab-etiqueta {
	position: absolute;
	left: -2.5rem;
	bottom: 0;
	width: 210px;
	background: var(--wp--preset--color--crema);
	border-radius: 16px;
	padding: 2rem .9rem .9rem;
	transform: rotate(-6deg);
	box-shadow: 0 24px 50px -26px rgba(0, 0, 0, .7);
}
.ab-etiqueta::before { /* ojal */
	content: "";
	position: absolute;
	top: 10px; left: 50%;
	width: 14px; height: 14px;
	margin-left: -7px;
	border-radius: 50%;
	background: var(--wp--preset--color--vino);
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--dorado);
}
.ab-etiqueta .wp-block-image { margin: 0; }
.ab-etiqueta img { display: block; width: 100%; height: auto; }

/* ---------- Franja de confianza ---------- */
.ab-confianza { border-bottom: 1px solid var(--wp--preset--color--dorado-suave); }
.ab-confianza__item { gap: .9rem !important; align-items: center !important; }
.ab-confianza__item p { margin: 0; line-height: 1.4; }
.ab-confianza__item strong { color: var(--wp--preset--color--vino); font-weight: 600; }
.ab-confianza__icono {
	flex-shrink: 0;
	width: 44px; height: 44px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--marfil);
	color: var(--wp--preset--color--vino);
}

/* ---------- Categorías ---------- */
.ab-categoria {
	position: relative;
	height: 100%;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 44px -30px rgba(58, 33, 24, .6);
	transition: transform .2s ease;
}
.ab-categoria:hover { transform: translateY(-4px); }
.ab-categoria__img { margin: 0 !important; }
.ab-categoria__img img { display: block; width: 100%; height: 250px; object-fit: cover; }
.ab-categoria__texto { padding: 1.4rem 1.5rem 1.7rem; }
.ab-categoria__texto h3 { margin: 0 0 .5rem; line-height: 1.05; }
.ab-categoria__texto p { margin: 0; font-size: .95rem; line-height: 1.5; }
.ab-categoria h3 a { text-decoration: none; color: inherit; }
.ab-categoria h3 a::after { content: ""; position: absolute; inset: 0; } /* toda la tarjeta clicable */

/* ---------- Ocasiones (chips) ---------- */
.ab-ocasiones .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--vino);
	border: 1px solid var(--wp--preset--color--dorado);
	font-size: .95rem;
	padding: .5rem 1.1rem;
}
.ab-ocasiones .wp-block-button__link:hover {
	background: var(--wp--preset--color--vino);
	color: var(--wp--preset--color--crema);
	border-color: var(--wp--preset--color--vino);
}

/* ---------- Pasos del pedido (es una secuencia real) ---------- */
.ab-paso-num {
	font-family: var(--wp--preset--font-family--cormorant);
	font-style: italic;
	font-size: 3.25rem;
	line-height: 1;
	color: var(--wp--preset--color--dorado);
	margin: 0;
}

/* ---------- WooCommerce ---------- */
.wc-block-product-template .wc-block-product,
.wc-block-grid__product {
	background: #fff;
	border-radius: 18px;
	padding: 12px 12px 20px !important;
	box-shadow: 0 18px 40px -28px rgba(58, 33, 24, .55);
}
.wc-block-product .wp-block-post-title,
.wc-block-product .wc-block-components-product-price,
.wc-block-product .wp-block-woocommerce-product-price,
.wc-block-product .wp-block-button { padding-inline: 8px; }
.wc-block-product .wp-block-post-title { font-family: var(--wp--preset--font-family--cormorant); font-weight: 600; line-height: 1.15; }
.wc-block-product .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--vino); }
.wc-block-grid__product, .wc-block-product, li.product { text-align: left; }
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img,
.wc-block-grid__product-image img {
	border-radius: var(--wp--custom--radius--suave);
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale {
	background: var(--wp--preset--color--dorado-suave) !important;
	color: var(--wp--preset--color--vino) !important;
	border: 0 !important;
	border-radius: var(--wp--custom--radius--pildora) !important;
}
.wp-block-woocommerce-product-price, .wc-block-components-product-price { color: var(--wp--preset--color--vino); }
.wc-block-components-button:not(.is-link),
.wp-block-button__link.add_to_cart_button {
	border-radius: var(--wp--custom--radius--pildora) !important;
}
.woocommerce-store-notice, p.demo_store { background: var(--wp--preset--color--vino) !important; }

/* ---------- Pie ---------- */
.ab-footer a { color: var(--wp--preset--color--dorado-suave); }
.ab-footer a:hover { color: var(--wp--preset--color--crema); }
.ab-leyenda-licor { border-top: 1px solid rgba(233, 211, 168, .25); }

@media (max-width: 781px) {
	.ab-hero h1 { max-width: none; }
	.ab-etiqueta { left: .5rem; width: 150px; bottom: -1rem; }
	.ab-hero-visual { margin-top: 1.5rem; }
	.ab-categoria__img img { height: 180px; }
}


/* ---------- Ajustes de proporción (v1.2.1) ---------- */
/* Márgenes laterales del encabezado y la franja superior */
.ab-topbar,
.ab-header {
	padding-left: clamp(1rem, 4vw, 2.5rem) !important;
	padding-right: clamp(1rem, 4vw, 2.5rem) !important;
}
.ab-header .wp-block-site-title a { text-decoration: none; color: var(--wp--preset--color--vino); }
.ab-header .wp-block-site-logo img { width: 56px; height: 56px; object-fit: contain; }

/* Botón de búsqueda: ícono discreto en vez de píldora grande */
.ab-header .wp-block-search__button {
	background: transparent !important;
	color: var(--wp--preset--color--vino) !important;
	padding: .5rem !important;
	border-radius: 50% !important;
	min-width: 44px;
	min-height: 44px;
}
.ab-header .wp-block-search__button:hover { background: var(--wp--preset--color--marfil) !important; }
.ab-header .wp-block-search__button svg { width: 24px; height: 24px; fill: currentColor; }

/* Portada: el bloque principal cabe en una pantalla de portátil */
.ab-hero {
	padding-top: clamp(2.5rem, 5vw, 4rem) !important;
	padding-bottom: clamp(3rem, 6vw, 4.5rem) !important;
}
.ab-hero .wp-block-columns { max-width: 1180px; margin-inline: auto; gap: clamp(2rem, 5vw, 4rem) !important; }
.ab-hero h1 { max-width: 12ch; margin-bottom: 0; }
.ab-hero p.has-large-font-size { font-size: clamp(1.05rem, 1.4vw, 1.25rem) !important; max-width: 40ch; }
.ab-hero-visual { max-width: 440px; margin-left: auto; padding-bottom: 1.5rem; }
.ab-hero-foto img { max-height: min(440px, 62vh); width: 100%; }
.ab-etiqueta { width: 150px; left: -1.5rem; bottom: 0; padding: 1.6rem .7rem .7rem; }

/* Tarjetas de categoría más compactas */
.ab-categoria__img img { height: 200px; }

@media (max-width: 781px) {
	.ab-hero-visual { max-width: 340px; margin: 1rem auto 0; }
	.ab-etiqueta { width: 120px; left: -.5rem; }
	.ab-topbar { justify-content: center !important; text-align: center; }
	.ab-topbar p:first-child { display: none; }
}