/*
Theme Name: Arka Beauty
Theme URI: https://arkabeauty.shop
Description: Tema hijo de Twenty Twenty-Five para la tienda Arka Beauty. Colores, tipografía, encabezado, pie y página de inicio de la marca.
Author: CARSI
Author URI: https://carsimexico.com
Template: twentytwentyfive
Version: 1.1.0
Requires at least: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arkabeauty
*/

/* Precios en Midnight Violet, como las etiquetas del catálogo */
.wc-block-components-product-price,
.wc-block-grid__product-price,
.woocommerce-Price-amount,
.wp-block-woocommerce-product-price {
	color: var(--wp--preset--color--accent-3);
	font-weight: 700;
}
del .woocommerce-Price-amount { color: var(--wp--preset--color--accent-4); font-weight: 400; }

/* Tarjetas de producto */
.wp-block-woocommerce-product-template li.wc-block-product,
.wp-block-woocommerce-product-template > li {
	background: var(--wp--preset--color--base);
	border-radius: 10px;
	padding: 1rem 1rem 1.25rem;
	transition: box-shadow .2s ease, transform .2s ease;
}
.wp-block-woocommerce-product-template li.wc-block-product:hover,
.wp-block-woocommerce-product-template > li:hover {
	box-shadow: 0 8px 24px rgba(43, 89, 39, .12);
	transform: translateY(-2px);
}
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img { background: transparent; }

/* Mosaico de categorías */
.ab-cat a { text-decoration: none; color: inherit; display: block; }
.ab-cat figure { margin: 0; }
.ab-cat img { width: 100%; height: 170px; object-fit: contain; transition: transform .25s ease; }
.ab-cat a:hover img { transform: scale(1.05); }
.ab-cat a:focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 4px; border-radius: 8px; }

/* Pasos "Cómo comprar" */
.ab-paso-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.75rem; height: 2.75rem; border-radius: 50%;
	background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--cormorant); font-size: 1.5rem; font-weight: 600;
}

/* Logotipo Monograma AK (Propuesta B) */
.ab-logo { display: inline-flex; text-decoration: none; border-radius: 6px; }
.ab-logo:focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 4px; }
.ab-lockup {
	--ab-ink: var(--wp--preset--color--accent-1);
	--ab-gold: var(--wp--preset--color--oro);
	--ab-ring: var(--wp--preset--color--accent-1);
	--ab-sub: var(--wp--preset--color--accent-4);
	--ab-s: 1;
	display: inline-flex; align-items: center; gap: calc(12px * var(--ab-s));
	line-height: 1; font-family: var(--wp--preset--font-family--cormorant);
}
.ab-lockup--claro {
	--ab-ink: var(--wp--preset--color--base);
	--ab-gold: var(--wp--preset--color--arena);
	--ab-ring: var(--wp--preset--color--arena);
	--ab-sub: var(--wp--preset--color--arena);
}
.ab-sello {
	position: relative; box-sizing: border-box; flex: none;
	width: calc(54px * var(--ab-s)); height: calc(54px * var(--ab-s));
	border: 1.5px solid var(--ab-ring); border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
}
.ab-lockup--verde .ab-sello::after {
	content: ""; position: absolute; inset: calc(3px * var(--ab-s));
	border: 1px solid var(--ab-gold); border-radius: 50%;
}
.ab-sello-a { font-weight: 400; font-size: calc(34px * var(--ab-s)); color: var(--ab-ink); margin-top: calc(-2px * var(--ab-s)); }
.ab-sello-k { font-weight: 500; font-style: italic; font-size: calc(30px * var(--ab-s)); color: var(--ab-gold); margin-left: calc(-8px * var(--ab-s)); margin-top: calc(6px * var(--ab-s)); }
.ab-word { display: inline-flex; flex-direction: column; gap: calc(4px * var(--ab-s)); }
.ab-arka { display: inline-flex; gap: .24em; font-size: calc(28px * var(--ab-s)); color: var(--ab-ink); }
.ab-arka .ab-b { font-weight: 600; }
.ab-arka .ab-l { font-weight: 300; }
.ab-arka .ab-k { font-weight: 600; font-style: italic; color: var(--ab-gold); }
.ab-beauty {
	font-family: var(--wp--preset--font-family--lato); font-size: calc(9px * var(--ab-s));
	letter-spacing: .72em; text-transform: uppercase; color: var(--ab-sub);
}
.ab-lockup--grande { --ab-s: 1.2; }
@media (max-width: 600px) { .ab-logo .ab-lockup { --ab-s: .82; } }

/* Aviso superior */
.ab-aviso p { margin: 0; letter-spacing: .04em; }