/*!
 * Page: Shop (templates/template-page-shop.php)
 *
 * Topic 42 COPY-WP27, the Shop page rebuilt as design D (the 2026-11-01
 * canvas, artboard D). Under the page's picture slider (the showcase section,
 * assets/css/sections/_showcase.css) there are two bands of its own:
 *
 *   1. The book (.mw-shop-book): a white band (owner 2026-11-01; the book page's
 *      band under its jagged edge is white too) with the open-book photo beside
 *      the title, three cream tiles and the language buttons.
 *   2. All products (.mw-shop-products): a dark band with filter buttons and one
 *      row of equal cards, the book first and then every merch card. Printed
 *      only while at least one merch card renders.
 *
 * Loaded on the Shop page only (functions.php, mystwood_studios_ab_is_shop_page()),
 * after the tokens, so nothing here reaches another page. Everything is scoped by
 * the band classes. The warm brown text colours of the cream band (#3A2912,
 * #7A4F0E) and the merch tag ink (#2A2878) are the design's own values; the
 * other colours come from tokens (theme-tokens.css).
 *
 * [hidden] GUARDS. The filter group and the cards the filter hides use the
 * `hidden` attribute; each has an explicit `[hidden] { display: none; }` rule
 * because the `display` rules in this file would beat the plain [hidden] rule.
 *
 * Breakpoints from the design: 1180px (six cards a row) and 600px (two a row).
 */

.mw-page-shop {
	--mw-shop-gutter: clamp(16px, 5vw, 88px);
	--mw-shop-wrap: min(1264px, 100% - 2 * var(--mw-shop-gutter));
}

/* More room under the slider's control row (owner 2026-11-01): the slider grows by
 * --mw-shop-room. The stage's base height is _showcase.css's; keep the two equal. */
.mw-page-shop .mw-section--showcase {
	--mw-shop-room: 56px;
}

.mw-page-shop .mw-showcase__stage {
	min-height: calc(clamp(560px, 46vw, 680px) + var(--mw-shop-room));
}

.mw-page-shop .mw-showcase__slide {
	padding-block-end: calc(108px + var(--mw-shop-room));
}

.mw-page-shop .mw-showcase__bar {
	bottom: calc(24px + var(--mw-shop-room));
}

@media (max-width: 37.5em) {
	.mw-page-shop .mw-showcase__slide {
		padding-block-end: calc(140px + var(--mw-shop-room));
	}
}

/* The slider's jagged bottom edge (owner 2026-11-01: "just like the product page").
 * The book page's edge with the same points: the polygon below is a copy of
 * assets/css/sections/_product-hero.css (its "Jagged bottom edge" block); change both
 * together. The same working pattern as there: the slider is positioned, isolated
 * and z-index 1 (_showcase.css), so its teeth paint above the book band, which is
 * pulled up by the tallest tooth and given the height back as top padding. The slide
 * words and the control row move up by that height so the teeth never cut them.
 * Nothing may be inserted between the slider and the book band: the rule is an
 * adjacent-sibling combinator. Inside @supports, so an engine without clip-path keeps
 * the flat edge and no overlap. */
@supports (clip-path: polygon(0 0, 100% 0, 100% 100%)) {

	/* Declared on the slider AND on the band beneath it: a sibling inherits nothing. */
	.mw-page-shop .mw-section--showcase,
	.mw-page-shop .mw-section--showcase + .mw-shop-book {
		--mw-shop-jag: clamp(0.45px, calc(100vw / 1440), 1px);
	}

	.mw-page-shop .mw-section--showcase {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36.5 * var(--mw-shop-jag)), 85.42% 100%, 72.36% calc(100% - 76 * var(--mw-shop-jag)), 61.15% calc(100% - 16.5 * var(--mw-shop-jag)), 47.64% calc(100% - 56.5 * var(--mw-shop-jag)), 30.9% calc(100% - 16.5 * var(--mw-shop-jag)), 28.26% calc(100% - 36.5 * var(--mw-shop-jag)), 16.84% 100%, 0 calc(100% - 36.5 * var(--mw-shop-jag)));
	}

	.mw-page-shop .mw-showcase__slide {
		padding-block-end: calc(108px + var(--mw-shop-room) + 76 * var(--mw-shop-jag));
	}

	.mw-page-shop .mw-showcase__bar {
		bottom: calc(24px + var(--mw-shop-room) + 76 * var(--mw-shop-jag));
	}

	.mw-page-shop .mw-section--showcase + .mw-shop-book {
		margin-block-start: calc(-76 * var(--mw-shop-jag));
		padding-block-start: calc(clamp(48px, 6vw, 96px) + 76 * var(--mw-shop-jag));
	}

	@media (max-width: 37.5em) {
		/* The phone's taller room for the wrapped control row (_showcase.css), plus the teeth. */
		.mw-page-shop .mw-showcase__slide {
			padding-block-end: calc(140px + var(--mw-shop-room) + 76 * var(--mw-shop-jag));
		}
	}
}

/* 1. The book ----------------------------------------------------------- */

.mw-shop-book {
	padding-block: clamp(48px, 6vw, 96px);
	background: #fff;
	color: #3A2912;
	--mw-btn-focus-ring: var(--mw-color-text-dark, #040420);
}

.mw-shop-book__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(28px, 5vw, 72px);
	width: var(--mw-shop-wrap);
	margin-inline: auto;
}

.mw-shop-book__photo {
	display: block;
	flex: 1 1 420px;
	min-width: 0;
}

.mw-shop-book__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1224 / 1010;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(58, 41, 18, 0.28);
}

.mw-shop-book__text {
	display: flex;
	flex: 1 1 420px;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.mw-shop-book__eyebrow {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #7A4F0E;
}

.mw-shop-book__title {
	margin: 0;
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-weight: 400;
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.1;
	color: #3A2912;
	overflow-wrap: break-word;
}

.mw-shop-book__title a,
.mw-shop-book__more a {
	color: #3A2912;
}

.mw-shop-book__title a {
	text-decoration: none;
}

.mw-shop-book__title a:hover,
.mw-shop-book__more a:hover {
	color: var(--mw-color-text-dark, #040420);
}

.mw-shop-book__title a:focus-visible,
.mw-shop-book__more a:focus-visible,
.mw-shop-book__photo:focus-visible {
	outline: 3px solid var(--mw-color-text-dark, #040420);
	outline-offset: 3px;
}

.mw-shop-book__tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Cream on the white band, so the tiles still stand out. */
.mw-shop-book__tile {
	padding: 14px 12px;
	border-radius: 10px;
	background: var(--kw-cream, #FFF1D6);
	text-align: center;
}

.mw-shop-book__num {
	display: block;
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-size: 34px;
	line-height: 1;
	color: #3A2912;
}

.mw-shop-book__label {
	display: block;
	margin-block-start: 6px;
	font-size: 13px;
	font-weight: 600;
}

.mw-shop-book__text .mw-book-editions {
	margin-block: 6px 0;
}

.mw-shop-book__text .mw-book-editions__label {
	font-size: 15px;
}

.mw-shop-book__text .mw-book-editions__author {
	margin-block: 12px 0;
}

.mw-shop-book__more {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.mw-shop-book__more a {
	text-underline-offset: 0.25em;
}

/* 2. All products --------------------------------------------------------- */

.mw-shop-products {
	padding-block: clamp(48px, 6vw, 88px);
	background: var(--mw-color-bg-dark, #0E0841);
	color: var(--mw-color-text-light, #FAF8FF);
}

.mw-shop-products__inner {
	display: flex;
	flex-direction: column;
	gap: 28px;
	width: var(--mw-shop-wrap);
	margin-inline: auto;
}

.mw-shop-products__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}

.mw-shop-products__intro {
	display: flex;
	flex: 1 1 360px;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.mw-shop-products__title {
	margin: 0;
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-weight: 400;
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.15;
	color: var(--mw-color-text-light, #FAF8FF);
}

.mw-shop-products__line {
	margin: 0;
	max-width: 36em;
	font-size: 17px;
	line-height: 1.5;
	color: var(--studio-light, #e1e8f9);
}

.mw-shop-products__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mw-shop-products__filters[hidden] {
	display: none;
}

.mw-shop-pill {
	min-height: 44px;
	padding: 10px 18px;
	border: 2px solid rgba(250, 248, 255, 0.35);
	border-radius: 10px 4px 10px 4px;
	background: transparent;
	color: var(--mw-color-text-light, #FAF8FF);
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-size: 16px;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.mw-shop-pill[aria-pressed="true"] {
	border-color: var(--kw-gold, #F4C430);
	background: var(--kw-gold, #F4C430);
	color: var(--mw-color-text-dark, #040420);
}

.mw-shop-pill:focus-visible {
	outline: 3px solid var(--mw-color-primary-glow, #A8A7FF);
	outline-offset: 3px;
}

.mw-shop-products__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 73.75em) {
	.mw-shop-products__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

@media (max-width: 37.5em) {
	.mw-shop-products__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.mw-shop-products__item {
	display: flex;
	min-width: 0;
}

.mw-shop-products__item[hidden] {
	display: none;
}

.mw-shop-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	border-radius: 8px;
	background: #fff;
	color: var(--mw-color-text-dark, #040420);
	box-shadow: 0 10px 28px rgba(4, 4, 25, 0.35);
	--mw-btn-focus-ring: var(--mw-color-text-dark, #040420);
}

.mw-shop-card--book {
	background: var(--studio-paper, #F5FCFE);
}

.mw-shop-card__media {
	display: block;
	background: var(--studio-light, #e1e8f9);
}

.mw-shop-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

.mw-shop-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 14px 14px 16px;
}

.mw-shop-card__tag {
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 10px 4px 10px 4px;
	background: var(--mw-color-primary-soft, #E9E8FF);
	color: #2A2878;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mw-shop-card--book .mw-shop-card__tag {
	background: var(--kw-cream, #FFF1D6);
	color: #3A2912;
}

.mw-shop-card__name {
	margin: 0;
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-weight: 400;
	font-size: 19px;
	line-height: 1.2;
	overflow-wrap: break-word;
}

.mw-shop-card__name a {
	color: inherit;
	text-decoration: none;
}

.mw-shop-card__name a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.mw-shop-card__name a:focus-visible,
.mw-shop-card__media:focus-visible {
	outline: 3px solid var(--mw-color-text-dark, #040420);
	outline-offset: 3px;
}

.mw-shop-card__line {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: #3D3B5C;
}

/* The book page's edition flags under the book card's button (owner 2026-11-01, COPY-WP27).
 * The pills are the shared .mw-edition-flag of components/_button.css (dark pill surface,
 * white text), which reads on the light card; the row wraps at the card's width. */
.mw-shop-card__flags {
	margin-block-start: 2px;
}

.mw-shop-card__flags .mw-edition-flags {
	gap: 6px;
}

.mw-shop-card__flags .mw-edition-flag {
	padding: 4px 8px;
	font-size: 12px;
}

/* The button sits at the bottom of the card, the full width of its body, and may
 * wrap its words (six cards a row are narrow) rather than reach outside the card. */
.mw-shop-card__body .mw-btn {
	align-self: stretch;
	margin-block-start: auto;
	padding-inline: 0.5rem;
	white-space: normal;
	text-align: center;
	overflow-wrap: anywhere;
}

.mw-shop-products__more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin: 0;
	padding-block-start: 12px;
}

.mw-shop-products__note {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--mw-color-text-secondary, #B8B4DA);
}

/* How it works (Topic 42 COPY-WP30): short points in a row on wide screens (two by two on a tablet), stacked on a
 * phone, on the band's dark violet. The text colours are the band's own tokens. */
.mw-shop-how {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-block-start: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mw-shop-how__title {
	margin: 0;
	font-family: var(--mw-font-display, system-ui, sans-serif);
	font-weight: 400;
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.2;
	color: var(--mw-color-text-light, #FAF8FF);
}

.mw-shop-how__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mw-shop-how__list li {
	margin: 0;
	padding-inline-start: 12px;
	border-inline-start: 2px solid var(--mw-color-primary-glow, #A8A7FF);
	font-size: 16px;
	line-height: 1.5;
	color: var(--studio-light, #e1e8f9);
}

@media (min-width: 48em) {
	.mw-shop-how__list {
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	}
}

/* The privacy link in the store note: an explicit light-violet colour (about 8:1 on the band), underlined, with a
 * visible focus ring. Without it the link would fall back to the theme's default link colour on a dark band. */
.mw-shop-products__privacy {
	color: var(--mw-color-primary-glow, #A8A7FF);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.mw-shop-products__privacy:hover {
	color: var(--mw-color-text-light, #FAF8FF);
}

.mw-shop-products__privacy:focus-visible {
	color: var(--mw-color-text-light, #FAF8FF);
	outline: 3px solid var(--mw-color-primary-glow, #A8A7FF);
	outline-offset: 2px;
	border-radius: 2px;
}