/*
 * Toga storefront consistency pass.
 *
 * Structural/spacing/typography consistency for shared WooCommerce
 * surfaces (notices, My Account navigation and orders table, the Toga
 * return-request card) that brand.css deliberately leaves untouched (its
 * own header comment scopes it to "colors and type only" on specific
 * block-package elements). Semantic status colors (WooCommerce's own
 * success/error/info notice colors) are intentionally left as-is, for the
 * same legibility reason brand.css already states for Dokan's status
 * colors — this file only makes their shape/spacing/type consistent with
 * the rest of the design system, not their meaning-bearing color.
 */

/* -------------------------------------------------------------------- */
/* Auth brand lockup — compact script wordmark, shared with the header.   */
/* -------------------------------------------------------------------- */

.toga-auth-brand {
	display: flex;
	justify-content: center;
	margin: 0 0 1.5rem;
}

.toga-auth-brand__link {
	display: inline-flex;
	line-height: 0;
}

.toga-auth-brand__wordmark {
	display: block;
	width: auto;
	height: 46px;
	max-width: 112px;
	object-fit: contain;
}

/* -------------------------------------------------------------------- */
/* WooCommerce notices — consistent card shape, not color                */
/* -------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	font-family: var(--wp--preset--font-family--inter);
	border-radius: 4px;
	padding: 1em 1.5em;
	list-style: none;
	border-left-width: 4px;
	border-left-style: solid;
}

.woocommerce-error li,
.woocommerce-info li {
	margin: 0;
}

/* -------------------------------------------------------------------- */
/* Seller onboarding form (Dokan [dokan-vendor-registration]) — spacing  */
/* and full-width fields only; markup and JS untouched so Dokan's shop-  */
/* URL availability check and validation keep working.                   */
/* -------------------------------------------------------------------- */

.dokan-vendor-register {
	max-width: 34rem;
}

.dokan-vendor-register .form-group {
	margin-bottom: 1.25rem;
}

.dokan-vendor-register label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 500;
}

.dokan-vendor-register .form-control {
	display: block;
	width: 100%;
	padding: 0.6em 0.75em;
	font-family: var(--wp--preset--font-family--inter);
	border: 1px solid color-mix(in srgb, var(--toga-ink) 25%, transparent);
	border-radius: 4px;
	background-color: #fff;
}

.dokan-vendor-register .split-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
}

.dokan-vendor-register .split-row .form-group {
	flex: 1 1 180px;
}

.dokan-vendor-register .dokan-vendor-register-button,
.dokan-vendor-register input[type="submit"] {
	background-color: var(--toga-ink);
	border-color: var(--toga-ink);
	color: var(--toga-paper);
	border-radius: 999px;
	padding: 0.6em 1.75em;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 500;
	cursor: pointer;
}

/* -------------------------------------------------------------------- */
/* Toga return-request card (customer order-view + My Account context)   */
/* -------------------------------------------------------------------- */

.toga-return-request {
	background-color: var(--toga-paper);
	border: 1px solid color-mix(in srgb, var(--toga-ink) 15%, transparent);
	border-radius: 6px;
	padding: 1.5em;
	margin-top: 1.5em;
	font-family: var(--wp--preset--font-family--inter);
}

.toga-return-request h2 {
	margin-top: 0;
}

.toga-return-request textarea,
.toga-return-request input[type="file"] {
	width: 100%;
	max-width: 32rem;
	font-family: var(--wp--preset--font-family--inter);
	border: 1px solid color-mix(in srgb, var(--toga-ink) 25%, transparent);
	border-radius: 4px;
	padding: 0.5em;
}

/* -------------------------------------------------------------------- */
/* My Account — navigation + orders table                                */
/* -------------------------------------------------------------------- */

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

.woocommerce-account .woocommerce-MyAccount-navigation a {
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 500;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--toga-terracotta);
}

.woocommerce-account .woocommerce-orders-table__header span,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-family: var(--wp--preset--font-family--poppins);
}

/* -------------------------------------------------------------------- */
/* Keyboard focus — site-wide, brand.css has no focus-visible rules      */
/* -------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: var(--toga-focus-ring-width) solid var(--toga-focus-ring-color);
	outline-offset: var(--toga-focus-ring-offset);
}

/* -------------------------------------------------------------------- */
/* Shared section rhythm + honest empty states                          */
/* -------------------------------------------------------------------- */

.toga-section,
.toga-product-section {
	margin: 0 0 var(--wp--preset--spacing--60, 4rem);
}

.toga-section__heading {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
	margin: 0 0 1.5rem;
}

/*
 * The empty state is a real answer, not a spacer: it is styled to look
 * deliberate so a marketplace with no products yet reads as new rather than
 * broken. Nothing anywhere fills these gaps with invented sample data.
 */
.toga-empty-state {
	margin: 0;
	padding: 2rem 1.5rem;
	border: 1px dashed color-mix(in srgb, var(--toga-ink) 20%, transparent);
	border-radius: 8px;
	text-align: center;
	color: color-mix(in srgb, var(--toga-ink) 70%, transparent);
	font-family: var(--wp--preset--font-family--inter);
}

/* -------------------------------------------------------------------- */
/* Product grid                                                          */
/*                                                                       */
/* WooCommerce's own loop is a float/clear grid sized by inline          */
/* percentage widths, which is what produced the uneven columns and the  */
/* huge dead band on the shop page: one card whose image failed to load  */
/* grew taller than the row, and the floated cards after it could not    */
/* clear it consistently. Replacing the layout with CSS Grid at the list */
/* level fixes the row height, the column count and the alignment        */
/* together, without overriding a single WooCommerce template.           */
/* -------------------------------------------------------------------- */

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 1.5rem;
	margin: 0 0 3rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.woocommerce ul.products,
	ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Neutralise WooCommerce's float layout and its inline column widths. */
.woocommerce ul.products li.product,
ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	clear: none !important;
	display: flex;
	flex-direction: column;
	text-align: left;
}

/*
 * A lone product in an otherwise multi-column grid auto-places into the
 * grid's second column in current Chromium (reproduced directly: an
 * otherwise-identical 2-column grid with a single auto-placed child lands
 * in column 2, not column 1 — confirmed unrelated to any other rule on
 * this page). :only-child scopes the fix to exactly that single-item case,
 * so a normal multi-item grid is untouched.
 */
.woocommerce ul.products li.product:only-child,
ul.products li.product:only-child {
	grid-column: 1;
}

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

/*
 * One fixed portrait ratio for every card, whatever the source image is.
 * This is what keeps rows aligned and is also the reason a missing image can
 * no longer resize the grid — the box is sized by the container, never by the
 * image's own intrinsic dimensions.
 */
.woocommerce ul.products li.product a img,
ul.products li.product a img,
.woocommerce ul.products li.product img,
ul.products li.product img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--toga-ratio-card);
	object-fit: cover;
	margin: 0 0 0.85rem;
	border-radius: var(--toga-radius-card);
	background-color: color-mix(in srgb, var(--toga-ink) 4%, transparent);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--toga-ink);
	margin: 0 0 0.35rem;
	padding: 0;
}

.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
	text-decoration: underline;
}

/* Store attribution: the first thing scanned on a multi-brand marketplace,
   so it sits above the product name and reads quieter than it. */
.toga-product-card__store {
	margin: 0 0 0.15rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--toga-ink) 62%, transparent);
}

.toga-product-card__store a {
	color: inherit;
	text-decoration: none;
}

.toga-product-card__store a:hover,
.toga-product-card__store a:focus-visible {
	color: var(--toga-terracotta);
	text-decoration: underline;
}

.woocommerce ul.products li.product .price,
ul.products li.product .price {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	font-weight: 600;
	color: var(--toga-ink);
	margin: 0 0 0.85rem;
}

/* Push the action to the bottom so cards with a two-line title still align. */
.woocommerce ul.products li.product .button,
ul.products li.product .button {
	margin-top: auto;
	align-self: flex-start;
}

.woocommerce ul.products li.product .onsale,
ul.products li.product .onsale {
	position: absolute;
	margin: 0.6rem;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	font-size: 0.75rem;
	line-height: 1.6;
	min-height: 0;
	min-width: 0;
}

.woocommerce ul.products li.product {
	position: relative;
}

/* Out-of-stock — previously carried no Toga styling at all, so a sold-out
   product looked identical to an available one except for WooCommerce's
   own unstyled default text. Dims the image and gives the status its own
   quiet label rather than competing with the price. */
.woocommerce ul.products li.product.outofstock a img,
ul.products li.product.outofstock a img,
.wc-block-product-template li.wc-block-product.outofstock .wc-block-components-product-image img {
	opacity: 0.5;
}

.woocommerce ul.products li.product.outofstock .woocommerce-loop-product__title,
ul.products li.product.outofstock .woocommerce-loop-product__title,
.wc-block-product-template li.wc-block-product.outofstock .wp-block-post-title {
	color: var(--toga-ink-60);
}

.woocommerce span.stock.out-of-stock,
.wc-block-components-product-stock-indicator--out-of-stock {
	display: inline-block;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--toga-ink-60);
}

/* -------------------------------------------------------------------- */
/* Shop archive — category row + toolbar                                 */
/* (wp-content/themes/toga-child/templates/archive-product.html)         */
/* -------------------------------------------------------------------- */

.wp-block-query-title {
	color: var(--toga-ink);
}

.toga-shop-categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--toga-space-2);
	list-style: none;
	margin: 0 0 var(--toga-space-5);
	padding: 0;
}

.toga-shop-categories__link {
	display: inline-block;
	padding: 0.5em 1.25em;
	border: 1px solid var(--toga-border-strong);
	border-radius: var(--toga-radius-pill);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--toga-ink);
	text-decoration: none;
}

.toga-shop-categories__link:hover,
.toga-shop-categories__link:focus-visible {
	border-color: var(--toga-terracotta);
	color: var(--toga-terracotta);
}

.toga-archive-toolbar {
	align-items: center;
	margin: 0 0 var(--toga-space-6);
	padding-bottom: var(--toga-space-3);
	border-bottom: 1px solid var(--toga-border);
}

/* -------------------------------------------------------------------- */
/* Shop header — result count and the sort control                       */
/* -------------------------------------------------------------------- */

.woocommerce .woocommerce-result-count {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.9rem;
	color: color-mix(in srgb, var(--toga-ink) 65%, transparent);
	margin: 0;
}

.woocommerce .woocommerce-ordering {
	margin: 0;
}

.woocommerce .woocommerce-ordering select {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.9rem;
	padding: 0.5em 2.25em 0.5em 0.85em;
	border: 1px solid color-mix(in srgb, var(--toga-ink) 25%, transparent);
	border-radius: 999px;
	background-color: #fff;
	color: var(--toga-ink);
	cursor: pointer;
	/* Replaces the platform's default control chrome with one caret that
	   matches the rest of the design system. */
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 1.1em top 55%, right 0.85em top 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

/* WooCommerce emits the count and the sort control as two separate siblings
   before the loop; this pairs them on one row instead of leaving the count
   stranded above a right-floated select. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	display: inline-block;
	vertical-align: middle;
}

.woocommerce .woocommerce-ordering {
	float: right;
}

@media (max-width: 600px) {
	.woocommerce .woocommerce-ordering {
		float: none;
		display: block;
		margin-top: 1rem;
	}
}

/* -------------------------------------------------------------------- */
/* Product Collection block (the Shop archive)                           */
/*                                                                       */
/* The block theme renders the Shop archive with WooCommerce's Product   */
/* Collection block, not the classic `ul.products` loop above — so its   */
/* cards carry `wc-block-*` class names and default to centered text and */
/* three columns. These rules give those cards the same hierarchy as the */
/* classic loop (image, store, name, price, action — left aligned, four  */
/* up where space allows) using only WooCommerce's own block classes, so */
/* the shop and the homepage's `[toga_products]` grid read identically.  */
/* No template is overridden; a WooCommerce release that restructures    */
/* the block loses the Toga card styling, never the products.            */
/* -------------------------------------------------------------------- */

.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 1.5rem;
	margin: 0 0 3rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.wc-block-product-template {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* See the classic-loop :only-child rule above for why this exists. */
.wc-block-product-template li.wc-block-product:only-child {
	grid-column: 1;
}

.wc-block-product-template li.wc-block-product {
	display: flex;
	flex-direction: column;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left;
}

/* Reorder the block's flow children into the Toga card hierarchy. The
   image is always first; store attribution is pulled above the name. */
.wc-block-product-template .wc-block-components-product-image {
	order: 1;
	margin: 0 0 0.85rem;
}

.wc-block-product-template .toga-product-card__store {
	order: 2;
}

.wc-block-product-template .wp-block-post-title {
	order: 3;
}

.wc-block-product-template .wp-block-woocommerce-product-price {
	order: 4;
}

.wc-block-product-template .wp-block-woocommerce-product-button {
	order: 5;
	margin-top: auto;
}

/* Consistent image ratio, same as the classic loop. */
.wc-block-product-template .wc-block-components-product-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--toga-ratio-card);
	object-fit: cover;
	border-radius: var(--toga-radius-card);
	background-color: color-mix(in srgb, var(--toga-ink) 4%, transparent);
}

/* Left-align and de-emphasise the title link (the block centres it and
   colours it as a link; a product name is not a link accent). */
.wc-block-product-template .wp-block-post-title {
	text-align: left !important;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.35;
	margin: 0 0 0.35rem;
}

.wc-block-product-template .wp-block-post-title a {
	color: var(--toga-ink);
	text-decoration: none;
}

.wc-block-product-template .wp-block-post-title a:hover,
.wc-block-product-template .wp-block-post-title a:focus-visible {
	text-decoration: underline;
}

.wc-block-product-template .wp-block-woocommerce-product-price {
	text-align: left !important;
	font-weight: 600;
	color: var(--toga-ink);
	margin: 0 0 0.85rem !important;
}

.wc-block-product-template .wp-block-woocommerce-product-button .wp-block-button__link,
.wc-block-product-template .wp-block-woocommerce-product-button .wc-block-components-product-button__button {
	align-self: flex-start;
	border-radius: 999px;
}