/*
 * WooCommerce styling.
 *
 * theme.json owns the design tokens; this sheet applies them to the markup
 * theme.json cannot reach — WooCommerce's class-based classic templates, the
 * wc-blocks components, and the third-party extension output that hangs off
 * both. Everything below reads from the theme.json custom properties, so the
 * dark style variation carries through without a second stylesheet.
 */

/* --- Shared tokens ------------------------------------------------------ */

.woocommerce,
.wc-block-components-notice-banner,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	--es-radius: 8px;
	--es-rule: var(--wp--preset--color--base-3);
	--es-muted: var(--wp--preset--color--contrast-2);
}

/* --- Notices ------------------------------------------------------------ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--base-3);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--es-radius);
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	list-style: none;
}

.woocommerce-error {
	border-left-color: var(--wp--preset--color--accent-3);
}

/*
 * WooCommerce pins its own notice icon with `position: absolute; left: 1.5em`,
 * sized for the 3.5em left padding its stylesheet gives the notice. The rule
 * above re-pads the notice evenly and lays it out as a flex row, which leaves
 * that icon out of the flow and sitting on top of the first words of the
 * message. Letting it be the first flex item instead is what the `gap` is
 * already there for.
 *
 * The `::after` is core's clearfix for a float layout this one does not use.
 * Left alone it becomes an empty flex item at the end of the row, taking a
 * `gap` of its own after the text.
 */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before {
	position: static;
	flex: 0 0 auto;
}

.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after,
.woocommerce-noreviews::after {
	display: none;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-left: auto;
}

.woocommerce-error li {
	margin: 0;
}

/* --- Buttons ------------------------------------------------------------ */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
a.button,
button.button {
	display: inline-block;
	padding: 0.7em 1.4em;
	border: 1px solid transparent;
	border-radius: 6px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 120ms ease;
}

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

.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background: var(--wp--preset--color--contrast);
}

.woocommerce .button:disabled,
.woocommerce .button.disabled,
.woocommerce button.button:disabled[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* --- Prices ------------------------------------------------------------- */

.woocommerce .price,
.woocommerce-Price-amount,
.wc-block-components-product-price {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.woocommerce .price del,
.wc-block-components-product-price del {
	margin-right: 0.4em;
	opacity: 0.6;
	font-weight: 400;
}

.woocommerce .price ins,
.wc-block-components-product-price ins {
	background: none;
	color: var(--wp--preset--color--accent-3);
	text-decoration: none;
}

/* Extensions that render a price breakdown (Dynamic Pricing tables, bulk
   variation grids) put a lot of numbers on screen; keep them aligned. */
.woocommerce table td .amount,
.woocommerce table th .amount {
	font-variant-numeric: tabular-nums;
}

/* --- Product loop (classic templates) ----------------------------------- */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--40);
	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;
	gap: 0.35rem;
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	text-align: left;
}

.woocommerce ul.products li.product a img {
	display: block;
	width: 100%;
	margin: 0 0 0.6rem;
	border-radius: var(--es-radius);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--wp--preset--color--base-2);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.35;
}

.woocommerce ul.products li.product .price {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce ul.products li.product .button {
	align-self: flex-start;
	margin-top: 0.35rem;
}

.woocommerce span.onsale {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 2;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 0.2em 0.6em;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-3);
	color: #fff;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.02em;
}

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

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	margin-bottom: var(--wp--preset--spacing--30);
	color: var(--es-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* --- Single product (classic templates) --------------------------------- */

/* Only the classic template puts .images and .summary directly inside
   div.product. The blockified template reuses the same div.product wrapper
   around a completely different block tree, and forcing a two-column grid onto
   that squeezes the summary to about one character wide. :has() keeps this
   rule on the layout it was written for. */
.woocommerce div.product:has(> div.images):has(> div.summary) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 782px) {
	.woocommerce div.product:has(> div.images):has(> div.summary) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}

	.woocommerce div.product:has(> div.images):has(> div.summary) > .woocommerce-tabs,
	.woocommerce div.product:has(> div.images):has(> div.summary) > .related,
	.woocommerce div.product:has(> div.images):has(> div.summary) > .upsells,
	.woocommerce div.product:has(> div.images):has(> div.summary) > .up-sells {
		grid-column: 1 / -1;
	}
}

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

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

.woocommerce div.product .product_title {
	margin-top: 0;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--es-muted);
}

.woocommerce div.product .product_meta {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--es-rule);
	color: var(--es-muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.woocommerce div.product form.cart {
	margin: var(--wp--preset--spacing--30) 0;
}

.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after {
	content: none;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0 0 0.5rem;
	border-bottom: 1px solid var(--es-rule);
	list-style: none;
}

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

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

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.4em 0.85em;
	border-radius: 6px;
	color: var(--es-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent);
}

/* --- Quantity and variation controls ------------------------------------ */

.woocommerce .quantity input.qty {
	width: 4.5rem;
	padding: 0.5em;
	border: 1px solid var(--es-rule);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	text-align: center;
}

.woocommerce table.variations {
	width: 100%;
	margin-bottom: var(--wp--preset--spacing--20);
	border: 0;
}

.woocommerce table.variations th,
.woocommerce table.variations td {
	padding: 0.35rem 0 !important;
	border: 0 !important;
	background: none !important;
	/* Top, not middle: Variation Swatches leaves the hidden <select>'s height in
	   the value cell, so a middle-aligned label floats well below its swatches. */
	vertical-align: top;
}

.woocommerce table.variations th.label {
	width: 1%;
	padding-right: var(--wp--preset--spacing--20) !important;
	color: var(--es-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	white-space: nowrap;
}

/* WooCommerce's block-theme sheet pins these to height: 3em with 0.9em padding,
   which leaves a 16px content box -- less than our 1.5 line-height needs, so the
   option text is clipped. Let the select size itself from its own content. */
.woocommerce table.variations tr td select {
	height: auto;
}

.woocommerce .woocommerce-variation-price {
	margin: var(--wp--preset--spacing--10) 0;
}

/* --- Forms -------------------------------------------------------------- */

.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: 0;
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
	color: var(--es-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce select,
.woocommerce textarea {
	width: 100%;
	padding: 0.55em 0.7em;
	border: 1px solid var(--es-rule);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent);
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--es-rule);
	border-radius: var(--es-radius);
	background: var(--wp--preset--color--base-2);
}

/* Gravity Forms Product Add-ons renders GF markup inside the add-to-cart
   form; give it the same field treatment so a broken add-on is obvious. */
.woocommerce div.product .gform_wrapper .gfield {
	margin-bottom: var(--wp--preset--spacing--20);
}

.woocommerce div.product .gform_wrapper input[type="text"],
.woocommerce div.product .gform_wrapper input[type="number"],
.woocommerce div.product .gform_wrapper select,
.woocommerce div.product .gform_wrapper textarea {
	padding: 0.55em 0.7em;
	border: 1px solid var(--es-rule);
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--small);
}

.woocommerce div.product .gform_wrapper .gfield_label {
	color: var(--es-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* --- Tables (cart, checkout review, order details) ---------------------- */

.woocommerce table.shop_table {
	width: 100%;
	margin: 0 0 var(--wp--preset--spacing--30);
	border: 1px solid var(--es-rule);
	border-collapse: collapse;
	border-radius: var(--es-radius);
	font-size: var(--wp--preset--font-size--small);
	overflow: hidden;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 0.7rem 0.85rem;
	border-top: 1px solid var(--es-rule);
	border-left: 0;
	border-right: 0;
	text-align: left;
	vertical-align: middle;
}

.woocommerce table.shop_table thead th {
	border-top: 0;
	background: var(--wp--preset--color--base-2);
	color: var(--es-muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.woocommerce table.shop_table td.product-thumbnail img {
	width: 48px;
	height: 48px;
	border-radius: 6px;
	object-fit: cover;
}

.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table .order-total th,
.woocommerce table.shop_table .order-total td {
	font-weight: 700;
}

/* Cart / checkout item meta (variation attributes, add-on fields).

   WooCommerce lays this out by floating the dt left and leaving the dd in
   normal flow. That only ever lines up the FIRST pair: from the second row on,
   `clear: both` drops the dt below the preceding dd, and the dd's paragraph --
   a block box -- starts on the line after its own label. Measured on an
   eight-row add-on product: row 1 inline, rows 2-8 with the value 15px below
   its label.

   Grid sidesteps it rather than fighting it. `float` does not apply to grid
   items, so putting the dl in a grid neutralises WooCommerce's dt rule without
   having to out-specify it -- which matters, because its selector is scoped to
   `td.product-name` and ours is not. */
.woocommerce dl.variation {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 0.4em;
	row-gap: 0.15em;
	margin: 0.4rem 0 0;
}

.woocommerce dl.variation dt {
	margin: 0;
	font-weight: 700;
}

.woocommerce dl.variation dd {
	margin: 0;
}

/* The value is wrapped in a <p> by wc_get_formatted_cart_item_data(). */
.woocommerce dl.variation dd p {
	margin: 0;
}

/* Order details / order confirmation item meta.

   Different markup for the same information: `ul.wc-item-meta > li` holding a
   <strong> label and the value, where the cart uses dl/dt/dd. WooCommerce
   floats the label here too, but on this structure it happens to work -- each
   row is its own <li>, so the value flows beside its own label. What is off is
   spacing: the value's <p> carries block margins that push the rows apart, and
   the values start at a different x on every row.

   Same grid treatment as the cart, so the two read alike. `float` does not
   apply to grid items, so the label rule is neutralised without out-specifying
   it. The label margin does need out-specifying: WooCommerce's selector is
   scoped to `td.product-name`, so match that shape -- this stylesheet is
   enqueued after woocommerce.css and wins on source order. */
.wc-item-meta {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 0.4em;
	row-gap: 0.15em;
	margin: 0.4rem 0 0;
	padding: 0;
	list-style: none outside;
}

/* The columns live on the <ul> so every row's value starts at the same x, the
   way the cart's single <dl> does. Each <li> borrows them with subgrid rather
   than sizing its own -- a per-<li> grid aligns nothing across rows. Where
   subgrid is unsupported the declaration is dropped and the <li> falls back to
   its own two-column grid: still label-then-value inline, just not aligned. */
.wc-item-meta li {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
	margin: 0;
}

.woocommerce td.product-name .wc-item-meta .wc-item-meta-label,
.wc-item-meta .wc-item-meta-label {
	margin: 0;
	font-weight: 700;
}

.wc-item-meta li > p {
	margin: 0;
}

.woocommerce .cart_totals,
.woocommerce .cross-sells {
	margin-top: var(--wp--preset--spacing--30);
}

.woocommerce .cart-collaterals {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 782px) {
	.woocommerce .cart-collaterals {
		grid-template-columns: 1fr 1fr;
	}
}

.woocommerce .cart-collaterals > * {
	width: auto !important;
	float: none !important;
}

/* --- Checkout layout ---------------------------------------------------- */

@media (min-width: 900px) {
	.woocommerce .checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
		gap: var(--wp--preset--spacing--50);
		align-items: start;
	}

	.woocommerce .checkout.woocommerce-checkout > #customer_details {
		grid-column: 1;
	}

	.woocommerce .checkout.woocommerce-checkout > h3#order_review_heading,
	.woocommerce .checkout.woocommerce-checkout > #order_review {
		grid-column: 2;
	}

	.woocommerce .checkout.woocommerce-checkout .col2-set .col-1,
	.woocommerce .checkout.woocommerce-checkout .col2-set .col-2 {
		width: auto;
		float: none;
	}
}

.woocommerce #payment {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--es-rule);
	border-radius: var(--es-radius);
	background: var(--wp--preset--color--base-2);
}

.woocommerce #payment ul.payment_methods {
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce #payment div.form-row.place-order {
	padding: 0;
}

/* --- My account --------------------------------------------------------- */

@media (min-width: 782px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		width: 22%;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		width: 74%;
	}
}

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

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.45rem 0.6rem;
	border-radius: 6px;
	color: var(--es-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent);
}

/* --- wc-blocks ---------------------------------------------------------- */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-components-form,
.wc-block-grid {
	--wc-blue: var(--wp--preset--color--accent);
	--wc-green: var(--wp--preset--color--accent);
	--wc-red: var(--wp--preset--color--accent-3);
	font-size: var(--wp--preset--font-size--small);
}

.wc-block-components-title,
.wp-block-woocommerce-cart h2,
.wp-block-woocommerce-checkout h2 {
	font-weight: 650;
	letter-spacing: -0.015em;
}

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select {
	border: 1px solid var(--wp--preset--color--base-3);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.wc-block-components-button:not(.is-link) {
	border-radius: 6px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-weight: 600;
}

.wc-block-components-button:not(.is-link):hover {
	background: var(--wp--preset--color--contrast);
}

.wc-block-components-notice-banner {
	border-radius: var(--es-radius);
}

.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	border-radius: var(--es-radius);
}

/* WooCommerce emits an inline <style> of its own for the product grid:
     .wc-block-product-template__responsive.columns-3 {
         grid-template-columns: repeat(auto-fill, minmax(max(150px, 33.3333% - 0.83333em), 1fr));
     }
   That percentage minimum is a share of the container, so at this theme's
   1200px wideSize it can only ever fit two 588px columns however many the
   block asked for. Three classes outrank WooCommerce's two, which beats it on
   specificity without reaching for !important. */
.wp-block-woocommerce-product-template.wc-block-product-template.wc-block-product-template__responsive,
.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-block-product-template > li.wc-block-product {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

.wc-block-product-template img,
.wc-block-components-product-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--es-radius);
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--wp--preset--color--base-2);
}

.wc-block-product-template .wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.35;
}

.wc-block-product-template .wp-block-woocommerce-product-price {
	font-size: var(--wp--preset--font-size--small);
}

.wc-block-product-template .wp-block-woocommerce-product-button {
	margin-top: 0.35rem;
}

/* The single-product gallery has the same unconstrained-image problem. */
.wp-block-woocommerce-product-image-gallery img,
.wc-block-components-product-image-gallery img {
	border-radius: var(--es-radius);
}