/**
 * Yodha Fuel — reusable components.
 * Buttons (primary/secondary/outline/text), section heading, product card
 * foundation (media/badge/title/rating/price/CTA), discount badge, rating.
 *
 * Phase 2: buttons expanded into four full variants with explicit hover/
 * focus/active/disabled states; product card and price block made more
 * explicit about sale vs. regular price; breakpoints aligned to the
 * 375/480/768/1024/1280px set used by layout.css. No product data, no
 * WooCommerce template wiring — purely the visual foundation.
 *
 * Header/hero-slider revision: a base .yf-icon rule (every icon printed by
 * inc/template-tags.php's yodha_fuel_icon() carries this class). The icon
 * markup already sets fill="none" / stroke="currentColor" as attributes
 * directly on the <svg>, which is normally enough for it to inherit
 * whatever `color` its parent button/link has. This rule restates the same
 * thing as real CSS, with !important, specifically because a plain
 * presentation attribute like fill="none" sits at the very bottom of the
 * cascade — any author CSS at all (including something as generic as an
 * unrelated `svg { fill: ... }` rule anywhere in Storefront's own parent-
 * theme stylesheet, which this child theme does not control and cannot
 * inspect/edit) would silently win over it and could make an icon render
 * filled-in or colorless instead of as a visible stroked outline. Making
 * the icon's own fill/stroke authoritative here, on its own class, removes
 * that whole class of "icon doesn't show up" bug regardless of what the
 * parent theme does elsewhere.
 */
.yf-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	fill: none !important;
	stroke: currentColor !important;
	color: inherit;
	flex-shrink: 0;
}

/* ============================================================
   BUTTONS
   Base + size modifiers, then four visual variants, then shared
   interaction states (hover/focus/active/disabled).
   ============================================================ */

.yf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	height: var(--btn-height-md);
	padding: 0 var(--btn-padding-x-md);
	border-radius: var(--btn-radius);
	font-family: var(--font-body);
	font-weight: var(--fw-button);
	font-size: var(--fs-button);
	line-height: 1;
	border: var(--btn-border-width) solid transparent;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	transition:
		background-color var(--transition-fast),
		color var(--transition-fast),
		border-color var(--transition-fast),
		transform var(--transition-fast);
}

/* Size modifiers */
.yf-btn--sm {
	height: var(--btn-height-sm);
	padding: 0 var(--btn-padding-x-sm);
	font-size: var(--fs-small);
}

.yf-btn--lg {
	height: var(--btn-height-lg);
	padding: 0 var(--btn-padding-x-lg);
}

/* --- Primary: solid Yodha Orange. The main CTA (Add to Cart, Buy Now, etc). --- */
.yf-btn--primary {
	background-color: var(--yodha-orange);
	border-color: var(--yodha-orange);
	color: var(--white);
}

.yf-btn--primary:hover,
.yf-btn--primary:focus {
	background-color: var(--yodha-orange-dark);
	border-color: var(--yodha-orange-dark);
	color: var(--white);
}

.yf-btn--primary:active {
	background-color: var(--yodha-orange-dark);
	border-color: var(--yodha-orange-dark);
	transform: scale(0.98);
}

/* --- Secondary: solid Warrior Dark. A secondary, still-committed action. --- */
.yf-btn--secondary {
	background-color: var(--warrior-dark);
	border-color: var(--warrior-dark);
	color: var(--white);
}

.yf-btn--secondary:hover,
.yf-btn--secondary:focus {
	background-color: var(--warrior-dark-soft);
	border-color: var(--warrior-dark-soft);
	color: var(--white);
}

.yf-btn--secondary:active {
	background-color: var(--warrior-dark-soft);
	transform: scale(0.98);
}

/* --- Outline: transparent, bordered. A lower-emphasis action next to a
   primary button (e.g. "View details" beside "Add to Cart"). --- */
.yf-btn--outline {
	background-color: transparent;
	border-color: var(--warrior-dark);
	color: var(--warrior-dark);
}

.yf-btn--outline:hover,
.yf-btn--outline:focus {
	background-color: var(--warrior-dark);
	border-color: var(--warrior-dark);
	color: var(--white);
}

.yf-btn--outline:active {
	background-color: var(--warrior-dark-soft);
	border-color: var(--warrior-dark-soft);
	color: var(--white);
}

/* Outline variant for use on dark backgrounds (header/footer/dark sections):
   add both classes, e.g. class="yf-btn yf-btn--outline yf-btn--outline-inverse" */
.yf-btn--outline-inverse {
	border-color: var(--white);
	color: var(--white);
}

.yf-btn--outline-inverse:hover,
.yf-btn--outline-inverse:focus {
	background-color: var(--white);
	border-color: var(--white);
	color: var(--warrior-dark);
}

/* --- Text/link button: no fill, no border. Lowest-emphasis action. --- */
.yf-btn--text {
	height: auto;
	padding: var(--space-2xs) var(--space-2xs);
	background-color: transparent;
	border-color: transparent;
	color: var(--yodha-orange);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
}

.yf-btn--text:hover,
.yf-btn--text:focus {
	color: var(--yodha-orange-dark);
	text-decoration-color: currentColor;
}

.yf-btn--text:active {
	color: var(--yodha-orange-dark);
}

/* --- Disabled state — applies to all variants. Real <button disabled> and
   <a aria-disabled="true"> (since <a> has no native disabled attribute)
   both covered, so it's correct whichever element the CTA renders as. --- */
.yf-btn:disabled,
.yf-btn[aria-disabled="true"] {
	background-color: var(--color-border);
	border-color: var(--color-border);
	color: var(--color-text-muted);
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
}

/* --- Focus state — consistent, visible ring on every variant. Builds on
   base.css's global :focus-visible rule with a slightly larger offset so
   it reads clearly against a solid-color button fill. --- */
.yf-btn:focus-visible {
	outline: 3px solid var(--yodha-orange);
	outline-offset: 3px;
}

.yf-btn--primary:focus-visible,
.yf-btn--secondary:focus-visible {
	outline-color: var(--warrior-dark);
}

/* ============================================================
   SECTION HEADING
   ============================================================ */
.yf-section-heading {
	margin-bottom: var(--space-lg);
}

.yf-section-heading__eyebrow {
	color: var(--yodha-orange);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-label);
	font-size: var(--fs-label);
	margin: 0 0 var(--space-2xs);
}

.yf-section-heading__title {
	margin: 0 0 var(--space-2xs);
}

.yf-section-heading__subtitle {
	color: var(--color-text-muted);
	margin: 0;
}

/* ============================================================
   PRODUCT CARD — foundation only, no product data
   ============================================================ */
.yf-product-card {
	display: flex;
	flex-direction: column;
	min-width: var(--card-min-width);
	max-width: var(--card-max-width);
	background-color: var(--color-bg);
	border-radius: var(--card-radius);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.yf-product-card:hover,
.yf-product-card:focus-within {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

/* Product image area */
.yf-product-card__media {
	position: relative;
	display: block;
	background-color: var(--color-bg-alt);
	aspect-ratio: var(--card-image-aspect);
}

.yf-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.yf-product-card__body {
	padding: var(--card-padding);
	display: flex;
	flex-direction: column;
	gap: var(--card-gap);
}

/* Product title */
.yf-product-card__title {
	font-size: var(--fs-product-title);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	margin: 0;
}

.yf-product-card__title a {
	color: var(--color-heading);
}

.yf-product-card__title a:hover,
.yf-product-card__title a:focus {
	color: var(--yodha-orange);
}

.yf-product-card__cta {
	margin-top: var(--space-2xs);
	width: 100%;
}

/* ============================================================
   BADGES — discount + general-purpose promotional badges
   ============================================================ */
.yf-badge {
	position: absolute;
	top: var(--space-xs);
	left: var(--space-xs);
	display: inline-flex;
	align-items: center;
	padding: var(--badge-padding-y) var(--badge-padding-x);
	border-radius: var(--badge-radius);
	font-size: var(--badge-font-size);
	font-weight: var(--fw-bold);
	line-height: 1.4;
}

.yf-badge--discount {
	background-color: var(--yodha-orange);
	color: var(--white);
}

/* Foundation for other badge types Phase 3 may use — visual style only,
   no logic attached yet. */
.yf-badge--new {
	background-color: var(--warrior-dark);
	color: var(--white);
}

.yf-badge--bestseller {
	background-color: var(--white);
	color: var(--warrior-dark);
	border: var(--border-width) solid var(--warrior-dark);
}

/* A second badge in the same corner stacks below the first. */
.yf-badge + .yf-badge {
	top: calc(var(--space-xs) + 1.75rem);
}

/* ============================================================
   PRICE BLOCK — regular price vs. sale price
   Built to match WooCommerce's own price-html markup: <del> wraps the
   regular price, <ins> wraps the sale price, when a product is on sale.
   ============================================================ */
.yf-price-block {
	display: flex;
	align-items: baseline;
	gap: var(--space-xs);
	font-size: var(--fs-price);
	font-weight: var(--fw-bold);
	color: var(--color-heading);
}

/* Regular (MRP) price — struck through only when a sale price is also present */
.yf-price-block del {
	font-size: var(--fs-price-compare);
	font-weight: var(--fw-regular);
	color: var(--color-text-muted);
	text-decoration: line-through;
}

/* Sale (selling) price — the emphasized figure */
.yf-price-block ins {
	text-decoration: none;
	color: var(--color-heading);
	font-weight: var(--fw-bold);
}

/* ============================================================
   RATING
   ============================================================ */
.yf-rating {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
}

.yf-rating__stars {
	display: inline-flex;
	color: var(--yodha-orange);
}

.yf-rating__star {
	width: 16px;
	height: 16px;
}

.yf-rating__count {
	color: var(--color-text-muted);
	font-size: var(--fs-small);
}

/* ============================================================
   PRODUCT GRID — layout foundation for Phase 3 product loops
   ============================================================ */
.yf-product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-md);
}

@media (min-width: 768px) {
	.yf-product-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-lg);
	}
}

@media (min-width: 1024px) {
	.yf-product-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Empty state — shown by template-parts/home/product-grid.php whenever
   its $products array is empty, and by woocommerce/loop/no-products-found.php
   on the Shop page/category archives. Lives here (not home.css) because,
   like .yf-product-grid itself, both callers need it: the homepage
   sections load home.css, but the Shop page does not — components.css is
   the one stylesheet both contexts share. Moved here verbatim from
   home.css; no visual change on the homepage. */
.yf-product-grid__empty {
	padding: var(--space-xl);
	text-align: center;
	color: var(--color-text-muted);
	background-color: var(--color-bg);
	border: var(--border-width) dashed var(--color-border);
	border-radius: var(--radius-md);
}