/* Blocksy declares palette tokens on body. Override on that same element:
   a :root value loses to a locally declared body value through inheritance. */
body {
	--theme-palette-color-1: var(--wp--preset--color--ink);
	--theme-palette-color-2: var(--wp--preset--color--muted);
	--theme-palette-color-3: var(--wp--preset--color--ink);
	--theme-palette-color-4: var(--wp--preset--color--ink);
	--theme-palette-color-5: var(--wp--preset--color--line);
	--theme-palette-color-6: var(--wp--preset--color--ground);
	--theme-palette-color-7: var(--wp--preset--color--ground);
	--theme-palette-color-8: var(--wp--preset--color--surface);
	--theme-font-family: var(--wp--preset--font-family--arabic);
	--theme-font-stack-default: var(--wp--preset--font-family--arabic);
	--theme-button-background-initial-color: var(--wp--preset--color--ink);
	--theme-button-background-hover-color: var(--wp--preset--color--muted);
	--theme-button-text-initial-color: var(--wp--preset--color--surface);
	--theme-button-text-hover-color: var(--wp--preset--color--surface);
	--theme-selection-background-color: var(--wp--preset--color--ink);
	--theme-selection-text-color: var(--wp--preset--color--surface);
	--theme-button-min-height: 44px;
	--theme-text-color: var(--wp--preset--color--ink);
	--theme-headings-color: var(--wp--preset--color--ink);
	--theme-link-initial-color: var(--wp--preset--color--ink);
	--theme-link-hover-color: var(--wp--preset--color--muted);
	--theme-border-color: var(--wp--preset--color--line);
	--theme-form-field-border-initial-color: var(--wp--preset--color--muted);
	--theme-form-field-border-focus-color: var(--wp--preset--color--ink);
	--theme-form-selection-field-initial-color: var(--wp--preset--color--muted);
	--theme-form-selection-field-active-color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
}

:root {
	/* 2:3 — مقيسة من de-backers.com. يجب أن تطابق مقاسات Modules/images.php
	   بالضبط: أي فرق بين نسبة CSS ونسبة الملف المولّد يعني تشويهاً أو قفزة تخطيط. */
	--debackers-product-ratio: 2 / 3;
	--debackers-focus: var(--wp--preset--color--ink);
	--debackers-motion-fast: 120ms;
	--debackers-motion-base: 200ms;
}

html {
	scroll-behavior: smooth;
}

body {
	direction: rtl;
	font-family: var(--wp--preset--font-family--arabic, system-ui, sans-serif);
	text-rendering: optimizeLegibility;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--debackers-focus);
	outline-offset: 3px;
}

:where(.product, .wc-block-grid__product) img {
	inline-size: 100%;
	object-fit: cover;
}

:where(.product, .wc-block-grid__product) .ct-image-container {
	aspect-ratio: var(--debackers-product-ratio);
}

@media (max-width: 689px) {
	.products .product .ct-image-container {
		aspect-ratio: 5 / 8;
	}
	.products .product .ct-image-container img {
		object-fit: contain;
	}
}

.has-latin-font-family,
[lang^="en"] {
	font-family: var(--wp--preset--font-family--latin, system-ui, sans-serif);
}

/* Mixed-language shell: the English header, drawer and search dialog carry lang="en";
   Arabic menu labels carry lang="ar". Blocksy menus read --theme-font-family, so the
   face follows the label's language wherever the owner places it. */
:where(#header, #offcanvas, #search-modal) [lang="en"],
:where(#header, #offcanvas, #search-modal)[lang="en"] {
	--theme-font-family: var(--wp--preset--font-family--latin);
}

:where(#header, #offcanvas, #footer) [lang="ar"] {
	--theme-font-family: var(--wp--preset--font-family--arabic);
	font-family: var(--wp--preset--font-family--arabic);
	letter-spacing: 0;
}

/* Only the 400 Arabic face is loaded (PERFORMANCE-BUDGET.md). A heavier menu weight chosen
   in the Customizer would be synthesized bold, so Arabic menu labels stay at the real face. */
#header .ct-menu-link[lang="ar"],
#offcanvas .ct-menu-link[lang="ar"] {
	--theme-font-weight: 400;
	font-weight: 400;
}

/* An English top-level label reads left to right, so its dropdown arrow follows the word. */
#header [data-id="menu"] > ul > li > .ct-menu-link[lang="en"] {
	direction: ltr;
}

#header [data-id="menu"] > ul > li > .ct-menu-link {
	min-inline-size: 108px;
}

/* TASK-0073: five top-level links (up to six with a seasonal collection). English labels use the same weight as
   the Arabic ones so the row reads as one list, and the wordmark never wraps. */
#header [data-id="menu"] > ul > li > .ct-menu-link[lang="en"],
#offcanvas .ct-menu-link[lang="en"] {
	--theme-font-weight: 500;
	font-weight: 500;
	letter-spacing: 0.01em;
}

#header .site-title a {
	white-space: nowrap;
}

/* Compact desktop step, measured (artifacts/day3/TASK-0073/visual/nav*): from Blocksy's desktop switch (1000px)
   to 1279px the links keep their size and lose only the fixed 108px width and part of the item spacing. */
@media (min-width: 1000px) and (max-width: 1279.98px) {
	#header [data-id="menu"] {
		--menu-items-spacing: 14px;
	}

	#header [data-id="menu"] > ul > li > .ct-menu-link {
		min-inline-size: 0;
	}

	#header .site-title {
		font-size: 1.35rem;
	}
}

/* Desktop header (TASK-0076): the wordmark on the left, the links as one compact group right beside it (the item
   marked «next to the logo» in Appearance › Menus comes first, DOM order included), the tools on the right. The
   row is no longer three equal columns with a centred menu; links are sized by their words, not a fixed 108px, and
   each dropdown arrow sits close to its label. Gaps stay modest at every width; below 1000px Blocksy's phone
   header takes over, so 200% zoom collapses instead of colliding. */
@media (min-width: 1000px) {
	#header [data-device="desktop"] [data-row*="middle"][data-column-set="3"] > .ct-container {
		grid-template-columns: auto minmax(0, 1fr) auto;
		column-gap: 28px;
	}

	/* TASK-0081 (owner screenshot 10): the link group is centred in the free space between the end of the wordmark
	   and the start of the tools. The middle track is that interval (auto | 1fr | auto with the same column gap on
	   both sides), so the two free gaps stay equal as links, labels or the cart total change — no guessed margin. */
	#header [data-device="desktop"] [data-row*="middle"] [data-column="middle"],
	#header [data-device="desktop"] [data-row*="middle"] [data-column="middle"] > [data-items] {
		justify-content: center;
		min-inline-size: 0;
	}

	#header [data-id="menu"] {
		--menu-items-spacing: 18px;
	}

	/* Search, wishlist and cart: one glyph size (28px, slightly larger than 24px) with separate 44×44 targets. */
	#header [data-device="desktop"] :is(.ct-header-search, .ct-header-cart .ct-cart-item, .ct-header-debackers-wishlist) svg {
		block-size: 28px;
		inline-size: 28px;
	}

	#header [data-device="desktop"] [data-row*="middle"] [data-column="start"] > [data-items] {
		gap: 6px;
	}

	#header [data-device="desktop"] :is(.ct-header-search, .ct-header-debackers-wishlist, .ct-header-cart .ct-cart-item) {
		justify-content: center;
		min-block-size: 44px;
		min-inline-size: 44px;
	}

	#header [data-id="menu"] > ul > li > .ct-menu-link {
		min-inline-size: 0;
	}

	/* The visual arrow hugs its label; the separate arrow button keeps a 28×44 target. */
	#header [data-id="menu"] .ct-menu-link > .ct-toggle-dropdown-desktop {
		--toggle-button-size: 20px;
		margin-inline-start: 2px;
	}

	#header [data-id="menu"] > ul .ct-toggle-dropdown-desktop-ghost {
		--toggle-button-size: 28px;
	}

	#header [data-device="desktop"] [data-column="start"] :is([data-id="search"], [data-id="debackers-wishlist"]) {
		block-size: 44px;
		inline-size: 44px;
	}
}

@media (min-width: 1000px) and (max-width: 1279.98px) {
	#header [data-id="menu"] {
		--menu-items-spacing: 12px;
	}

	#header [data-device="desktop"] [data-row*="middle"][data-column-set="3"] > .ct-container {
		column-gap: 20px;
	}
}

/* Submenu toggles: Blocksy declares these variables on the toggles themselves. */
#header [data-id="menu"] :is(.ct-toggle-dropdown-desktop, .ct-toggle-dropdown-desktop-ghost) {
	--toggle-button-size: 44px;
}

#offcanvas .ct-toggle-dropdown-mobile {
	min-inline-size: 44px;
	min-block-size: 44px;
}

#offcanvas .ct-menu-link {
	min-block-size: 44px;
	padding-block: 6px;
}

/* Phone menu groups (TASK-0073): commerce, information, service — a line starts each new group. */
#offcanvas li.debackers-menu-separator {
	border-block-start: 1px solid rgb(255 255 255 / 22%);
	margin-block-start: 8px;
	padding-block-start: 8px;
}

/* The dropdown and drawer are ink panels; keep the focus ring visible on them. Blocksy's own
   button focus rule outranks the shared :where() ring, so this one needs an ID selector. */
#header .sub-menu :focus-visible,
#offcanvas :focus-visible {
	outline: 2px solid var(--wp--preset--color--surface);
	outline-offset: 3px;
}

#header [data-row="middle"] {
	--height: 72px;
	--theme-icon-color: var(--wp--preset--color--ink);
}

/* Keep the entire native header in flow while pinning it during browsing. */
#header {
	position: sticky;
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

/* TASK-0047: at 600px and below WordPress makes the admin bar position:absolute, so it scrolls
   away with the page. Offsetting the sticky header by its height there left a 46px strip of page
   content above the header (owner screenshots, signed-in session). */
@media screen and (max-width: 600px) {
	#header {
		inset-block-start: 0;
	}
}

#header [data-row="middle"] > .ct-container {
	inline-size: calc(100% - 16px);
	max-inline-size: none;
}

#header [data-row="middle"] [data-items] {
	gap: 2px;
}

#header [data-row="middle"] :is(.ct-header-trigger, .ct-header-search, .ct-header-cart, .ct-header-debackers-wishlist) {
	margin-inline: 0;
}

#header :is(.ct-toggle, .ct-cart-item, .ct-header-debackers-wishlist) svg {
	inline-size: 24px;
	block-size: 24px;
}

/* Blocksy's flex-end places its "right-side" panel on the left in RTL.
   Anchor the menu explicitly to inline-start (the physical right here). */
html[dir="rtl"] #offcanvas[data-behaviour*="side"] {
	--theme-panel-reveal-right: 20%;
}

html[dir="rtl"] #offcanvas[data-behaviour*="side"] > .ct-panel-inner {
	inset-inline-start: 0;
	inset-inline-end: auto;
}

/* TASK-0101 (owner): the phone wordmark a step larger (19.5px → 22.6px at 390px) so its letters read beside the
   26px icons; the five 44px controls still fit from 360px (measured). */
#header .site-title {
	font-family: var(--wp--preset--font-family--latin);
	font-size: clamp(1.25rem, 5.8vw, 1.75rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
}

#header .site-title a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	text-decoration: none;
}

#header .ct-toggle,
#header .ct-cart-item,
.ct-panel .ct-toggle-close {
	min-inline-size: 44px;
	min-block-size: 44px;
}

/* TASK-0050 (owner screenshot): on the mobile header the menu (physical right) and the cart
   (physical left) sit close to their edges with a 4px safe inset; search and wishlist move a little
   inward, so each pair has separate 44×44 tap areas 8px apart. Icons 26px (was 24px). */
@media (max-width: 999.98px) {
	#header [data-device="mobile"] [data-row="middle"] > .ct-container {
		inline-size: 100%;
		padding-inline: 4px;
		box-sizing: border-box;
	}

	#header [data-device="mobile"] [data-row="middle"] [data-items] {
		gap: 8px;
	}

	#header [data-device="mobile"] :is(.ct-toggle, .ct-cart-item, .ct-header-debackers-wishlist) svg {
		inline-size: 26px;
		block-size: 26px;
	}

	/* TASK-0052: the wishlist moves toward the centered logo, away from the cart; both keep 44×44 targets. */
	#header [data-device="mobile"] [data-row="middle"] .ct-header-debackers-wishlist {
		margin-inline-end: 6px;
	}
}

/* Below 360px (including 1280px at 400% zoom) the wordmark and Blocksy's 10px item margins
   shrink so the five D-118 controls (menu, search, logo, wishlist, cart) never meet. */
@media (max-width: 359px) {
	#header .site-title {
		font-size: 1rem;
		letter-spacing: 0.02em;
	}

	#header [data-device="mobile"] [data-row="middle"] :is(.ct-header-trigger, .ct-header-cart, .ct-header-search, .ct-header-debackers-wishlist) {
		margin-inline: 0;
	}

	#header [data-device="mobile"] [data-row="middle"] .ct-header-debackers-wishlist.ct-header-debackers-wishlist {
		margin-inline-end: 4px;
	}
}

body .products {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px var(--wp--preset--spacing--50);
}

body .products .product {
	min-inline-size: 0;
}

body:is(.post-type-archive-product, .tax-product_cat) .hero-section .entry-header {
	min-block-size: 0;
	padding-block: 16px;
}

body:is(.post-type-archive-product, .tax-product_cat) .ct-container[data-vertical-spacing] {
	padding-block-start: 12px;
}

body .woocommerce-ordering select {
	min-block-size: 44px;
}

/* TASK-0050: Arabic names read slightly larger beside the prices on tablet and desktop (measured 14.9px
   at 768px and 16px at 1440px before); the phone grid keeps its 18px from TASK-0047 below. */
body .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--latin), var(--wp--preset--font-family--arabic);
	font-size: max(16px, var(--wp--preset--font-size--base));
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
}

body .products .button {
	min-block-size: 44px;
	font-family: var(--wp--preset--font-family--arabic);
	border-radius: 2px;
}

/* TASK-0048: a size button is its label plus padding (minimum 30px wide, 32px tall), so a row of
   compact sizes fits the card width and stays centered; fixed 44px boxes overflowed five sizes. */
body .debackers-card-size {
	inline-size: auto;
	min-inline-size: 30px;
	padding-inline: 5px;
	block-size: 32px;
	min-block-size: 32px;
	color: var(--wp--preset--color--ink);
}

/* TASK-0048: swatch buttons are the 28px dot plus its 3px ring, so swatches sit close together
   after the «الألوان» label; the 34×40px target stays above the 24px minimum. */
body .debackers-card-color {
	inline-size: 34px;
	min-inline-size: 34px;
	block-size: 40px;
	min-block-size: 40px;
	color: var(--wp--preset--color--ink);
}

body .debackers-card-options__choices {
	gap: 4px;
}

#footer {
	background: var(--wp--preset--color--ground);
	border-block-start: 1px solid var(--wp--preset--color--muted);
}

#footer [data-row="middle"] :is(h2, h3) {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.4;
}

#footer [data-row="middle"] a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

#footer [data-row="middle"] ul {
	list-style: none;
	padding-inline-start: 0;
}

@media (max-width: 999px) {
	body .products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	body .woocommerce-loop-product__title {
		font-size: 17px;
	}
}

@media (max-width: 689px) {
	body .products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 6px;
	}

	body .woocommerce-loop-product__title {
		font-size: 17px;
	}

	body .products .button {
		inline-size: 100%;
		padding-inline: var(--wp--preset--spacing--20);
		font-size: var(--wp--preset--font-size--sm);
	}
}

/* TASK-0046: compact controls still meet the 24px WCAG target minimum.
   Keep header/cart actions at 44px; product choices scroll without wrapping. */
@media (max-width: 568px) {
	body:is(.post-type-archive-product, .tax-product_cat) .ct-container[data-vertical-spacing] {
		inline-size: 100%;
		max-inline-size: none;
		padding-inline: 0;
	}

	.woo-listing-top,
	.debackers-active-filters {
		margin-inline: 8px;
	}

	/* TASK-0048: a size button is its label plus 3px padding (minimum 24×30px, the 24px target
	   minimum), so six letter sizes fit a two-column card from 360px; text stays 12px. */
	body .debackers-card-size {
		inline-size: auto;
		min-inline-size: 24px;
		padding-inline: 3px;
		block-size: 30px;
		min-block-size: 30px;
	}

	body .debackers-card-color {
		inline-size: 26px;
		min-inline-size: 26px;
		block-size: 32px;
		min-block-size: 32px;
	}

	body .debackers-card-color::before {
		inline-size: 20px;
		block-size: 20px;
	}

	body .debackers-card-options__choices {
		gap: 3px;
		scrollbar-width: none;
	}

	body .debackers-card-wish {
		flex-basis: 28px;
		inline-size: 28px;
		min-inline-size: 28px;
	}

	/* TASK-0047: larger names and prices on phones; the current price stays the most prominent. */
	body .woocommerce-loop-product__title {
		font-size: 18px;
		line-height: 1.4;
	}

	body .products .price {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ── TASK-0086: Footer — brand block, three social icons, Arabic link groups ───────────────────────── */
.ct-footer .debackers-footer-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ct-footer [data-id="copyright"] {
	text-align: center;
	justify-content: center;
	font-size: 14px;
}

.ct-footer [data-row] > div { align-items: start; }

.woocommerce :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) {
	padding-inline: 44px 16px;
	text-align: start;
}

.woocommerce :is(.woocommerce-message, .woocommerce-error, .woocommerce-info)::before {
	inset-inline-start: 16px;
	inset-inline-end: auto;
}
/* TASK-0091: the interlaced monogram (no round crop) above the bold wordmark, one link, then the sentence and the
   three icons — every part centred on the column's axis (measured, not only text-align). */
.ct-footer .debackers-footer-brand__logo {
	align-items: center;
	color: var(--wp--preset--color--ink, #141c26);
	display: inline-flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
}

.ct-footer .debackers-footer-brand__mark {
	block-size: 64px;
	display: block;
	inline-size: auto;
	object-fit: contain;
}

.ct-footer .debackers-footer-brand__wordmark {
	direction: ltr;
	font-family: var(--wp--preset--font-family--latin);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.1;
	unicode-bidi: isolate;
	white-space: nowrap;
}

.ct-footer .debackers-footer-brand__text {
	margin-block: 14px 0;
	max-inline-size: 32ch;
}

.ct-footer .debackers-footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.ct-footer .debackers-footer-social a {
	align-items: center;
	border: 1px solid currentColor;
	border-radius: 50%;
	block-size: 44px;
	color: var(--wp--preset--color--ink, #141c26);
	display: inline-flex;
	inline-size: 44px;
	justify-content: center;
}

.ct-footer .debackers-footer-social a:hover {
	background: var(--wp--preset--color--ink, #141c26);
	color: #fff;
}

.ct-footer :is(.debackers-footer-social a, .widget-menu a):focus-visible {
	outline: 2px solid var(--wp--preset--color--ink, #141c26);
	outline-offset: 3px;
}

.ct-footer .widget-menu a {
	display: inline-block;
	padding-block: 6px;
}

.ct-footer .widget-title {
	font-size: 15px;
	margin-block-end: 8px;
}

@media (max-width: 689px) {
	.ct-footer [data-column="widget-area-1"] {
		grid-column: 1 / -1;
	}
}

/* ── TASK-0096 (plan 2.13): black header with beige text on every page ─────────────────────────────────
   Ground (#E9E5E2) on ink (#1C1C1C), contrast 13.5:1. Hover and focus underline/ring in ground; the SHOP dropdown
   stays a light panel with ink text so long lists are not read on black. The phone drawer was already ink. */
#header [data-row*="middle"] {
	--theme-icon-color: var(--wp--preset--color--ground);
	--theme-icon-hover-color: var(--wp--preset--color--surface);
	--theme-text-color: var(--wp--preset--color--ground);
	--theme-link-initial-color: var(--wp--preset--color--ground);
	--theme-link-hover-color: var(--wp--preset--color--ground);
	--theme-link-active-color: var(--wp--preset--color--ground);
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ground);
}

#header .site-title,
#header [data-id="menu"] > ul > li > a {
	--theme-link-initial-color: var(--wp--preset--color--ground);
	--theme-link-hover-color: var(--wp--preset--color--ground);
	--theme-link-active-color: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ground);
}

#header [data-id="menu"] > ul > li > .ct-menu-link {
	text-decoration: underline 1px transparent;
	text-underline-offset: 7px;
	transition: text-decoration-color var(--debackers-motion-base);
}

#header [data-id="menu"] > ul > li:is(:hover, .current-menu-item, .current-menu-ancestor) > .ct-menu-link,
#header [data-id="menu"] > ul > li > .ct-menu-link:focus-visible {
	text-decoration-color: currentColor;
}

#header [data-row*="middle"] :is(.ct-cart-item, .ct-header-search, .ct-header-trigger, .ct-header-debackers-wishlist, .ct-label, .ct-amount) {
	color: var(--wp--preset--color--ground);
}

/* Cart count and wishlist badge: ink figures on a ground dot. */
#header .ct-dynamic-count-cart,
#header .debackers-wishlist-badge {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
}

#header [data-row*="middle"] :focus-visible,
#header .ct-header-debackers-wishlist:focus-visible {
	outline: 2px solid var(--wp--preset--color--ground);
	outline-offset: 3px;
}

/* TASK-0096 (plan 4.6): a soft cross-document transition between pages in browsers that support it; none for
   visitors who reduce motion. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

/* SHOP dropdown: a light panel with ink text and an ink focus ring. */
#header [data-id="menu"] .sub-menu {
	--dropdown-background-color: var(--wp--preset--color--surface);
	--dropdown-divider: 1px solid var(--wp--preset--color--line);
	--theme-box-shadow: 0 14px 30px -12px rgb(28 28 28 / 28%);
	color: var(--wp--preset--color--ink);
}

#header [data-id="menu"] .sub-menu .ct-menu-link {
	--theme-link-initial-color: var(--wp--preset--color--ink);
	--theme-link-hover-color: var(--wp--preset--color--muted);
	--theme-link-active-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

#header [data-id="menu"] .sub-menu :focus-visible {
	outline-color: var(--wp--preset--color--ink);
}