/*
Theme Name: Vellusia Intimates (Kadence Child)
Theme URI: https://aphrodainty.com
Template: kadence
Author: Vellusia Intimates
Description: Child theme for Kadence — carries the Vellusia brand system and the custom category-slider/badge features on top of Kadence's own WooCommerce templates.
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: vellusia
*/

/* IMPORTANT: install and activate Kadence itself first (Appearance > Themes >
   Add New > search "Kadence"). Then install and activate this child theme —
   the "Template: kadence" line above is what links the two; it has to match
   Kadence's folder name exactly or WordPress will refuse to activate this. */

/* ==========================================================================
   Design tokens — from the Vellusia brand reference sheet.
   Ink #16110F / Wine #4A1228 / Bone #F3ECE6 / Blush #C98F82
   Display: Fraunces (500, italic for eyebrows). Caption: Helvetica, wide tracking.
   ========================================================================== */
:root {
	--color-ink: #16110f;
	--color-wine: #4a1228;
	--color-bone: #f3ece6;
	--color-blush: #c98f82;

	--color-text-muted: #6b5f5a;
	--font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--tracking-wide: 0.14em;

	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;

	--radius-pill: 999px;
	--radius-card: 2px;
}

/* Most layout, header, footer, and responsive behavior comes from Kadence's
   own Customizer settings (Appearance > Customize) — set brand colors and
   Fraunces/Helvetica there rather than fighting it with CSS overrides here.
   What follows is only for the pieces Kadence doesn't natively know about:
   the category slider, and badge/button polish specific to Vellusia. */

/* ==========================================================================
   Buttons — pill-shaped, matching the reference screenshots
   ========================================================================== */
.button, .woocommerce a.button, .woocommerce button.button,
.wc-block-components-button, .vellusia-eyebrow-section .button {
	border-radius: var(--radius-pill) !important;
	font-family: var(--font-body);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	font-size: 0.75rem;
}
.woocommerce a.button, .woocommerce button.button {
	background: var(--color-wine);
	color: var(--color-bone);
}
.woocommerce a.button:hover, .woocommerce button.button:hover {
	background: var(--color-ink);
	color: var(--color-bone);
}

/* ==========================================================================
   Eyebrow + headline pairing (the "Shop the Latest" / "New Arrivals" pattern,
   built from Fraunces italic rather than a separate script font — one
   typeface, two moods, nothing extra introduced)
   ========================================================================== */
.vellusia-eyebrow {
	display: block;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	color: var(--color-wine);
	font-size: 1.1rem;
	margin-bottom: 0.25rem;
}
.vellusia-heading {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0 0 var(--space-md);
}

/* ==========================================================================
   Category slider (rendered via the [vellusia_category_slider] shortcode —
   see functions.php)
   ========================================================================== */
.vellusia-category-slider { padding: var(--space-xl) 0; }
.vellusia-category-slider__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-md);
}
.vellusia-category-slider__header .vellusia-heading { margin: 0; }
.vellusia-category-slider__link {
	font-family: var(--font-body);
	font-size: 0.75rem;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-wine);
	white-space: nowrap;
}
.vellusia-category-slider .swiper-slide { width: 260px; }
.vellusia-category-slider .swiper-button-next,
.vellusia-category-slider .swiper-button-prev {
	color: var(--color-wine);
	transform: scale(0.6);
}

/* ==========================================================================
   Product cards — consistent image cropping + badges, wherever WooCommerce's
   product loop renders (shop archive, this slider, related products, etc.)
   ========================================================================== */
.woocommerce ul.products li.product,
.vellusia-category-slider .product {
	position: relative; /* anchors badges below */
}
.woocommerce ul.products li.product img,
.vellusia-category-slider .product img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
}
.woocommerce ul.products li.product .price {
	color: var(--color-wine);
	font-weight: 600;
}

/* Sale badge (WooCommerce's own .onsale span — unstyled by default) and the
   custom New badge (added via vellusia_new_badge() in functions.php) stack
   the same way the reference screenshots do: New above, Sale below when a
   product has both, each its own pill so neither gets visually buried. */
.woocommerce span.onsale,
.vellusia-badge {
	position: absolute;
	left: 10px;
	z-index: 2;
	font-family: var(--font-body);
	font-size: 0.7rem;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	padding: 0.35em 0.9em;
	border-radius: var(--radius-pill);
	line-height: 1;
}
.woocommerce span.onsale { top: 10px; background: var(--color-wine); color: var(--color-bone); }
.vellusia-badge--new { top: 46px; background: var(--color-ink); color: var(--color-bone); }
/* If a product is new but not on sale, the New badge sits where Sale would. */
.woocommerce ul.products li.product:not(.sale) .vellusia-badge--new,
.vellusia-category-slider .product:not(.sale) .vellusia-badge--new {
	top: 10px;
}

/* ==========================================================================
   Footer additions — payment icons + social row, layered onto whatever
   Kadence's footer builder produces
   ========================================================================== */
.vellusia-footer-extras {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-sm);
	padding-top: var(--space-sm);
}
.vellusia-social-row { display: flex; gap: var(--space-sm); }
.vellusia-social-row a { color: var(--color-bone); opacity: 0.75; }
.vellusia-social-row a:hover { opacity: 1; }
.vellusia-payment-icons { display: flex; gap: 0.5rem; align-items: center; opacity: 0.8; }
.vellusia-payment-icons svg { height: 20px; width: auto; }