/**
 * FLUXX — WooCommerce surfaces.
 *
 * Loaded last so it wins without !important. WooCommerce's own stylesheets are
 * dequeued in inc/woocommerce/setup.php, so this is styling from scratch rather
 * than overriding defaults.
 */

/* ------------------------------------------------------ catalogue header */

.fx-catalogue-head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-block: 16px 12px;
}

.fx-catalogue-head__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.fx-catalogue-head__count {
	color: var(--fx-text-muted);
}

/*
 * The sort control.
 *
 * A native select inherits the operating system's chrome — rounded, grey,
 * system font — which is the one element on the page that would not belong.
 * Stripped back to a square field with our own chevron.
 */
.woocommerce-ordering {
	position: relative;
	margin: 0;
}

.woocommerce-ordering select,
.fx-catalogue-head select {
	appearance: none;
	-webkit-appearance: none;
	height: var(--fx-control-sm);
	padding-inline: 14px 34px;
	border: 1px solid var(--fx-border-control);
	border-radius: var(--fx-radius-none);
	background: var(--fx-paper);
	font-size: 12px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--fx-tracking-nav);
	cursor: pointer;
	/* The chevron, inline so it needs no extra request and inherits no colour. */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%230B0B0B' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.5 11.25 7.5 7.5 7.5-7.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 14px 14px;
}

.woocommerce-ordering select:hover {
	border-color: var(--fx-ink);
}

/* The catalogue header stacks on a phone so the sort is not crushed. */
@media (max-width: 480px) {
	.fx-catalogue-head__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.woocommerce-ordering select {
		width: 100%;
	}
}

/* ------------------------------------------------------------- the loop */

ul.products,
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--fx-grid-gap-x);
	row-gap: var(--fx-grid-gap-y);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

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

ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	width: auto;
	float: none;
	/* Rows size to the tallest card; each card sits at the top of its own. */
	align-self: start;
}

/*
 * The card is the whole grid cell.
 *
 * WooCommerce's loop emits the card's pieces directly into the <li>, so the
 * card styles have to apply to the <li> rather than to a wrapper inside it.
 */
/*
 * The frame the overlays anchor to. Everything laid over the photograph —
 * badges, the wishlist heart, quick-add — positions against this rather than
 * against the card, so "bottom" means the bottom of the image and not the
 * bottom of the price.
 */
ul.products li.product .fx-card__frame {
	position: relative;
	display: block;
}

ul.products li.product .fx-card__media {
	display: block;
	position: relative;
	aspect-ratio: var(--fx-product-ratio);
	background: var(--fx-media-ground);
	overflow: hidden;
}

ul.products li.product .fx-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

ul.products li.product .fx-card__img--alt {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--fx-dur-exit) var(--fx-ease);
}

@media (hover: hover) {
	ul.products li.product:hover .fx-card__img--alt {
		opacity: 1;
	}
}

ul.products li.product .fx-card__badges {
	position: absolute;
	top: 8px;
	inset-inline-start: 8px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	pointer-events: none;
	z-index: 1;
}

ul.products li.product .fx-card__wishlist {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--fx-ink);
}

ul.products li.product .fx-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px 2px 20px;
}

ul.products li.product .fx-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

ul.products li.product .fx-card__colours {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 2px;
}

/* WooCommerce ships float-based column classes; the grid above supersedes them. */
ul.products li.product.first,
ul.products li.product.last {
	clear: none;
}

/* --------------------------------------------------------------- pricing */

.price {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 12px;
}

.price del {
	text-decoration: line-through;
	font-weight: var(--fx-weight-light);
	opacity: 1;
	color: var(--fx-text);
}

.price ins {
	text-decoration: none;
	font-weight: var(--fx-weight-bold);
}

.price ins.is-discounted,
.fx-price__now.is-discounted {
	color: var(--fx-sale-bg);
}

/* ------------------------------------------------------------- the stock */

.fx-stock--low {
	color: var(--fx-sale-bg);
	font-size: 12px;
	font-weight: var(--fx-weight-bold);
	margin: 0;
}

/* ------------------------------------------------------------ pagination */

.woocommerce-pagination ul,
.fx-pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
}

.woocommerce-pagination a,
.woocommerce-pagination span,
.fx-pagination a,
.fx-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--fx-control-sm);
	height: var(--fx-control-sm);
	padding-inline: 10px;
	border: 1px solid var(--fx-border-strong);
	font-size: 12px;
}

.woocommerce-pagination .current,
.fx-pagination .current {
	background: var(--fx-ink);
	border-color: var(--fx-ink);
	color: var(--fx-text-on-dark);
}

/* --------------------------------------------------------------- notices */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 20px;
	padding: 12px 14px;
	background: var(--fx-sand);
	list-style: none;
	font-size: 12px;
}

.woocommerce-error {
	background: #FBECEC;
}

.woocommerce-message {
	background: #E8F3EC;
}

/* ------------------------------------------------- cart and checkout blocks */
/*
 * The Cart and Checkout blocks bring their own stylesheet, which we keep. These
 * are the few places their defaults clash with the design: rounded corners and
 * a blue-ish button that belong to the block library, not to this brand.
 */

/*
 * The blocks bring no page gutter of their own, so on a bare template their
 * fields run flush to the viewport edge. page.php renders cart and checkout
 * full-bleed precisely so the block controls its own width — this puts the
 * gutter back without constraining the two-column layout.
 */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	--wp--preset--color--primary: var(--fx-ink);
	font-family: var(--fx-font);
	max-width: var(--fx-page-max);
	margin-inline: auto;
	padding-inline: var(--fx-gutter);
	padding-block: 8px 48px;
}

@media (min-width: 768px) {
	.wp-block-woocommerce-cart,
	.wp-block-woocommerce-checkout {
		padding-inline: var(--fx-gutter-md);
	}
}

/* Square every field in the block checkout, matching the design system. */
.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-text-input input[type="number"],
.wc-block-components-form .wc-blocks-components-select__container,
.wc-block-components-address-form input,
.wc-block-components-country-input input,
.wc-block-components-state-input input {
	border-radius: var(--fx-radius-none) !important;
	border-color: var(--fx-border-control) !important;
}

.wc-block-components-panel,
.wc-block-components-order-summary,
.wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wc-block-components-sidebar {
	border-radius: var(--fx-radius-none) !important;
}

/* Section headings match the theme's display voice rather than the block's. */
.wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title {
	font-family: var(--fx-font);
	font-weight: var(--fx-weight-light);
	text-transform: uppercase;
	letter-spacing: 0;
}

.wc-block-components-button:not(.is-link) {
	border-radius: var(--fx-radius-none) !important;
	background-color: var(--fx-ink) !important;
	color: var(--fx-text-on-dark) !important;
	font-weight: var(--fx-weight-bold);
	letter-spacing: var(--fx-tracking-cta);
	text-transform: uppercase;
	min-height: var(--fx-control-cta);
}

.wc-block-components-button:not(.is-link):hover {
	background-color: var(--fx-ink-hover) !important;
}

.wc-block-components-text-input input,
.wc-block-components-select__container,
.wc-block-components-textarea {
	border-radius: var(--fx-radius-none) !important;
}

.wc-block-components-product-name {
	font-weight: var(--fx-weight-bold);
	text-decoration: none;
}

/*
 * The empty-cart product grid pushes the page 8px wider than the viewport.
 *
 * Found by the screen walk: a consistent 8px horizontal overflow on /cart/ at
 * every width. The cause is `wc-block-grid__products`, which spaces its columns
 * with a negative inline margin (-8px a side) and relies on a parent that clips.
 * Ours does not clip, so the negative margin escapes and the whole document
 * gains a horizontal scrollbar — the classic "why does my phone scroll
 * sideways" bug.
 *
 * Fixed at the cause rather than hidden with overflow, so the grid keeps its
 * intended gutter instead of losing 8px off its first and last columns.
 */
.wc-block-grid__products {
	margin-inline: 0;
	column-gap: var(--fx-grid-gap-x);
}

.wc-block-grid__product {
	margin-inline: 0;
}

/* ------------------------------------------------------------- my account */

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.woocommerce-MyAccount-navigation a {
	display: inline-flex;
	align-items: center;
	height: var(--fx-control-sm);
	padding-inline: 14px;
	border: 1px solid var(--fx-border-strong);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: var(--fx-tracking-nav);
}

.woocommerce-MyAccount-navigation .is-active a {
	background: var(--fx-ink);
	border-color: var(--fx-ink);
	color: var(--fx-text-on-dark);
}

/*
 * The dashboard's nav-plus-content split, for SIGNED-IN customers only.
 *
 * Without the `.logged-in` guard this also applies to the logged-out screen,
 * where the only child is the login/register wrapper — which then gets squeezed
 * into the 220px navigation column and renders as two 82px slivers.
 */
@media (min-width: 1024px) {
	.woocommerce-account.logged-in .woocommerce {
		display: grid;
		grid-template-columns: 220px minmax(0, 1fr);
		gap: 40px;
		align-items: start;
	}

	.woocommerce-account.logged-in .woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		margin-bottom: 0;
	}
}

/* ---------------------------------------------------------------- tables */

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

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

.woocommerce table.shop_table th {
	font-weight: var(--fx-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--fx-tracking-nav);
	font-size: 11px;
}

/* A table is the wrong shape for a phone. Stack it into rows instead. */
@media (max-width: 600px) {
	.woocommerce table.shop_table thead {
		display: none;
	}

	.woocommerce table.shop_table tr {
		display: block;
		border-bottom: 1px solid var(--fx-border);
		padding-block: 8px;
	}

	.woocommerce table.shop_table td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		border: 0;
		padding: 4px 0;
	}

	.woocommerce table.shop_table td::before {
		content: attr(data-title);
		font-weight: var(--fx-weight-bold);
		text-transform: uppercase;
		font-size: 11px;
		letter-spacing: var(--fx-tracking-nav);
	}
}

/* ------------------------------------------------------- the search form */

.fx-search__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	height: var(--fx-control-lg);
	padding-inline: 14px;
	border: 1px solid var(--fx-border-control);
	background: var(--fx-paper);
}

.fx-search__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	font-size: 14px;
	outline: none;
}

.fx-search__input::placeholder {
	color: rgba(11, 11, 11, .6);
}

.fx-search__submit {
	display: inline-flex;
	align-items: center;
	color: var(--fx-ink);
}

/* --------------------------------------------------------- breadcrumbs */

.fx-breadcrumbs {
	font-size: 11px;
	color: var(--fx-text-muted);
	margin-bottom: 8px;
}

.fx-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fx-breadcrumbs__list li:not(:last-child)::after {
	content: "/";
	margin-inline-start: 6px;
	opacity: .5;
}

/* ------------------------------------------------------------ page heads */

.fx-page-head {
	margin-bottom: 24px;
}

.fx-prose {
	max-width: 72ch;
	line-height: 1.65;
}

.fx-prose > * + * {
	margin-top: 1em;
}

/* ----------------------------------------------------------------- 404 */

.fx-404 {
	max-width: 640px;
}

.fx-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-block: 24px;
}

.fx-404__search {
	margin-block: 32px;
}

.fx-404__picks {
	margin-top: 40px;
}

.fx-404__picks .fx-grid {
	margin-top: 16px;
}