/*
 * WooCommerce, on the theme's own grid.
 *
 * inc/woocommerce.php removes woocommerce-layout.css and woocommerce-smallscreen
 * .css before this file loads. That stylesheet is written for floats, and it
 * outranks a two-class grid rule — which is why the grid here can be gap:0 with
 * no card, border or line between products: every product photograph was graded
 * to --ve-ground and the card paints that same ground, so the seam is invisible.
 */

/*
 * WooCommerce opens this wrapper on product pages too, where no head is printed
 * and the section rhythm is the only thing keeping the content off the header
 * bar — hence the padding here, and the zeroed top on the modifier below.
 */
.ve-shop {
	padding-block: var(--ve-section-sm);
}

/*
 * The shop and product-category pages hand the top of the page to the head.
 * Without this the two add up: 72px of section rhythm plus the head's own 32px
 * put the title 104px under the header bar on a 1440 screen, roughly twice what
 * every other template shows. One owner for the top of the page: the head. The
 * bottom keeps the section rhythm.
 */
.ve-shop--head {
	padding-block: 0 var(--ve-section-sm);
}

/*
 * woocommerce-general.css is deliberately still loaded — it carries the form,
 * table and notice rules that are tedious to reimplement — but it also ships the
 * plugin's own brand colours: .price in green (#77a464) and every .button in
 * purple (#a46497). Each rule below that has to beat it is therefore written
 * with the same `.woocommerce` prefix and wins on load order, rather than
 * reaching for !important.
 */

.ve-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	margin-bottom: 40px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ve-line);
}

/*
 * WooCommerce prints an empty notices wrapper as the first child of the loop
 * header. It has no width and no content, but it is still a flex item, so the
 * row's 16px gap lands behind it and indents the result count — which is how the
 * count ended up 16px right of the title above it while every other block on the
 * page sat on the same left edge. Empty means nothing to show, so it should not
 * be a flex item at all. It still occupies its place as soon as it has a notice
 * in it, which is the case this rule has to leave alone.
 */
.ve-shop__toolbar > .woocommerce-notices-wrapper:empty {
	display: none;
}

.ve-shop__toolbar .woocommerce-ordering {
	margin-inline-start: auto;
}

.ve-shop__toolbar .woocommerce-result-count,
.ve-shop__toolbar .woocommerce-ordering {
	margin: 0;
	float: none;
}

.ve-shop__toolbar .woocommerce-result-count {
	color: var(--ve-muted);
	font-size: 0.6875rem;
	letter-spacing: var(--ve-track);
	text-transform: uppercase;
}

.ve-shop__toolbar .woocommerce-ordering select {
	padding: 8px 12px;
	background: transparent;
	border: 1px solid var(--ve-line);
	border-radius: 0;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* WooCommerce prints its own bare ul.products; the theme's grid takes over. */
ul.products {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

/*
 * WooCommerce's own clearfix — `ul.products::before, ::after { content: " ";
 * display: table }` — is a leftover from its float layout, and in a grid
 * container a pseudo-element is a grid item like any other. With it in place the
 * empty ::before takes row 1 column 1 and every product shifts one cell along,
 * so the whole catalogue starts one column in and the first row ends short.
 */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
	display: none;
}

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

ul.products li.product .button,
ul.products li.product .added_to_cart,
.woocommerce ul.products li.product .button,
.woocommerce .ve-card__actions .button {
	display: inline-block;
	padding: 10px 20px;
	background: var(--ve-ink);
	border: 1px solid var(--ve-ink);
	border-radius: 0;
	color: var(--ve-bg);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}

ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce .ve-card__actions .button:hover {
	background: transparent;
	color: var(--ve-ink);
}

ul.products li.product .added_to_cart {
	margin-inline-start: 8px;
	background: transparent;
	border-color: var(--ve-line);
	color: var(--ve-muted);
}

/*
 * The price, in the theme's muted grey rather than the plugin's green. The
 * markup varies with the version (a bare amount, or ins/del for a sale), so
 * both the wrapper and the amount are pinned.
 */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce .ve-card__price,
.woocommerce .ve-card__price .amount,
.woocommerce-Price-amount.amount {
	color: var(--ve-muted);
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins,
.woocommerce ul.products li.product .price ins {
	background: none;
	color: var(--ve-ink);
	font-weight: inherit;
	text-decoration: none;
}

.woocommerce div.product p.price del,
.woocommerce ul.products li.product .price del {
	opacity: 0.55;
}

/* Single product ----------------------------------------------------------- */

.single-product .ve-wrap {
	padding-block: var(--ve-section-sm);
}

.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(24px, 5vw, 80px);
	align-items: start;
}

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

.single-product .woocommerce-product-gallery__wrapper {
	background: var(--ve-ground);
}

.single-product .woocommerce-product-gallery__image img {
	width: 100%;
}

.summary .product_title {
	margin-bottom: 0.3em;
	font-size: clamp(1.75rem, 3vw, 2.75rem);
}

.summary .price {
	display: block;
	margin-bottom: 1.2em;
	color: var(--ve-muted);
	font-size: 1.125rem;
}

.summary .woocommerce-product-details__short-description {
	max-width: 46ch;
}

.single-product .quantity input {
	width: 84px;
	padding: 12px 14px;
	background: transparent;
	border: 1px solid var(--ve-line);
	border-radius: 0;
}

.single-product .single_add_to_cart_button,
.woocommerce div.product form.cart .button {
	padding: 15px 32px;
	background: var(--ve-ink);
	border: 1px solid var(--ve-ink);
	border-radius: 0;
	color: var(--ve-bg);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--ve-track);
	text-transform: uppercase;
}

.single-product .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .button:hover {
	background: transparent;
	color: var(--ve-ink);
}

.ve-trust {
	display: grid;
	gap: 10px;
	margin: 2rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--ve-line);
	list-style: none;
}

.ve-trust li {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--ve-muted);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
}

.woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: var(--ve-section-sm);
}

/* WooCommerce styles the tab row as rounded grey pills on a hairline rail.
   Both are neutralised here so the tabs read as plain labels on a rule. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin: 0 0 28px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--ve-line);
	list-style: none;
}

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

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

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

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 0;
	color: var(--ve-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--ve-track);
	text-transform: uppercase;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--ve-ink);
}

.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0;
	padding: 0;
}

.related.products,
.upsells.products {
	grid-column: 1 / -1;
	margin-top: var(--ve-section);
}

/* Cart, checkout, account -------------------------------------------------- */

.woocommerce-cart .ve-wrap,
.woocommerce-checkout .ve-wrap,
.woocommerce-account .ve-wrap {
	padding-block: var(--ve-section-sm);
}

/*
 * Cart and checkout ship as WooCommerce's block templates on a current install,
 * not as the classic shortcode ones, so none of the rules above reach them. The
 * blocks lay themselves out to the theme's contentSize (720px) and then sit
 * left-aligned inside a 1560px container, which leaves half the page empty and
 * squeezes the cart table into a column. Letting the block and its sidebar
 * layout take the full width fixes both.
 */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide,
.wc-block-components-sidebar-layout {
	max-width: none;
	width: 100%;
}

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--ve-line);
	border-radius: 0;
}

.woocommerce table.shop_table th {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--ve-track);
	text-transform: uppercase;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 16px;
	border-bottom: 1px solid var(--ve-line);
	text-align: start;
}

.woocommerce .cart_totals,
.woocommerce-checkout-review-order {
	padding: 28px;
	background: var(--ve-ground);
}

.woocommerce-checkout .col2-set {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	padding: 14px 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ve-line);
	border-radius: 0;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 28px;
	padding: 18px 22px;
	background: var(--ve-ground);
	border-top: 2px solid var(--ve-ink);
	list-style: none;
}

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	padding: 13px 26px;
	background: var(--ve-ink);
	border: 1px solid var(--ve-ink);
	border-radius: 0;
	color: var(--ve-bg);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--ve-track);
	text-transform: uppercase;
	text-decoration: none;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: transparent;
	color: var(--ve-ink);
}

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	gap: 10px;
	border: 0;
	list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-block;
	min-width: 40px;
	padding: 10px 12px;
	border: 1px solid var(--ve-line);
	text-align: center;
}

@media (max-width: 900px) {
	.single-product div.product {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.woocommerce-checkout .col2-set {
		grid-template-columns: 1fr;
	}
}