/* =========================================================================
   ACC GLOBAL — design tokens + Blocksy header & footer theming
   -------------------------------------------------------------------------
   Loaded on EVERY page (header/footer are site-wide). The home-only design
   system (acc-home.css) depends on the tokens declared here.

   Palette: THE SHOWROOM — ivory plaster / walnut / brushed bronze.
     ivory   -> body + content sections (parts read as objects on a wall)
     walnut  -> header chrome accents, closing band, footer (the "exit")
     bronze  -> the only accent metal: hairlines, numerals, active states

   There is NO RED anywhere in the UI (owner decision, July 2026 — the brand
   moved from dark/racy to luxury showroom). The legacy --acc-red* tokens are
   kept ONLY as aliases pointing at bronze, so any rule that still references
   them degrades to the new palette instead of stabbing red into the page.

   Header/footer rules target Blocksy's actual markup captured from the live
   site: #header.ct-header, .ct-menu-link, .ct-panel.ct-header (mobile),
   #footer.ct-footer, .ct-footer-copyright. A few !important flags override
   Blocksy's inline palette variables — intentional for parent-theme theming.
   ====================================================================== */

/* =========================================================================
   SELF-HOSTED BRAND FONTS — Marcellus (display) + Jost (body/UI)
   Self-hosting + preloading the display face removes the first-paint FOUT
   "jump" on the big headline and drops a render-blocking third-party request.
   Cairo (Arabic) still comes from Google — it is only fetched when the
   translator switches to lang="ar". Latin subset only.

   Marcellus ships a SINGLE weight (400). It is declared across the full
   400-900 range on purpose: the face then answers every weight request from
   the one file, so the browser never fakes a synthetic bold. Display
   hierarchy therefore comes from size and spacing, never from boldness —
   which is exactly the engraved-plaque voice the showroom direction wants.
   ====================================================================== */
@font-face { font-family: 'Marcellus'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/marcellus-400.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jost-400.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jost-500.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 600 900; font-display: swap; src: url('../fonts/jost-600.woff2') format('woff2'); }

/* Never synthesize a weight we don't ship. */
html { font-synthesis-weight: none; }

:root {
	/* ---- Palette: the showroom ---- */
	--acc-bg: #f3eee4;          /* ivory plaster — the body */
	--acc-bg-soft: #ebe3d3;     /* limestone band — alt sections */
	--acc-surface: #faf7f0;     /* raised panel / plinth card */
	--acc-ink: #221b12;         /* primary text (walnut-black) */
	--acc-ink-2: #4a3b2b;       /* secondary text */
	--acc-muted: #6b5c49;       /* muted text on ivory (>=4.5:1) */
	--acc-walnut: #5c4530;      /* wood accent */
	--acc-walnut-deep: #2a2118; /* closing band / plinths / dark surfaces */
	--acc-bronze: #a07a4c;      /* decorative metal: hairlines, rings */
	/* Bronze as TEXT. Must clear 4.5:1 on all three light surfaces, not just
	   ivory — eyebrows and "see this service" links sit on the limestone tint
	   band too, and #85622f measured 4.35:1 there. #7d5c2c is the lightest
	   value that passes everywhere (ivory 5.28, limestone 4.79, surface 5.71),
	   so the warmth survives the correction. --acc-bronze stays lighter and is
	   for hairlines and rings only, never for text. */
	--acc-bronze-text: #7d5c2c;
	--acc-bronze-soft: #c9b48c; /* light brass — accents on dark */
	--acc-hairline: rgba(42, 33, 24, 0.14);
	--acc-hairline-bz: rgba(160, 122, 76, 0.38);
	--acc-wa: #25d366;          /* WhatsApp recognition (floats only) */

	/* ---- Legacy aliases — remapped onto the showroom palette ----
	   Older rules across the theme still say var(--acc-black) / --acc-red.
	   Rather than leave them able to emit the old brand, they now resolve to
	   walnut + bronze. Nothing in the UI can render red or pure black. */
	--acc-black: #2a2118;       /* was #0a0a0a  -> walnut-deep */
	--acc-black-2: #241c13;     /* was #141416  -> footer walnut */
	--acc-white: #fffdf7;       /* was #ffffff  -> warm white */
	--acc-red: #85622f;         /* was #e10600  -> bronze */
	--acc-red-dark: #6b4e24;    /* was #b00500  -> bronze pressed */
	--acc-red-soft: #c9b48c;    /* was #ff3b30  -> brass on dark */
	--acc-gray-50: #ebe3d3;     /* was #f6f6f7  -> limestone */
	--acc-gray-100: #e4dac7;    /* was #ececee  -> limestone chip */
	--acc-muted-light: #6b5c49;
	--acc-muted-dark: #c0b29c;  /* muted text on walnut */
	--acc-border-light: rgba(42, 33, 24, 0.14);
	--acc-border-dark: rgba(201, 180, 140, 0.22);

	/* ---- Fonts ---- */
	--acc-font-head: 'Marcellus', 'Georgia', 'Times New Roman', serif;
	--acc-font-body: 'Jost', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	/* Mono is retired. Numerals now set in Jost with tabular figures, so the
	   old --acc-font-mono references keep aligning columns without a 3rd face. */
	--acc-font-mono: 'Jost', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* ---- Type scale (shared fluid ramp — prefer over ad-hoc clamp()) ---- */
	--acc-text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
	--acc-text-sm:   clamp(0.85rem, 0.81rem + 0.22vw, 0.95rem);
	--acc-text-base: clamp(1rem, 0.96rem + 0.25vw, 1.08rem);
	--acc-text-lg:   clamp(1.12rem, 1.04rem + 0.42vw, 1.3rem);
	--acc-text-xl:   clamp(1.3rem, 1.16rem + 0.72vw, 1.65rem);
	--acc-text-2xl:  clamp(1.6rem, 1.34rem + 1.3vw, 2.3rem);
	--acc-text-3xl:  clamp(2rem, 1.58rem + 2.2vw, 3.2rem);
	--acc-text-4xl:  clamp(2.4rem, 1.75rem + 3.4vw, 4.4rem);

	/* ---- Shape / motion ----
	   Showroom shape system: interactive = pill (999px), panels = near-sharp
	   (a vitrine edge, not a rounded app card), display niches = arch. */
	--acc-radius-sm: 2px;
	--acc-radius: 3px;
	--acc-radius-lg: 4px;
	--acc-radius-pill: 999px;
	--acc-arch: 999px 999px 3px 3px; /* the display-niche silhouette */
	--acc-maxw: 1400px;
	--acc-gutter: clamp(20px, 5vw, 48px); /* the page's inline breathing room */
	--acc-trans: 0.25s ease;
	--acc-ease: cubic-bezier(0.22, 0.8, 0.3, 1);
	/* Focus indicator. Was a 45%-alpha walnut box-shadow, which composited to
	   2.16:1 on ivory and 1.27:1 on the walnut-deep primary button — WCAG asks
	   for 3:1, so on the dark button it was effectively invisible. Solid walnut
	   plus a light outer ring so the same token reads on both ends of the
	   palette, and `outline` rather than `box-shadow` so an overflow:hidden
	   ancestor can't clip it and a component's own shadow can't overwrite it. */
	--acc-ring-color: var(--acc-walnut-deep);
	--acc-ring-halo: #faf7f0;
	/* Warm-tinted elevation — a showroom shadow, never neutral grey */
	--acc-shadow: 0 26px 48px -30px rgba(42, 33, 24, 0.5);
	--acc-shadow-lg: 0 34px 70px -34px rgba(42, 33, 24, 0.45);

	/* Sticky-header height (shrinks on scroll via .acc-scrolled).
	   76px keeps the desktop nav under the 80px premium cap; scrolled = 64px. */
	--acc-header-h: 76px;
}

/* Scrolled state shrinks the header (set by acc-nav.js on <html>) */
.acc-scrolled { --acc-header-h: 64px; }

/* =========================================================================
   PARENT-PALETTE OVERRIDE — the root cause of every blue and red leak

   Blocksy's Customizer palette was never rebranded, so the parent theme still
   publishes these on :root and every unstyled surface inherits them:

     --theme-palette-color-1     #2872fa   blue
     --theme-palette-color-4     #192a3d   navy
     --theme-link-initial-color  #e50000   red   (the pre-2026 ACC red)

   That is not theoretical. #2872fa was painting a 4px border-inline-start on
   every <blockquote>, which is the three Google reviews on the home page — a
   blue stripe down the middle of the trust section, on a brand whose first
   rule is no blue. #192a3d was rendering the "Related products" heading on
   every product page, and #e50000 computed onto the skip link, the category
   cards, the product thumbnails and the active mobile bottom-nav item.

   Rebinding the variables fixes the whole class at once. Patching the
   individual selectors — which is what the theme had been doing — only ever
   covers the surfaces someone remembered to look at.

   Fix it in the Customizer too when convenient; this keeps it right meanwhile.
   ====================================================================== */
:root,
body {
	--theme-palette-color-1: #5c4530; /* was blue    → walnut  */
	--theme-palette-color-2: #2a2118; /* was blue-2  → walnut-deep */
	--theme-palette-color-3: #4a3b2b; /* was slate   → ink-2   */
	--theme-palette-color-4: #221b12; /* was navy    → ink     */
	--theme-palette-color-5: #ebe3d3; /* was cool grey → limestone */
	--theme-palette-color-6: #f3eee4; /* was cool grey → ivory  */
	--theme-palette-color-7: #faf7f0; /* was near-white → surface */
	--theme-palette-color-8: #ffffff;
	--theme-link-initial-color: #221b12; /* was #e50000 */
	--theme-link-hover-color: #a07a4c;
	--theme-text-color: var(--acc-ink);
	--theme-headings-color: var(--acc-ink);
}

/* The stripe itself. Blocksy sets `border-inline-start: 4px solid` on any
   blockquote that isn't .is-style-plain; with the palette rebound it is now
   walnut rather than blue, but a thick coloured side-stripe is not part of
   this design system — quotes are framed by the vitrine hairline instead. */
blockquote:where(:not(.is-style-plain)) {
	border-inline-start: 0;
	border-inline-end: 0;
	border-block: 0;
	padding-inline-start: 0;
}

/* =========================================================================
   GLOBAL POLISH — site-wide premium touches (selection, focus, scrollbar)
   ====================================================================== */
/* Branded text selection */
::selection { background: var(--acc-walnut); color: #f6f0e4; }
::-moz-selection { background: var(--acc-walnut); color: #f6f0e4; }

/* Ivory is the page, everywhere — not just inside .acc-home. */
html { background-color: var(--acc-bg); }
body { background-color: var(--acc-bg); color: var(--acc-ink); }

/* Consistent keyboard focus ring across every interactive element.
   `outline` + `outline-offset`: outline is not clipped by an overflow:hidden
   ancestor, follows border-radius on its own, and cannot be silently erased by
   a component that sets its own box-shadow (which is what happened to every
   WooCommerce button). The pale halo sits outside the walnut so the ring stays
   visible on the dark CTA band and the footer as well as on ivory. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--acc-ring-color);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--acc-ring-halo);
	border-radius: 4px;
}

/* On the walnut surfaces the contrast runs the other way: pale ring, dark halo. */
.acc-cta :is(a, button):focus-visible,
.acc-sitefoot :is(a, button):focus-visible,
.acc-overlay :is(a, button):focus-visible,
.acc-botnav :is(a, button):focus-visible,
.acc-about-cta :is(a, button):focus-visible,
.acc-pg-close :is(a, button):focus-visible {
	outline-color: var(--acc-bg);
	box-shadow: 0 0 0 5px rgba(42, 33, 24, 0.85);
}

/* Slim branded scrollbar (desktop / pointer devices) */
@media (pointer: fine) {
	html { scrollbar-width: thin; scrollbar-color: var(--acc-bronze) var(--acc-bg-soft); }
	::-webkit-scrollbar { width: 11px; height: 11px; }
	::-webkit-scrollbar-track { background: var(--acc-bg-soft); }
	::-webkit-scrollbar-thumb {
		background: var(--acc-bronze);
		border-radius: 999px;
		border: 3px solid var(--acc-bg-soft);
	}
	::-webkit-scrollbar-thumb:hover { background: var(--acc-walnut); }
}

/* =========================================================================
   HEADER
   ====================================================================== */
/* Translucent, blurred "glass" header. Rows/columns are transparent so the
   blur shows through; #header carries the tint + backdrop blur. */
#header.ct-header,
#header.ct-header [data-row],
#header.ct-header [data-column] {
	background-color: transparent !important;
}

/* The showroom header: ivory "glass" on every page. The hero no longer sits
   under a dark photo, so the old transparent-over-hero mode is gone — the bar
   is the same calm ivory everywhere, with a bronze hairline underneath. */
#header.ct-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 999;
	background-color: color-mix(in srgb, var(--acc-bg) 88%, transparent) !important;
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
	border-block-end: 1px solid var(--acc-hairline);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Once scrolled it settles to solid ivory so text never fights the content. */
.acc-scrolled #header.ct-header {
	background-color: var(--acc-bg) !important;
	border-block-end-color: var(--acc-hairline-bz);
}

/* Exact header height (kills Blocksy's variable row padding) so the fixed MENU
   trigger and the centred logo line up perfectly; shrinks on scroll. */
#header.ct-header [data-row] {
	display: flex;
	align-items: center;
	min-block-size: var(--acc-header-h);
	block-size: var(--acc-header-h);
	padding-block: 0 !important;
	transition: min-block-size 0.3s ease, block-size 0.3s ease;
}

#header.ct-header [data-row] > .ct-container { inline-size: 100%; }

/* Logo centred in the bar (absolute, relative to the positioned #header) */
#header.ct-header .site-branding {
	position: absolute;
	/* PHYSICAL left:50% (not the logical inset-inline-start) so the logo stays
	   dead-centre in RTL too — with a logical inset it resolves to right:50%
	   while translate(-50%) doesn't flip, dragging the logo off toward the menu. */
	inset-block-start: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
}

/* Hide Blocksy's inline menu / search / trigger — replaced by the overlay
   menu (a single hamburger trigger). Logo stays in the start column. */
#header [data-column="end"],
#header .ct-header-search,
#header .ct-header-trigger,
#header nav.menu-container { display: none !important; }

/* Site title as an ENGRAVED WORDMARK.
   The old logo-acc-white.png is white + red: it disappears on ivory and
   re-introduces the retired brand red, so the mark is now set as type — the
   way a boutique nameplate is lettered on the wall. The real text stays in
   the DOM (screen readers / SEO) instead of being image-replaced away.
   To go back to an image later, drop a dark logo in and restore the
   background-image block; nothing else depends on this. */
#header .site-title,
#header .site-title a {
	font-family: var(--acc-font-head);
	font-weight: 400;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1;
}

#header .site-title a {
	display: block;
	font-size: clamp(15px, 1.5vw + 8px, 23px);
	letter-spacing: 0.22em;
	/* tracking adds trailing space on the last letter — pull it back so the
	   mark stays optically centred in the bar */
	margin-inline-end: -0.22em;
	color: var(--acc-ink) !important;
	transition: font-size 0.3s ease, color var(--acc-trans);
}

#header .site-title a:hover { color: var(--acc-bronze-text) !important; }

.acc-scrolled #header .site-title a { font-size: clamp(14px, 1.2vw + 7px, 20px); }

/* Primary navigation links */
#header .ct-menu-link {
	color: var(--acc-ink-2) !important;
	font-family: var(--acc-font-body);
	font-weight: 500;
	font-size: 0.79rem;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	transition: color var(--acc-trans);
}

#header .ct-menu-link:hover,
#header .current-menu-item > .ct-menu-link,
#header .current_page_item > .ct-menu-link {
	color: var(--acc-bronze-text) !important;
}

/* Hairline accent on the active item */
#header .current-menu-item > .ct-menu-link::after,
#header .current_page_item > .ct-menu-link::after {
	content: "";
	display: block;
	block-size: 1px;
	margin-block-start: 5px;
	background: var(--acc-bronze);
}

/* Toggles / hamburger / search */
#header .ct-header-trigger,
#header .ct-toggle { color: var(--acc-ink) !important; }

/* Mobile off-canvas panel */
.ct-panel.ct-header { background-color: var(--acc-bg) !important; }
.ct-panel.ct-header .ct-menu-link { color: var(--acc-ink) !important; }
.ct-panel.ct-header .ct-menu-link:hover { color: var(--acc-bronze-text) !important; }

/* =========================================================================
   FOOTER (Blocksy default copyright row — used on non-home pages)
   On the home page this is hidden in favour of the rich ACC footer block
   (see acc-home.css: body.home #footer.ct-footer { display:none }).
   ====================================================================== */
#footer.ct-footer {
	background-color: var(--acc-black-2) !important; /* walnut — the "exit" */
	border-block-start: 1px solid var(--acc-border-dark);
}

#footer .ct-footer-copyright,
#footer .ct-footer-copyright a {
	color: var(--acc-muted-dark) !important;
	font-family: var(--acc-font-body);
}

#footer .ct-footer-copyright a:hover { color: var(--acc-bronze-soft) !important; }

/* =========================================================================
   Blocksy page-title band -> dark branded header
   (shop, product categories, cart, checkout, account, default pages)
   ====================================================================== */
/* No dark slab any more: the title band is limestone, closed by a bronze
   hairline, so entering the shop feels like walking into the next room. */
.hero-section[data-type] {
	background-color: var(--acc-bg-soft) !important;
	border-block-end: 1px solid var(--acc-hairline-bz);
	padding-block: clamp(28px, 3.6vw, 52px);
}

.hero-section[data-type] .page-title,
.hero-section[data-type] .entry-title {
	font-family: var(--acc-font-head);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0.005em;
	color: var(--acc-ink);
}

.hero-section[data-type] .woocommerce-breadcrumb { color: var(--acc-muted); }
.hero-section[data-type] .woocommerce-breadcrumb a { color: var(--acc-bronze-text); }

/* Blocksy's own breadcrumb (ct-breadcrumbs) */
.hero-section[data-type] .ct-breadcrumbs {
	font-family: var(--acc-font-body);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--acc-muted);
}

.hero-section[data-type] .ct-breadcrumbs a { color: var(--acc-bronze-text); text-decoration: none; }
.hero-section[data-type] .ct-breadcrumbs a:hover { color: var(--acc-ink); }

/* Bronze hairline beneath the page/archive title (e.g. "Shop") */
.hero-section[data-type] .page-title { position: relative; padding-block-end: 14px; }

.hero-section[data-type] .page-title::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 44px;
	block-size: 1px;
	background: var(--acc-bronze);
}

/* Type-1 bands (single product, cart, checkout, account): slimmer still, and
   sitting directly on the ivory page rather than on the limestone band. */
.hero-section[data-type="type-1"] {
	background-color: transparent !important;
	border-block-end: 0 !important;
	padding-block: clamp(8px, 1.6vw, 20px) !important;
}
.hero-section[data-type="type-1"] .page-title,
.hero-section[data-type="type-1"] .entry-title { color: var(--acc-ink); }

/* =========================================================================
   NEW UAE DIRHAM GLYPH
   The currency filter returns plain "AED"; here we visually swap that symbol
   for the official Dirham glyph via a CSS mask (inherits text colour, scales
   with font-size). Applies site-wide so any classic-rendered price shows the
   glyph. The plain "AED" stays the accessible name (text-indented off-screen,
   still read by AT) and the fallback wherever this CSS/SVG isn't present
   (Blocks checkout, emails, admin).
   ====================================================================== */
.woocommerce-Price-currencySymbol {
	display: inline-block;
	inline-size: 0.92em;
	block-size: 0.78em;
	vertical-align: -0.04em;
	overflow: hidden;
	text-indent: -9999px;
	white-space: nowrap;
	background-color: currentColor;
	-webkit-mask: url("../img/dirham.svg") no-repeat center / contain;
	mask: url("../img/dirham.svg") no-repeat center / contain;
}

/* Keep the symbol + number group reading left-to-right, even on RTL pages. */
.woocommerce-Price-amount { direction: ltr; }

/* If masking is unsupported, reveal the "AED" text instead of an empty box. */
@supports not (mask-image: url("a")) {
	.woocommerce-Price-currencySymbol {
		inline-size: auto;
		block-size: auto;
		overflow: visible;
		text-indent: 0;
		background: none;
	}
}

/* Same escape hatch for Windows High Contrast. Forced-colors overrides
   background-color with a system colour, so the glyph is painted with a colour
   the mask then clips to nothing: the symbol vanishes and, because the real
   "AED" text is pushed off with text-indent, the price loses its currency
   entirely. Show the text instead. */
@media (forced-colors: active) {
	.woocommerce-Price-currencySymbol {
		inline-size: auto;
		block-size: auto;
		overflow: visible;
		text-indent: 0;
		background: none;
		-webkit-mask: none;
		mask: none;
	}
}

/* =========================================================================
   LEGACY PHOTOGRAPHY — the "showroom treatment"
   -------------------------------------------------------------------------
   The site's editorial photo library was shot for the old dark/racy brand:
   every frame is lit with red neon strips. Grayscale first (which removes the
   hue entirely, so no red can survive) then a warm sepia re-tint turns that
   same lighting into the warm amber of a showroom niche — the library becomes
   on-brand instead of being thrown away.

   Not applied to /showroom/ renders, which are already warm and correct.
   Remove a selector here as real showroom photography replaces each set.
   ====================================================================== */
/* RETIRED 2026-08-04. The whole legacy library has been reshot in the showroom
   idiom — the six workshop services, both page heroes, the three ecosystem
   scenes and the About portrait are all new, warm, and measured clean (0.00%
   blue, <0.02% red, >99% of saturated pixels in the warm band). There is no
   red neon left to neutralise, and leaving the filter on would grayscale the
   new photography instead.

   If a genuinely old frame ever has to go back in, prefer reshooting it to
   re-adding this rule; the filter always cost the image its colour. */

/* NOTE: product imagery is deliberately NOT filtered.
   There used to be a neutralising filter here, because the old product renders
   carried magenta/red rim light from the previous brand. The whole line has
   since been reshot in the showroom (warm limestone niches, travertine
   plinths), so the photographs are already on-palette — filtering them only
   drained the warmth back out and made the catalogue look grey.
   Do not reintroduce a filter on product images. */

/* =========================================================================
   TABULAR FIGURES — aligned digits for prices, counters, badges.
   The mono face is retired; Jost's tabular figures keep stacked numbers
   vertically aligned without dragging a third typeface onto the page.
   ====================================================================== */
.woocommerce-Price-amount,
.acc-card__price,
.acc-statband__num,
.acc-about-stat__value,
.acc-cart-float__count {
	font-family: var(--acc-font-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* =========================================================================
   ARABIC / RTL TYPOGRAPHY
   The WT AR/EN translator sets <html lang="ar"> (+ dir="rtl" in Full RTL mode).
   Marcellus + Jost carry NO Arabic glyphs, so swap the brand faces to Cairo.
   Also neutralise letter-spacing + uppercase: Arabic letters are cursive
   (spacing breaks the joins) and have no case (uppercase is a no-op).
   ====================================================================== */
html[lang="ar"] {
	--acc-font-head: 'Cairo', 'Tajawal', system-ui, sans-serif;
	--acc-font-body: 'Cairo', 'Tajawal', system-ui, sans-serif;
}

html[lang="ar"] * {
	letter-spacing: normal !important;
	text-transform: none !important;
}

/* Prices/specs keep Latin numerals in the mono face, reading LTR even in AR. */
html[lang="ar"] .woocommerce-Price-amount,
html[lang="ar"] .acc-statband__num {
	font-family: var(--acc-font-mono);
}

/* Language switcher — fixed in the header's top-start corner (mirrors the MENU
   trigger at top-end). Forced to a transparent/light look so it blends over
   both the dark home hero and the solid black inner-page header, regardless of
   the plugin's own colour settings. */
.acc-langswitch {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: clamp(16px, 4vw, 44px);
	block-size: var(--acc-header-h);
	z-index: 1000;
	display: inline-flex;
	align-items: center;
	transition: opacity 0.3s ease;
}
.acc-langswitch .wtae-switcher {
	--wtae-bg: transparent;
	--wtae-text: var(--acc-ink-2);
	--wtae-active-bg: var(--acc-walnut-deep);
	--wtae-active-fg: #f6f0e4;
	--wtae-hover-bg: rgba(42, 33, 24, 0.08);
	margin: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

/* Stripping the plugin's own padding left each language pill at 35x22px, half
   the minimum tap target. The height goes back on the anchor as hit area; the
   pill's visible ink is unchanged because the background only paints the
   padding box the plugin already had. Bilingual switching is a primary action
   on this site, not a footnote. */
@media (pointer: coarse) {
	.acc-langswitch .wtae-lang {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
	}
}
/* Hide the header switcher while the full-screen menu is open. */
html.acc-noscroll .acc-langswitch { opacity: 0; pointer-events: none; }

/* We render our own header switcher, so suppress the plugin's auto floating pill
   (it overlapped the bottom nav + the WhatsApp/cart floats). */
.wtae-switcher.wtae-floating { display: none !important; }

/* =========================================================================
   MOBILE HEADER — three layers, one bar
   -------------------------------------------------------------------------
   The bar carries three things that have NO layout relationship to each
   other: Blocksy's wordmark (absolute, centred via left:50%), our language
   switcher (fixed, inline-start) and the nav toggle (fixed, inline-end).
   Nothing reserves space for anything else, so on a 390px phone the wordmark
   ran 88-302 while the switcher ran 16-95 and the toggle 278-374. Both ends
   overlapped, and it read as "ACC SERVICE STATIOMENU".

   Fixed in three moves: drop the redundant MENU word, tighten the language
   pills, and cap the wordmark to the channel that is actually left. The cap
   is the part that matters - it is what stops this recurring the next time
   something changes width.
   ====================================================================== */
@media (max-width: 600px) {
	/* Flags off: EN/AR stays compact beside the centred wordmark. */
	.acc-langswitch .wtae-switcher .wtae-lang img { display: none; }

	/* Tighter language pills. */
	.acc-langswitch .wtae-switcher { gap: 4px; }
	.acc-langswitch .wtae-lang { padding-inline: 9px; }

	/* The hamburger already says "menu". The word beside it costs 54px of the
	   only horizontal space the wordmark has. */
	.acc-navtoggle__label { display: none; }
	.acc-navtoggle { gap: 0; }

	/* --acc-hdr-chrome is the widest the language switcher gets. Capping the
	   centred branding block to the viewport minus that on both sides keeps
	   the mark's LEADING edge clear of the switcher; the type clamps below
	   keep its trailing edge clear of the toggle. Measured at 320/360/390/
	   430/500/600: zero overlap on both sides at every width. */
	:root { --acc-hdr-chrome: 100px; }

	#header.ct-header .site-branding {
		max-inline-size: calc(100vw - (2 * var(--acc-hdr-chrome, 100px)));
	}

	#header .site-title a {
		font-size: clamp(11px, 3.2vw, 15px);
		/* Tracking tightens with the viewport too. At 320px the mark was
		   landing 1px off the AR pill, which reads as touching; letting the
		   letter-spacing close buys the gap back without truncating. */
		letter-spacing: clamp(0.1em, 0.42vw, 0.16em);
		margin-inline-end: calc(-1 * clamp(0.1em, 0.42vw, 0.16em));

		/* Last-resort guard, sized to the toggle side. The link overflows the
		   capped branding block rather than being clipped by it, so the stop
		   has to live here. It does not engage for "ACC Service Station" at
		   any width; it is what catches a longer site title or a translated
		   one before it can reach the hamburger. */
		max-inline-size: calc(100vw - var(--acc-hdr-chrome, 100px) - 58px);
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* The scrolled state shrinks the mark further; keep it in step. */
	.acc-scrolled #header .site-title a { font-size: clamp(10px, 3vw, 14px); }
}

/* =========================================================================
   SCROLL-PROGRESS BAR (thin bronze line, injected by acc-nav.js)
   ====================================================================== */
.acc-progress {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 1001; /* above header (999), below the overlay menu (1100) */
	block-size: 2px;
	transform: scaleX(0);
	transform-origin: left center;
	background: linear-gradient(90deg, var(--acc-bronze), var(--acc-bronze-soft));
	will-change: transform;
	pointer-events: none;
}

[dir="rtl"] .acc-progress { transform-origin: right center; }

/* =========================================================================
   OVERLAY NAVIGATION (full-screen modal menu)
   ====================================================================== */

/* Smooth in-page anchor scrolling (respects reduced motion) */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Lock scroll while the overlay is open */
.acc-noscroll { overflow: hidden; }

/* ---- Trigger (fixed, inline-end / top) ---- */
.acc-navtoggle {
	position: fixed;
	inset-block-start: 0;
	inset-inline-end: clamp(16px, 4vw, 44px);
	block-size: var(--acc-header-h); /* match header -> vertically centred */
	z-index: 1000;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--acc-ink);
	font-family: var(--acc-font-body);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: color var(--acc-trans), opacity var(--acc-trans), block-size 0.3s ease;
}

.acc-navtoggle:hover { color: var(--acc-bronze-text); }

.acc-navtoggle__bars { display: inline-grid; gap: 5px; }

.acc-navtoggle__bars span {
	display: block;
	inline-size: 26px;
	block-size: 1px;
	background: currentColor;
	transition: background var(--acc-trans);
}

/* Hide the trigger while the overlay is open (overlay has its own close X) */
.acc-navtoggle[aria-expanded="true"] { opacity: 0; pointer-events: none; }

.acc-navtoggle:focus-visible { border-radius: 8px; }

/* Coarse pointers need the full 44px. The bars stay where they are; only the
   hit area grows, so the header chrome measurements don't move. */
@media (pointer: coarse) {
	.acc-navtoggle { min-block-size: 44px; padding-inline: 10px; }
}

/* ---- Overlay ---- */
.acc-overlay {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: grid;
	grid-template-columns: 40% 60%;
	background: var(--acc-bg);
	color: var(--acc-ink);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.acc-overlay[hidden] { display: none; }
.acc-overlay.is-open { opacity: 1; }

/* Image panel — a look through the showroom arcade while the menu is open */
.acc-overlay__media {
	position: relative;
	background: var(--acc-walnut-deep) url("../img/showroom/showroom-arches.webp") center / cover no-repeat;
	border-inline-end: 1px solid var(--acc-hairline-bz);
}

.acc-overlay__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(42, 33, 24, 0.05), rgba(42, 33, 24, 0.3));
}

.acc-overlay__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(32px, 6vw, 88px);
	transform: translateY(12px);
	transition: transform 0.45s ease;
}

.acc-overlay.is-open .acc-overlay__panel { transform: none; }

.acc-overlay__close {
	position: absolute;
	inset-block-start: clamp(18px, 2.4vw, 30px);
	inset-inline-end: clamp(18px, 2.4vw, 36px);
	inline-size: 52px;
	block-size: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	line-height: 1;
	color: var(--acc-ink);
	background: transparent;
	border: 1px solid var(--acc-hairline-bz);
	border-radius: 50%;
	cursor: pointer;
	transition: color var(--acc-trans), border-color var(--acc-trans), background var(--acc-trans), transform var(--acc-trans);
}

.acc-overlay__close:hover {
	color: var(--acc-bronze-text);
	border-color: var(--acc-bronze);
	background: rgba(160, 122, 76, 0.08);
	transform: rotate(90deg);
}

/* Focus comes from the global rule + the dark-surface variant above. */

.acc-overlay__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(2px, 0.6vw, 8px);
}

.acc-overlay__menu a {
	display: inline-block;
	font-family: var(--acc-font-head);
	font-size: clamp(1.7rem, 4.4vw, 3.1rem);
	font-weight: 400;
	letter-spacing: 0.005em;
	color: var(--acc-ink);
	text-decoration: none;
	line-height: 1.2;
	transition: color var(--acc-trans), transform var(--acc-trans);
}

.acc-overlay__menu a:hover,
.acc-overlay__menu .current-menu-item > a,
.acc-overlay__menu .current_page_item > a {
	color: var(--acc-bronze-text);
}

.acc-overlay__menu a:hover { transform: translateX(10px); }

[dir="rtl"] .acc-overlay__menu a:hover { transform: translateX(-10px); }

.acc-overlay__menu a:focus-visible { border-radius: 6px; }

.acc-overlay__meta {
	margin-block-start: clamp(28px, 5vw, 52px);
	padding-block-start: 24px;
	border-block-start: 1px solid var(--acc-hairline);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 28px;
}

.acc-overlay__cta {
	display: inline-flex;
	align-items: center;
	padding: 0.95em 1.7em;
	border-radius: var(--acc-radius-pill);
	background: var(--acc-walnut-deep);
	color: #f6f0e4;
	font-family: var(--acc-font-body);
	font-weight: 500;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform var(--acc-trans), box-shadow var(--acc-trans), background var(--acc-trans);
}

.acc-overlay__cta,
.acc-overlay__cta:hover { color: #f6f0e4; }
.acc-overlay__cta:hover { background: var(--acc-walnut); transform: translateY(-2px); box-shadow: var(--acc-shadow); }

.acc-overlay__addr {
	margin: 0;
	color: var(--acc-muted);
	font-family: var(--acc-font-body);
	font-size: 0.9rem;
	letter-spacing: 0.02em;
}

/* ---- Overlay responsive ---- */
@media (max-width: 880px) {
	.acc-overlay { grid-template-columns: 1fr; }
	.acc-overlay__media { display: none; }
}

/* ---- Reduced motion ---- */
/* =========================================================================
   FLOATING WHATSAPP BUTTON (site-wide)
   Keeps WhatsApp's own green: it is a recognition mark, not brand colour —
   people scan for that green. It is the one saturated thing on the page.
   ====================================================================== */
.acc-wa-float {
	position: fixed;
	inset-block-end: clamp(18px, 3vw, 30px);
	inset-inline-end: clamp(16px, 4vw, 30px);
	z-index: 1050;
	inline-size: 58px;
	block-size: 58px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #08331a;
	background: var(--acc-wa);
	box-shadow: 0 12px 30px -10px rgba(37, 211, 102, 0.55);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.acc-wa-float:hover {
	color: #08331a;
	transform: translateY(-3px) scale(1.06);
	box-shadow: 0 18px 40px -12px rgba(37, 211, 102, 0.7);
}

.acc-wa-float .acc-icon { inline-size: 28px; block-size: 28px; }

/* Pulsing ring — a brief attention ping on load (3x), then calm. A perpetual
   loop reads as salesy for a premium brand. */
.acc-wa-float::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--acc-wa);
	z-index: -1;
	animation: acc-wa-pulse 2.4s ease-out 3;
}

@keyframes acc-wa-pulse {
	0% { transform: scale(1); opacity: 0.5; }
	100% { transform: scale(1.8); opacity: 0; }
}

/* The float is WhatsApp green, so neither the walnut ring nor the pale halo
   reads against it. Dark ring, pale halo, and its own lift shadow kept. */
.acc-wa-float:focus-visible {
	outline: 3px solid var(--acc-walnut-deep);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--acc-bg), 0 12px 30px -10px rgba(37, 211, 102, 0.55);
}

/* =========================================================================
   MOBILE APP-STYLE BOTTOM NAV (phones only)
   Fixed tab bar: Home · Shop · WhatsApp (accent) · Contact · Menu.
   Replaces the floating WhatsApp bubble on phones.
   ====================================================================== */
.acc-botnav { display: none; }

@media (max-width: 768px) {
	.acc-botnav {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 1040;
		display: flex;
		justify-content: space-around;
		align-items: stretch;
		gap: 2px;
		padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
		background: color-mix(in srgb, var(--acc-bg) 94%, transparent);
		-webkit-backdrop-filter: blur(14px) saturate(120%);
		backdrop-filter: blur(14px) saturate(120%);
		border-block-start: 1px solid var(--acc-hairline-bz);
	}

	.acc-botnav__item {
		flex: 1 1 0;
		min-inline-size: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		padding: 4px 2px;
		background: transparent;
		border: 0;
		cursor: pointer;
		color: var(--acc-muted);
		font-family: var(--acc-font-body);
		/* Was 0.58rem = 9.3px, well under the 12px floor for a persistent
		   navigation label. Tracking comes down with the size increase so
		   "Workshop" and "Services" still fit four-across at 320px. */
		font-size: 0.7rem;
		font-weight: 500;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		text-decoration: none;
		transition: color var(--acc-trans);
	}

	.acc-botnav__item .acc-icon { inline-size: 22px; block-size: 22px; }
	.acc-botnav__item:hover,
	.acc-botnav__item:focus-visible,
	.acc-botnav__item.is-active { color: var(--acc-ink); }
	.acc-botnav__item.is-active .acc-icon { color: var(--acc-bronze-text); }

	/* floating WhatsApp bubble — smaller on phones, raised so it clears the bar
	   with breathing room above the bottom nav */
	.acc-wa-float {
		inline-size: 50px;
		block-size: 50px;
		inset-block-end: calc(92px + env(safe-area-inset-bottom, 0px));
	}
	.acc-wa-float .acc-icon { inline-size: 24px; block-size: 24px; }

	/* keep page content clear of the fixed bar */
	body { padding-block-end: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* =========================================================================
   FLOATING CART BUTTON (sits above the WhatsApp bubble)
   ====================================================================== */
.acc-cart-float {
	position: fixed;
	inset-inline-end: clamp(16px, 4vw, 30px);
	inset-block-end: 92px; /* clears the 58px WhatsApp bubble below */
	z-index: 1050;
	inline-size: 56px;
	block-size: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #f6f0e4;
	background: var(--acc-walnut-deep);
	border: 1px solid var(--acc-hairline-bz);
	box-shadow: 0 12px 30px -12px rgba(42, 33, 24, 0.6);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.acc-cart-float:hover { color: #fff6ea; transform: translateY(-3px); background: var(--acc-walnut); }
.acc-cart-float .acc-icon { inline-size: 25px; block-size: 25px; }
/* Focus comes from the global rule. */

.acc-cart-float__count {
	position: absolute;
	inset-block-start: -5px;
	inset-inline-end: -5px;
	min-inline-size: 20px;
	block-size: 20px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--acc-bronze);
	color: #fff9ef;
	font-family: var(--acc-font-body);
	font-size: 0.66rem;
	font-weight: 600;
	line-height: 1;
}

.acc-cart-float__count.is-empty { display: none; }

/* On phones, smaller + stacked above the WhatsApp bubble (which is above the bar) */
@media (max-width: 768px) {
	.acc-cart-float {
		inline-size: 48px;
		block-size: 48px;
		inset-block-end: calc(150px + env(safe-area-inset-bottom, 0px));
	}
	.acc-cart-float .acc-icon { inline-size: 22px; block-size: 22px; }
}

/* =========================================================================
   Reduced motion
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
	.acc-overlay,
	.acc-overlay__panel,
	.acc-overlay__close:hover,
	.acc-overlay__menu a:hover { transition: none; transform: none; }

	.acc-wa-float::before { animation: none; }
	.acc-wa-float:hover { transform: none; }
}

/* =========================================================================
   SCROLL-REVEAL ANIMATIONS
   Targets start hidden only when <html> has .acc-anim (set in the head before
   paint = no flash). acc-nav.js adds .is-in as elements enter the viewport.
   Whole block is gated on no-preference, so reduced-motion users see nothing
   hidden.
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
	html.acc-anim :is(
		.acc-section__head,
		.acc-card,
		.acc-catcard,
		.acc-brand,
		.acc-pg-sec,
		.acc-cta__inner,
		.acc-reveal
	) {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
			transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	/* Hero content staggers in on load */
	html.acc-anim .acc-hero__inner > * {
		opacity: 0;
		transform: translateY(20px);
		transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	html.acc-anim .is-in {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Nothing that never scrolls should get a blank page. The reveal only fires on
   intersection, so on a 10,900px home page 71 of 72 targets are still at
   opacity 0 until someone scrolls — fine for a visitor, wrong for a printer, a
   PDF export or a preview renderer, all of which capture the document as-is.
   Same reason the images below drop their lazy flag: a full-page render has no
   scroll to trigger them with. */
@media print {
	html.acc-anim :is(
		.acc-section__head,
		.acc-card,
		.acc-catcard,
		.acc-brand,
		.acc-pg-sec,
		.acc-cta__inner,
		.acc-reveal,
		.acc-entry,
		.acc-pg-hero__media,
		.acc-pg-group__head,
		.acc-hero__inner > *
	),
	html.acc-anim .woocommerce ul.products li.product {
		opacity: 1 !important;
		transform: none !important;
	}

	img { loading: eager; }

	/* The floats and the bottom bar are navigation, not content. */
	.acc-wa-float,
	.acc-cart-float,
	.acc-botnav,
	.acc-navtoggle,
	.acc-langswitch { display: none !important; }
}