/* =============================================================================
   Asaify — Storefront polish (customer-facing WooCommerce pages)
   -----------------------------------------------------------------------------
   Loaded only on WooCommerce front-end pages (shop, product, cart, checkout,
   account). Upgrades the Kadence-driven storefront with a modern, cohesive
   layer: cards, buttons, inputs, badges, tables, plus motion (scroll-reveal,
   micro-interactions). Theme-agnostic selectors target WooCommerce's own
   markup so it works with any theme, tuned for Kadence.
   Respects prefers-reduced-motion.
   ============================================================================= */

/* ---------- Design tokens ---------- */
:root {
	--asf-accent: #5b5bf0;
	--asf-accent-hover: #4a48d6;
	--asf-accent-soft: #ececfd;
	--asf-text: #1c2330;
	--asf-text-2: #56607a;
	--asf-muted: #8a93a6;
	--asf-border: #e9ebf0;
	--asf-card: #ffffff;
	--asf-bg: #f5f6f8;
	--asf-success: #15a35a;
	--asf-error: #e0453c;
	--asf-radius: 14px;
	--asf-radius-sm: 10px;
	--asf-shadow-sm: 0 1px 2px rgba(20, 28, 48, .05), 0 1px 3px rgba(20, 28, 48, .06);
	--asf-shadow-md: 0 8px 24px rgba(20, 28, 48, .10);
	--asf-shadow-lg: 0 18px 48px rgba(20, 28, 48, .14);
	--asf-ring: 0 0 0 3px rgba(91, 91, 240, .22);
	--asf-gradient: linear-gradient(135deg, #5b5bf0 0%, #8a5bf0 100%);
	--asf-ease: cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-color-scheme: dark) {
	:root {
		--asf-text: #e8ebf2;
		--asf-text-2: #aab2c5;
		--asf-muted: #6b7488;
		--asf-border: #262b36;
		--asf-card: #171a22;
		--asf-bg: #0f1117;
		--asf-accent: #6e6ef5;
		--asf-accent-hover: #8a8af5;
		--asf-accent-soft: #20223a;
		--asf-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
		--asf-shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
		--asf-shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
		--asf-ring: 0 0 0 3px rgba(110, 110, 245, .3);
		--asf-gradient: linear-gradient(135deg, #6e6ef5 0%, #9a6ef5 100%);
	}
}

/* ---------- Buttons (add-to-cart, checkout, etc.) ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.add_to_cart_button,
.woocommerce button.single_add_to_cart_button,
.woocommerce a.checkout-button {
	border-radius: var(--asf-radius-sm) !important;
	background: var(--asf-accent) !important;
	border: 1px solid var(--asf-accent) !important;
	color: #fff !important;
	box-shadow: var(--asf-shadow-sm);
	font-weight: 600;
	transition: background .16s var(--asf-ease), box-shadow .16s var(--asf-ease), transform .12s var(--asf-ease) !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.add_to_cart_button:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce a.checkout-button:hover {
	background: var(--asf-accent-hover) !important;
	border-color: var(--asf-accent-hover) !important;
	box-shadow: var(--asf-shadow-md);
	transform: translateY(-1px);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce #respond input#submit:active,
.woocommerce a.add_to_cart_button:active,
.woocommerce button.single_add_to_cart_button:active,
.woocommerce a.checkout-button:active {
	transform: translateY(1px);
}

/* ---------- Product cards (shop / archive) ---------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--asf-card);
	border: 1px solid var(--asf-border);
	border-radius: var(--asf-radius);
	box-shadow: var(--asf-shadow-sm);
	padding: 1rem;
	transition: box-shadow .22s var(--asf-ease), transform .22s var(--asf-ease), border-color .22s var(--asf-ease);
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	box-shadow: var(--asf-shadow-md);
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--asf-accent) 30%, var(--asf-border));
}

.woocommerce ul.products li.product a img {
	border-radius: var(--asf-radius-sm);
	transition: transform .3s var(--asf-ease);
}

.woocommerce ul.products li.product:hover a img {
	transform: scale(1.03);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-category__title {
	color: var(--asf-text);
	font-weight: 600;
}

.woocommerce ul.products li.product .price {
	color: var(--asf-text-2);
	font-weight: 600;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--asf-accent);
}

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

/* Sale badge */
.woocommerce span.onsale {
	background: var(--asf-gradient) !important;
	border-radius: 999px !important;
	padding: .35em .9em !important;
	min-width: 0 !important;
	min-height: 0 !important;
	line-height: 1 !important;
	box-shadow: var(--asf-shadow-sm);
	font-weight: 600;
}

/* ---------- Single product ---------- */
.single-product div.product {
	background: var(--asf-card);
	border: 1px solid var(--asf-border);
	border-radius: var(--asf-radius);
	box-shadow: var(--asf-shadow-sm);
	padding: 1.5rem;
}

.single-product div.product .product_title {
	letter-spacing: -0.01em;
	color: var(--asf-text);
}

.single-product div.product p.price,
.single-product div.product span.price {
	font-weight: 700;
	color: var(--asf-text);
}

/* ---------- Cart / checkout tables ---------- */
.woocommerce table.shop_table {
	background: var(--asf-card);
	border: 1px solid var(--asf-border);
	border-radius: var(--asf-radius);
	box-shadow: var(--asf-shadow-sm);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--asf-border) !important;
}

.woocommerce table.shop_table thead th {
	background: color-mix(in srgb, var(--asf-accent) 6%, var(--asf-card));
	color: var(--asf-text-2);
	font-weight: 600;
}

.woocommerce table.shop_table tbody tr {
	transition: background .15s var(--asf-ease);
}

.woocommerce table.shop_table tbody tr:hover {
	background: color-mix(in srgb, var(--asf-accent) 5%, var(--asf-card));
}

/* ---------- Notices / messages ---------- */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	border-radius: var(--asf-radius-sm) !important;
	box-shadow: var(--asf-shadow-sm);
	border-top-color: var(--asf-accent) !important;
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
	color: var(--asf-accent) !important;
}

/* ---------- Inputs ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection {
	border-radius: var(--asf-radius-sm) !important;
	border: 1px solid var(--asf-border) !important;
	background: var(--asf-card) !important;
	color: var(--asf-text) !important;
	transition: border-color .15s var(--asf-ease), box-shadow .15s var(--asf-ease) !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .select2-container--focus .select2-selection {
	border-color: var(--asf-accent) !important;
	box-shadow: var(--asf-ring) !important;
	outline: none;
}

/* ---------- Scroll-reveal motion ---------- */
.asf-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s var(--asf-ease), transform .6s var(--asf-ease);
	will-change: opacity, transform;
}

.asf-reveal.asf-in {
	opacity: 1;
	transform: none;
}

/* ---------- Add-to-cart pulse micro-interaction ---------- */
@keyframes asf-added {
	0% { transform: scale(1); }
	40% { transform: scale(.94); }
	100% { transform: scale(1); }
}

.asf-adding {
	animation: asf-added .4s var(--asf-ease);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product,
	.woocommerce a.button,
	.woocommerce button.button,
	.asf-reveal {
		transition: none !important;
		animation: none !important;
	}
	.asf-reveal {
		opacity: 1;
		transform: none;
	}
}