/**
 * Llama Corp WooCommerce styling on top of Blocksy's woocommerce.min.css.
 *
 * Loaded only when WooCommerce is active. Uses tokens from tokens.css.
 * Contrast rules (design-system/README.md): purple text on sunset (4.9:1), never white on sunset;
 * sunset is never used as text.
 */

/* ================================================================== */
/* 1. Buttons (classic + blocks)                                      */
/* Blocksy's .button reads --theme-button-* (set to purple/white      */
/* below). These rules cover block buttons Blocksy skips and           */
/* enforce the brand type on all of them.                              */
/* ================================================================== */

.woocommerce :is(.button, button.button, a.button, input.button),
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-mini-cart-footer-block .wc-block-components-button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wp-block-button.wc-block-components-product-button .wp-block-button__link {
	min-height: var(--lc-touch-target);
	border-radius: var(--lc-radius-pill);
	font-family: var(--lc-font-heading);
	font-weight: 700;
	font-size: var(--lc-fs-button);
	letter-spacing: 0;
	text-transform: none;
}

/*
 * Shop buttons: purple ground + white text (10.9:1), hover lavender + white (7.9:1).
 * Sunset grounds made labels hard to read on cart/checkout, so commerce buttons
 * use the brand purple regardless of the Customizer button color.
 * Blocksy's own .button rules read these vars, so set them on WC scopes too.
 */
.woocommerce,
.woocommerce-page,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-mini-cart__drawer {
	--theme-button-background-initial-color: var(--lc-purple);
	--theme-button-background-hover-color: var(--lc-lavender);
	--theme-button-text-initial-color: var(--lc-white);
	--theme-button-text-hover-color: var(--lc-white);
}

.woocommerce :is(.button, button.button, a.button, input.button, .button.alt, .checkout-button, #place_order),
.woocommerce-page :is(.button, button.button, a.button, input.button, .button.alt, .checkout-button, #place_order),
.wc-block-components-button:not(.is-link):not(.outlined),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wp-block-button.wc-block-components-product-button .wp-block-button__link {
	background-color: var(--lc-purple);
	color: var(--lc-white);
	border: 0;
}

.woocommerce :is(.button, button.button, a.button, input.button, .button.alt, .checkout-button, #place_order):is(:hover, :focus-visible),
.woocommerce-page :is(.button, button.button, a.button, input.button, .button.alt, .checkout-button, #place_order):is(:hover, :focus-visible),
.wc-block-components-button:not(.is-link):not(.outlined):is(:hover, :focus-visible),
.wc-block-cart__submit-button:is(:hover, :focus-visible),
.wc-block-components-checkout-place-order-button:is(:hover, :focus-visible),
.wc-block-grid__product-add-to-cart .wp-block-button__link:is(:hover, :focus-visible),
.wp-block-button.wc-block-components-product-button .wp-block-button__link:is(:hover, :focus-visible) {
	background-color: var(--lc-lavender);
	color: var(--lc-white);
}

/* Make sure inner label spans inherit (block buttons wrap text in a span). */
.wc-block-components-button:not(.is-link) .wc-block-components-button__text,
.woocommerce .checkout-button * {
	color: inherit;
}

/* Secondary / outlined block buttons (e.g. "View cart" in the mini-cart). */
.wc-block-components-button.outlined:not(.is-link) {
	background: transparent;
	color: var(--lc-purple);
	box-shadow: inset 0 0 0 2px var(--lc-purple);
}

.wc-block-components-button.outlined:not(.is-link):hover {
	background: var(--lc-purple);
	color: var(--lc-white);
}

/* Disabled state (e.g. "Update cart" before changes): purple stays legible, just dimmed. */
.woocommerce .button:disabled,
.woocommerce .button.disabled,
.wc-block-components-button:disabled {
	background-color: var(--lc-purple);
	color: var(--lc-white);
	opacity: 0.6;
	cursor: not-allowed;
}

/* ================================================================== */
/* 2. Product cards (Blocksy [data-products] + WC product blocks)     */
/* ================================================================== */

[data-products] .product,
.wc-block-grid__product,
.wc-block-product {
	text-align: start;
}

[data-products] .product figure,
[data-products] .product .ct-media-container,
.wc-block-grid__product-image img,
.wc-block-components-product-image img {
	border-radius: var(--lc-radius-md);
	overflow: hidden;
}

/* Card title: Audrey 500, purple. */
[data-products] .woocommerce-loop-product__title,
[data-products] .woocommerce-loop-category__title,
.wc-block-grid__product-title,
.wc-block-components-product-name,
.wp-block-post-title.wc-block-components-product-title,
.wc-block-product .wp-block-post-title {
	font-family: var(--lc-font-heading);
	font-weight: 500;
	color: var(--lc-purple);
	line-height: var(--lc-lh-h3);
}

[data-products] .woocommerce-loop-product__title a,
.wc-block-grid__product-title a,
.wc-block-product .wp-block-post-title a {
	color: inherit;
}

/* Ratings: purple stars (sunset fails 3:1 for non-text on white). */
.star-rating,
.wc-block-components-product-rating__stars,
.wc-block-grid__product-rating .star-rating {
	color: var(--lc-purple);
}

/* ================================================================== */
/* 3. Prices                                                          */
/* Medio is the brand's numerals face. Sale prices are struck through */
/* as well as recolored, so color is never the only signal.           */
/* ================================================================== */

.price,
.woocommerce-Price-amount,
.wc-block-components-product-price,
.wc-block-grid__product-price,
.wc-block-formatted-money-amount {
	font-family: var(--lc-font-accent);
	font-variant-numeric: lining-nums tabular-nums;
}

[data-products] .product .price,
.wc-block-grid__product-price,
.wc-block-components-product-price {
	font-size: 18px;
	color: var(--lc-purple);
}

.single-product .summary .price {
	font-size: var(--lc-fs-tagline);
	color: var(--lc-purple);
}

.price del,
.wc-block-components-product-price__regular,
.wc-block-grid__product-price del {
	color: var(--lc-lavender);
	opacity: 1;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

.price ins,
.wc-block-components-product-price__value.is-discounted,
.wc-block-grid__product-price ins {
	color: var(--lc-purple);
	font-weight: 700;
	text-decoration: none;
	background: none;
}

/* ================================================================== */
/* 4. Sale / status badges                                            */
/* Colors are seeded into Blocksy's saleBadgeColor option; shape and  */
/* type set here: label role (Audrey 700, caps, +0.08em), pill.        */
/* ================================================================== */

.onsale,
[class*="ct-woo-badge-"],
.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale,
.wc-block-components-sale-badge {
	--badge-radius: var(--lc-radius-pill);
	border-radius: var(--lc-radius-pill);
	font-family: var(--lc-font-heading);
	font-weight: 700;
	font-size: var(--lc-fs-eyebrow);
	letter-spacing: var(--lc-ls-label);
	text-transform: uppercase;
}

.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale,
.wc-block-components-sale-badge {
	background: var(--lc-sunset);
	color: var(--lc-purple);
	border: 0;
	padding: 5px 12px;
}

/* Out of stock: purple ground, white text (10.9:1). */
.out-of-stock-badge {
	--badge-background-color: var(--lc-purple);
	--badge-text-color: var(--lc-white);
}

/* ================================================================== */
/* 5. Notices (classic + block). Colors are seeded into Blocksy's     */
/* info/success/error options; this adds the brand shape.             */
/* ================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-thankyou-order-received,
.wc-block-components-notice-banner {
	border-radius: var(--lc-radius-md);
	font-family: var(--lc-font-body);
	border: 0;
}

.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner:is(.is-info, .is-success) {
	border-inline-start: 4px solid var(--lc-purple);
}

.wc-block-components-notice-banner.is-warning {
	background-color: var(--lc-blush);
	color: var(--lc-purple);
	border: 0;
	border-inline-start: 4px solid var(--lc-sunset);
}

.woocommerce-error a,
.wc-block-components-notice-banner.is-error a {
	color: var(--lc-white);
	text-decoration: underline;
}

/* Store-wide notice bar. */
.woocommerce-store-notice,
p.demo_store {
	background-color: var(--lc-purple);
	color: var(--lc-white);
	font-family: var(--lc-font-body);
}

.woocommerce-store-notice a {
	color: var(--lc-white);
	text-decoration: underline;
}

/* ================================================================== */
/* 6. Classic cart & checkout                                         */
/* ================================================================== */

.woocommerce table.shop_table {
	border-color: var(--lc-c-border);
	border-radius: var(--lc-radius-md);
	overflow: hidden;
}

.woocommerce table.shop_table :is(th, td) {
	border-color: var(--lc-c-border);
}

.woocommerce table.shop_table thead th {
	font-family: var(--lc-font-heading);
	font-weight: 700;
	font-size: var(--lc-fs-eyebrow);
	letter-spacing: var(--lc-ls-label);
	text-transform: uppercase;
	color: var(--lc-purple);
}

.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .ct-order-review {
	background-color: var(--lc-blush);
	border-radius: var(--lc-radius-lg);
	padding: var(--lc-space-5);
}

.woocommerce-cart .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3 {
	font-family: var(--lc-font-heading);
	color: var(--lc-purple);
}

.woocommerce .order-total :is(th, td),
.woocommerce .order-total .woocommerce-Price-amount {
	color: var(--lc-purple);
	font-weight: 700;
}

.woocommerce-checkout #payment {
	background: var(--lc-white);
	border-radius: var(--lc-radius-md);
}

.woocommerce-checkout #payment div.payment_box {
	background-color: var(--lc-blush);
	color: var(--lc-purple);
	border-radius: var(--lc-radius-sm);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--lc-blush);
}

.woocommerce form .form-row label {
	font-family: var(--lc-font-heading);
	font-weight: 500;
	color: var(--lc-purple);
}

/*
 * Quantity stepper: one bordered box laid out as [ − | 4 | + ].
 * Blocksy positions its .ct-decrease/.ct-increase absolutely against the input;
 * with the brand fonts/sizes those landed above the field. Put them back in
 * normal flow inside a flex wrapper (also covers .minus/.plus button markup).
 */
.woocommerce .quantity {
	position: relative;
	display: inline-flex;
	align-items: stretch;
	width: auto;
	min-width: 120px;
	height: var(--lc-touch-target);
	border: 1px solid var(--lc-c-border);
	border-radius: var(--lc-radius-sm);
	background: var(--lc-white);
	overflow: hidden;
}

.woocommerce .quantity:focus-within {
	border-color: var(--lc-purple);
	box-shadow: 0 0 0 1px var(--lc-purple);
}

.woocommerce .quantity .qty {
	order: 2;
	flex: 1 1 auto;
	width: 48px;
	min-width: 0;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	text-align: center;
	color: var(--lc-purple);
	-moz-appearance: textfield;
	appearance: textfield;
}

.woocommerce .quantity .qty::-webkit-inner-spin-button,
.woocommerce .quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce .quantity :is(.ct-decrease, .minus) {
	order: 1;
}

.woocommerce .quantity :is(.ct-increase, .plus) {
	order: 3;
}

.woocommerce .quantity :is(.ct-increase, .ct-decrease, .minus, .plus) {
	position: static;
	inset: auto;
	transform: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 36px;
	width: 36px;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	color: var(--lc-purple);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.woocommerce .quantity :is(.ct-increase, .ct-decrease, .minus, .plus):hover {
	background: var(--lc-blush);
}

/* Sold-individually items render a hidden input: no empty box. */
.woocommerce .quantity:has(> input[type="hidden"]) {
	min-width: 0;
	height: auto;
	border: 0;
	box-shadow: none;
}

/* Coupon field */
.woocommerce-cart .coupon .input-text {
	border-radius: var(--lc-radius-pill);
	min-height: var(--lc-touch-target);
}

/* ================================================================== */
/* 7. Block cart & checkout                                           */
/* ================================================================== */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	font-family: var(--lc-font-body);
	color: var(--lc-lavender);
}

.wc-block-components-title,
.wc-block-cart__totals-title,
.wc-block-components-checkout-step__title,
.wc-block-components-order-summary__button-text {
	font-family: var(--lc-font-heading);
	font-weight: 700;
	color: var(--lc-purple);
}

/* Sidebar / totals panel on blush. */
.wc-block-cart .wc-block-cart__sidebar .wc-block-components-sidebar-layout__sidebar,
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	background-color: var(--lc-blush);
	border-radius: var(--lc-radius-lg);
	padding: var(--lc-space-5);
}

.wc-block-checkout__sidebar .wc-block-components-panel,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.wc-block-cart__sidebar .wc-block-components-totals-wrapper {
	border-color: var(--lc-c-border);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--lc-purple);
	font-weight: 700;
}

.wc-block-components-totals-item__value,
.wc-block-cart-item__total,
.wc-block-cart-item__prices {
	font-family: var(--lc-font-accent);
	color: var(--lc-purple);
}

/* Cart line items */
.wc-block-cart-items,
.wc-block-cart-items :is(td, th) {
	border-color: var(--lc-c-border);
}

.wc-block-cart-items__header {
	font-family: var(--lc-font-heading);
	font-size: var(--lc-fs-eyebrow);
	letter-spacing: var(--lc-ls-label);
	text-transform: uppercase;
	color: var(--lc-purple);
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	border-radius: var(--lc-radius-sm);
}

.wc-block-components-order-summary-item__quantity {
	background: var(--lc-purple);
	color: var(--lc-white);
	border: 0;
	box-shadow: none;
}

/* Inputs */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-form .wc-block-components-text-input input,
.wc-block-components-quantity-selector {
	border-radius: var(--lc-radius-sm);
	border-color: var(--lc-c-border);
	color: var(--lc-purple);
	font-family: var(--lc-font-body);
}

.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--lc-purple);
	box-shadow: 0 0 0 1px var(--lc-purple);
}

/* Radio / checkbox controls (shipping + payment options) */
.wc-block-components-radio-control__input:checked,
.wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--lc-purple);
}

.wc-block-components-radio-control__input:checked::before {
	background: var(--lc-purple);
}

.wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--lc-purple);
}

.wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--lc-white);
}

.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
	box-shadow: inset 0 0 0 2px var(--lc-purple);
	border-radius: var(--lc-radius-sm);
}

/* Links inside the blocks (e.g. "Add coupons", "Remove item") */
.wp-block-woocommerce-cart a,
.wp-block-woocommerce-checkout a,
.wc-block-components-totals-coupon-link,
.wc-block-cart-item__remove-link {
	color: var(--lc-purple);
}

/* Empty cart */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	font-family: var(--lc-font-heading);
	color: var(--lc-purple);
}

/* ================================================================== */
/* 8. Single product                                                  */
/* ================================================================== */

.single-product .product_title {
	font-family: var(--lc-font-heading);
	font-weight: 700;
	color: var(--lc-purple);
}

.single-product .woocommerce-product-details__short-description {
	color: var(--lc-lavender);
	max-width: var(--lc-reading-width);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-tabs .tabs a {
	font-family: var(--lc-font-heading);
	font-weight: 700;
	color: var(--lc-purple);
}

/* Variation swatches / selects */
.variations select {
	border-radius: var(--lc-radius-sm);
}

/* ================================================================== */
/* 9. Header cart count bubble                                        */
/* ================================================================== */

.ct-header-cart .ct-dynamic-count-cart,
.wc-block-mini-cart__badge {
	background-color: var(--lc-sunset);
	color: var(--lc-purple);
	font-family: var(--lc-font-heading);
	font-weight: 700;
}