/**
 * Seyleniya Cinnamon - WooCommerce presentation.
 *
 * Loaded ONLY on WooCommerce pages (see inc/enqueue.php), so the brand pages
 * never pay for it (blueprint §36).
 *
 * This file styles NATIVE WooCommerce markup. There are no Elementor Pro
 * WooCommerce Builder templates in this theme (§56) - shop, product, cart,
 * checkout and account all run on Woo's own templates, restyled here.
 */

/* ==================================================================
 * 1. Shop and archive loop
 * ============================================================== */

.woocommerce ul.products,
.wc-block-grid__products {
	display: grid;
	gap: var(--sy-grid-gap);
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	/* Woo floats loop items by default; the grid above owns layout now. */
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	background-color: var(--sy-ground-raised);
	border: var(--sy-border);
	border-radius: var(--sy-radius-md);
	overflow: hidden;
	transition: border-color var(--sy-duration) var(--sy-ease),
		box-shadow var(--sy-duration) var(--sy-ease);
}

.woocommerce ul.products li.product:hover {
	border-color: var(--sy-rule-strong);
	box-shadow: var(--sy-shadow-lift);
}

.woocommerce ul.products li.product a img {
	width: 100%;
	margin: 0;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
	transition: transform var(--sy-duration-slow) var(--sy-ease-out);
}

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

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: var(--sy-space-md) var(--sy-space-md) 0;
	font-family: var(--sy-font-display);
	font-size: var(--sy-text-xl);
	font-weight: var(--sy-weight-regular);
	line-height: var(--sy-leading-snug);
}

.woocommerce ul.products li.product .price {
	display: block;
	padding: var(--sy-space-2xs) var(--sy-space-md) 0;
	font-family: var(--sy-font-display);
	font-size: var(--sy-text-lg);
	color: var(--sy-text);
}

.woocommerce ul.products li.product .price del {
	color: var(--sy-ink-40);
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .sy-loop__cta {
	margin: var(--sy-space-md);
	align-self: flex-start;
}

/* Woo's star ratings stay hidden until there are real reviews to show
 * (blueprint §4, §38). */
.woocommerce ul.products li.product .star-rating,
.woocommerce .woocommerce-product-rating {
	display: none;
}

.sy-phase-2 .woocommerce .woocommerce-product-rating,
.sy-phase-3 .woocommerce .woocommerce-product-rating {
	display: block;
}

/* Sale flash - restrained, and only meaningful once prices exist. */
.woocommerce span.onsale {
	position: absolute;
	top: var(--sy-space-sm);
	left: var(--sy-space-sm);
	min-height: 0;
	min-width: 0;
	padding: 0.25em 0.75em;
	margin: 0;
	background-color: var(--sy-ground-inverse);
	border-radius: var(--sy-radius-pill);
	font-family: var(--sy-font-body);
	font-size: var(--sy-text-xs);
	letter-spacing: var(--sy-tracking-eyebrow);
	text-transform: uppercase;
	line-height: 1.8;
}

.sy-phase-1 .woocommerce span.onsale {
	display: none;
}

/* ==================================================================
 * 2. Single product
 * ============================================================== */

.woocommerce div.product {
	display: grid;
	gap: var(--sy-grid-gap);
	grid-template-columns: minmax(0, 1fr);
}

.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.woocommerce div.product div.images img {
	border-radius: var(--sy-radius-md);
}

.woocommerce div.product .product_title {
	margin-bottom: var(--sy-space-sm);
	font-size: var(--sy-display-md);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	margin-bottom: var(--sy-space-md);
	font-family: var(--sy-font-display);
	font-size: var(--sy-text-xl);
	color: var(--sy-text);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	margin-bottom: var(--sy-space-lg);
	font-size: var(--sy-text-lg);
	line-height: var(--sy-leading-snug);
	color: var(--sy-ink-80);
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sy-space-sm);
	align-items: flex-end;
	margin-bottom: var(--sy-space-lg);
}

.woocommerce div.product .product_meta {
	padding-top: var(--sy-space-md);
	border-top: var(--sy-border);
	font-size: var(--sy-text-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sy-ink-64);
}

/* The Phase 1 panel that stands in for the add-to-cart form. */
.sy-enquire {
	padding: var(--sy-space-lg);
	margin-bottom: var(--sy-space-lg);
	background-color: var(--sy-ground-base);
	border-radius: var(--sy-radius-md);
}

.sy-enquire__note {
	margin-bottom: var(--sy-space-md);
	font-size: var(--sy-text-sm);
	color: var(--sy-ink-80);
}

/* --- Tabs --------------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sy-space-lg);
	margin: 0 0 var(--sy-space-lg);
	padding: 0 0 var(--sy-space-2xs);
	border-bottom: var(--sy-border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	content: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: var(--sy-space-2xs) 0;
	font-family: var(--sy-font-body);
	font-size: var(--sy-text-xs);
	font-weight: var(--sy-weight-semibold);
	letter-spacing: var(--sy-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sy-ink-64);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--sy-text);
	border-bottom: 1px solid var(--sy-accent);
}

/* ==================================================================
 * 3. Buttons - inherit the brand button, not Woo's default
 * ============================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: var(--sy-space-xs) var(--sy-space-lg);
	background-color: var(--sy-accent-strong);
	border: 1px solid transparent;
	border-radius: var(--sy-radius-sm);
	font-family: var(--sy-font-body);
	font-size: var(--sy-text-sm);
	font-weight: var(--sy-weight-medium);
	letter-spacing: var(--sy-tracking-button);
	text-transform: uppercase;
	color: var(--sy-text-inverse);
	transition: background-color var(--sy-duration) var(--sy-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var(--sy-ground-inverse);
	color: var(--sy-text-inverse);
}

.woocommerce .quantity .qty {
	width: 5rem;
	min-height: 3rem;
	text-align: center;
}

/* ==================================================================
 * 4. Cart, checkout and account (Phase 2 onward)
 * ============================================================== */

.woocommerce table.shop_table {
	border: var(--sy-border);
	border-radius: var(--sy-radius-md);
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce table.shop_table th {
	font-family: var(--sy-font-body);
	font-size: var(--sy-text-xs);
	font-weight: var(--sy-weight-semibold);
	letter-spacing: var(--sy-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sy-ink-64);
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	padding: var(--sy-space-sm);
	border-top: var(--sy-border);
}

.woocommerce-checkout #payment {
	background-color: var(--sy-ground-base);
	border-radius: var(--sy-radius-md);
}

.woocommerce form .form-row label {
	font-size: var(--sy-text-xs);
	font-weight: var(--sy-weight-semibold);
	letter-spacing: var(--sy-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sy-ink-80);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: var(--sy-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: var(--sy-space-sm) 0;
	text-decoration: none;
}

/* ==================================================================
 * 5. Notices
 * ============================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	padding: var(--sy-space-md);
	background-color: var(--sy-ground-base);
	border-top: 2px solid var(--sy-accent);
	border-radius: var(--sy-radius-md);
	font-size: var(--sy-text-sm);
}

.woocommerce-error {
	border-top-color: var(--sy-text);
}

/* ==================================================================
 * 6. Responsive
 * ============================================================== */

@media (min-width: 40em) {

	.woocommerce ul.products,
	.wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 56.25em) {

	.woocommerce ul.products,
	.wc-block-grid__products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.woocommerce div.product {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: clamp(2rem, 1rem + 4vw, 5rem);
		align-items: start;
	}

	/* The tabs and related products span the full width beneath both columns. */
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related,
	.woocommerce div.product .upsells {
		grid-column: 1 / -1;
	}
}