/**
 * 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 ul.products.fx-404__grid {
	/* Two across at every width: the page is 640px wide, and four cards in it
	   would be thumbnails. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 16px;
}

/* -------------------------------------------------------- swipeable card */
/*
 * On a touch screen the card's media is a scroll-snap track: the photographs,
 * then a summary slide. On a pointer it is a single photograph with a hover
 * swap, so everything after the first slide is hidden there and never loads.
 */
ul.products li.product .fx-card__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
}

ul.products li.product .fx-card__track > * {
	scroll-snap-align: start;
	/* One slide per flick, so a quick swipe cannot skip past the summary. */
	scroll-snap-stop: always;
}

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

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

ul.products li.product .fx-card__slide {
	position: relative;
}

/* Position dashes under the photograph, one per slide. */
ul.products li.product .fx-card__dots {
	position: absolute;
	inset-inline: 0;
	bottom: 6px;
	display: flex;
	justify-content: center;
	gap: 3px;
	pointer-events: none;
}

.fx-card__dots span {
	width: 10px;
	height: 2px;
	background: rgba(11, 11, 11, .25);
	transition: background var(--fx-dur) var(--fx-ease), width var(--fx-dur) var(--fx-ease);
}

.fx-card__dots span.is-active {
	width: 16px;
	background: var(--fx-ink);
}

/* On the last photo the badges step aside for the Key Highlights heading. */
ul.products li.product .fx-card__frame.is-at-last .fx-card__badges {
	opacity: 0;
}

/* Quick-add sits above the dashes on a touch screen, where both show. */
@media (hover: none) {
	ul.products li.product .fx-card__frame:has(.fx-card__dots) .fx-card__quickadd {
		bottom: 16px;
	}
}

@media (hover: hover) {
	ul.products li.product .fx-card__track {
		overflow: hidden;
	}

	ul.products li.product .fx-card__slide,
	ul.products li.product .fx-card__dots {
		display: none;
	}
}

/* --------------------------------------------------------- Key Highlights */
/*
 * Over a gallery's last photograph, the way Myntra and Flipkart close theirs:
 * the photo darkened from the left, a bold white heading, then each fact as a
 * light label over a bold white value with a short rule beneath. White on a
 * scrim strong enough to hold it at 4.5:1 over the palest part of any shot.
 *
 * Inert to taps, so tapping the photo still opens it full screen.
 */
.fx-highlights {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	/* From the top, as both references set it, not floating mid-photo. */
	justify-content: flex-start;
	padding: 14% 7% 8%;
	background: linear-gradient(90deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .62) 42%, rgba(0, 0, 0, .3) 72%, rgba(0, 0, 0, .12) 100%);
	color: #fff;
	pointer-events: none;
}

.fx-highlights__title {
	margin: 0 0 .9em;
	font-size: 34px;
	font-weight: var(--fx-weight-bold);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}

.fx-highlights__list {
	display: grid;
	gap: 22px;
	margin: 0;
	max-width: 62%;
}

.fx-highlights__row {
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
}

.fx-highlights__row dt {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: var(--fx-weight-regular);
	color: rgba(255, 255, 255, .82);
}

.fx-highlights__row dd {
	margin: 0;
	font-size: 22px;
	font-weight: var(--fx-weight-bold);
	line-height: 1.25;
	color: #fff;
}

/* On a desktop the product photo is 700px wide or more. */
@media (min-width: 900px) {
	.fx-highlights--large .fx-highlights__title {
		font-size: 46px;
	}

	.fx-highlights--large .fx-highlights__list {
		gap: 26px;
		max-width: 55%;
	}

	.fx-highlights--large .fx-highlights__row dt {
		font-size: 18px;
	}

	.fx-highlights--large .fx-highlights__row dd {
		font-size: 27px;
	}
}

/* On a phone the product photo is about 340px wide. */
@media (max-width: 599px) {
	.fx-highlights--large .fx-highlights__title {
		font-size: 28px;
	}

	.fx-highlights--large .fx-highlights__list {
		gap: 16px;
		max-width: 68%;
	}

	.fx-highlights--large .fx-highlights__row {
		padding-bottom: 14px;
	}

	.fx-highlights--large .fx-highlights__row dt {
		font-size: 14px;
	}

	.fx-highlights--large .fx-highlights__row dd {
		font-size: 19px;
	}
}

/*
 * On a card, about 165px wide: the same layout at a third of the size, two
 * facts, and set high so quick-add at the foot of the photo never covers one.
 */
.fx-highlights--small {
	justify-content: flex-start;
	padding: 18% 10px 10px;
}

.fx-highlights--small .fx-highlights__title {
	margin-bottom: 10px;
	font-size: 16px;
}

.fx-highlights--small .fx-highlights__list {
	gap: 8px;
	max-width: 82%;
}

.fx-highlights--small .fx-highlights__row {
	padding-bottom: 7px;
}

.fx-highlights--small .fx-highlights__row dt {
	margin-bottom: 1px;
	font-size: 10px;
}

.fx-highlights--small .fx-highlights__row dd {
	font-size: 12px;
}

/* Two lines on a phone: "Essential Waffle Hoodie — Mocha Brown" cut at one
   line reads the same for every colourway. */
@media (max-width: 767px) {
	ul.products li.product .fx-card__title {
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
}