/*
 * Only what theme.json cannot express.
 * Every color 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.
 */

/* Turkish is diacritic-dense — keep the serif's accents crisp. */
body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/*
 * Sticky header.
 *
 * 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 announcement strip above it scroll away.
 */
.wp-block-template-part:has(> .my-shop-topnav) {
	display: contents;
}

/*
 * The ground the bar sits on. It is set here rather than as a preset background
 * on the block because WordPress prints those with !important, which a frosted
 * variant could never outweigh: opaque everywhere, translucent where a browser
 * can blur what passes underneath.
 */
.my-shop-topnav {
	background-color: var(--wp--preset--color--base);
}

/*
 * The frosting sits on a pseudo-element rather than on the bar itself:
 * backdrop-filter turns its own element into the containing block for anything
 * fixed inside it, which would trap core's mobile navigation overlay inside the
 * header instead of letting it cover the page. The bar is already positioned —
 * core's sticky — so ::before has a box to fill.
 */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.my-shop-topnav {
		background-color: transparent;
	}

	.my-shop-topnav::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
	}
}

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

/* Navigation: a rule that grows under the link you are on, and the one you hover. */
.my-shop-topnav .wp-block-navigation-item__content {
	position: relative;
}

.my-shop-topnav .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: -3px;
	height: 1px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--wp--custom--transition);
}

.my-shop-topnav .wp-block-navigation-item__content:hover::after,
.my-shop-topnav .current-menu-item > .wp-block-navigation-item__content::after,
.my-shop-topnav [aria-current='page']::after {
	transform: scaleX(1);
}

/*
 * Inside the mobile overlay the links stack and become the page: the underline
 * has nothing left to distinguish, and the display face has room to be read.
 */
.my-shop-topnav .is-menu-open .wp-block-navigation-item__content::after {
	content: none;
}

.my-shop-topnav .is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
}

/* A category card is one big target: it answers to a cursor anywhere on it. */
.my-shop-category-card {
	transition: border-color var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.my-shop-category-card:hover {
	border-color: var(--wp--preset--color--foreground);
	transform: var(--wp--custom--lift);
}

/*
 * The catalogue: a filter panel beside a grid of product cards.
 *
 * 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.
 */
.my-shop-catalogue__filters {
	flex: 0 0 var(--wp--custom--measure--filters);
}

/* The toolbar the count and the sort share sits on a line of its own. */
.my-shop-catalogue__toolbar {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-bottom: var(--wp--preset--spacing--30);
}

/*
 * 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-product-card__media {
	position: relative;
}

.my-shop-product-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-product-card__badges .wc-block-components-product-sale-badge {
	position: static;
}

/* The same lift a category card answers a cursor with. */
.my-shop-product-card__media img {
	border-radius: var(--wp--custom--radius);
	transition: transform var(--wp--custom--transition);
}

.wc-block-product:hover .my-shop-product-card__media img {
	transform: var(--wp--custom--lift);
}

/* Long product names wrap instead of widening their column. */
.wc-block-product .wp-block-post-title {
	overflow-wrap: anywhere;
}

/*
 * Adding straight from the grid is a shortcut, not the card's subject: it comes
 * out under the cursor and stays out of the way of the picture and the price the
 * rest of the time.
 *
 * Only where there is a cursor to come out under. A touch screen has no hover to
 * give, so below this query the button is simply always there — the same reason
 * `focus-within` is here: a keyboard reaches the card through its title, and the
 * button has to be real by the time the next tab arrives at it. `pointer-events`
 * rather than `visibility`, because a hidden button cannot be tabbed to at all,
 * and an invisible one that still takes clicks is a trap.
 */
@media (hover: hover) and (pointer: fine) {
	.wc-block-product .wp-block-woocommerce-product-button {
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--wp--custom--transition);
	}

	.wc-block-product:hover .wp-block-woocommerce-product-button,
	.wc-block-product:focus-within .wp-block-woocommerce-product-button {
		opacity: 1;
		pointer-events: auto;
	}
}

/*
 * 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--50);
	left: 50%;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius);
	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--30));
	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--surface);
	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 links 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--30);
}

/*
 * 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: pictures beside the buying, then the detail, then a row of
 * things to look at next.
 *
 * As with the catalogue, the rules here are only what a block cannot say about
 * itself — the gallery's proportions, the fold-outs' rules, and the variables
 * WooCommerce exposes for its chips.
 */

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

/*
 * 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--foreground);
	--wc-product-filter-chips-selected-text: var(--wp--preset--color--surface);
}

/*
 * 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--border);
	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--20) var(--wp--preset--spacing--30);
	transition: border-color var(--wp--custom--transition);
}

/*
 * 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--foreground);
}

.my-shop-product__buy .is-style-swatch .wc-block-product-filter-chips__swatch {
	border-color: var(--wp--preset--color--border);
	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)
	);
}

/* 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);
	letter-spacing: var(--wp--custom--tracking--label);
}

/*
 * The fold-outs. `core/details` is a bare <details> element: the line between
 * sections, the row the summary sits on and the reading width of what opens are
 * all the theme's to draw.
 */
.my-shop-product__detail {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.my-shop-product__detail .wp-block-details {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--40);
}

.my-shop-product__detail summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
}

.my-shop-product__detail summary:hover {
	color: var(--wp--preset--color--accent);
}

/* What opens keeps a line length someone can actually read. */
.my-shop-product__detail .wp-block-details > :not(summary) {
	max-width: 68ch;
}

/*
 * A fold with nothing behind it does not appear at all. The specifications
 * block renders literally nothing for a product with no weight, no dimensions
 * and no attributes — a plain mug — and a heading that opens onto blank space
 * reads as a fault in the page.
 */
.my-shop-product__detail .wp-block-details:not(:has(> :not(summary))) {
	display: none;
}

/*
 * 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 header 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;
}

/* 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--border);
	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 {
	border-inline-start: 1px solid var(--wp--preset--color--border);
	padding-inline-start: var(--wp--preset--spacing--40);
}

/*
 * 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--50);
	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--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius);
	margin: 0;
	padding: var(--wp--preset--spacing--40);
}

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

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

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

.my-shop-account input.input-text:focus,
.my-shop-account select:focus,
.my-shop-account textarea:focus {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent);
	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--foreground);
	border: 0;
	border-radius: var(--wp--custom--radius);
	color: var(--wp--preset--color--surface);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	transition: background-color var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.my-shop-account button.button:hover,
.my-shop-account a.button:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	transform: var(--wp--custom--lift);
}

.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--surface);
	border: 1px solid var(--wp--preset--color--border);
	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--50);
	padding: var(--wp--preset--spacing--40);
}

.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--50);
	grid-template-columns: minmax(12rem, 1fr) minmax(0, 3fr);
}

.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--surface);
	border: 1px solid var(--wp--preset--color--border);
	list-style: none;
	margin: 0;
	padding: 0;
}

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

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

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

.my-shop-account table.shop_table {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-collapse: collapse;
	border-radius: var(--wp--custom--radius);
}

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

.my-shop-account .woocommerce-Addresses {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	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--surface);
	border: 1px solid var(--wp--preset--color--border);
	float: none;
	padding: var(--wp--preset--spacing--40);
	width: auto;
}

.my-shop-account .wc-block-order-confirmation-additional-fields-wrapper {
	background: var(--wp--preset--color--surface);
	border-inline-start: 4px solid var(--wp--preset--color--success);
	padding: var(--wp--preset--spacing--40);
}

.my-shop-account .wc-block-components-additional-fields-list {
	display: grid;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	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;
	}
}