/*
Theme Name: DM Medicine
Theme URI: https://dmmedicine.com
Author: DM Medicine
Author URI: https://dmmedicine.com
Description: Custom full-site-editing block theme for DM Medicine — corporate pharmaceutical trade and a consumer supplement shop under one brand with two visual identities.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.3
License: Proprietary
License URI: https://dmmedicine.com
Text Domain: dm-medicine
Tags: full-site-editing, block-styles, translation-ready, e-commerce
*/

/* Real styling lives in theme.json. This file is intentionally minimal and
   holds only small, targeted overrides that a preset cannot reach. */

/* ------------------------------------------------------------------ *
 * Logical-properties baseline (RTL-ready).
 * Hand-written CSS uses CSS logical properties only — never physical
 * left/right — so Arabic can be added later as configuration, not a rewrite.
 * ------------------------------------------------------------------ */

/* Visible keyboard focus, using a palette colour. Never outline: none. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--kurumsal-petrol);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Header navigation — spacing and a visible current/hover state. The Navigation
   block lays items out with flex gap; these add the interaction affordances the
   block does not. */
.dm-header .wp-block-navigation {
	font-weight: 500;
}

.dm-header .wp-block-navigation-item__content {
	padding-block: 0.25rem;
	border-block-end: 2px solid transparent;
}

.dm-header--kurumsal .wp-block-navigation-item__content:hover,
.dm-header--kurumsal .wp-block-navigation-item__content:focus-visible {
	border-block-end-color: var(--wp--preset--color--kurumsal-petrol);
}

.dm-header--magaza .wp-block-navigation-item__content:hover,
.dm-header--magaza .wp-block-navigation-item__content:focus-visible {
	border-block-end-color: var(--wp--preset--color--magaza-turuncu);
}

/* Placeholder logo is a single navy wordmark; invert it to white on the dark
   shop header and the footers so it reads on both identities. Replace the asset
   and this rule can stay or go — a real two-colour logo would drop it. */
.dm-header--magaza .wp-block-site-logo img,
.dm-footer .wp-block-site-logo img {
	filter: brightness(0) invert(1);
}

/* Shop search: keep it from stretching the header row on desktop. */
.dm-shop-search {
	max-inline-size: 22rem;
	flex: 1 1 12rem;
}

/* ------------------------------------------------------------------ *
 * Mobile shop header.
 * At 390 it stacked into four full-height rows — announcement, logo, search,
 * navigation — and consumed 320px of an 844px viewport before any content, so
 * the hero was below the fold on the page whose job is to sell.
 *
 * Decision (operator's): the announcement stays, because it is a real offer;
 * the logo, hamburger and cart share one row; search stays VISIBLE, because
 * this is a shop and search is a primary action — but as one compact row, not
 * a full-width box with a large button beside it. Hesabım moves into the
 * overlay menu, where an account link belongs on a phone.
 * ------------------------------------------------------------------ */
@media (max-width: 37.4375em) {

	.dm-header--magaza > .wp-block-group {
		padding-block: var(--wp--preset--spacing--20);
		row-gap: var(--wp--preset--spacing--20);
	}

	/* Logo and the two nav clusters ride one line; search wraps to the next. */
	.dm-header--magaza .dm-shop-search {
		flex: 1 0 100%;
		max-inline-size: none;
		order: 3;
	}

	.dm-header--magaza .wp-block-site-logo img {
		inline-size: 130px;
	}

	.dm-header--magaza .dm-shop-search .wp-block-search__input {
		font-size: var(--wp--preset--font-size--kucuk);
		padding-block: 0.45rem;
	}

	.dm-header--magaza .dm-shop-search .wp-block-search__button {
		padding-block: 0.45rem;
		padding-inline: 0.7rem;
	}
}

/* Footer legal-link row: muted, wraps, comfortable target size. */
/* stylelint-disable-next-line no-descending-specificity -- unrelated to the
   header nav rules; grouping by component reads better than by specificity. */
.dm-footer-legal .wp-block-navigation-item__content {
	opacity: 0.85;
}

/* Footer links.
   The İletişim Bilgileri template part is shared: on light pages its links are
   petrol (4.60:1, fine), but the footer sits on Gece Laciverti and the same
   petrol drops to 2.84:1 — unreadable, and invisible to token-level contrast
   maths because the token itself is sound. Caught by gate 11 in the rendered
   DOM. White on navy is 14.64:1. */
.dm-footer a {
	color: var(--wp--preset--color--kart);
	text-decoration: underline;
}

.dm-footer a:hover,
.dm-footer a:focus-visible {
	color: var(--wp--preset--color--kurumsal-turkuaz);
}

/* WooCommerce legacy product-card styling.
   The classic loop ships its own colours that are outside the palette and fail
   AA: the sale flash is white on olive (#958e09, 3.41:1) and the struck old
   price is a muted teal on cream (4.16:1). Both are re-pointed at palette
   tokens with verified contrast. Caught by gate 11 in the rendered DOM.

   Shape as well as colour. WooCommerce draws the flash as a 100%-radius circle
   with the word crammed inside; the mockup's discount marker is a small pill
   (.pct / .badge, radius 6–7px). One marker, one shape, wherever it appears —
   the block grid's own badge classes are included so a Products block dropped
   in later cannot reintroduce a second look. */
.woocommerce span.onsale,
.wc-block-grid__product-onsale,
.wc-block-components-product-badge {
	background-color: var(--wp--preset--color--magaza-mercan);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--kart);
	font-size: var(--wp--preset--font-size--kucuk);
	font-weight: 700;
	inset-block-start: var(--wp--preset--spacing--20);
	inset-inline-start: var(--wp--preset--spacing--20);
	line-height: 1.6;
	margin: 0;
	min-block-size: 0;
	min-inline-size: 0;
	padding-block: 0.15rem;
	padding-inline: 0.6rem;
	position: absolute;
	z-index: 1;
}

/* WooCommerce anchors its flash with `right: -0.5em` at (0,4,2), which beat the
   rule above and hung the badge outside the card — where the card's own
   overflow:hidden then sliced it. Place it at the top START of the image, the
   conventional corner, and match the plugin's specificity so the position
   actually takes. */
.woocommerce ul.products li.product span.onsale,
.woocommerce ul.products li.product .wc-block-grid__product-onsale {
	inset-block-start: var(--wp--preset--spacing--20);
	inset-inline-end: auto;
	inset-inline-start: var(--wp--preset--spacing--20);
}

/* WooCommerce dims the struck old price with opacity: .7, which caps its
   contrast at ~2.7:1 on cream whatever the colour. !important overrides the
   plugin's higher-specificity rule; the opacity must be reset, not recoloured.
   Selectors run most-specific first to satisfy no-descending-specificity. */
/* stylelint-disable-next-line no-descending-specificity -- deliberate plugin
   override; every declaration is !important so source order is irrelevant. */
.woocommerce .price del,
.woocommerce .price del .amount,
.woocommerce div.product p.price del,
.woocommerce ul.products li.product .price del {
	color: var(--wp--preset--color--magaza-metin-ikincil) !important;
	opacity: 1 !important;
}

/* Shop archive content column.
   Phase 5 removed WooCommerce's classic content wrapper to kill a duplicate
   <main>; inc/woocommerce.php re-adds it as a plain div.dm-shop-content so the
   landmark stays single. This is that div: it re-establishes the content column
   the wrapper used to provide, so the classic loop's floated result-count /
   sort bar and its wider (1280) breadcrumb no longer escape to three different
   left edges against the full-width main. The ::after clears the floated bar
   so the wrapper contains it. Caught by gate 14's alignment check. */
.dm-shop-content {
	max-inline-size: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.dm-shop-content::after {
	content: "";
	display: table;
	clear: both;
}

/* The woocommerce/legacy-template block stamps its wrapper .alignwide (1280px),
   but our content column and the archive <h1> both sit at content-size (1080),
   so the loop rendered one tier wider than its own title. Pin the wrapper back
   to content-size. This selector (0,3,0) outranks core's
   `.is-layout-constrained > .alignwide` (0,2,0), so no !important is needed. */
.is-layout-constrained > .dm-shop-content.alignwide {
	max-inline-size: var(--wp--style--global--content-size);
}

/* Result count + sort control. WooCommerce ships these as an unstyled float
   pair inherited from the classic shop: browser-default select chrome, a bare
   sentence, and no relationship to each other. Lay them out as one row on the
   design system's tokens so they read as part of the shop rather than as
   plugin output. Logical properties throughout (RTL is a later config change).
   The float clearance stays on .dm-shop-content::after above. */
.dm-shop-content .woocommerce-result-count,
.dm-shop-content .woocommerce-ordering {
	margin-block: 0 var(--wp--preset--spacing--40);
}

/* Matches the select's height so the two sit on one baseline. Flex centring
   rather than a rem line-height, which the stylelint unit allow-list rejects
   (and which would not track a font-size change anyway). */
.dm-shop-content .woocommerce-result-count {
	align-items: center;
	color: var(--wp--preset--color--magaza-metin-ikincil);
	display: flex;
	font-size: var(--wp--preset--font-size--kucuk);
	min-block-size: 2.5rem;
}

/* The select still rendered as browser chrome: the border and radius were ours,
   the drop-down arrow was the operating system's, in the operating system's
   grey. appearance:none removes the whole native control, so the marker has to
   be redrawn — as a rotated square built from two borders on the form wrapper,
   which keeps the colour a palette token (a data-URI chevron would bake a hex
   into the stylesheet, and a CSS variable cannot go inside one). */
.dm-shop-content .woocommerce-ordering {
	position: relative;
}

.dm-shop-content .woocommerce-ordering::after {
	block-size: 0.45rem;
	border-block-end: 2px solid var(--wp--preset--color--magaza-metin-ikincil);
	border-inline-end: 2px solid var(--wp--preset--color--magaza-metin-ikincil);
	content: "";
	inline-size: 0.45rem;
	inset-block-start: 1rem;
	inset-inline-end: 1rem;
	pointer-events: none;
	position: absolute;
	transform: rotate(45deg);
}

.dm-shop-content .woocommerce-ordering select {
	appearance: none;
	background-color: var(--wp--preset--color--kart);
	border: 1px solid var(--wp--preset--color--magaza-kenarlik);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--magaza-metin);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--kucuk);
	min-block-size: 2.5rem;
	padding-block: 0.25rem;
	padding-inline: 0.75rem 2.5rem;
}

.dm-shop-content .woocommerce-ordering select:focus-visible {
	outline: 2px solid var(--wp--preset--color--magaza-derin);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * THE PRODUCT CARD — one card, everywhere.
 *
 * These selectors are deliberately NOT scoped to .dm-shop-content. The shop
 * landing once carried two card systems: woocommerce/product-best-sellers
 * rendered the BLOCK grid for "Çok Satanlar" while the archive below it
 * rendered the classic loop, and the equal-height work only ever reached the
 * classic one. Every visible symptom followed — 274px cards beside 252px ones,
 * 12px titles beside 19.2px ones, centred text beside left-aligned, buttons
 * shrink-wrapped beside full-width, a round coral flash beside a white outlined
 * rectangle. The best-sellers section now renders through the [products]
 * shortcode, which uses the same content-product.php template as the
 * archive, so
 * there is genuinely ONE card and one rule set. Widening the scope also reaches
 * the places that had NO card styling at all: category and brand archives,
 * search results, and related products on a single product page.
 *
 * The `.woocommerce` prefix is load-bearing, not decoration. WooCommerce styles
 * the card as `.woocommerce ul.products li.product` — specificity (0,3,2) — and
 * gives it `float:left; width:22.05%`. A bare `ul.products li.product` is
 * (0,2,2) and LOSES, so dropping the prefix silently handed the layout back to
 * the plugin and collapsed every card to a fifth of its column. The prefix
 * matches everywhere it needs to: WooCommerce puts the class on <body> for
 * shop,
 * product and taxonomy pages, and the [products] shortcode wraps its own output
 * in div.woocommerce for anywhere else.
 *
 * Geometry is written against the mockup's .card (assets/brief/
 * anasayfa-mockup.html), not against what the page happened to render.
 * ------------------------------------------------------------------ */

/* The shortcode wraps its list in div.woocommerce, the archive does not.
   Neutralise the wrapper so both start from the same box. */
.wp-block-group > .woocommerce,
.dm-shop-content > .woocommerce {
	margin: 0;
	padding: 0;
}

/* Nested constrained groups each add the theme's global side padding, so a
   section inside <main> was inset 24px further than <main>'s own column.
   The two product grids ended up on different left edges — 204px for Çok
   Satanlar, 180px for Tüm Ürünler — which is exactly the "assembled, not
   designed" tell. <main> already supplies the padding, including at mobile, so
   the sections inside it must not supply it again. */
main.has-global-padding > .dm-section {
	padding-inline: 0;
}

/* WooCommerce's classic loop lays the list out with FLOATS and per-item
   percentage widths, so each card is only as tall as its own content: a
   two-line product name makes one card 23px taller than its neighbour and the
   Sepete Ekle buttons land on different baselines across the row. Grid replaces
   the floats so every card in a row shares the tallest height. */
.woocommerce ul.products {
	display: grid;
	gap: var(--wp--preset--spacing--30);

	/* Two-up on a phone, as the mockup does below 820px. A minmax() track alone
	   cannot express this: a minimum wide enough to keep four columns at 1080
	   collapses to a single column at 390, which is how the shop archive came to
	   be twelve screens long on mobile. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 37.5em) {

	.woocommerce ul.products {
		grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	}
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none; /* Kill the classic clearfix; grid needs no float containment. */
}

/* The card itself: a white surface on the cream page, per the mockup.
   The second selector exists only to reach WooCommerce's SMALL-SCREEN rule,
   `.woocommerce ul.products[class*=columns-] li.product { width: 48% }`, which
   is (0,4,2) and beat a plain (0,3,2) reset — so below 768px the cards went
   back to half-width blocks inside full-width grid tracks, while every desktop
   screenshot looked correct. Matching the attribute selector ties the
   specificity; the theme stylesheet loads after the plugin's. */
.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product {
	background-color: var(--wp--preset--color--kart);
	border: 1px solid var(--wp--preset--color--magaza-kenarlik);
	border-radius: var(--wp--custom--radius--md);
	display: flex;
	flex-direction: column;
	float: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	text-align: start;
	width: auto;
}

/* Image, title and price sit inside one <a>; the add-to-cart link is its
   sibling. Make that anchor the card's own column so the text block can be
   inset while the image stays full-bleed at the top. */
.woocommerce ul.products li.product > a:not(.button) {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	text-decoration: none;
}

/* One image ratio for every product, whatever the source file. Placeholder and
   real photograph now occupy exactly the same box, which is what stops the rows
   from stepping. */
.woocommerce ul.products li.product img {
	aspect-ratio: 1 / 1;
	background-color: var(--wp--preset--color--magaza-bilgi-zemin);
	block-size: auto;
	inline-size: 100%;
	margin: 0;
	object-fit: contain;
	padding: var(--wp--preset--spacing--30);
}

/* Everything below the image is inset by the card's own padding. */
.woocommerce ul.products li.product .dm-loop-brand,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .woocommerce-loop-product__link > .star-rating {
	margin-block: 0;
	padding-inline: var(--wp--preset--spacing--30);
}

/* Brand above the name — the line that gives the card a hierarchy instead of a
   block of equal-weight text. Rendered only when the product has a brand. */
.woocommerce ul.products li.product .dm-loop-brand {
	color: var(--wp--preset--color--magaza-derin);
	display: block;
	font-size: var(--wp--preset--font-size--kucuk);
	font-weight: 700;
	letter-spacing: 0.04em;
	padding-block-start: var(--wp--preset--spacing--30);
	text-transform: uppercase;
}

/* min-block-size holds two lines, so a one-line name and a two-line name leave
   the price on the same baseline across a row — the mockup does this with
   .pname { min-height:38px }. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--wp--preset--color--magaza-metin);
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.35;
	min-block-size: 2.7em;
	padding-block: 0.25rem 0.5rem;
}

.woocommerce ul.products li.product .price {
	color: var(--wp--preset--color--magaza-orman);
	font-size: var(--wp--preset--font-size--orta);
	font-weight: 800;
}

/* stylelint-disable-next-line no-descending-specificity -- the plugin override
   at the head of this file must keep its !important weight; this is the same
   element styled for size, and grouping by component beats grouping by
   specificity. */
.woocommerce ul.products li.product .price del {
	font-size: var(--wp--preset--font-size--kucuk);
	font-weight: 600;
	margin-inline-end: 0.35rem;
}

/* The add-to-cart button is the last child; auto margin above it absorbs the
   slack so it sits on the card's bottom edge in every card, and it spans the
   card width as in the mockup (.addcart { display:block; width:100% }). */
.woocommerce ul.products li.product .button {
	display: block;

	/* The mockup's .addcart is 13px with 10px padding, and the reason matters at
	   390px: the theme's default button size plus 24px of inline padding left
	   81px for a label that needs 87px, so "Sepete Ekle" — the primary action —
	   broke across THREE lines inside a two-up card. The type step and the
	   padding both come down to what the mockup specifies. */
	font-size: var(--wp--preset--font-size--kucuk);
	margin: auto var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	padding-inline: 0.75rem;
	text-align: center;
}

.woocommerce ul.products li.product .added_to_cart {
	margin: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
}

/* ------------------------------------------------------------------ *
 * Blog cards (Blog & Rehber).
 * The mockup's .post leads with a category PILL, then a strong title, then the
 * excerpt, then a read-more. Ours had the category as a plain uppercase
 * line and
 * no read-more, which left three same-weight text runs stacked in a box. The
 * block editor can express the colours and the type, but not "make this div
 * shrink to its text", so the pill geometry lives here.
 * ------------------------------------------------------------------ */

/* The Post Template's grid stretches its <li> items to a common height, but the
   card is a group INSIDE that <li>, so the visible boxes still ended ragged.
   block-size:100% hands the row height down to the card, and a flex column
   gives the read-more link something to be pushed against. */
.dm-blog-kart {
	block-size: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.dm-blog-kart > .wp-block-group {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.dm-blog-kart .dm-etiket {
	background-color: var(--wp--preset--color--magaza-bilgi-zemin);
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--preset--color--magaza-derin);
	display: inline-block;
	padding-block: 0.15rem;
	padding-inline: 0.6rem;
}

/* stylelint-disable-next-line no-descending-specificity -- a different
   component entirely; the product-card anchor rule above is unrelated. */
.dm-blog-kart .dm-etiket a {
	color: inherit;
	text-decoration: none;
}

/* Push whatever the card ENDS with to its bottom edge, so the last line sits on
   one baseline across the row whatever the excerpt length — the same trick the
   product card uses. The two blog surfaces end differently on purpose, because
   their mockups do: the shop landing card (anasayfa-mockup.html) ends with a
   read-more, the /blog/ index card (blog.html) ends with date · reading time.
   Both selectors are needed; neither surface has both elements.

   This was a real defect. The rule existed and worked on the shop landing,
   while /blog/ carried no .dm-blog-kart class at all — so its cards were
   whatever height their excerpt made them, and every meta line landed at a
   different offset. One component styled, the other left bare. */
.dm-blog-kart .dm-devam,
.dm-blog-kart .dm-post-meta {
	margin-block-start: auto;
}

/* stylelint-disable-next-line no-descending-specificity -- see above. */
.dm-blog-kart .wp-block-post-title a {
	text-decoration: none;
}

/* stylelint-disable no-descending-specificity -- a different component; the
   product-card anchor rule earlier in this file is unrelated. */
.dm-blog-kart .wp-block-post-title a:hover,
.dm-blog-kart .wp-block-post-title a:focus-visible {
	text-decoration: underline;
}
/* stylelint-enable no-descending-specificity */

/* Product single.
   The meta line ran together as one sentence — "Stok kodu: TEMSILI-004
   Kategoriler: Vitaminler Etiketler: temsili-urun Marka: Swanson" — because
   WooCommerce emits each part as a bare span with no delimiter. Give them a
   rule between, which also works when the client removes one. The title used
   the `dev` step (52px), the size the hero H1 carries, so a product name
   outweighed everything around it. */
.woocommerce div.product .product_title {
	font-size: var(--wp--preset--font-size--baslik);
}

.woocommerce div.product .product_meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.9rem;
	font-size: var(--wp--preset--font-size--kucuk);
}

.woocommerce div.product .product_meta > span {
	border-inline-start: 1px solid var(--wp--preset--color--magaza-kenarlik);
	padding-inline-start: 0.9rem;
}

.woocommerce div.product .product_meta > span:first-child {
	border-inline-start: 0;
	padding-inline-start: 0;
}

/* ------------------------------------------------------------------ *
 * FAQ accordion (/yardim/).
 * core/details gives the behaviour — open/close by click or keyboard, no
 * JavaScript of ours — but no appearance at all: seven questions rendered as
 * bare text with the browser's default ▶ marker on an otherwise designed page.
 * The mockup styles each as a white card. Worth noting WHY no gate saw this:
 * gate 15 proves the phrases are present, and they were. Phrase-level
 * extraction proves content, never presentation.
 * ------------------------------------------------------------------ */
.dm-sss {
	background-color: var(--wp--preset--color--kart);
	border: 1px solid var(--wp--preset--color--magaza-kenarlik);
	border-radius: var(--wp--custom--radius--sm);
	margin-block-end: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.dm-sss > summary {
	align-items: center;
	color: var(--wp--preset--color--magaza-metin);
	cursor: pointer;
	display: flex;
	font-weight: 700;
	gap: var(--wp--preset--spacing--30);
	justify-content: space-between;
	list-style: none;
}

/* Replace the browser's disclosure triangle with a chevron built from borders,
   so its colour is a palette token rather than an OS default. */
.dm-sss > summary::-webkit-details-marker {
	display: none;
}

.dm-sss > summary::after {
	block-size: 0.5rem;
	border-block-end: 2px solid var(--wp--preset--color--magaza-derin);
	border-inline-end: 2px solid var(--wp--preset--color--magaza-derin);
	content: "";
	flex: none;
	inline-size: 0.5rem;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.dm-sss[open] > summary::after {
	transform: rotate(-135deg);
}

.dm-sss[open] > summary {
	margin-block-end: var(--wp--preset--spacing--30);
}

/* Quicknav pills sit above the sections they jump to. */
.dm-quicknav {
	gap: var(--wp--preset--spacing--30);
}

/* ------------------------------------------------------------------ *
 * The cross-sell is a suggestion, not a second shop.
 *
 * At 1440 the cart's item column is 653px wide, so the archive's 15rem minimum
 * track resolved to TWO columns — three products wrapped to a second row and
 * the cross-sell stood 1126px tall under 168px of actual cart. Six times
 * the page given to what the customer is buying, spent on what they are not.
 *
 * Same card system, smaller instance: a narrower minimum track so three fit in
 * one row here, and a 4:3 image instead of the archive's square, which is where
 * most of the height was. Nothing structural changes, so a card in the cart is
 * still recognisably the card on the archive.
 * ------------------------------------------------------------------ */
@media (min-width: 37.5em) {

	.wp-block-woocommerce-cart .woocommerce ul.products {
		grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	}
}

.wp-block-woocommerce-cart .woocommerce ul.products li.product img {
	aspect-ratio: 4 / 3;
}

/* The same judgement as the checkout summary — the customer chose this item a
   moment ago and is now reading a total, not a prospectus — but the CART has no
   block attribute for it. woocommerce/checkout-order-summary-cart-items-block
   exposes `disableProductDescriptions`; woocommerce/cart-line-items-block does
   not, so the checkout is a Site Editor toggle and this is CSS. Asymmetric on
   purpose: use the first-class control wherever one exists.

   Note this is presentation only. The description is still on the product page,
   which is where a customer who wants it goes. */
.wc-block-cart-item__wrap .wc-block-components-product-metadata__description {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Cart extras.
 * .dm-notice draws a rule down its inline start; with no padding the text sat
 * flush against it, and on the shop side the corporate petrol was the wrong
 * accent. The rule must also be the height of its own text, not of whatever
 * flex row it lands in.
 * ------------------------------------------------------------------ */
.wp-block-woocommerce-cart-items-block .dm-notice {
	align-self: start;
	border-inline-start-color: var(--wp--preset--color--magaza-adacayi);
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	padding-inline-start: var(--wp--preset--spacing--30);
}

/* ------------------------------------------------------------------ *
 * Complianz's persistent "Çerez Tercihleri" tab.
 * It looked like it floated over the middle of the page on desktop. It does
 * not: the plugin docks it with `position: fixed; bottom: <offset>` and slides
 * it in on hover. What put it mid-page was the REVIEW ARTEFACT — a fixed
 * element in a stitched full-page screenshot renders at its viewport offset,
 * which lands wherever the capture happened to be scrolled. The same trap as
 * the consent banner, and it is fixed where it belongs, in the capture
 * (tools/gate-assembly.mjs), not by fighting the plugin's own docking.
 *
 * Nothing is overridden here on purpose. Consent withdrawal is a legal
 * affordance and its placement is the plugin's to own.
 * ------------------------------------------------------------------ */

/* Notice accent bar. Block supports only expose physical border sides, which
   would need rewriting for RTL, so the accent lives here as a logical rule. */
/* stylelint-disable-next-line no-descending-specificity -- the cart-scoped
   override earlier adjusts this same component for one context; keeping the
   base rule beside its own comment beats reordering the file by weight. */
.dm-notice {
	border-inline-start: 4px solid var(--wp--preset--color--kurumsal-petrol);
}

/* Brand marquee.
   Progressive enhancement in three states:
   1. No JS           -> track stays a centred wrapped list. Fully readable.
   2. JS + motion OK  -> JS adds .dm-marquee--animated plus an aria-hidden
                         clone, so translating by -50% loops seamlessly.
   3. Reduced motion   -> JS never adds the class, so state 1 is what renders.
   translateX is a physical transform; RTL would want the opposite direction.
   That is a one-line change here, not a rewrite.

   The strip used to be bare uppercase text on the page background, sliding out
   of the section on both sides and cut through the middle of a word — it read
   as broken markup rather than as a marquee. The mockup (.brandbar) puts white
   rounded cards on a dark band, so that is what this builds. The clipping is
   answered twice: the track scrolls inside its own viewport, and that viewport
   is masked at both ends, so a name fades out instead of being sliced. */
.dm-marquee__viewport {
	overflow: hidden;
}

/* Only when it actually scrolls. Unanimated — no JS, or reduced motion — the
   track is a centred wrapped list that never reaches the edges, and masking it
   would fade perfectly readable names for no reason.
   A mask reads only the alpha channel, so #000 is "keep" and #0000 is "hide":
   an opacity ramp, not a design colour, and correctly absent from the palette.
   Symmetric, so it needs no RTL variant. */
.dm-marquee--animated .dm-marquee__viewport {

	/* --fi ends the fade in; --fo starts the fade out. */
	--fi: 6rem;
	--fo: calc(100% - 6rem);

	mask: linear-gradient(90deg, #0000, #000 var(--fi), #000 var(--fo), #0000);
}

/* The chips. min-inline-size gives short and long brand names one footprint
   so the strip reads as a row of cards rather than as ragged text. */
.dm-marquee__track p {
	align-items: center;
	box-shadow: 0 2px 6px rgb(8 46 38 / 25%);
	display: flex;
	justify-content: center;
	margin: 0;
	min-block-size: 3.25rem;
	min-inline-size: 9.5rem;
	padding-block: 0.5rem;
	padding-inline: 1.25rem;
	text-align: center;
}

.dm-marquee--animated .dm-marquee__track {
	width: max-content;
	flex-wrap: nowrap;
	animation: dm-marquee-scroll 45s linear infinite;
}

/* Let a reader stop the motion to read a name, by hover or by keyboard. */
.dm-marquee--animated:hover .dm-marquee__track,
.dm-marquee--animated:focus-within .dm-marquee__track {
	animation-play-state: paused;
}

@keyframes dm-marquee-scroll {

	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* Respect reduced-motion: the brand marquee and other animation must stop. */
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}