/**
 * KG Cosmetics — design system, site-wide layer.
 * ---------------------------------------------------------------------------
 * The palette, type scale and button system live in the Elementor Kit (global
 * colours + Theme Style) and in the Kava customizer theme mods, so they
 * cascade on their own. This file only covers what those two mechanisms
 * cannot reach:
 *
 *   1. tokens        — one place to read the palette from
 *   2. buttons       — rectangular geometry + uppercase tracking on the
 *                      WooCommerce / Jet buttons the Kit's Theme Style
 *                      selectors don't match (they are <a>, not <button>)
 *   3. shop grid     — the 5-column archive from the brief, made responsive
 *   4. product card  — hairline border, white image field, card-title type
 *   5. odds & ends   — sale badge, star ratings, price filter, breadcrumbs
 *
 * Loaded site-wide from kava_child_enqueue_design_system() in functions.php.
 * Home-page interaction polish stays in home-fluid.css.
 */

/* 1 — Tokens ------------------------------------------------------------- */

:root {
	--kg-ink: #1C1C1C;        /* primary text, buttons, rules of emphasis    */
	--kg-ink-soft: #222222;   /* body copy                                   */
	--kg-ink-hover: #3D3D3D;  /* the one step away from ink, for :hover       */
	--kg-muted: #6E6E6E;      /* secondary copy — 5.3:1 on white             */
	--kg-paper: #FFFFFF;
	--kg-cream: #FBF8F5;      /* featured section bands                      */
	--kg-rule: #E5E5E5;       /* dividers and card borders                   */
	--kg-sand: #BFAE99;       /* retained warm accent: sale badge + stars     */

	--kg-track-wide: 0.14em;  /* nav / buttons / eyebrow labels              */
	--kg-track-card: 0.11em;  /* card titles                                 */

	--kg-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 1b — Word breaking ----------------------------------------------------- */

/**
 * Kava sets `hyphens: auto` on .site. With the new type scale — uppercase,
 * tracked, in narrow product cards — that produced "SE-LECCIO-NAR OPCIO-NES"
 * and "FULL COVERA-GE CONCEALER". Automatic hyphenation earns its place in
 * justified columns, not in left-aligned UI, so switch it back to manual and
 * let the theme's own `word-wrap: break-word` handle genuinely long words.
 */
.site {
	-webkit-hyphens: manual;
	-ms-hyphens: manual;
	hyphens: manual;
}

/* 2 — Buttons ------------------------------------------------------------ */

/**
 * Primary: a solid ink block, softly rounded rather than square — the brief
 * calls for elegance over the earlier hard-edged version, and the brand
 * reads as feminine, not industrial. Hover steps to --kg-ink-hover rather
 * than inverting, because several Jet widgets set their own hover *text*
 * colour and an invert would leave white text on a white field.
 */
.btn,
button,
input[type='button'],
input[type='reset'],
input[type='submit'],
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.added_to_cart.wc-forward,
.jet-woo-products .jet-woo-product-button .button,
.jet-woo-builder .button,
.woocommerce .woocommerce-mini-cart__buttons .button,
.jet-subscribe-form__submit {
	border-radius: 6px;
	text-transform: uppercase;
	letter-spacing: var(--kg-track-wide);
	font-weight: 600;
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	padding: 1.15em 2.2em;
	border: 1px solid var(--kg-ink);
	background-color: var(--kg-ink);
	color: var(--kg-paper);
	transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out, transform 100ms ease-out;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:focus-visible {
	background-color: var(--kg-ink-hover);
	border-color: var(--kg-ink-hover);
	color: var(--kg-paper);
}

/**
 * Press feedback, everywhere the button appears. This used to live only in
 * the home page's own stylesheet, which meant Add to Cart felt alive on the
 * home grid and dead everywhere else — the one place shoppers actually buy.
 * Same values as before (tens-of-times-a-day frequency caps it at a subtle
 * scale, per the animation-opportunity gate), just promoted here so it
 * covers /shop/, category archives and single product pages too.
 */
.woocommerce .button:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.jet-woo-products .jet-woo-product-button .button:active {
	transform: scale(0.96);
	transition: transform 80ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce .button,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	.woocommerce .button:active,
	.woocommerce a.button:active,
	.woocommerce button.button:active,
	.woocommerce input.button:active,
	.jet-woo-products .jet-woo-product-button .button:active {
		transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out !important;
		transform: none !important;
	}
}

/* Secondary: the same block, drawn as an outline. The cart's "Proceed to
   checkout" is also .wc-forward but is the primary action — without the
   .checkout-button exclusion it got ink text on Kava's ink fill (invisible). */
.btn.invert-button,
.woocommerce .button.wc-backward,
.woocommerce a.button.wc-forward:not(.checkout):not(.checkout-button),
.woocommerce-cart table.cart td.actions > .button {
	background-color: transparent;
	border: 1px solid var(--kg-ink);
	color: var(--kg-ink);
}

.btn.invert-button:hover,
.woocommerce .button.wc-backward:hover,
.woocommerce a.button.wc-forward:not(.checkout):not(.checkout-button):hover,
.woocommerce-cart table.cart td.actions > .button:hover {
	background-color: var(--kg-ink);
	border-color: var(--kg-ink);
	color: var(--kg-paper);
}

/* Keyboard users get the same ring everywhere. */
.btn:focus-visible,
button:focus-visible,
.woocommerce .button:focus-visible,
a:focus-visible {
	outline: 2px solid var(--kg-ink);
	outline-offset: 2px;
}

/* 3 — Shop and category archive grid ------------------------------------- */

/**
 * The brief asks for a 5-column product view. Kava ships .columns-1…6 rules
 * with no upper-breakpoint fallback, so a bare columns-5 would stay five
 * across on a phone. Step it down instead.
 */
@media (max-width: 1199px) {
	.woocommerce ul.products.columns-5 li.product {
		flex: 0 0 25%;
		max-width: 25%;
	}
}

@media (max-width: 1024px) {
	.woocommerce ul.products.columns-5 li.product {
		flex: 0 0 33.3333%;
		max-width: 33.3333%;
	}
}

@media (max-width: 767px) {
	.woocommerce ul.products.columns-5 li.product {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* Let the images breathe: a wider gutter than the theme's 15px default. */
.woocommerce ul.products {
	margin-left: -14px;
	margin-right: -14px;
	row-gap: 44px;
}

.woocommerce ul.products li.product {
	padding-left: 14px;
	padding-right: 14px;
}

/* 4 — Product card ------------------------------------------------------- */

/**
 * One hairline frame around the whole card, a white image field inside it
 * (product shots are shot on white, so the card reads as a continuous sheet),
 * and the card title in the uppercase sans of the type scale.
 */
/* li.product is a flex item with `height: auto`, so a percentage height on the
   card would not resolve. Make the item itself the column instead. */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	transition: transform 350ms var(--kg-ease);
}

/**
 * The card lifts as one unit on hover — the same feedback the home page's
 * own product grid already gives (jet-woo-products__item in home-fluid.css).
 * This grid is the one shoppers actually browse (/shop/, category archives),
 * so it earned the identical treatment rather than staying a plain
 * border-colour change.
 */
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
}

.woocommerce ul.products li.product .product-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	background: var(--kg-paper);
	border: 1px solid var(--kg-rule);
	padding: 18px 18px 22px;
	transition: border-color 250ms var(--kg-ease);
}

.woocommerce ul.products li.product:hover .product-content {
	border-color: var(--kg-ink);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product,
	.woocommerce ul.products li.product:hover {
		transition: none !important;
		transform: none !important;
	}
}

.woocommerce ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 16px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.jet-woo-products .jet-woo-product-title {
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: var(--kg-track-card);
	text-transform: uppercase;
	color: var(--kg-ink);
	margin: 0 0 8px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.jet-woo-products .jet-woo-product-title a {
	color: inherit;
}

.woocommerce ul.products li.product .price,
.jet-woo-products .jet-woo-product-price .price {
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kg-ink-soft);
}

.woocommerce ul.products li.product .price del {
	color: var(--kg-muted);
}

/**
 * At five across a card is ~150px wide, so the add-to-cart runs the full
 * width of the card and sits on its bottom edge: every card in a row then
 * ends on the same line regardless of how long the product name is.
 */
.woocommerce ul.products li.product .product-content > .button,
.woocommerce ul.products li.product .product-content > .added_to_cart,
.jet-woo-products .jet-woo-product-button .button {
	margin-top: auto;
	display: block;
	width: 100%;
	text-align: center;
	font-size: 10px;
	letter-spacing: 0.1em;
	padding: 13px 8px;
}

.jet-woo-products .jet-woo-products__inner-box {
	background: var(--kg-paper);
	border: 1px solid var(--kg-rule);
	padding: 18px 18px 22px;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: border-color 250ms var(--kg-ease);
}

.jet-woo-products .jet-woo-product-button {
	margin-top: auto;
	width: 100%;
}

.jet-woo-products .jet-woo-products__item:hover .jet-woo-products__inner-box {
	border-color: var(--kg-ink);
}

/**
 * WooCommerce injects the "View cart" link fresh into the DOM right after an
 * ajax add-to-cart succeeds, with no transition of its own — it just appears
 * next to the button. A CSS animation (not a transition) is the right tool
 * here: it plays automatically the moment the browser attaches the new
 * element, no JS class-toggle required. Short and understated — it's
 * confirming an action just taken, not introducing something new.
 */
@keyframes kg-added-to-cart-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes kg-added-to-cart-in-reduced {
	from { opacity: 0; }
	to { opacity: 1; }
}

.added_to_cart.wc-forward {
	animation: kg-added-to-cart-in 200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.added_to_cart.wc-forward {
		animation: kg-added-to-cart-in-reduced 200ms ease-out;
	}
}

/* Soften form fields to match the button system — the newsletter input in
   the footer, cart/checkout/account fields. */
.jet-subscribe-form__input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
	border-radius: 6px;
}

.jet-subscribe-form__submit {
	background-color: var(--kg-ink);
	color: var(--kg-paper);
	text-transform: uppercase;
	letter-spacing: var(--kg-track-wide);
}

.jet-subscribe-form__input {
	border: 1px solid var(--kg-rule);
}

/* 5 — Odds and ends ------------------------------------------------------ */

/**
 * The old taupe survives in exactly two roles — the sale badge and the star
 * rating. Both are "highlight" marks that have to read as *not* the primary
 * black CTA; painting them ink would flatten that distinction, and a warm
 * neutral keeps a thread of the previous brand identity. Ink text on sand
 * clears AA comfortably (~8.5:1); white on sand would not.
 */
.onsale,
.woocommerce span.onsale,
.jet-woo-product-badge {
	background-color: var(--kg-sand);
	color: var(--kg-ink);
	border-radius: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: var(--kg-track-wide);
	text-transform: uppercase;
	padding: 5px 9px;
	line-height: 1;
}

.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
	color: var(--kg-sand);
}

/* Rules and hairlines. */
hr,
.woocommerce ul.products li.product .product-content,
.widget_price_filter .price_slider_wrapper .ui-widget-content {
	border-color: var(--kg-rule);
}

.widget_price_filter .ui-slider .ui-slider-range,
.widget_price_filter .ui-slider .ui-slider-handle,
.elementor-widget-wp-widget-woocommerce_price_filter .ui-slider-range,
.elementor-widget-wp-widget-woocommerce_price_filter .ui-slider-handle {
	background-color: var(--kg-ink);
	border-radius: 0;
}

/* Sidebar filter headings read as labels, not headlines. */
.widget_price_filter .widget-title,
.widget_layered_nav .widget-title,
.elementor-widget-wp-widget-woocommerce_price_filter .elementor-widget-container > h5,
.elementor-widget-wp-widget-woocommerce_layered_nav .elementor-widget-container > h5 {
	font-family: "Montserrat", sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--kg-track-wide);
	text-transform: uppercase;
	color: var(--kg-ink);
}

/* Breadcrumbs / result count / ordering: small uppercase chrome. */
.breadcrumbs_item,
.woocommerce-result-count {
	text-transform: uppercase;
	letter-spacing: var(--kg-track-wide);
}

/* Site navigation, wherever the theme (not Elementor) renders it. */
.main-navigation a,
.main-navigation .menu-item a {
	text-transform: uppercase;
	letter-spacing: var(--kg-track-wide);
}

/* Elementor-built header/footer nav — the widget CSS sets size and colour,
   this only adds the tracking the Jet widget has no control for. */
.jet-nav .jet-nav-link-text,
.jet-mobile-menu .jet-nav-link-text {
	letter-spacing: inherit;
}

/* Long centred body copy gets a readable measure instead of running edge
   to edge at container width. */
.elementor-widget-text-editor .elementor-widget-container > p,
.elementor-widget-text-editor .elementor-widget-container > .p1 {
	max-width: 62ch;
	margin-inline: auto;
}

/* Section headings: a touch of optical correction the Kit can't express. */
h1, h2, h4 {
	text-wrap: balance;
}