/*
 * K.I.S.S. — WooCommerce dark theme overrides (brief §7.7)
 * Loaded conditionally on WC pages via functions.php.
 * Targets stock WC templates that ship in Hello Elementor's WC integration.
 */

/* ---------------------------------------------------------------- *
 * Page-level palette
 * ---------------------------------------------------------------- */

.woocommerce,
.woocommerce-page,
body.woocommerce,
body.woocommerce-page {
	background-color: var(--kiss-midnight);
	color: var(--kiss-ivory);
}

.woocommerce a,
.woocommerce-page a {
	color: var(--kiss-gold);
}

.woocommerce a:hover,
.woocommerce-page a:hover {
	color: var(--kiss-ivory);
}

/* ---------------------------------------------------------------- *
 * Shop archive — product cards
 * ---------------------------------------------------------------- */

.woocommerce ul.products li.product {
	background: #131316;
	border: 1px solid #1f1f23;
	padding: 16px;
	transition: border-color 200ms ease, transform 200ms ease;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--kiss-gold);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product img {
	border-radius: 0;
	background: #fff; /* product photos have white backgrounds in the source files */
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--kiss-ivory);
	font-family: var(--kiss-font-serif);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	margin: 16px 0 8px;
	padding: 0;
}

.woocommerce ul.products li.product .price,
.woocommerce-Price-amount {
	color: var(--kiss-gold);
	font-family: var(--kiss-font-sans);
	font-weight: 600;
	font-size: 17px;
}

.woocommerce ul.products li.product del .woocommerce-Price-amount {
	color: var(--kiss-steel);
}

/* Sale badge */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	background: var(--kiss-burgundy);
	color: var(--kiss-ivory);
	border-radius: 0;
	border: 1px solid var(--kiss-gold);
	font-family: var(--kiss-font-sans);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 4px 10px;
	min-height: auto;
	min-width: auto;
	line-height: 1.4;
}

/* ---------------------------------------------------------------- *
 * Buttons (Add to cart, Place order, etc.)
 * ---------------------------------------------------------------- */

.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce a.button.alt,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce input.button,
.woocommerce-page .button {
	background: var(--kiss-gold) !important;
	color: var(--kiss-midnight) !important;
	font-family: var(--kiss-font-sans);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 12px 28px;
	border: 2px solid var(--kiss-gold);
	border-radius: 0;
	transition: background 200ms ease, color 200ms ease;
	text-shadow: none;
	box-shadow: none;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button:hover,
.woocommerce-page .button:hover {
	background: transparent !important;
	color: var(--kiss-gold) !important;
}

.woocommerce .added_to_cart {
	color: var(--kiss-gold);
	margin-left: 12px;
}

/* ---------------------------------------------------------------- *
 * Single product page
 * ---------------------------------------------------------------- */

.woocommerce div.product .product_title {
	color: var(--kiss-ivory);
	font-family: var(--kiss-font-serif);
	font-weight: 700;
	font-size: 40px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--kiss-gold);
	font-family: var(--kiss-font-sans);
	font-weight: 600;
	font-size: 24px;
}

.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p {
	color: var(--kiss-ivory);
	font-family: var(--kiss-font-sans);
	font-size: 16px;
	line-height: 1.6;
}

.woocommerce div.product .quantity input.qty {
	background: var(--kiss-midnight);
	color: var(--kiss-ivory);
	border: 1px solid var(--kiss-steel);
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	background: transparent;
	border-bottom: 1px solid var(--kiss-steel);
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border-bottom-color: var(--kiss-steel);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 1px solid var(--kiss-steel);
	border-bottom: 0;
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--kiss-ivory);
	font-family: var(--kiss-font-sans);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: var(--kiss-midnight);
	border-bottom: 1px solid var(--kiss-midnight);
	margin-bottom: -1px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--kiss-gold);
}

/* ---------------------------------------------------------------- *
 * Forms — cart, checkout, my-account
 * ---------------------------------------------------------------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout #order_comments,
.woocommerce input.input-text,
.woocommerce textarea {
	background: var(--kiss-midnight);
	color: var(--kiss-ivory);
	border: 1px solid var(--kiss-steel);
	border-radius: 0;
	padding: 12px 14px;
	font-family: var(--kiss-font-sans);
	font-size: 15px;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--kiss-gold);
	box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.25);
}

.woocommerce form .form-row label {
	color: var(--kiss-ivory);
	font-family: var(--kiss-font-sans);
	font-size: 14px;
	font-weight: 500;
}

.woocommerce form .form-row .required {
	color: var(--kiss-gold);
	text-decoration: none;
}

/* ---------------------------------------------------------------- *
 * Cart / Checkout tables + summary cards
 * ---------------------------------------------------------------- */

.woocommerce-cart table.cart,
.woocommerce-checkout-review-order table.shop_table,
.woocommerce table.shop_table {
	background: transparent;
	border: 1px solid var(--kiss-steel);
	border-collapse: collapse;
	border-radius: 0;
}

.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td,
.woocommerce-checkout-review-order table.shop_table th,
.woocommerce-checkout-review-order table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	background: transparent;
	color: var(--kiss-ivory);
	border-color: var(--kiss-steel);
	padding: 14px 16px;
	font-family: var(--kiss-font-sans);
}

.woocommerce-cart table.cart th,
.woocommerce-checkout-review-order table.shop_table th {
	color: var(--kiss-gold);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 12px;
}

.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review,
.cart_totals {
	background: #131316;
	border: 1px solid var(--kiss-steel);
	padding: 24px;
}

.woocommerce-cart .cart_totals h2,
.woocommerce-checkout #order_review_heading {
	color: var(--kiss-gold);
	font-family: var(--kiss-font-serif);
	font-weight: 700;
}

/* ---------------------------------------------------------------- *
 * Notice bars (cart added, error, info)
 * ---------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: #131316;
	color: var(--kiss-ivory);
	border-top: 3px solid var(--kiss-gold);
	border-radius: 0;
	font-family: var(--kiss-font-sans);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--kiss-gold);
}

.woocommerce-error {
	border-top-color: var(--kiss-burgundy);
}

.woocommerce-error::before {
	color: var(--kiss-burgundy);
}

/* ---------------------------------------------------------------- *
 * Page chrome — breadcrumbs, page title, result count, ordering
 * ---------------------------------------------------------------- */

.woocommerce-breadcrumb {
	color: var(--kiss-steel);
	font-family: var(--kiss-font-sans);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 24px;
}

.woocommerce-breadcrumb a {
	color: var(--kiss-steel);
}

.woocommerce-breadcrumb a:hover {
	color: var(--kiss-gold);
}

/* Shop title (K.I.S.S. Merch), Cart title, Checkout title, My Account
 * title — all WooCommerce-flow page headings. Gold matches the brand
 * accent color so the page identity reads as on-brand. */
.woocommerce-page h1.page-title,
.woocommerce-products-header__title,
.woocommerce h1.entry-title,
.woocommerce-cart h1.entry-title,
.woocommerce-checkout h1.entry-title,
.woocommerce-account h1.entry-title {
	color: var(--kiss-gold);
	font-family: var(--kiss-font-serif);
	font-weight: 700;
	font-size: 48px;
	line-height: 1.2; /* Cinzel ascenders get clipped at line-height: 1 */
	padding-top: 0.15em; /* breathing room above so ascenders don't graze the header */
}

.woocommerce .woocommerce-result-count {
	color: var(--kiss-steel);
	font-family: var(--kiss-font-sans);
}

.woocommerce .woocommerce-ordering select {
	background: var(--kiss-midnight);
	color: var(--kiss-ivory);
	border: 1px solid var(--kiss-steel);
	padding: 8px 12px;
	font-family: var(--kiss-font-sans);
}

/* ---------------------------------------------------------------- *
 * WooCommerce Block Checkout (Gutenberg-block-based, WC 8+) — the
 * classic-checkout wc.css rules above don't target these selectors.
 * Defaults give us light-colored inputs with washed-out placeholder
 * text on a dark page. Pin text + placeholders to readable contrast
 * inside the input chrome.
 * ---------------------------------------------------------------- */

/* Input + textarea + select text — black for legibility on the
 * light input chrome the Block Checkout renders by default */
.wc-block-checkout input,
.wc-block-checkout select,
.wc-block-checkout textarea,
.wc-block-cart input,
.wc-block-cart select,
.wc-block-cart textarea,
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea {
	color: var(--kiss-midnight) !important;
	font-family: var(--kiss-font-sans);
}

/* Placeholder text — slightly muted but still readable */
.wc-block-checkout input::placeholder,
.wc-block-checkout textarea::placeholder,
.wc-block-cart input::placeholder,
.wc-block-cart textarea::placeholder {
	color: #555 !important;
	opacity: 1;
}

/* Floating labels INSIDE inputs (Block Checkout uses an inset label
 * that animates on focus). These sit inside the white input chrome so
 * they need to be midnight for legibility. */
.wc-block-components-text-input label,
.wc-block-components-form .wc-block-components-text-input label,
.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label {
	color: var(--kiss-midnight) !important;
}

/* Section titles + body text OUTSIDE the input chrome — these sit on
 * the dark page background, so midnight makes them invisible. Force
 * ivory (with gold for section titles for brand presence) and override
 * any inherited dark colors from the Block Checkout default stylesheet. */
.wc-block-components-checkout-step__title,
.wc-block-components-title {
	color: var(--kiss-gold) !important;
	font-family: var(--kiss-font-serif);
	font-weight: 700;
}

.wc-block-components-checkout-step__description,
.wc-block-components-checkout-step__heading-content,
.wc-block-checkout__guest-checkout-notice,
.wc-block-checkout__terms,
.wc-block-checkout__terms p,
.wc-block-components-totals-item,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item,
.wc-block-components-product-name,
.wc-block-components-product-metadata,
.wc-block-components-product-price,
.wc-block-components-order-summary-item,
.wc-block-components-panel__button,
.wc-block-components-address-form__add-button,
.wc-block-components-validation-error,
.wp-block-woocommerce-checkout-order-note-block label,
.wc-block-components-textarea label {
	color: var(--kiss-ivory) !important;
}

/* Place Order button — gold solid with midnight text, ivory on hover.
 * Mirror the brand button treatment from .kiss-btn-solid for visual
 * consistency with the rest of the site. Both the button and its
 * inner __text span need the color override because Block Checkout
 * paints the label via the nested span. */
.wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
	background: var(--kiss-gold) !important;
	color: var(--kiss-midnight) !important;
	border: 2px solid var(--kiss-gold) !important;
	border-radius: 0 !important;
	font-family: var(--kiss-font-sans);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus,
.wc-block-components-checkout-place-order-button:hover .wc-block-components-button__text,
.wc-block-components-checkout-place-order-button:focus .wc-block-components-button__text {
	background: var(--kiss-ivory) !important;
	color: var(--kiss-midnight) !important;
	border-color: var(--kiss-ivory) !important;
}

/* The order summary panel uses its own card background — its inner
 * text should stay ivory too. Bullet-proof against Block Checkout
 * shipping a `color` on the wrapper. */
.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block * {
	color: var(--kiss-ivory);
}

/* Re-assert gold for the summary card's section title + prices so the
 * blanket ivory above doesn't flatten the visual hierarchy. */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-price,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--kiss-gold) !important;
}

/* Links inside the checkout body (e.g., Privacy Policy in the terms
 * disclaimer) — gold to match the brand link treatment. */
.wc-block-checkout__terms a,
.wc-block-checkout__guest-checkout-notice a {
	color: var(--kiss-gold) !important;
	text-decoration: underline;
}

/* ---------------------------------------------------------------- *
 * WooCommerce Block Cart — quantity selector input + line totals.
 * Block Cart uses a different markup than classic cart; selectors
 * here target the .wc-block-cart-* widgets that ship with WC 8+.
 * Default text color was washed out against the dark page bg.
 * ---------------------------------------------------------------- */

/* Quantity number input between the - and + buttons */
.wc-block-cart-item__quantity input,
.wc-block-components-quantity-selector input,
.wc-block-components-quantity-selector__input {
	color: var(--kiss-ivory) !important;
	background-color: transparent !important;
	text-align: center;
	font-family: var(--kiss-font-sans);
	font-weight: 600;
}

/* The - and + buttons */
.wc-block-components-quantity-selector__button {
	color: var(--kiss-ivory) !important;
}

.wc-block-components-quantity-selector__button:hover {
	color: var(--kiss-gold) !important;
}

/* ================================================================ *
 * Mobile fixes — 2026-05-24
 * ================================================================ */

/* -- Shop archive: result count + sort form crammed on mobile -----
 * Default WC markup is:
 *   <p class="woocommerce-result-count">Showing all N results</p>
 *   <form class="woocommerce-ordering"><select>...</select></form>
 * Both are inline-flow with no gap. On a 375px viewport the select
 * butts up against the count. Stack them with proper breathing room
 * on phones (desktop layout is already fine because the page has
 * room to wrap them side-by-side). */
@media (max-width: 767px) {
	.woocommerce .woocommerce-result-count {
		display: block;
		float: none;
		margin: 0 0 14px;
		text-align: left;
	}
	.woocommerce .woocommerce-ordering {
		display: block;
		float: none;
		margin: 0 0 20px;
		width: 100%;
	}
	.woocommerce .woocommerce-ordering select {
		width: 100%;
		max-width: 100%;
	}
}

/* -- Block Cart mobile centering + overflow guard -----------------
 * Block Cart ships a two-column layout (items left, totals right)
 * that uses CSS grid + negative-margin tricks to flush content to
 * the grid track edges. On narrow viewports those negative margins
 * + grid-template-columns shift the items block left of the viewport
 * boundary, clipping the left edge of product titles and the start of
 * the coupons/totals labels (was rendering as "ns" and "ted total").
 * Force a single-column stack with proper padding on phones. */
@media (max-width: 767px) {
	.wp-block-woocommerce-cart {
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}
	.wc-block-cart,
	.wc-block-cart .wp-block-woocommerce-cart-items-block,
	.wc-block-cart .wp-block-woocommerce-cart-totals-block {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* The cart line item is a flex row; let it shrink properly so
	 * the product title doesn't push the price+qty offscreen. */
	.wc-block-cart-items__row,
	.wc-block-cart-item {
		max-width: 100% !important;
		box-sizing: border-box;
	}
	.wc-block-cart-item__product {
		min-width: 0; /* allow text to wrap inside the flex item */
	}
}

/* ---------------------------------------------------------------- *
 * Block Cart buttons — Proceed to Checkout + empty-cart cross-sell
 * Add to Cart. These use Gutenberg's .wp-block-button__link inside
 * the WC cart blocks, which by default inherits the core block theme
 * styling (silver/charcoal bg + gold text + pill rounding). Override
 * to the brand button treatment so it matches the rest of the site:
 * gold bg, midnight text, square corners, ivory bg on hover.
 *
 * Selectors are scoped to .wp-block-woocommerce-cart and
 * .wp-block-woocommerce-empty-cart-block to avoid bleeding into other
 * WP block buttons on the rest of the site.
 * ---------------------------------------------------------------- */
.wp-block-woocommerce-cart .wp-block-button__link,
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-filled-cart-block .wp-block-button__link,
.wp-block-woocommerce-filled-cart-block .wc-block-cart__submit-button,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link,
.wp-block-woocommerce-empty-cart-block .add_to_cart_button,
.wp-block-woocommerce-proceed-to-checkout-block .wp-block-button__link,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button {
	background-color: var(--kiss-gold) !important;
	background-image: none !important;
	color: var(--kiss-midnight) !important;
	border: 2px solid var(--kiss-gold) !important;
	border-radius: 0 !important;
	font-family: var(--kiss-font-sans);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 12px 28px;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.wp-block-woocommerce-cart .wp-block-button__link:hover,
.wp-block-woocommerce-cart .wp-block-button__link:focus,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-button:focus,
.wp-block-woocommerce-filled-cart-block .wp-block-button__link:hover,
.wp-block-woocommerce-filled-cart-block .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover,
.wp-block-woocommerce-empty-cart-block .wp-block-button__link:focus,
.wp-block-woocommerce-empty-cart-block .add_to_cart_button:hover,
.wp-block-woocommerce-empty-cart-block .add_to_cart_button:focus,
.wp-block-woocommerce-proceed-to-checkout-block .wp-block-button__link:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button:hover {
	background-color: var(--kiss-ivory) !important;
	color: var(--kiss-midnight) !important;
	border-color: var(--kiss-ivory) !important;
}