/*
 * Catalog — /cumpara/ (2026-08 catalog redesign).
 *
 * Ported from the approved comp (artifact 993383f0, treatment A, interaction
 * variant 3). See includes/catalog.php and docs/catalog-redesign.md.
 *
 * Tokens are DESIGN.md's, not the comp's: the comp was drawn on the warm
 * neutrals of the artifact document it lived in (#e2dedc hairlines, #57524f
 * ink-2), and shipping those would make the catalog the one page on the site
 * whose greys are warm. The difference is imperceptible side by side and the
 * consistency is not — cart, checkout and catalog now share one palette.
 *
 * Light-only, like the rest of the surface (DESIGN.md). No dark theme here.
 *
 * Loaded only on `exadry_catalog_active()`, last in the cascade (priority 22),
 * so it can override both WooCommerce's stylesheet and the 400 KB of Divi 3.0
 * CSS this theme absorbed. The `!important`s below are all aimed at inherited
 * rules that carry `!important` themselves.
 */

/* ---------------------------------------------------------------------------
 * The container
 * ---------------------------------------------------------------------------
 *
 * Divi's `.container` is `width: 80%; max-width: 1080px`, and `#left-area` is
 * 79.125% wide above 981px because the layout expects a sidebar. Neither is
 * right here: this page has no sidebar, and three cards need 1180px of
 * viewport before the seven size boxes fit on one line.
 *
 * Scoped to `body.woocommerce-shop` — WooCommerce's own "this is the shop"
 * class — rather than `post-type-archive-product`, which is the same thing
 * until something upstream decides the archive is a page (see the Divi note in
 * includes/catalog.php) and then silently is not.
 */
body.woocommerce-shop #main-content .container {
	width: 100%;
	max-width: 1280px;
	padding: 0 32px;
}

body.woocommerce-shop #main-content .container:before {
	display: none;
}

body.woocommerce-shop #left-area {
	float: none;
	width: 100% !important;
	padding: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------------- */

.exd-c {
	--exc-ink: #1a1a1a;
	--exc-ink-2: #585858;
	--exc-ink-3: #767676;
	--exc-blue: #1479c2;
	--exc-green: #107a3d;
	--exc-hair: #dedede;
	--exc-hair-2: #e9e9e9;
	--exc-panel: #fafafa;
	--exc-tile: #f1f1f1;
	--exc-cta: #111111;
	--exc-star: #e8a020;
	--exc-radius: 8px;
	--exc-radius-lg: 12px;

	padding-bottom: 40px;
	color: var(--exc-ink);
	font-family: 'Raleway', -apple-system, 'Helvetica Neue', Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

.exd-c *,
.exd-c *:before,
.exd-c *:after {
	box-sizing: border-box;
}

.exd-c img {
	display: block;
	max-width: 100%;
	height: auto;
}

.exd-c a {
	text-decoration: none;
}

.exd-c :focus-visible {
	outline: 2px solid var(--exc-blue);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------- */

.exd-c-hero {
	padding: 34px 0;
	text-align: center;
}

.exd-c-h1 {
	margin: 0 auto !important;
	max-width: 20ch;
	color: var(--exc-ink);
	font-family: 'Oswald', 'Raleway', sans-serif;
	font-size: 54px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.1;
	text-transform: none;
	text-wrap: balance;
}

.exd-c-lede {
	margin: 16px auto 0;
	max-width: 62ch;
	color: var(--exc-ink-2);
	font-size: 16px;
	line-height: 1.6;
}

/*
 * The closing block — the trust entries and the size-guide line. Ported from
 * the approved close comp (artifact 34c5671d, treatment A), then revised by
 * the operator: no rule above it, distance alone separates it from the last
 * product. The chips reuse the cart drawer's exd-chip markup but are styled
 * again here, scoped, so the block does not depend on cart.css sitting in
 * the cascade.
 */
.exd-c-close {
	margin-top: 96px;
}

.exd-c-close-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px 32px;
}

/* A review wipe would drop the rating entry; three entries get three columns,
 * not a ghost fourth. */
.exd-c-close-grid.is-three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.exd-c-tr {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}

.exd-c-tr > svg {
	flex: none;
	margin-top: 2px;
	color: var(--exc-ink-3);
}

.exd-c-tr > .exd-c-tr-star {
	color: var(--exc-star);
}

.exd-c-tr-t {
	margin: 0;
	color: var(--exc-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	text-wrap: balance;
}

.exd-c-tr-t.is-green {
	color: var(--exc-green);
}

.exd-c-tr-s {
	margin: 3px 0 0;
	color: var(--exc-ink-3);
	font-size: 13px;
	line-height: 1.5;
}

.exd-c-close .exd-chips {
	display: inline-flex;
	gap: 6px;
	margin-top: 7px;
}

.exd-c-close .exd-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	min-width: 38px;
	height: 24px;
	border: 1px solid var(--exc-hair);
	border-radius: 4px;
	background: #fff;
}

.exd-c-close .exd-chip svg {
	display: block;
}

/* ---------------------------------------------------------------------------
 * Grid
 * ---------------------------------------------------------------------------
 *
 * Three columns need 1180px: below that a 389px card narrows past the 356px
 * the seven size boxes occupy and the row wraps to two lines. It stays legible
 * when it does — flex-wrap, not a cliff — but the breakpoints are set so the
 * common widths never reach it.
 */
/*
 * One column stacks a full-width photograph directly under the previous card's
 * buy button, so the gap has to do the work the column gutter does on desktop:
 * at 30px the next shirt read as part of the one above it. 56px is the first
 * value where the card boundary is legible without a divider.
 */
.exd-c-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 56px;
}

@media (min-width: 760px) {
	.exd-c-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

@media (min-width: 1180px) {
	.exd-c-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.exd-c-grid--sub {
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.exd-c-grid--sub {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1180px) {
	.exd-c-grid--sub {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * One column does not mean one wide column. Between a phone and the two-column
 * breakpoint — a small tablet, or a desktop window dragged narrow — a card
 * stretched to the full 728px renders a 728px square photograph, which reads
 * as a landing page for one shirt rather than a catalog of four. Capped and
 * centred instead; phones are narrower than the cap and are unaffected.
 */
@media (max-width: 759px) {
	.exd-c-grid,
	.exd-c-grid--sub {
		justify-items: center;
	}

	.exd-c-card {
		width: 100%;
		max-width: 440px;
	}
}

/* ---------------------------------------------------------------------------
 * Card
 * ------------------------------------------------------------------------- */

.exd-c-card {
	min-width: 0;
}

.exd-c-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	min-width: 0;
}

.exd-c-shot {
	display: block;
	overflow: hidden;
	border-radius: var(--exc-radius-lg);
	background: var(--exc-panel);
	aspect-ratio: 1;
}

.exd-c-shot img {
	width: 100%;
	height: 100%;
	/* Top, not centre. Two of the four shots are 1150x1600 portraits and a
	 * centred square crop takes the head off. Square sources are unaffected. */
	object-fit: cover;
	object-position: 50% 0;
}

.exd-c-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.exd-c-title {
	margin: 0 !important;
	color: var(--exc-ink);
	font-family: 'Raleway', -apple-system, 'Helvetica Neue', Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.35;
	text-transform: none;
}

.exd-c-title a {
	color: inherit;
}

.exd-c-title a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.exd-c-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--exc-ink-3);
	font-size: 13px;
}

.exd-c-stars {
	color: var(--exc-star);
}

.exd-c-rate {
	color: var(--exc-ink-2);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.exd-c-dot {
	color: var(--exc-hair);
}

.exd-c-price {
	margin: 2px 0 0;
	color: var(--exc-ink);
	font-size: 19px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.exd-c-from,
.exd-c-cur {
	color: var(--exc-ink-2);
	font-size: 0.68em;
	font-weight: 500;
	letter-spacing: 0;
}

.exd-c-rule {
	margin: 4px 0 2px;
	height: 1px;
	background: var(--exc-hair-2);
}

.exd-c-sizelabel {
	margin: 0;
	color: var(--exc-ink-3);
	font-family: 'Oswald', 'Raleway', sans-serif;
	font-size: 11px;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Size boxes
 * ---------------------------------------------------------------------------
 *
 * The product page's grammar, tightened: same 46px height, same 8px radius,
 * same fade-plus-diagonal for a size that cannot be bought — but 44px wide
 * instead of 62px, because a card has to hold seven of them.
 */
.exd-c-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.exd-c-size {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 6px;
	min-width: 44px;
	height: 46px;
	border: 1px solid var(--exc-hair);
	border-radius: var(--exc-radius);
	background: #fff;
	color: var(--exc-ink);
	font-family: inherit;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.exd-c-size:hover {
	border-color: var(--exc-blue);
	background: #fff;
	color: var(--exc-blue);
}

.exd-c-size.is-on {
	border-width: 2px;
	border-color: var(--exc-blue);
	color: var(--exc-blue);
	font-weight: 700;
}

.exd-c-size.is-oos {
	border-color: var(--exc-hair-2);
	background: var(--exc-tile);
	color: var(--exc-ink-3);
	cursor: default;
}

.exd-c-size.is-oos:hover {
	border-color: var(--exc-hair-2);
	background: var(--exc-tile);
	color: var(--exc-ink-3);
}

.exd-c-size.is-oos:after {
	position: absolute;
	inset: 0;
	border-radius: 7px;
	background-image: linear-gradient(
		to top right,
		transparent calc(50% - 1px),
		var(--exc-hair) calc(50% - 1px),
		var(--exc-hair) calc(50% + 1px),
		transparent calc(50% + 1px)
	);
	content: "";
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Buy row
 * ---------------------------------------------------------------------------
 *
 * The quantity pill sits BESIDE the button, which is the whole reason it is
 * affordable: measured on the comp, a card with a button is 26px taller than
 * one without, and adding the picker costs nothing on top of that.
 *
 * The pill is the cart drawer's, scaled from 34px to 46px so it sits level
 * with the CTA.
 */
.exd-c-buy {
	display: flex;
	gap: 10px;
	margin-top: 6px;
}

.exd-c-qty {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	border: 1px solid var(--exc-hair);
	border-radius: 999px;
	background: #fff;
	height: 46px;
}

.exd-c-qty-b {
	padding: 0;
	width: 38px;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--exc-ink-2);
	font-family: inherit;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.15s ease;
}

.exd-c-qty-b:hover:not(:disabled) {
	background: none;
	color: var(--exc-ink);
}

.exd-c-qty-b:disabled {
	color: var(--exc-hair);
	cursor: default;
}

.exd-c-qty-b:focus-visible {
	outline-offset: -2px;
}

.exd-c-qty-n {
	min-width: 24px;
	color: var(--exc-ink);
	font-size: 14.5px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-align: center;
}

.exd-c-add {
	flex: 1 1 auto;
	padding: 0 14px;
	height: 46px;
	border: 0;
	border-radius: var(--exc-radius);
	background: var(--exc-cta);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 46px;
	text-align: center;
	text-transform: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.exd-c-add:hover:not(:disabled) {
	background: #000;
	color: #fff;
}

.exd-c-add:disabled {
	background: var(--exc-tile);
	color: var(--exc-ink-3);
	cursor: default;
}

.exd-c-add.is-done,
.exd-c-add.is-done:hover {
	background: var(--exc-green);
	color: #fff;
}

.exd-c-add--link {
	display: block;
	margin-top: 6px;
}

.exd-c-add--link:hover {
	color: #fff;
}

/* The one green that is not free shipping is not green: the confirmed state
 * above borrows it for 1.8s, which DESIGN.md's green-means-free rule would
 * normally forbid. It is allowed here because the line directly beneath it IS
 * the free-shipping line, and the two never show at once in a way that could
 * confuse them — the button reverts, the line does not. */
.exd-c-fs {
	margin: 8px 0 0;
	color: var(--exc-green);
	font-size: 13px;
}

.exd-c-fs strong {
	font-weight: 700;
}

.exd-c-fs[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Secondary section
 * ------------------------------------------------------------------------- */

.exd-c-final {
	margin-top: 44px;
	padding-top: 26px;
	border-top: 1px solid var(--exc-hair);
}

.exd-c-final-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 18px;
}

.exd-c-final-label {
	margin: 0 !important;
	color: var(--exc-ink-2);
	font-family: 'Oswald', 'Raleway', sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
}

.exd-c-final-note {
	margin: 0;
	color: var(--exc-ink-3);
	font-size: 13.5px;
}

.exd-c-grid--sub .exd-c-title {
	font-size: 14px;
	font-weight: 500;
}

.exd-c-grid--sub .exd-c-price {
	font-size: 17px;
}

.exd-c-guide {
	margin: 26px 0 0;
	color: var(--exc-ink-2);
	font-size: 14px;
	text-align: center;
}

.exd-c-guide a {
	color: var(--exc-blue);
}

.exd-c-guide a:hover {
	color: #0f65a3;
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Narrow
 * ------------------------------------------------------------------------- */

@media (max-width: 980px) {
	body.woocommerce-shop #main-content .container {
		padding: 0 20px;
	}

	.exd-c-h1 {
		font-size: 44px;
	}

	.exd-c-lede {
		font-size: 15px;
	}

	.exd-c-close-grid,
	.exd-c-close-grid.is-three {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Phones. 16px gutters rather than 20px, which is what puts a 390px screen
 * back on the comp's 358px card — at 350px the seven boxes are 6px too wide
 * and the row breaks in two.
 */
@media (max-width: 760px) {
	body.woocommerce-shop #main-content .container {
		padding: 0 16px;
	}
}

/*
 * ...and below that, stop relying on 44px fitting at all.
 *
 * Seven equal columns instead of seven fixed-width boxes removes the wrap
 * cliff: the row is always one line, and the boxes narrow with the screen
 * (44px at 390, ~42px at 375, ~40px at 360) while keeping their full 46px
 * height, so the touch target stays comfortably above the floor in the
 * direction a thumb actually misses.
 */
@media (max-width: 480px) {
	.exd-c-sizes {
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}

	.exd-c-size {
		padding: 0 2px;
		min-width: 0;
	}

	/* Phones stack each entry: icon above title, per the comp's 390px frame.
	 * The rule-less 96px desktop gap reads larger on a 390px screen. */
	.exd-c-close {
		margin-top: 72px;
	}

	.exd-c-close-grid {
		gap: 22px 18px;
	}

	.exd-c-tr {
		display: block;
	}

	.exd-c-tr > svg {
		display: block;
		margin: 0 0 7px;
	}

	.exd-c-tr-t {
		font-size: 14px;
	}

	.exd-c-tr-s {
		font-size: 12.5px;
	}

	.exd-c-guide {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.exd-c * {
		transition: none !important;
	}
}