/**
 * TheSouke — WooCommerce styles.
 *
 * Covers three surfaces:
 *   1. The header's account / mini-cart controls, mapped onto the exported
 *      Figma icons so the navbar cluster is pixel-consistent.
 *   2. Product grids — both the classic loop (rendered by
 *      woocommerce/content-product.php) and the Product Collection block.
 *   3. Single product, cart and checkout, dressed in the design's tokens.
 */

/* ---------------------------------------------------------------------------
 * 1. Header controls
 * ------------------------------------------------------------------------- */

.thesouke-navbar__icons .wp-block-woocommerce-customer-account,
.thesouke-navbar__icons .wp-block-woocommerce-mini-cart {
	margin: 0;
}

.thesouke-navbar__icons .wc-block-customer-account,
.thesouke-navbar__icons .wc-block-mini-cart__button {
	align-items: center;
	background: var(--wp--preset--color--base);
	border: 0;
	border-radius: var(--wp--custom--radius--control, 40px);
	color: var(--wp--preset--color--primary-950);
	cursor: pointer;
	display: inline-flex;
	height: 48px;
	justify-content: center;
	padding: 0;
	position: relative;
	transition: background-color var(--thesouke-transition), transform var(--thesouke-transition);
	width: 48px;
}

.thesouke-navbar__icons .wc-block-customer-account:hover,
.thesouke-navbar__icons .wc-block-customer-account:focus-visible,
.thesouke-navbar__icons .wc-block-mini-cart__button:hover,
.thesouke-navbar__icons .wc-block-mini-cart__button:focus-visible {
	background: var(--wp--preset--color--neutral-50);
	transform: translateY(-1px);
}

/* Hide the plugin glyphs and the price label; the design shows icon + badge. */
.thesouke-navbar__icons .wc-block-customer-account svg,
.thesouke-navbar__icons .wc-block-customer-account .label,
.thesouke-navbar__icons .wc-block-mini-cart__amount,
.thesouke-navbar__icons .wc-block-mini-cart__quantity-badge svg {
	display: none;
}

/*
 * Substitute the exported assets. A mask keeps the exact exported geometry at
 * its designed 24x24 leaf size, filled with the design's stroke colour
 * (primary/950 #421F13) — the same value baked into the SVG files.
 */
.thesouke-navbar__icons .wc-block-customer-account::before,
.thesouke-navbar__icons .wc-block-mini-cart__quantity-badge::before {
	background-color: var(--wp--preset--color--primary-950);
	content: "";
	display: block;
	height: 24px;
	width: 24px;
}

.thesouke-navbar__icons .wc-block-customer-account::before {
	mask: url("../icons/user.svg") no-repeat center / 24px 24px;
}

.thesouke-navbar__icons .wc-block-mini-cart__quantity-badge::before {
	mask: url("../icons/basket.svg") no-repeat center / 24px 24px;
}

.thesouke-navbar__icons .wc-block-mini-cart__quantity-badge {
	align-items: center;
	display: flex;
	justify-content: center;
	position: static;
}

/* 12px count dot over the basket's top-right corner. */
.thesouke-navbar__icons .wc-block-mini-cart__badge {
	align-items: center;
	background: var(--wp--preset--color--danger);
	border: 0;
	border-radius: 12px;
	color: var(--wp--preset--color--base);
	display: flex;
	font-family: var(--wp--preset--font-family--clash-display);
	font-size: 0.5rem;
	font-weight: 400;
	height: 12px;
	inset-block-start: 7px;
	inset-inline-end: 9px;
	justify-content: center;
	line-height: 1;
	min-width: 12px;
	padding: 2px;
	position: absolute;
}

.thesouke-navbar__icons .wc-block-mini-cart__badge:empty,
.thesouke-navbar__icons .wc-block-mini-cart__badge[hidden] {
	display: none;
}

/* Mini-cart drawer */
.wc-block-mini-cart__drawer .wc-block-components-drawer {
	background: var(--wp--preset--color--canvas);
}

/* ---------------------------------------------------------------------------
 * 2. Product grids
 * ------------------------------------------------------------------------- */

/*
 * auto-fill, not auto-fit: auto-fit collapses the empty tracks, so a row that
 * is not full — related products, a thin category, the last page of results —
 * stretches its cards across the whole width. One related product would become
 * a single 1488px card. auto-fill keeps the tracks, so cards hold the design's
 * ~374px and simply leave the rest of the row empty.
 */
.woocommerce ul.products,
.wc-block-product-template {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* WooCommerce's own float/column widths fight the grid; neutralise them. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	clear: none;
	float: none;
	margin: 0;
	width: auto;
}

/*
 * WooCommerce clears its float layout with ::before/::after on the list and on
 * each item. Under grid those pseudo-elements become grid items and take a
 * cell each, which pushes the first row along by one column.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after,
.wc-block-product-template::before,
.wc-block-product-template::after {
	content: none;
	display: none;
}

/* Sale flash sits over the media crop. */
.thesouke-product-card .onsale {
	background: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--chip, 24px);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--clash-display);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 500;
	inset-block-start: 1rem;
	inset-inline-start: 1rem;
	line-height: 1;
	margin: 0;
	min-height: 0;
	min-width: 0;
	padding: 0.375rem 0.75rem;
	position: absolute;
	z-index: 2;
}

/* Give the Product Collection block the same card treatment. */
.wc-block-product-template .wc-block-product {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--card, 24px);
	overflow: hidden;
	padding: 0 0 1rem;
	text-align: left;
}

.wc-block-product-template .wc-block-product .wc-block-components-product-image {
	border-radius: 0;
	margin: 0 0 1rem;
}

.wc-block-product-template .wc-block-product .wc-block-components-product-image img {
	aspect-ratio: 374 / 429;
	border-radius: 0;
	object-fit: cover;
	width: 100%;
}

.wc-block-product-template .wc-block-product > :not(.wc-block-components-product-image) {
	padding-inline: 1rem;
}

.wc-block-product-template .wc-block-components-product-title {
	font-family: var(--wp--preset--font-family--clash-display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 400;
	line-height: 1;
	margin-block: 0 0.75rem;
}

.wc-block-product-template .wc-block-components-product-price {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1;
}

.wc-block-product-template .wp-block-button__link,
.wc-block-product-template .wc-block-components-product-button .wp-block-button__link {
	border-radius: var(--wp--custom--radius--pill, 50px);
	width: 100%;
}

/* Shop toolbar */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	font-size: var(--wp--preset--font-size--small);
	margin-block-end: 2.5rem;
}

.woocommerce .woocommerce-ordering select {
	background: var(--wp--preset--color--base);
	border: 1px solid rgba(66, 31, 19, 0.15);
	border-radius: var(--wp--custom--radius--pill, 50px);
	font-family: inherit;
	padding: 0.75rem 1.25rem;
}

/* ---------------------------------------------------------------------------
 * 3. Breadcrumb, single product, cart, checkout
 * ------------------------------------------------------------------------- */

.thesouke-breadcrumb {
	color: var(--wp--preset--color--neutral-500);
	font-size: var(--wp--preset--font-size--small);
	margin-block-end: 2rem;
}

.thesouke-breadcrumb__sep {
	margin-inline: 0.5rem;
	opacity: 0.6;
}

/*
 * Single-product, cart and shop-archive composition lives in shop.css, which
 * is loaded after this file on those screens.
 */

/* Every WooCommerce button inherits the design's primary pill. */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--pill, 50px);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--clash-display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1;
	padding: 1rem 1.5rem;
	transition: background-color var(--thesouke-transition);
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--wp--preset--color--primary-600);
	color: var(--wp--preset--color--base);
}

.woocommerce table.shop_table,
.woocommerce-checkout .woocommerce-checkout-review-order-table {
	background: var(--wp--preset--color--base);
	border: 0;
	border-radius: var(--wp--custom--radius--card, 24px);
	border-collapse: separate;
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-top-color: rgba(66, 31, 19, 0.08);
	padding: 1.25rem 1rem;
}

.woocommerce-checkout .woocommerce form .form-row input.input-text,
.woocommerce-checkout .woocommerce form .form-row textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	background: var(--wp--preset--color--base);
	border: 1px solid rgba(66, 31, 19, 0.15);
	border-radius: 14px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.875rem 1.125rem;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--wp--preset--color--base);
	border-radius: 16px;
	border-top-color: var(--wp--preset--color--primary);
}

.woocommerce-message {
	border-top-color: var(--wp--preset--color--success);
}

.woocommerce-error {
	border-top-color: var(--wp--preset--color--danger);
}

/* Block cart & checkout */
.wp-block-woocommerce-cart .wc-block-components-button,
.wp-block-woocommerce-checkout .wc-block-components-button {
	border-radius: var(--wp--custom--radius--pill, 50px);
	font-family: var(--wp--preset--font-family--clash-display);
	font-weight: 500;
}

.wp-block-woocommerce-cart .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-text-input input {
	border-radius: 14px;
}

.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-cart__sidebar .wc-block-components-panel {
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--card, 24px);
}