/*
 * Only what theme.json cannot express.
 * Every colour and size here reads a token: a literal that duplicates one is a
 * defect, not a shortcut. If a rule is about palette, spacing or type, it
 * belongs in theme.json instead.
 *
 * The one idea this file keeps returning to: the page is grey and everything on
 * it is a white card. theme.json can say what a card looks like when a pattern
 * asks for one; what it cannot say is how a card behaves — that it lifts under
 * the cursor, that a picture inside it has no second edge, that a rail of them
 * scrolls on a phone and wraps on a desk.
 */

/* Turkish is diacritic-dense — keep the interface face crisp at small sizes. */
body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/*
 * The footer sits at the bottom of a short page.
 *
 * On this storefront that is not a nicety: the page is grey and the footer is
 * white, so a 404 or an empty bag would end its footer halfway up the window
 * with a band of bare grey under it, and the band reads as a rendering fault
 * rather than as the end of the page. Core stacks the three parts in
 * `.wp-site-blocks`; this makes that stack at least as tall as the window and
 * gives the middle one the slack.
 */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex-grow: 1;
}

/* Prices, counts and quantities line up when their digits are the same width. */
.wc-block-components-product-price,
.wp-block-woocommerce-product-results-count,
.wp-block-query-pagination-numbers,
.wc-block-components-totals-item__value {
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- the card */

/*
 * The one shape this storefront is made of. inc/patterns.php writes the colour,
 * the edge and the corner as block attributes so the Site Editor can change
 * them; what is left for CSS is the shadow — which has no block control — and
 * what happens when a cursor is over one.
 */
.my-shop-card {
	box-shadow: var(--wp--custom--shadow);
	transition: box-shadow var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

/* Only the cards that lead somewhere respond; a card of prose is not a target. */
.wc-block-product .my-shop-card:hover,
.my-shop-card--category:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--custom--shadow-lifted);
}

/*
 * A card in a product grid is a column, and it is said twice on purpose.
 *
 * `.wc-block-product` is the cell WooCommerce puts each product in; it is a
 * flex container so the card can fill a cell taller than itself. A flex
 * container with no direction is a **row**, and a row is the one thing this
 * card must never be: the picture takes the width it wants and the name is
 * squeezed to its narrowest, which sets the words down the side of the image
 * one letter per line. Naming the direction on both the cell and the card is
 * what makes that impossible rather than merely unlikely — the card is a group
 * whose display an Admin could change in the editor, and the cell is
 * WooCommerce's own markup, so neither is ours to rely on.
 */
.wc-block-product {
	display: flex;
	flex-direction: column;
}

.wc-block-product > .my-shop-card {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

/* The picture keeps its size in a column that is taller than its contents. */
.wc-block-product .my-shop-card__media {
	flex-shrink: 0;
}

/* ------------------------------------------------------------- the chrome */

/*
 * Sticky masthead.
 *
 * Core's position support does the sticking — theme.json opts in and the
 * pattern asks for it — but a sticky element can only travel inside its
 * parent's box, and the template part's box is exactly as tall as the chrome
 * itself. Taking that wrapper out of the layout hands the bar the whole page to
 * travel down, and lets the promise band above it scroll away.
 */
.wp-block-template-part:has(> .my-shop-masthead) {
	display: contents;
}

/*
 * The bar carries the shadow instead of a second border once the page has moved
 * under it. It is opaque, not frosted: this storefront's ground is already a
 * flat grey, and blurring one flat colour into another only costs a repaint.
 */
.my-shop-masthead {
	box-shadow: var(--wp--custom--shadow);
}

/*
 * The search bar is the masthead's subject: it takes whatever the name and the
 * account controls leave, up to a measure a line of placeholder text can be
 * read at. Below the wrap it is a row of its own, full width — which is the
 * order a phone reads the header in anyway.
 */
.my-shop-masthead__search.wp-block-search {
	flex: 1 1 20rem;
	max-width: var(--wp--custom--measure--search);
}

/*
 * The field. Rounded like the app it is borrowed from, on its own faint ground
 * so it reads as somewhere to type rather than as a hole in the bar.
 */
.my-shop-masthead__search .wp-block-search__inside-wrapper,
.my-shop-hero__search .wp-block-search__inside-wrapper,
.my-shop-searchfield .wp-block-search__inside-wrapper {
	background: var(--wp--preset--color--field);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-large);
	padding: 3px;
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.my-shop-masthead__search .wp-block-search__input,
.my-shop-hero__search .wp-block-search__input,
.my-shop-searchfield .wp-block-search__input {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--medium);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.my-shop-masthead__search .wp-block-search__input:focus,
.my-shop-hero__search .wp-block-search__input:focus,
.my-shop-searchfield .wp-block-search__input:focus {
	outline: 0;
}

.my-shop-masthead__search .wp-block-search__inside-wrapper:focus-within,
.my-shop-hero__search .wp-block-search__inside-wrapper:focus-within,
.my-shop-searchfield .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px var(--wp--preset--color--accent-soft);
}

.my-shop-masthead__search .wp-block-search__button,
.my-shop-hero__search .wp-block-search__button,
.my-shop-searchfield .wp-block-search__button {
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	transition: background-color var(--wp--custom--transition);
}

.my-shop-masthead__search .wp-block-search__button:hover,
.my-shop-hero__search .wp-block-search__button:hover,
.my-shop-searchfield .wp-block-search__button:hover {
	background: var(--wp--preset--color--accent-strong);
}

/*
 * The hero's own field sits on white inside a dark card, where the faint ground
 * the header uses would disappear.
 */
.my-shop-hero__search .wp-block-search__inside-wrapper {
	background: var(--wp--preset--color--base);
	border-color: transparent;
}

/*
 * The account control and the bag read as one pair of controls, not as prose:
 * two soft-cornered targets the same size as each other.
 */
.my-shop-masthead__actions .wc-block-customer-account,
.my-shop-masthead__actions .wc-block-mini-cart__button {
	border-radius: var(--wp--custom--radius-large);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	transition: background-color var(--wp--custom--transition);
}

.my-shop-masthead__actions .wc-block-customer-account:hover,
.my-shop-masthead__actions .wc-block-mini-cart__button:hover {
	background: var(--wp--preset--color--field);
}

/* The count on the bag is the store's orange — the one number in the chrome. */
.my-shop-masthead__actions .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* Chrome links are signposts, not prose: they are found by position, not by rule. */
.my-shop-promise a:hover,
.my-shop-footer a:hover {
	text-decoration: underline;
}

/*
 * The category strip: names in a row, the one you are on marked with the
 * store's orange. A pill on hover rather than an underline, because the bar
 * below the masthead is a set of targets and a target has an area.
 */
.my-shop-strip .wp-block-navigation-item__content {
	border-radius: var(--wp--custom--pill);
	color: var(--wp--preset--color--foreground);
	font-weight: 500;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.my-shop-strip .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--field);
}

.my-shop-strip .current-menu-item > .wp-block-navigation-item__content,
.my-shop-strip [aria-current='page'] {
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

.my-shop-strip .my-shop-strip__highlight .wp-block-navigation-item__content,
.my-shop-strip__highlight a {
	color: var(--wp--preset--color--saving);
	font-weight: 700;
}

/*
 * Inside the mobile overlay the links stack and become the page: the pill has
 * nothing left to distinguish and the type has room to be read.
 */
.my-shop-strip .is-menu-open .wp-block-navigation-item__content {
	background: transparent;
	font-size: var(--wp--preset--font-size--x-large);
	padding-inline: 0;
}

/* The footer's column headings are labels above a list, not headlines. */
.my-shop-footer h6 {
	color: var(--wp--preset--color--muted);
}

/* ----------------------------------------------------------- the homepage */

/*
 * A section heading and the link beside it are one line at every width the
 * heading fits on, and the link keeps its arrow on the same line as its words.
 */
.my-shop-section__more {
	white-space: nowrap;
}

/*
 * The category rail.
 *
 * One row that scrolls sideways where there is no room for it and wraps where
 * there is. A phone gets the flick-through row the whole pattern is shaped
 * around; a desk gets a tidy grid of the same tiles, with no second markup and
 * nothing for the Admin to keep in step.
 */
.my-shop-rail {
	scroll-padding-inline: var(--wp--custom--gutter);
}

.my-shop-rail > .my-shop-card {
	flex: 0 0 auto;
	min-width: 9rem;
	scroll-snap-align: start;
}

/*
 * Where the rail wraps rather than scrolls, the tiles share the line out
 * between them. A shop with three categories would otherwise leave two thirds
 * of a 1300px row empty; the cap is what keeps a shop with three from drawing
 * three tiles the size of billboards.
 */
@media (min-width: 782px) {
	.my-shop-rail > .my-shop-card {
		flex: 1 1 10rem;
		max-width: 16rem;
	}
}

@media (max-width: 781px) {
	.my-shop-rail {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-inline: contain;
		scroll-snap-type: x proximity;

		/* The scrollbar is a horizontal line under a row of cards, and it reads
		   as an eleventh card. The row's own overflow is the affordance. */
		scrollbar-width: none;
	}

	.my-shop-rail::-webkit-scrollbar {
		display: none;
	}
}

.my-shop-card--category h3 a {
	text-decoration: none;
}

.my-shop-card--category:hover h3 a {
	color: var(--wp--preset--color--accent);
}

/* The deals band says what it is in the one colour the store keeps for savings. */
.my-shop-deals h2 {
	color: var(--wp--preset--color--saving);
}

/*
 * The step number is a circle, so it needs to be as tall as it is wide — and
 * core pads any paragraph carrying a background out to a button's proportions,
 * which turns the circle into a lozenge. The padding is taken back rather than
 * the background dropped: the background is what makes it a number in the
 * store's orange rather than a number.
 */
.my-shop-step__number {
	border-radius: var(--wp--custom--pill);
	box-sizing: border-box;
	display: grid;
	flex: 0 0 auto;
	font-weight: 700;
	height: var(--wp--custom--step-marker);
	padding: 0;
	place-items: center;
	width: var(--wp--custom--step-marker);
}

/*
 * The closing call's button inverts: a white button on the store's orange. Core
 * gives a preset-coloured button no hover of its own, so the one it would have
 * had from theme.json is restated in the colours this card actually uses.
 */
.my-shop-cta__button .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--base);
}

/* ---------------------------------------------------------- the catalogue */

/*
 * WooCommerce's filter blocks bring their own drawer — below 601px the panel
 * folds behind a "Filter products" button and opens as a sheet, above it the
 * panel is simply there. Nothing here re-implements that; the rules below are
 * only the things a block cannot say about itself.
 */

/*
 * The filter panel is a fixed measure beside a grid that takes the rest. Set
 * here rather than as the column's own width, which the editor will only accept
 * as a plain length — and the measure is a token.
 *
 * The column is named twice on purpose. Core sizes every column in a stacked-on-
 * mobile set from `.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column`
 * above 782px, and a single class cannot outweigh three: the panel would take
 * half the page and the grid the other half, at every width the shop is used at.
 */
.wp-block-columns > .wp-block-column.my-shop-catalogue__filters {
	flex: 0 0 var(--wp--custom--measure--filters);
	font-size: var(--wp--preset--font-size--small);
}

.my-shop-catalogue__filters .wc-block-product-filter-checkbox-list {
	font-size: var(--wp--preset--font-size--small);
}

/* The panel rides down beside a catalogue far taller than it is. */
.my-shop-catalogue__filters > .my-shop-card {
	position: sticky;
	top: var(--wp--custom--sticky-offset);
}

@media (max-width: 781px) {
	.my-shop-catalogue__filters > .my-shop-card {
		position: static;
	}
}

/*
 * The sorting control is the one native select the catalogue shows, and the
 * toolbar it sits in is a card — so it takes the same field as every other
 * control in the store rather than the browser's.
 */
.my-shop-catalogue__toolbar select {
	background: var(--wp--preset--color--field);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--foreground);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.my-shop-catalogue__toolbar select:focus {
	border-color: var(--wp--preset--color--accent);
	outline: 0;
}

/*
 * A card's badges lie on its image rather than above it, so the row of cards
 * keeps one baseline whether a product is badged or not. The row is inert to
 * the cursor: the whole image underneath is the link to the product.
 */
.my-shop-card__media {
	position: relative;
}

.my-shop-card__badges {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--30);
	inset-inline-start: var(--wp--preset--spacing--30);
	pointer-events: none;
}

/* WooCommerce positions its own on-sale badge; inside the row it goes where the row does. */
.my-shop-card__badges .wc-block-components-product-sale-badge {
	position: static;
}

/*
 * The picture is already inside a card, so it takes no edge of its own — only
 * the card's inner corner and a faint ground, which is what stops a cut-out on
 * white from reading as a hole in the panel it sits on.
 */
.my-shop-card__media img {
	background: var(--wp--preset--color--field);
	border-radius: var(--wp--custom--radius);
}

/* Long product names wrap instead of widening their column, and stop at two lines. */
.wc-block-product .wp-block-post-title {
	display: -webkit-box;
	overflow: hidden;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/*
 * A reduced price is the point of the card it is on. This storefront writes
 * every saving in one green — the badge, the new price, the free-shipping line —
 * so a customer learns the colour once and then reads the page by it.
 */
.wc-block-components-product-price ins,
.wc-block-components-product-price__value.is-discounted {
	color: var(--wp--preset--color--saving);
	text-decoration: none;
}

.wc-block-components-product-price del {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

/* Stock is a fact on a dense card, not a warning — until it is one. */
.wc-block-components-product-stock-indicator {
	color: var(--wp--preset--color--muted);
}

.wc-block-components-product-stock-indicator--low-stock,
.wc-block-components-product-stock-indicator--out-of-stock {
	color: var(--wp--preset--color--deal);
	font-weight: 700;
}

/* The rating row is small print that has to stay legible beside the price. */
.wc-block-components-product-rating {
	color: var(--wp--preset--color--muted);
}

/*
 * Adding straight from the grid is what a grid like this is for, so the button
 * is simply there — no hover reveal. It fills the card's width because a row of
 * buttons that all start and end together is a row a customer can aim at
 * without reading.
 *
 * And it is pushed to the bottom of the card rather than left to follow the
 * price. A cell in a grid row is as tall as the tallest card in it, but what
 * comes before the button is not: one product's name wraps to two lines, the
 * next has no stock line at all because it is a variable product — so on the
 * Giyim archive "Sepete ekle" and "Seçenekler" sat 26px apart and the row read
 * as slightly broken without anything on it looking wrong. `margin-top: auto`
 * spends the slack above the button instead of below it, which is what needs
 * the column direction set above: in a block layout it does nothing at all.
 */
.wc-block-product .wp-block-woocommerce-product-button {
	margin-top: auto;
}

.wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link,
.wc-block-product .wp-block-woocommerce-product-button .wc-block-components-product-button__button {
	width: 100%;
}

/*
 * The line that says something reached the bag. The plugin puts it there on
 * WooCommerce's own add-to-cart event; what it looks like is the theme's.
 */
.my-shop-added-to-bag {
	position: fixed;
	z-index: 100;
	bottom: var(--wp--preset--spacing--60);
	left: 50%;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius-large);
	box-shadow: var(--wp--custom--shadow-lifted);
	font-size: var(--wp--preset--font-size--small);

	/* Out of the way until it has something to say, and never in the way of a tap. */
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, var(--wp--preset--spacing--40));
	transition: opacity var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.my-shop-added-to-bag.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.my-shop-added-to-bag a {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
	.my-shop-added-to-bag {
		transition-duration: 1ms;
		transform: translate(-50%, 0);
	}
}

/*
 * Page numbers are a row of targets with nothing between them — the block has
 * no gap of its own, and there is no theme.json control for the space inside it.
 */
.wp-block-query-pagination-numbers {
	display: flex;
	gap: var(--wp--preset--spacing--40);
}

.wp-block-query-pagination-numbers .page-numbers {
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-weight: 700;
}

/*
 * The price filter's two number fields.
 *
 * WooCommerce sizes them with a rule written for a wrapper class its markup
 * does not actually carry (`.wc-block-product-filter-price-slider`), so the
 * rule never matches and each field falls back to a text input's default
 * twenty-character width — together wider than the filter column, which they
 * then overflow. Sizing them from the column instead of from their content
 * fixes it without inventing a width.
 */
.wc-block-product-filter-price-slider__content {
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.wc-block-product-filter-price-slider__content .text input[type='text'] {
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
}

/* ------------------------------------------------------- the product page */

/* The picture's proportions are the block's own setting; only the ground is ours. */
.my-shop-product__gallery .wc-block-product-gallery-large-image img {
	background: var(--wp--preset--color--field);
	border-radius: var(--wp--custom--radius-large);
}

.my-shop-product__gallery .wc-block-product-gallery-thumbnails img {
	background: var(--wp--preset--color--field);
	border-radius: var(--wp--custom--radius);
}

/*
 * The buy box rides down the page beside the detail. It is the one thing on a
 * product page a customer may want at any point in it, and a page this tall
 * would otherwise ask them to scroll back for it.
 */
.my-shop-buybox {
	flex-grow: 0;
}

.my-shop-buybox__panel {
	position: sticky;
	top: var(--wp--custom--sticky-offset);
}

/* Below the columns' own breakpoint the box is simply next in the page. */
@media (max-width: 781px) {
	.my-shop-buybox__panel {
		position: static;
	}
}

/* The delivery promise sits on its own faint green, the way a saving always does. */
.my-shop-buybox__promise {
	background: var(--wp--preset--color--saving-soft);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

/*
 * The chips a size or a dimension is chosen from (ADR-0003).
 *
 * A chosen chip is set through the two variables WooCommerce reads without a
 * guard. The other two it exposes — for the border and the text of an unchosen
 * one — are only read under `has-chip-border-color` classes the block does not
 * carry here, so those two are set as plain properties instead.
 */
.my-shop-product__buy .wc-block-product-filter-chips {
	--wc-product-filter-chips-selected-background: var(--wp--preset--color--accent);
	--wc-product-filter-chips-selected-text: var(--wp--preset--color--base);
}

/*
 * A chip carrying a word. WooCommerce marks a set of colors `is-style-swatch`
 * and draws those as circles instead (ADR-0005), so the box below has to stay
 * off them — it would square a swatch back up and pad it out of round.
 */
.my-shop-product__buy .wc-block-product-filter-chips:not(.is-style-swatch) .wc-block-product-filter-chips__item {
	border-color: var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	font-size: var(--wp--preset--font-size--small);
	min-width: 3ch; /* so "S" and "XL" are the same size button */
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	transition: border-color var(--wp--custom--transition);
}

.my-shop-product__buy .wc-block-product-filter-chips:not(.is-style-swatch) .wc-block-product-filter-chips__item:hover {
	border-color: var(--wp--preset--color--accent);
}

/*
 * And a chip that is a color. The circle, the hidden label and the ring around
 * the chosen one are WooCommerce's; what the theme lends them is its own edges,
 * which core otherwise mixes out of whatever text colour surrounds them.
 */
.my-shop-product__buy .is-style-swatch {
	--wc-product-filter-chips-selected-border: var(--wp--preset--color--accent);
}

.my-shop-product__buy .is-style-swatch .wc-block-product-filter-chips__swatch {
	border-color: var(--wp--preset--color--line);
	transition: border-color var(--wp--custom--transition);
}

/*
 * A color this size was never made in is dimmed and struck through by
 * WooCommerce — but the strike lands on the label, and a swatch has none to
 * show. So the circle carries the line itself, and the customer can see that
 * the color exists and is not available rather than merely that it is faint.
 */
.my-shop-product__buy .is-style-swatch .wc-block-product-filter-chips__item:disabled .wc-block-product-filter-chips__swatch {
	background-image: linear-gradient(
		to top left,
		transparent calc(50% - 1px),
		currentColor calc(50% - 1px),
		currentColor calc(50% + 1px),
		transparent calc(50% + 1px)
	);
}

/*
 * An attribute drawn as a list rather than as chips — the plugin swaps the row
 * on its way out when the attribute asks for it (ADR-0007). What it becomes is
 * a select, and a select is the one control on this page that has to look like
 * the rest of the store's fields.
 */
.my-shop-product__buy select {
	background: var(--wp--preset--color--field);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--foreground);
	font: inherit;
	padding: var(--wp--preset--spacing--40);
	width: 100%;
}

/* The name above each set of chips reads as a label, not as body copy. */
.my-shop-product__buy .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
}

/* The buy box's own button is the page's primary action: it fills the box. */
.my-shop-product__buy .wp-block-button__link,
.my-shop-product__buy .single_add_to_cart_button {
	width: 100%;
}

/*
 * The detail card. The description and the specifications are the page on a
 * store like this one, so they are laid out to be read: a rule between them, and
 * a line length someone can follow.
 */
.my-shop-card--detail > * {
	max-width: var(--wp--custom--measure--prose);
}

.my-shop-card--detail h2 {
	border-top: 1px solid var(--wp--preset--color--line);
	max-width: none;
	padding-top: var(--wp--preset--spacing--50);
}

.my-shop-card--detail > h2:first-child {
	border-top: 0;
	padding-top: 0;
}

/* WooCommerce's specifications table, given the store's own edges. */
.wp-block-woocommerce-product-specifications table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-woocommerce-product-specifications th,
.wp-block-woocommerce-product-specifications td {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--40);
	text-align: start;
}

/* -------------------------------------------- the bag and the paying (ADR-0002) */

/*
 * Both pages are WooCommerce's own blocks throughout — the lines, the stepper,
 * the address form, the validation, the consent tick. What is below is the
 * store's edges and the one behaviour a block cannot describe: an order summary
 * that stays where the customer can see it.
 */

/*
 * The summary rides down the page beside the lines.
 *
 * WooCommerce already sticks the checkout's, but it rests 24px from the top of
 * the viewport — and on the bag, where this store's masthead is sticky too, that
 * would slide the summary under the bar. Both come to rest below it instead.
 */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	align-self: flex-start;
	position: sticky;
	top: var(--wp--custom--sticky-offset);
}

/* Below the sidebar layout's own breakpoint the summary is simply next. */
.wc-block-components-sidebar-layout:not(.is-large) .wc-block-cart__sidebar,
.wc-block-components-sidebar-layout:not(.is-large) .wc-block-checkout__sidebar {
	position: static;
}

/*
 * The checkout ships no footer and a stripped header, so the page has nothing
 * under it to rest on — the top of the paying column is where it has to sit.
 */
.my-shop-checkout .wc-block-checkout__sidebar {
	top: var(--wp--preset--spacing--60);
}

/*
 * The two pages are WooCommerce's blocks on this storefront's grey ground, so
 * the panels that hold them are given the same card the rest of the store uses.
 */
.wc-block-cart__main,
.wc-block-checkout__main {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-large);
	box-shadow: var(--wp--custom--shadow);
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--60);
}

/* A line's picture is cornered like every other product picture in the store. */
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	border-radius: var(--wp--custom--radius);
}

/*
 * The stepper draws its own box; what it borrows from the store is the edge.
 * One rule for both the places it appears — beside the buying, and on a line in
 * the bag — because a stepper that differed between them would only look broken.
 */
.my-shop-product__buy .wc-block-components-quantity-selector,
.wc-block-cart-item__quantity .wc-block-components-quantity-selector {
	border-color: var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
}

/* ------------------------------------------------------- the legal pages */

/*
 * A standing note that the wording is a draft, set apart from the wording
 * itself so no reader mistakes one for the other.
 */
.my-shop-legal__note {
	background: var(--wp--preset--color--accent-soft);
	border-inline-start: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--50);
}

.my-shop-card--prose > * {
	max-width: var(--wp--custom--measure--prose);
}

/* -------------------------------------------------------- the account page */

/*
 * The account door and the rooms behind it.
 *
 * WooCommerce keeps ownership of every form, endpoint and table. The theme
 * removes its old floated layout and lends those controls the same surfaces,
 * edges and states as the block storefront around them (ADR-0002).
 */
.my-shop-account .woocommerce {
	font-family: var(--wp--preset--font-family--sans);
}

.my-shop-account #customer_login {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.my-shop-account #customer_login::before,
.my-shop-account #customer_login::after {
	display: none;
}

.my-shop-account #customer_login > .u-column1,
.my-shop-account #customer_login > .u-column2 {
	float: none;
	width: auto;
}

.my-shop-account form.login,
.my-shop-account form.register,
.my-shop-account form.lost_reset_password,
.my-shop-account form.woocommerce-EditAccountForm,
.my-shop-account form.woocommerce-address-fields {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-large);
	box-shadow: var(--wp--custom--shadow);
	margin: 0;
	padding: var(--wp--preset--spacing--60);
}

.my-shop-account .form-row {
	margin-block: 0 var(--wp--preset--spacing--50);
	padding: 0;
}

.my-shop-account .form-row label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	margin-bottom: var(--wp--preset--spacing--30);
}

.my-shop-account input.input-text,
.my-shop-account select,
.my-shop-account textarea {
	background: var(--wp--preset--color--field);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	box-sizing: border-box;
	color: var(--wp--preset--color--foreground);
	font: inherit;
	padding: var(--wp--preset--spacing--40);
	width: 100%;
}

.my-shop-account input.input-text:focus,
.my-shop-account select:focus,
.my-shop-account textarea:focus {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px var(--wp--preset--color--accent-soft);
	outline: 0;
}

.my-shop-account .show-password-input {
	top: 0.75em;
}

.my-shop-account button.button,
.my-shop-account a.button {
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	transition: background-color var(--wp--custom--transition);
}

.my-shop-account button.button:hover,
.my-shop-account a.button:hover {
	background: var(--wp--preset--color--accent-strong);
	color: var(--wp--preset--color--base);
}

.my-shop-account .woocommerce-privacy-policy-text,
.my-shop-account .woocommerce-form-register > p:not(.form-row),
.my-shop-account .woocommerce-LostPassword {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.my-shop-account .wc-block-components-notice-banner,
.my-shop-account .woocommerce-error,
.my-shop-account .woocommerce-info,
.my-shop-account .woocommerce-message {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-inline-start-width: 4px;
	border-radius: var(--wp--custom--radius);
	box-sizing: border-box;
	color: var(--wp--preset--color--foreground);
	margin-block: 0 var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50);
}

.my-shop-account .wc-block-components-notice-banner.is-error,
.my-shop-account .woocommerce-error {
	border-color: var(--wp--preset--color--danger);
}

.my-shop-account .wc-block-components-notice-banner.is-success,
.my-shop-account .woocommerce-message {
	border-color: var(--wp--preset--color--success);
}

.my-shop-account .wc-block-components-notice-banner > svg {
	background: transparent;
	fill: currentColor;
}

.my-shop-account .wc-block-components-notice-banner.is-error > svg {
	color: var(--wp--preset--color--danger);
}

.my-shop-account .wc-block-components-notice-banner.is-success > svg {
	color: var(--wp--preset--color--success);
}

.my-shop-account__surface > .woocommerce:has(> .woocommerce-MyAccount-navigation) {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr);
}

/*
 * Notices run across the top of the account, not down one of its columns.
 *
 * WooCommerce opens the shortcode with an empty `woocommerce-notices-wrapper`
 * div, which the grid places first — taking the navigation's own cell and
 * pushing the content onto a second row beneath it. It is invisible until
 * something goes wrong, so the layout looks broken for a reason nothing on the
 * page can show.
 */
.my-shop-account__surface > .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

/*
 * And the clearfix that wrapper used to need is taken out of the grid entirely.
 *
 * WooCommerce clears its old floated layout with `::before` and `::after` on the
 * account wrapper. A pseudo-element is a grid item like any other: those two
 * take the first and the last cell, which puts the navigation in the content's
 * column and drops the content onto a row of its own beneath it. Nothing on the
 * page can be pointed at to explain it, because neither of them draws anything.
 */
.my-shop-account__surface > .woocommerce::before,
.my-shop-account__surface > .woocommerce::after {
	display: none;
}

.my-shop-account .woocommerce-MyAccount-navigation,
.my-shop-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

.my-shop-account .woocommerce-MyAccount-navigation ul {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-large);
	box-shadow: var(--wp--custom--shadow);
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

.my-shop-account .woocommerce-MyAccount-navigation li + li {
	border-top: 1px solid var(--wp--preset--color--line);
}

.my-shop-account .woocommerce-MyAccount-navigation a {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	text-decoration: none;
}

.my-shop-account .woocommerce-MyAccount-navigation .is-active a {
	background: var(--wp--preset--color--accent-soft);
	box-shadow: inset 3px 0 0 var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

.my-shop-account table.shop_table {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-collapse: collapse;
	border-radius: var(--wp--custom--radius-large);
	overflow: hidden;
	width: 100%;
}

.my-shop-account table.shop_table th,
.my-shop-account table.shop_table td {
	border-color: var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--40);
}

.my-shop-account .woocommerce-Addresses {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.my-shop-account .woocommerce-Addresses::before,
.my-shop-account .woocommerce-Addresses::after {
	display: none;
}

.my-shop-account .woocommerce-Address {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius-large);
	box-shadow: var(--wp--custom--shadow);
	float: none;
	padding: var(--wp--preset--spacing--50);
	width: auto;
}

.my-shop-account .wc-block-order-confirmation-additional-fields-wrapper {
	background: var(--wp--preset--color--saving-soft);
	border-inline-start: 4px solid var(--wp--preset--color--saving);
	border-radius: var(--wp--custom--radius);
	padding: var(--wp--preset--spacing--50);
}

.my-shop-account .wc-block-components-additional-fields-list {
	display: grid;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	grid-template-columns: minmax(10rem, 1fr) 2fr;
}

.my-shop-account .wc-block-components-additional-fields-list > * {
	margin: 0;
}

@media (max-width: 782px) {
	.my-shop-account #customer_login,
	.my-shop-account__surface > .woocommerce:has(> .woocommerce-MyAccount-navigation),
	.my-shop-account .woocommerce-Addresses {
		grid-template-columns: 1fr;
	}
}

/*
 * ==========================================================================
 * The phone: app-style, below WordPress's own breakpoint.
 *
 * Everything here is scoped to 781px and down, so the desktop above is exactly
 * what it was. The two elements the phone adds — the tab bar and the sticky
 * buying bar — are hidden at desktop widths just below, wrapper and all, so
 * their block gap does not move the footer either.
 * ==========================================================================
 */
.my-shop-app-bar,
.my-shop-sticky-buy,
.wp-block-template-part:has(> .my-shop-app-bar) {
	display: none;
}

@media (max-width: 781px) {

	:root {
		/* The bar's own height, so the page can clear it and the buy bar rest on it. */
		--my-shop-app-bar: var(--wp--custom--app-bar--height);
	}

	/* A tap is a tap, not a grey flash — every control answers with its own state. */
	a,
	button,
	input,
	select,
	textarea,
	.wc-block-components-button {
		-webkit-tap-highlight-color: transparent;
	}

	/* Form fields are 16px or iOS zooms the whole page the moment one is focused. */
	input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
	select,
	textarea,
	.wp-block-search__input {
		font-size: var(--wp--custom--field-text) !important;
	}

	/* The page ends above the bar, so the footer's last line is never behind it.
	   Only where the bar is: the checkout ships no tab bar and needs no gap. */
	body:has(.my-shop-app-bar) {
		padding-bottom: calc(var(--my-shop-app-bar) + env(safe-area-inset-bottom));
	}

	/* --- the tab bar ----------------------------------------------------- */
	.wp-block-template-part:has(> .my-shop-app-bar) {
		display: block;
	}

	.my-shop-app-bar {
		position: fixed;
		z-index: 200;
		inset-inline: 0;
		bottom: 0;
		display: flex;
		align-items: stretch;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: var(--wp--preset--color--base);
		/* The hairline is a shadow, not a border, so the bar is exactly
		   --my-shop-app-bar tall and everything resting on it can trust that. */
		box-shadow: 0 -1px 0 var(--wp--preset--color--line), var(--wp--custom--bar-shadow);
	}

	.my-shop-app-bar__item {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		box-sizing: border-box;
		height: var(--my-shop-app-bar);
		padding: 0 2px;
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--xx-small);
		line-height: 1.1;
		text-decoration: none;
	}

	.my-shop-app-bar__item:active {
		background-color: var(--wp--preset--color--field);
	}

	.my-shop-app-bar__item.is-current {
		color: var(--wp--preset--color--accent);
	}

	.my-shop-app-bar__icon {
		position: relative;
		display: inline-flex;
	}

	.my-shop-app-bar__label {
		font-weight: 700;
		letter-spacing: var(--wp--custom--tracking--label);
	}

	.my-shop-app-bar__badge {
		position: absolute;
		top: -0.35rem;
		inset-inline-end: -0.7rem;
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: var(--wp--custom--app-bar--badge);
		height: var(--wp--custom--app-bar--badge);
		padding-inline: 4px;
		background-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--base);
		border-radius: var(--wp--custom--pill);
		font-family: var(--wp--preset--font-family--mono);
		font-size: var(--wp--preset--font-size--xx-small);
		font-weight: 700;
		line-height: 1;
	}

	.my-shop-app-bar__badge[aria-hidden='true'] {
		display: none;
	}

	/* --- compact top bar: the name and the search, nothing else ---------- */
	.my-shop-promise {
		display: none;
	}

	.my-shop-masthead {
		padding-block: var(--wp--preset--spacing--30);
	}

	.my-shop-masthead .alignwide {
		row-gap: var(--wp--preset--spacing--30);
	}

	.my-shop-masthead .wp-block-site-title {
		font-size: var(--wp--preset--font-size--x-large);
	}

	/* The tab bar reaches the account and the bag now. `!important` because the
	   group's own layout style sets `display` at the same specificity. */
	.my-shop-masthead__actions {
		display: none !important;
	}

	.my-shop-masthead__search.wp-block-search {
		flex: 1 1 100%;
		max-width: none;
	}

	/* The category strip and its hamburger are desktop navigation; the tab bar
	   is the phone's. */
	.my-shop-strip {
		display: none;
	}

	/* --- footer collapses to what a customer still needs ----------------- */
	.my-shop-footer {
		padding-top: var(--wp--preset--spacing--60);
		padding-bottom: var(--wp--preset--spacing--60);
	}

	.my-shop-footer__brand,
	.my-shop-footer__col--catalogue,
	.my-shop-footer__col--shop {
		display: none;
	}

	.my-shop-footer .wp-block-columns {
		gap: var(--wp--preset--spacing--50);
	}

	/* A footer link is still a tap target, not a line of prose. */
	.my-shop-footer a {
		align-items: center;
		display: inline-flex;
		min-height: var(--wp--custom--tap);
	}

	/* --- home: a short opening, a tile rail, swipe rows ------------------ */
	.my-shop-hero {
		padding-top: var(--wp--preset--spacing--70) !important;
		padding-bottom: var(--wp--preset--spacing--70) !important;
	}

	.my-shop-hero h1 {
		font-size: var(--wp--preset--font-size--xx-large);
	}

	/* Search is in the bar above; not twice on one screen. */
	.my-shop-hero__search {
		display: none;
	}

	.my-shop-rail {
		position: relative;
	}

	.my-shop-rail > .my-shop-card {
		flex: 0 0 30%;
		max-width: 30%;
		min-width: 5.5rem;
		scroll-snap-align: start;
	}

	.my-shop-card--category .wp-block-image img {
		width: 100%;
	}

	/*
	 * The homepage product rows: a shelf a finger flicks through, each card
	 * showing a card and a half so the swipe is obvious. `position: relative`
	 * keeps the row's overflow inside it — without it the phone grows the
	 * layout viewport to the row's full width and the whole page shrinks.
	 */
	:is(
		.my-shop-home-flash-sales,
		.my-shop-home-trending,
		.my-shop-home-best-sellers,
		.my-shop-home-new-arrivals,
		.my-shop-deals
	) .wc-block-product-template {
		position: relative;
		display: flex;
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--40);
		overflow-x: auto;
		padding-bottom: var(--wp--preset--spacing--20);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	:is(
		.my-shop-home-flash-sales,
		.my-shop-home-trending,
		.my-shop-home-best-sellers,
		.my-shop-home-new-arrivals,
		.my-shop-deals
	) .wc-block-product-template::-webkit-scrollbar {
		display: none;
	}

	:is(
		.my-shop-home-flash-sales,
		.my-shop-home-trending,
		.my-shop-home-best-sellers,
		.my-shop-home-new-arrivals,
		.my-shop-deals
	) .wc-block-product {
		flex: 0 0 64%;
		scroll-snap-align: start;
	}

	/* --- catalogue: two across, filters behind their own button ---------- */
	.my-shop-catalogue .wc-block-product-template {
		display: grid;
		gap: var(--wp--preset--spacing--40);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.my-shop-catalogue .wc-block-product-template > .wc-block-product {
		flex: none;
		width: auto;
	}

	/*
	 * Search results: two cards across on the phone, the same as the catalogue.
	 * Desktop keeps the theme's post list, which is what the template draws —
	 * this is only the phone's shape, so it is scoped to the mobile block.
	 */
	body.search .wp-block-query .wp-block-post-template {
		display: grid;
		gap: var(--wp--preset--spacing--40);
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.search .wp-block-query .wp-block-post-template > li {
		background-color: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--wp--custom--radius-large);
		box-shadow: var(--wp--custom--shadow);
		padding: var(--wp--preset--spacing--50);
	}

	/* --- product: a swipe gallery and a sticky buying bar ---------------- */
	.my-shop-product__gallery .wc-block-product-gallery-thumbnails {
		display: none;
	}

	/* With the thumbnails gone, the pictures are swiped. WooCommerce already
	   lays them out in one row and pages through it by scrolling the row; the
	   row only has to let a thumb scroll it too, a picture at a time. */
	.my-shop-product__gallery .wc-block-product-gallery-large-image__container {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.my-shop-product__gallery .wc-block-product-gallery-large-image__container::-webkit-scrollbar {
		display: none;
	}

	.my-shop-product__gallery .wc-block-product-gallery-large-image__container > * {
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	/* Full-bleed the picture out of the card's padding: the phone's gallery is
	   the page, not a panel on it. */
	.my-shop-card--gallery {
		padding-inline: 0 !important;
	}

	.my-shop-card--gallery > .my-shop-product__gallery {
		margin-inline: 0;
	}

	/* A chip is a thumb target, not a label. */
	.my-shop-product__buy .wc-block-product-filter-chips:not(.is-style-swatch) .wc-block-product-filter-chips__item {
		min-width: var(--wp--custom--tap);
		min-height: var(--wp--custom--tap);
		padding-inline: var(--wp--preset--spacing--40);
		font-size: var(--wp--preset--font-size--medium);
	}

	.my-shop-product__buy .is-style-swatch .wc-block-product-filter-chips__item {
		min-width: var(--wp--custom--tap);
		min-height: var(--wp--custom--tap);
	}

	/* The bar an app puts above its tab bar: the price and the button however
	   far the page has scrolled. */
	body.single-product {
		padding-bottom: calc(var(--my-shop-app-bar) + env(safe-area-inset-bottom) + var(--wp--custom--buy-bar--space));
	}

	.my-shop-sticky-buy {
		position: fixed;
		z-index: 190;
		inset-inline: 0;
		bottom: calc(var(--my-shop-app-bar) + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--40);
		margin: 0;
		padding: var(--wp--preset--spacing--30) var(--wp--custom--gutter);
		background-color: var(--wp--preset--color--base);
		border-top: 1px solid var(--wp--preset--color--line);
		box-shadow: var(--wp--custom--bar-shadow-strong);
	}

	.my-shop-sticky-buy .wp-block-woocommerce-product-price {
		margin: 0;
	}

	.my-shop-sticky-buy__button {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: var(--wp--custom--tap);
		padding-inline: var(--wp--preset--spacing--60);
		background-color: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--base);
		border: 0;
		border-radius: var(--wp--custom--radius);
		font: inherit;
		font-size: var(--wp--preset--font-size--small);
		font-weight: 700;
		cursor: pointer;
	}

	.my-shop-sticky-buy__button:active {
		background-color: var(--wp--preset--color--accent-strong);
	}

	/* --- the bag: one column, total and checkout ride above the tab bar --
	   The summary card stays in the page, coupon and shipping included; only
	   its grand total and the checkout button leave it, fixed into one bar
	   above the tab bar. A fixed element escapes its parents' boxes, so the
	   two are lifted out with CSS alone and stay WooCommerce's own, live
	   blocks. The bar's ground is the body's ::after, drawn under them. */
	body.woocommerce-cart {
		--my-shop-cart-bar: var(--wp--custom--cart-bar);
		padding-bottom: calc(var(--my-shop-app-bar) + env(safe-area-inset-bottom) + var(--my-shop-cart-bar));
	}

	body.woocommerce-cart::after {
		content: "";
		position: fixed;
		z-index: 149;
		inset-inline: 0;
		bottom: calc(var(--my-shop-app-bar) + env(safe-area-inset-bottom));
		height: var(--my-shop-cart-bar);
		background-color: var(--wp--preset--color--base);
		box-shadow: 0 -1px 0 var(--wp--preset--color--line), var(--wp--custom--bar-shadow-raised);
	}

	/* An empty bag has no total and no button, and so no bar. */
	body.woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block:not([hidden]))::after,
	body.woocommerce-cart:not(:has(.wc-block-cart__submit))::after {
		content: none;
	}

	/* One column at every phone width, not only under WooCommerce's own 700px. */
	body.woocommerce-cart .wc-block-components-sidebar-layout {
		display: block;
	}

	body.woocommerce-cart .wc-block-cart__main,
	body.woocommerce-cart .wc-block-cart__sidebar {
		width: 100%;
	}

	body.woocommerce-cart .wc-block-components-sidebar-layout .wc-block-cart__sidebar {
		position: static;
		margin-top: var(--wp--preset--spacing--40);
	}

	/* The grand total: the bar's left half. */
	body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item {
		position: fixed;
		z-index: 150;
		left: var(--wp--custom--gutter);
		right: calc(50% + var(--wp--preset--spacing--30));
		bottom: calc(var(--my-shop-app-bar) + env(safe-area-inset-bottom));
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 0;
		height: var(--my-shop-cart-bar);
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
	}

	/* WooCommerce lets the label grow to push the value right; stacked here,
	   that growth would push the value out of the bar. */
	body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item > * {
		flex: 0 0 auto;
	}

	body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
		font-size: var(--wp--preset--font-size--x-small);
		color: var(--wp--preset--color--muted);
		font-weight: 400;
	}

	body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
		margin: 0;
		font-size: var(--wp--preset--font-size--large);
		font-weight: 700;
	}

	body.woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-footer-item .wc-block-components-totals-item__description {
		display: none;
	}

	/* The checkout button: the bar's right half. WooCommerce makes its own
	   container sticky at the bottom on small screens; this one sits above the
	   tab bar instead. */
	body.woocommerce-cart .wc-block-cart__sidebar .wc-block-cart__submit,
	body.woocommerce-cart .wc-block-cart__sidebar .wc-block-cart__submit-container--sticky {
		position: fixed;
		z-index: 150;
		left: 50%;
		right: var(--wp--custom--gutter);
		bottom: calc(var(--my-shop-app-bar) + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		height: var(--my-shop-cart-bar);
		margin: 0;
		padding: 0;
		background: none;
		box-shadow: none;
	}

	body.woocommerce-cart .wc-block-cart__sidebar .wc-block-cart__submit-container--sticky::before {
		content: none;
	}

	body.woocommerce-cart .wc-block-cart__sidebar .wc-block-cart__submit-container {
		width: 100%;
		padding: 0;
	}

	body.woocommerce-cart .wc-block-cart__submit-button {
		width: 100%;
		min-height: var(--wp--custom--tap);
	}

	/* --- checkout: one column, the summary folds at the top -------------- */
	.wc-block-checkout .wc-block-components-sidebar-layout {
		display: flex;
		flex-direction: column;
	}

	.wc-block-checkout__main,
	.wc-block-checkout__sidebar {
		width: 100%;
	}

	/* The summary WooCommerce folds is the last child in source order; the
	   phone reads it first, above the form, with the place-order button still
	   at the end of the one column. */
	.wc-block-checkout__sidebar {
		order: -1;
		position: static;
	}

	/* --- account: a settings list, not a sidebar ------------------------- */
	body.woocommerce-account .woocommerce-MyAccount-navigation a {
		align-items: center;
		display: flex;
		font-size: var(--wp--preset--font-size--medium);
		min-height: var(--wp--custom--tap);
		padding: var(--wp--preset--spacing--40);
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation li + li {
		border-top: 1px solid var(--wp--preset--color--line);
	}
}

/*
 * A select is as wide as its longest option ("Fiyata göre sırala: yüksekten
 * düşüğe"), which at 320px pushed the catalogue 21px past the screen and made
 * the phone zoom the whole page out. It may only be as wide as its row.
 */
@media (max-width: 781px) {
	.wc-block-catalog-sorting,
	.woocommerce-ordering,
	.woocommerce-ordering .orderby {
		min-width: 0;
		max-width: 100%;
	}
}