/**
 * Static pages written in the block editor.
 *
 * Two layers. The first gives any page a readable shell, which page.php never
 * had: .site-main is a flex item of .myc-virtual-page, so a page ran edge to
 * edge with no gutter at all while the header sat inside 100px of padding. The
 * second styles the classes the blocks of those pages carry.
 *
 * Everything here targets core blocks, so the text stays editable from Páginas
 * without a custom block type.
 */

/* ---------------------------------------------------------------- shell -- */

/*
 * The gutter is a variable rather than a literal because the heading below has
 * to cancel it exactly to reach the edge of the window. Set it once, and the
 * padding and the heading's negative margin can never drift apart.
 */
.myc-app-body.page .site-main {
	--ps-page-gutter: var(--ps-space-5);
	--ps-page-content: 1280px;

	box-sizing: border-box;
	width: 100%;
	max-width: var(--ps-content-discovery);
	margin: 0 auto;
	padding-block: 0 clamp(var(--ps-space-6), 6vw, 80px);
	padding-inline: var(--ps-page-gutter);
}

/*
 * Full-width layout: line the page up with the header. These three steps
 * mirror `.myc-layout-full .myc-topbar-inner` in frontend.css — change them
 * together or the edges stop matching.
 */
body.myc-layout-full.myc-app-body.page .site-main {
	--ps-page-gutter: var(--myc-full-width-padding, 56px);

	max-width: none;
}

@media (max-width: 1199px) {
	body.myc-layout-full.myc-app-body.page .site-main {
		--ps-page-gutter: clamp(20px, 3vw, 32px);
	}
}

@media (max-width: 760px) {
	.myc-app-body.page .site-main {
		--ps-page-gutter: var(--ps-space-4);

		padding-bottom: var(--ps-space-6);
	}

	body.myc-layout-full.myc-app-body.page .site-main {
		--ps-page-gutter: clamp(16px, 5vw, 28px);
	}
}

/* ------------------------------------------------------------- heading -- */

/*
 * The full-bleed editorial heading, reproduced from
 * `.myc-view-category .myc-catalog-page-heading` in pages/catalog.css so a
 * static page opens like a category. Values are duplicated rather than shared
 * because the catalogue rules are scoped to body classes a page never carries;
 * if that treatment changes there, change it here too.
 */
.myc-app-body.page .site-main > .myc-catalog-page-heading {
	position: relative;
	max-width: none;
	width: calc(100% + (2 * var(--ps-page-gutter)));
	margin: 0 calc(-1 * var(--ps-page-gutter)) clamp(var(--ps-space-6), 5vw, var(--ps-space-8));
	padding-block: clamp(32px, 5vw, 58px);

	/*
	 * The title has to start exactly where the body text starts. The body is a
	 * column of --ps-page-content centred in the shell, so its inset is the
	 * gutter plus half of whatever room is left over. Expressed against the
	 * parent's width rather than 100vw on purpose: 100vw includes the
	 * scrollbar, which would throw the two out of line by half its width.
	 */
	padding-inline: max(
		var(--ps-page-gutter),
		calc(var(--ps-page-gutter) + (100% - var(--ps-page-content)) / 2)
	);
	border-bottom: 1px solid var(--ps-color-border);
	background-color: var(--ps-color-surface-muted);
	background-image:
		radial-gradient(circle at 12% 24%, rgb(255 255 255 / 86%) 0 1px, transparent 1.5px),
		radial-gradient(circle at 78% 68%, rgb(112 103 107 / 7%) 0 1px, transparent 1.5px),
		linear-gradient(135deg, rgb(255 255 255 / 72%), rgb(248 246 246 / 92%));
	background-size: 7px 7px, 9px 9px, 100% 100%;
}

/* The catalogue narrows the shell's own clamp for these headings; match the
   narrowed one, not the base in frontend.css. */
.myc-app-body.page .site-main > .myc-catalog-page-heading h1 {
	margin: 0;
	color: var(--ps-color-ink);
	font-size: clamp(42px, 5vw, 68px);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: .98;
}

.myc-app-body.page .site-main > .myc-catalog-page-heading .myc-catalog-page-description {
	max-width: 520px;
	margin: var(--ps-space-3) 0 0;
	color: var(--ps-color-text-muted);
	font-size: 16px;
	line-height: 1.7;
}

/* In the wide preset the page shell is deliberately capped, but the
 * editorial heading is a viewport surface. Keep the heading text aligned to
 * the readable article column and let only its patterned background span the
 * full browser width. */
@media (min-width: 1200px) {
	body.myc-layout-wide.myc-app-body.page .site-main > .myc-catalog-page-heading {
		width: 100vw;
		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - 50vw);
		padding-inline: max(
			var(--ps-page-gutter),
			calc((100vw - var(--ps-page-content)) / 2)
		);
	}
}

/* The heading reaches past the viewport edge by design; without this its own
   negative margin would open a horizontal scrollbar. */
html:has(body.myc-app-body.page) {
	overflow-x: hidden;
}

@supports (overflow: clip) {
	html:has(body.myc-app-body.page) {
		overflow-x: clip;
	}
}

@media (max-width: 760px) {
	/* The catalogue insets its heading further than its grid on small screens;
	   here the two have to keep meeting, so the gutter above is left to do it. */
	.myc-app-body.page .site-main > .myc-catalog-page-heading .myc-catalog-page-description {
		margin-top: var(--ps-space-4);
	}
}

/*
 * Wide enough to sit comfortably in a large window without running edge to
 * edge. The text below is set a little larger to compensate: the wider the
 * column, the longer the line, and 18px keeps the character count per line from
 * climbing as fast as the width does.
 */
.myc-app-body.page .site-main > article {
	max-width: var(--ps-page-content);
	margin-inline: auto;
	color: var(--ps-color-text);
	font-family: var(--ps-font-sans);
}

/* --------------------------------------------------- catalogue on a page -- */

/*
 * A page carrying the category showcase is a catalogue page, so its grids
 * should line up with the ones on the home page rather than sit inside the
 * column meant for reading. Releasing the article's max-width does exactly
 * that and nothing more: .site-main already carries the same gutter as the
 * shell, so the article lands on the home page's edges to the pixel.
 *
 * Deliberately not `calc(100vw - …)`: 100vw counts the scrollbar, which would
 * push these grids half a scrollbar wider than every other row on the site.
 *
 * Prose keeps the reading column. A page can hold both, and nobody wants a
 * 1900px line of text.
 */
.myc-app-body.page .site-main > article:has(.myc-categories-showcase) {
	max-width: none;
}

.myc-app-body.page .site-main > article:has(.myc-categories-showcase) > :not(.myc-categories-showcase) {
	max-width: var(--ps-page-content);
	margin-inline: auto;
}

/*
 * The prose rules are wrapped in :where() so they carry no specificity of
 * their own. They still reach every bare heading and paragraph the editor
 * writes, because nothing else claims those — but the moment a component is
 * placed on a page, its own class-based rules win without having to fight.
 *
 * That became necessary when the category showcase shortcode arrived: product
 * card titles are <h3>, so `article h3 { font-size: 19px }` was resizing them
 * from the 17px the same cards use everywhere else.
 */
:where(.myc-app-body.page .site-main > article) p {
	margin: 0 0 var(--ps-space-5);
	font-size: 18px;
	line-height: 1.72;
}

:where(.myc-app-body.page .site-main > article) :is(h2, h3) {
	color: var(--ps-color-ink);
	letter-spacing: -.02em;
	line-height: 1.2;
}

:where(.myc-app-body.page .site-main > article) h2 {
	margin: var(--ps-space-8) 0 var(--ps-space-4);
	font-size: clamp(23px, 2.6vw, 28px);
	font-weight: 750;
}

:where(.myc-app-body.page .site-main > article) h3 {
	margin: var(--ps-space-6) 0 var(--ps-space-3);
	font-size: 19px;
	font-weight: 700;
}

:where(.myc-app-body.page .site-main > article) :is(ul, ol) {
	margin: 0 0 var(--ps-space-5);
	padding-left: 1.25em;
	font-size: 18px;
	line-height: 1.72;
}

:where(.myc-app-body.page .site-main > article) li {
	margin-bottom: var(--ps-space-2);
}

/*
 * Prose links only, which is what a class-less <a> is: the block editor writes
 * them bare, while everything the theme renders carries a class of its own.
 *
 * The distinction matters since a page can hold catalogue components — the
 * category showcase shortcode puts product cards in here. Without the :not(),
 * these three classes of specificity beat `.myc-card-buy { color: #fff }` and
 * painted the buy button's label in the same colour as its background.
 */
.myc-app-body.page .site-main > article a:not([class]) {
	color: var(--ps-color-brand-600);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

.myc-app-body.page .site-main > article a:not([class]):hover {
	color: var(--ps-color-brand-700);
}

/* ---------------------------------------------------------- key figures -- */

/*
 * The one loud element on these pages, and the only thing most visitors came
 * for: how long it takes and what it costs. The number is set as a figure
 * rather than a sentence, so the pair can be compared at a glance.
 *
 * Shipping and returns share the treatment; the class names stay separate
 * because the pages already live in the database with the names they were
 * published under.
 */
.myc-app-body.page .site-main > article :is(.ps-shipping-options, .ps-returns-facts) {
	margin-bottom: var(--ps-space-6);
	gap: var(--ps-space-4);
}

.myc-app-body.page .site-main > article :is(.ps-shipping-option, .ps-returns-fact) {
	padding: var(--ps-space-6);
	border: 1px solid var(--ps-color-brand-border);
	border-radius: var(--ps-radius-lg);
	background: linear-gradient(168deg, var(--ps-color-brand-50), var(--ps-color-surface) 62%);
}

.myc-app-body.page .site-main > article :is(.ps-shipping-option, .ps-returns-fact) h3 {
	margin: 0 0 var(--ps-space-4);
	color: var(--ps-color-brand-700);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.myc-app-body.page .site-main > article p:is(.ps-shipping-window, .ps-returns-figure) {
	margin: 0;
	color: var(--ps-color-text-muted);
	font-size: 15px;
	line-height: 1.4;
}

/* The figure is the bold run inside the sentence, so the text stays one
   editable paragraph instead of three fragments. */
.myc-app-body.page .site-main > article p:is(.ps-shipping-window, .ps-returns-figure) strong {
	display: block;
	color: var(--ps-color-ink);
	font-size: clamp(40px, 5.5vw, 64px);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.045em;
	line-height: 1;
}

/*
 * Only shipping carries a second row under the figure. Returns puts its
 * qualifier in the caption instead, which is why there is no returns twin.
 */
.myc-app-body.page .site-main > article p.ps-shipping-price {
	margin: var(--ps-space-5) 0 0;
	padding-top: var(--ps-space-4);
	border-top: 1px solid var(--ps-color-brand-border);
	color: var(--ps-color-text);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.01em;
}

/* A qualifier to the pair above, not a paragraph of its own weight. */
.myc-app-body.page .site-main > article p.ps-page-note {
	padding: var(--ps-space-4) var(--ps-space-5);
	border-radius: var(--ps-radius-md);
	background: var(--ps-color-surface-muted);
	color: var(--ps-color-text-muted);
	font-size: 15px;
	line-height: 1.6;
}

/* Carrier names are labels, not a list to read top to bottom. */
.myc-app-body.page .site-main > article ul.ps-page-chips {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	gap: var(--ps-space-2);
	list-style: none;
}

.myc-app-body.page .site-main > article ul.ps-page-chips li {
	margin: 0;
	padding: 9px var(--ps-space-4);
	border: 1px solid var(--ps-color-border);
	border-radius: 999px;
	background: var(--ps-color-surface-subtle);
	font-size: 15px;
	font-weight: 600;
}

/*
 * A list of sentences, as opposed to a list of labels.
 *
 * ps-page-chips puts every item in a pill, which reads well for «PayPal» or
 * «Correos» and badly for anything longer: a four-line clause inside a rounded
 * box stops looking like a list and starts looking like a stack of cards with
 * nothing to tell apart. The legal pages had items of a thousand characters
 * dressed that way.
 *
 * So this is the other list: a marker, a hanging indent and room to breathe.
 * Nothing drawn around the text.
 */
.myc-app-body.page .site-main > article ul.ps-page-list {
	margin: var(--ps-space-5) 0;
	padding: 0;
	list-style: none;
}

.myc-app-body.page .site-main > article ul.ps-page-list li {
	position: relative;
	margin: 0;
	padding-left: var(--ps-space-5);
	line-height: 1.75;
}

.myc-app-body.page .site-main > article ul.ps-page-list li + li {
	margin-top: var(--ps-space-3);
}

/* Aligned to the first line's optical centre, not to the box's top edge. */
.myc-app-body.page .site-main > article ul.ps-page-list li::before {
	position: absolute;
	top: .78em;
	left: 2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ps-color-brand-600);
	content: "";
}

/*
 * The long-form pages: terms, privacy, legal notice.
 *
 * Three things make a document of two dozen sections readable, and none of them
 * is decoration. A measure short enough that the eye finds the next line
 * without hunting. A hairline before each section, so the structure is visible
 * while scrolling and not only in the headings. And headings sized for a
 * document rather than for a landing page — at the page default they shout
 * every eight lines.
 */
/*
 * Each section on its own panel.
 *
 * White on the page's off-white, which is the way round that makes the panel
 * read as raised without a shadow doing the work. A hairline rather than a
 * drop shadow: at this size a shadow under two dozen stacked panels turns the
 * page grey, and the border stays crisp at any zoom.
 */
.myc-app-body.page .site-main > article .ps-doc-card {
	/* Named so the anchor offset below can account for it. */
	--ps-doc-card-pad: clamp(24px, 2.6vw, 40px);

	counter-increment: ps-doc-section;
	margin-top: var(--ps-space-5);
	padding: var(--ps-doc-card-pad);
	border: 1px solid var(--ps-color-border);
	border-radius: var(--ps-radius-lg);
	background: var(--ps-color-surface);
	transition: border-color var(--ps-transition-base), box-shadow var(--ps-transition-base);
}

.myc-app-body.page .site-main > article .ps-doc-body {
	counter-reset: ps-doc-section;
}

/*
 * The step from the introduction into the first section.
 *
 * A card following another card is the next item in a list, and the gap between
 * them says so. A card following the opening paragraphs is the document
 * starting, which is a bigger change than the same 24px was admitting.
 *
 * Written as «a card whose previous sibling is not a card» so it applies to the
 * first one wherever the introduction happens to end, and to nothing else.
 */
.myc-app-body.page .site-main > article .ps-doc-body :not(.ps-doc-card) + .ps-doc-card {
	margin-top: var(--ps-space-8);
}

.myc-app-body.page .site-main > article .ps-doc-card > :first-child {
	margin-top: 0;
}

.myc-app-body.page .site-main > article .ps-doc-card > :last-child {
	margin-bottom: 0;
}

/*
 * The section number, set as an eyebrow above its heading.
 *
 * Drawn from a counter rather than from the text, so it renumbers itself when a
 * section is added in the middle and the index cannot disagree with the
 * document. Two digits — 01, 02 — because a column of numbers that changes
 * width at ten reads as a mistake.
 */
.myc-app-body.page .site-main > article .ps-doc-card > :is(h2, h3)::before {
	display: block;
	margin-bottom: var(--ps-space-2);
	color: var(--ps-color-brand-600);
	font-size: 12px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: .14em;
	content: counter(ps-doc-section, decimal-leading-zero);
}

.myc-app-body.page .site-main > article .ps-doc-card > :is(h2, h3) {
	margin-top: 0;
	font-size: clamp(20px, 2vw, 24px);
	letter-spacing: -.01em;
}

/*
 * The section the visitor just jumped to, marked for as long as they stay on
 * it. Clicking the eleventh entry of an index otherwise lands you in a page of
 * identical panels with nothing saying which one answered.
 */
.myc-app-body.page .site-main > article .ps-doc-card:has(:target) {
	border-color: var(--ps-color-brand-border-strong);
	box-shadow: 0 12px 32px rgb(143 31 46 / 8%);
}

.myc-app-body.page .site-main > article .ps-doc-body p {
	line-height: 1.75;
}

/*
 * A run of one-line paragraphs is a list the source forgot to mark up — bank
 * details, an address. Kept tight so they read as one block rather than as
 * three unrelated statements.
 */
.myc-app-body.page .site-main > article .ps-doc-body p.ps-page-detail {
	margin-top: var(--ps-space-2);
	color: var(--ps-color-text-muted);
	font-size: 15px;
}

/*
 * A label over a run of sections — «Condiciones de uso» above the ten clauses
 * it introduces. Not a panel and not numbered, because it answers nothing; it
 * only says what the panels under it are about.
 */
.myc-app-body.page .site-main > article .ps-doc-label {
	margin: var(--ps-space-8) 0 0;
	color: var(--ps-color-text-muted);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.myc-app-body.page .site-main > article .ps-doc-label + .ps-doc-card {
	margin-top: var(--ps-space-4);
}

/*
 * A closing note: outside the panels, and quieter than them.
 *
 * It is not a section — nothing in the index points at it and it answers no
 * question — so putting it on the same white panel as the clauses would give it
 * a weight it does not have. Smaller and muted says «this is an aside» without
 * any decoration doing the saying.
 */
.myc-app-body.page .site-main > article .ps-doc-note {
	margin-top: var(--ps-space-6);
	color: var(--ps-color-text-muted);
	font-size: 14px;
	line-height: 1.7;
}

.myc-app-body.page .site-main > article .ps-doc-note + .ps-doc-note {
	margin-top: var(--ps-space-4);
}

/*
 * The index, in the space the reading measure leaves over.
 *
 * Desktop only, and deliberately so: on a phone it would be two dozen links
 * standing between the visitor and the first line of the document, which is a
 * worse trade than scrolling. The headings are clear enough to scroll past.
 */
.myc-app-body.page .site-main > article .ps-doc-toc {
	display: none;
}

@media (min-width: 1081px) {
	/*
	 * The two-column layout belongs to the pages that asked for an index. A page
	 * without one has nothing to put in that column, and reserving it anyway
	 * cost the shipping and returns pages 380px of their width for nothing.
	 */
	.myc-app-body.page .site-main > article .ps-doc--index {
		display: grid;
		/*
		 * The text takes everything the index does not, so these pages read at
		 * the same width as the rest of the shop's static pages.
		 *
		 * A narrower measure would be easier on the eye — 65 characters a line
		 * against the 105 this gives — but a document that stops two thirds of
		 * the way across reads as a layout that failed to finish, and that was
		 * the more visible problem of the two.
		 */
		grid-template-columns: minmax(0, 1fr) 210px;
		gap: var(--ps-space-8);
		align-items: start;
	}

	/*
	 * Placed by name, not by source order. The index comes first in the markup
	 * so it is reachable before the document when the layout is linear, which
	 * left auto-placement putting it in the text's column and the document in
	 * the 210px one.
	 */
	.myc-app-body.page .site-main > article .ps-doc--index .ps-doc-body {
		grid-column: 1;
	}

	.myc-app-body.page .site-main > article .ps-doc-toc {
		grid-column: 2;
		grid-row: 1;
		display: block;
		position: sticky;

		/* Clears the pinned header, like every other sticky in the theme. */
		top: var(--myc-sticky-top);
		max-height: calc(100vh - var(--myc-sticky-top) - var(--ps-space-6));
		overflow-y: auto;
		padding-left: var(--ps-space-5);
		border-left: 1px solid var(--ps-color-border);
	}

	.myc-app-body.page .site-main > article .ps-doc-toc__title {
		margin: 0 0 var(--ps-space-3);
		color: var(--ps-color-text-muted);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
	}

	.myc-app-body.page .site-main > article .ps-doc-toc__list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.myc-app-body.page .site-main > article .ps-doc-toc__item + .ps-doc-toc__item {
		margin-top: 2px;
	}

	.myc-app-body.page .site-main > article .ps-doc-toc__item a {
		display: block;
		padding: 5px 0;
		font-size: 14px;
		line-height: 1.4;
		text-decoration: none;
		transition: color var(--ps-transition-fast);
	}

	.myc-app-body.page .site-main > article .ps-doc-toc__item a:hover,
	.myc-app-body.page .site-main > article .ps-doc-toc__item a:focus-visible {
		color: var(--ps-color-brand-600);
	}

	/*
	 * The entry the visitor followed, marked for as long as the page is on that
	 * section.
	 *
	 * The weight and colour live here; which entry gets them cannot, because a
	 * stylesheet has no way to reach the link that points at :target — the
	 * target is the heading, far down the page, and CSS does not walk back up
	 * and across. inc/document-sections.php emits one `:has()` rule per section to
	 * make the pairing, and those rules set this class.
	 *
	 * Focus was the first attempt and does not survive the click: the browser
	 * moves focus to the fragment's target, which is not focusable, so it lands
	 * on <body> and the mark was gone before the scroll finished.
	 */
	/*
	 * `--ps-toc-current` is switched to 1 by the generated rule for whichever
	 * section the URL points at, and is unset everywhere else. The switch says
	 * «which»; these two declarations say what current looks like, next to the
	 * rest of the index's styling rather than inside a PHP string.
	 */
	.myc-app-body.page .site-main > article .ps-doc-toc__item a {
		font-weight: calc(400 + var(--ps-toc-current, 0) * 300);
		color: color-mix(in srgb, var(--ps-color-text-muted), var(--ps-color-brand-700) calc(var(--ps-toc-current, 0) * 100%));
	}

	.myc-app-body.page .site-main > article .ps-doc-toc__item--h3 a {
		padding-left: var(--ps-space-3);
		font-size: 13px;
	}

	/*
	 * The index carries the same numbers as the panels, from a counter of its
	 * own that walks the same headings in the same order. Two numbering schemes
	 * for one document is how an index starts lying.
	 */
	.myc-app-body.page .site-main > article .ps-doc-toc__list {
		counter-reset: ps-doc-toc;
	}

	.myc-app-body.page .site-main > article .ps-doc-toc__item {
		counter-increment: ps-doc-toc;
	}

	/*
	 * Both classes named together. The element carries `ps-doc-toc__item` and
	 * `ps-doc-toc__item--label`, and a selector naming only the modifier has
	 * exactly the same specificity as one naming only the base — so the general
	 * rule, which comes later in the file, was winning and the label kept a
	 * number: «00 CONDICIONES DE USO».
	 */
	.myc-app-body.page .site-main > article .ps-doc-toc__item.ps-doc-toc__item--label {
		counter-increment: none;
	}

	.myc-app-body.page .site-main > article .ps-doc-toc__item.ps-doc-toc__item--label a {
		margin-top: var(--ps-space-3);
		color: var(--ps-color-text-muted);
		font-size: 12px;
		font-weight: 800;
		letter-spacing: .1em;
		text-transform: uppercase;
	}

	.myc-app-body.page .site-main > article .ps-doc-toc__item.ps-doc-toc__item--label a::before {
		content: none;
	}

	.myc-app-body.page .site-main > article .ps-doc-toc__item a::before {
		display: inline-block;
		width: 2.2em;
		color: var(--ps-color-border-strong, #c9c1c3);
		font-size: 11px;
		font-variant-numeric: tabular-nums;
		font-weight: 700;
		letter-spacing: .08em;
		content: counter(ps-doc-toc, decimal-leading-zero);
	}
}

/*
 * Landing on an anchor must not put the section under the pinned header.
 *
 * The id sits on the heading, so the browser stops with the *heading* clear of
 * the header — and the panel's top edge, a padding higher up, ends up tucked
 * underneath it. What the visitor sees is a card cropped by the header rather
 * than a section they arrived at. Adding the panel's own padding to the offset
 * puts the card's edge where the heading's used to be.
 */
.myc-app-body.page .site-main > article .ps-doc-body :is(h2, h3)[id] {
	scroll-margin-top: calc(var(--myc-sticky-top) + var(--ps-doc-card-pad, 0px));
}

/*
 * The single action a static page offers. Core ships the button block with a
 * look of its own, so the rules below restate the theme's primary button rather
 * than adjusting what wp-block-library left behind.
 */
.myc-app-body.page .site-main > article .ps-page-cta {
	margin: var(--ps-space-6) 0;
}

.myc-app-body.page .site-main > article .ps-page-cta .wp-block-button__link {
	display: inline-block;
	padding: 15px var(--ps-space-6);
	border: 1px solid var(--ps-color-brand-600);
	border-radius: var(--ps-radius-md);
	background: var(--ps-color-brand-600);
	color: var(--ps-color-surface);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.01em;
	text-decoration: none;
}

.myc-app-body.page .site-main > article .ps-page-cta .wp-block-button__link:hover {
	border-color: var(--ps-color-brand-700);
	background: var(--ps-color-brand-700);
	color: var(--ps-color-surface);
}

/* The closing promise, given the emphasis the commitment deserves. */
.myc-app-body.page .site-main > article p.ps-page-highlight {
	margin-top: var(--ps-space-6);
	padding: var(--ps-space-5) var(--ps-space-6);
	border-left: 3px solid var(--ps-color-brand-600);
	border-radius: 0 var(--ps-radius-md) var(--ps-radius-md) 0;
	background: var(--ps-color-brand-50);
	color: var(--ps-color-text);
	font-size: 18px;
	line-height: 1.65;
}

/*
 * The FAQ accordion.
 *
 * Built on <details>/<summary>, which is why there is no JavaScript here: the
 * open and closed states are the browser's own, they work before any script
 * runs, the browser's find-in-page opens the section it matched, and a page
 * served from cache behaves the same as one rendered fresh.
 *
 * Each question is a card rather than a row with a rule under it. Twenty-one
 * questions in a flat list read as a wall; as cards the eye has somewhere to
 * stop.
 */
.myc-app-body.page .site-main > article .ps-faq-item {
	margin: var(--ps-space-3) 0 0;
	border: 1px solid var(--ps-color-border);
	border-radius: var(--ps-radius-md);
	background: var(--ps-color-surface);
	transition: border-color var(--ps-transition-fast), box-shadow var(--ps-transition-fast);

	/*
	 * Lets the answer's height animate between 0 and its natural size.
	 *
	 * Scoped to the card rather than declared on :root — the property is
	 * inherited, and switching intrinsic sizes to animatable across the whole
	 * shop would quietly change any other rule that happens to transition a
	 * height to `auto`.
	 */
	interpolate-size: allow-keywords;
}

/*
 * The movement, for the browsers that can run it.
 *
 * Behind @supports on purpose. WebKit has not shipped interpolate-size, so on
 * iOS these rules would collapse the answer and never animate it back — and
 * worse, they would leave two mechanisms fighting: the fallback in
 * faq-accordion.js measures the card's open height the instant it flips, and it
 * would measure the closed height while this transition was still running. That
 * is exactly what happened before this guard: the close animated, the open
 * jumped, and the keyframes were two copies of the same number.
 *
 * One mechanism per browser. Where this block applies, the script returns
 * without touching the page; where it does not, the script owns the movement
 * and the cards are otherwise plain <details>.
 */
@supports (interpolate-size: allow-keywords) {
	/*
	 * The open and close movement.
	 *
	 * ::details-content is the box the browser puts around everything after the
	 * summary. Animating it is the only way to move a <details> without taking the
	 * open state into JavaScript, where it stops being the browser's own — and with
	 * it goes find-in-page, which opens the section it matched.
	 *
	 * content-visibility is what the browser flips at the end of the close; it is a
	 * discrete property, so without `allow-discrete` the answer would vanish on the
	 * first frame and the height would animate against nothing.
	 *
	 * A browser that does not know these rules ignores them and opens the card at
	 * once, exactly as it did before.
	 */
	.myc-app-body.page .site-main > article .ps-faq-item::details-content {
		display: block;
		block-size: 0;
		overflow: hidden;
		opacity: 0;
		transition: block-size 280ms ease, opacity 200ms ease, content-visibility 280ms allow-discrete;
	}

	.myc-app-body.page .site-main > article .ps-faq-item[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
}

.myc-app-body.page .site-main > article .ps-faq-item[open] {
	border-color: var(--ps-color-brand-border);
	box-shadow: 0 10px 28px rgb(23 19 21 / 6%);
}

.myc-app-body.page .site-main > article .ps-faq-item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ps-space-4);
	padding: var(--ps-space-4) var(--ps-space-5);
	color: var(--ps-color-text);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
	cursor: pointer;

	/*
	 * The marker is replaced by the chevron below. Removed both ways because
	 * Safari draws it through ::-webkit-details-marker and ignores list-style.
	 */
	list-style: none;

	/*
	 * iOS paints a grey block over whatever was tapped. On a link it reads as
	 * feedback; over a whole card it reads as the page flickering, and it lands
	 * before the card has begun to open, so the first thing a visitor sees on a
	 * phone is a flash of grey. The card's own hover and open states are the
	 * feedback.
	 */
	-webkit-tap-highlight-color: transparent;
}

.myc-app-body.page .site-main > article .ps-faq-item > summary::-webkit-details-marker {
	display: none;
}

.myc-app-body.page .site-main > article .ps-faq-item > summary:hover {
	color: var(--ps-color-brand-600);
}

.myc-app-body.page .site-main > article .ps-faq-item > summary:focus-visible {
	outline: 2px solid var(--ps-color-brand-border);
	outline-offset: -2px;
	border-radius: var(--ps-radius-md);
}

/* A chevron drawn in CSS, so the accordion carries no image request. */
.myc-app-body.page .site-main > article .ps-faq-item > summary::after {
	width: 9px;
	height: 9px;
	flex: 0 0 auto;
	margin-right: 4px;
	border-right: 2px solid var(--ps-color-text-muted);
	border-bottom: 2px solid var(--ps-color-text-muted);
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--ps-transition-base), border-color var(--ps-transition-fast);
	content: "";
}

.myc-app-body.page .site-main > article .ps-faq-item[open] > summary::after {
	border-color: var(--ps-color-brand-600);
	transform: translateY(2px) rotate(225deg);
}

.myc-app-body.page .site-main > article .ps-faq-item > :not(summary) {
	margin-right: var(--ps-space-5);
	margin-left: var(--ps-space-5);
}

.myc-app-body.page .site-main > article .ps-faq-item > :last-child {
	margin-bottom: var(--ps-space-5);
}

/* An h2 that follows an open card needs air the flat list did not. */
.myc-app-body.page .site-main > article .ps-faq-item + h2 {
	margin-top: var(--ps-space-8);
}

@media (prefers-reduced-motion: reduce) {
	.myc-app-body.page .site-main > article .ps-faq-item,
	.myc-app-body.page .site-main > article .ps-faq-item > summary::after,
	.myc-app-body.page .site-main > article .ps-faq-item::details-content {
		transition: none;
	}
}

@media (max-width: 760px) {
	.myc-app-body.page .site-main > article :is(.ps-shipping-option, .ps-returns-fact) {
		padding: var(--ps-space-5);
	}

	.myc-app-body.page .site-main > article p.ps-page-highlight {
		padding: var(--ps-space-4) var(--ps-space-5);
	}

	.myc-app-body.page .site-main > article .ps-faq-item > summary {
		padding: var(--ps-space-4);
		font-size: 16px;
	}

	.myc-app-body.page .site-main > article .ps-faq-item > :not(summary) {
		margin-right: var(--ps-space-4);
		margin-left: var(--ps-space-4);
	}

	.myc-app-body.page .site-main > article .ps-faq-item > :last-child {
		margin-bottom: var(--ps-space-4);
	}

	/* Panels sit closer together when there is less of everything. */
	.myc-app-body.page .site-main > article .ps-doc-card {
		margin-top: var(--ps-space-4);
	}

	.myc-app-body.page .site-main > article .ps-doc-body :not(.ps-doc-card) + .ps-doc-card {
		margin-top: var(--ps-space-6);
	}

	.myc-app-body.page .site-main > article ul.ps-page-list li {
		padding-left: var(--ps-space-4);
	}
}