/*
 * Shakoof — base styles.
 *
 * RTL-first: every directional rule uses CSS logical properties
 * (margin-inline, padding-inline, inset-inline, text-align: start/end) so the
 * same stylesheet is correct in Hebrew RTL and any LTR run without a separate
 * rtl.css. Colors, fonts, and spacing come from theme.json presets, exposed by
 * WordPress as --wp--preset--* custom properties.
 *
 * This is the scaffold layer (reset + tokens + layout primitives + header/
 * footer chrome). Component styling arrives with the Phase 2 design sprint.
 */

/* ------------------------------------------------------------------ font-face */
/*
 * Heebo, self-hosted VARIABLE font (OFL) — one file per script covers every
 * weight the design uses (400/600/700/800), ~42KB total. Subset by
 * unicode-range so Hebrew pages don't pay for Latin glyphs they don't show.
 */
@font-face {
	font-family: "Heebo";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/heebo-var-hebrew.woff2") format("woff2");
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
	font-family: "Heebo";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/heebo-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------- tokens */
:root {
	--shakoof-yellow: var(--wp--preset--color--yellow, #FFEB00);
	/* One step deeper than the brand yellow, for the pressed/hovered CTA.
	   Same hue, ~8% darker — enough that the hand and the colour agree
	   something is clickable, not enough to read as a second colour. */
	--shakoof-yellow-deep: #F5D800;
	--shakoof-ink: var(--wp--preset--color--ink, #1A1A1A);
	--shakoof-paper: var(--wp--preset--color--paper, #FFFFFF);
	--shakoof-muted: var(--wp--preset--color--muted, #6B6B6B);
	--shakoof-line: var(--wp--preset--color--line, #E5E5E5);
	--shakoof-surface: var(--wp--preset--color--surface, #F7F7F5);

	--shakoof-font: var(--wp--preset--font-family--base, "Heebo", "Segoe UI", Arial, sans-serif);
	--shakoof-wrap: 1200px;
	--shakoof-gap: 1.5rem;

	/* Dizengoff-blend accents (DECISIONS July 8 #2): pale wash for card hover,
	   marker-highlight for headings. */
	--shakoof-yellow-wash: #FFFAE0;
	/* Post-commit review 2026-07-24 §3: warm stage for product photography —
	   supplier shots are white-background, so pale frames vanished on paper
	   white. Images sit on this with mix-blend-mode: multiply. */
	--shakoof-product-bg: #F5F3EE;

	/* Deeper warm grey from the approved blend mock (d4 nav) — used where the
	   muted token is too light for small interactive text (AA contrast).
	   NOTE audit 2026-07: the muted PRESET itself moved #8A8578 → #6E6A60
	   (3.67:1 failed AA); deep steps further down to keep the two-level scale. */
	--shakoof-muted-deep: #55524A;
}

/* Yellow marker-highlight (Dizengoff signature) — for hero/landing headings. */
.shakoof-mark {
	background: linear-gradient(transparent 55%, var(--shakoof-yellow) 55%, var(--shakoof-yellow) 96%, transparent 96%);
	padding-inline: 2px;
}

/* ---------------------------------------------------------------------- reset */
body {
	font-family: var(--shakoof-font);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--shakoof-ink);
	background: var(--shakoof-paper);
}

img,
svg {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--shakoof-yellow);
	outline-offset: 2px;
}

h1, h2, h3, h4 {
	line-height: 1.2;
	margin-block: 0 0.5em;
}

/* ------------------------------------------------------------------- layout */
.wrap {
	inline-size: 100%;
	max-inline-size: var(--shakoof-wrap);
	margin-inline: auto;
	padding-inline: var(--shakoof-gap);
}

.site-main {
	display: block;
	padding-block: var(--shakoof-gap);
}

/* --------------------------------------------------------- accessibility */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ⚠️ Do NOT hide this with a large negative inline offset. On an RTL page
   `inset-inline-start: -9999px` resolves to the RIGHT edge and pushes the
   document outward — measured at 11,279px wide on the form pages, which
   squeezes real content into a narrow column. Clip it instead: invisible,
   still focusable, and it cannot affect layout width. */
.skip-link {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	z-index: 1000;
}
.skip-link:focus {
	inline-size: auto;
	block-size: auto;
	overflow: visible;
	clip-path: none;
	inset-inline-start: 1rem;
	inset-block-start: 1rem;
	background: var(--shakoof-ink);
	color: var(--shakoof-paper);
	padding: 0.75rem 1rem;
	border-radius: 4px;
}

/* --------------------------------------------------------- details/accordion */
/*
 * Core details blocks (מכבי eligibility folds, eyewear-parts story, EN page
 * accordion — triage §3, July 18 2026). Quiet Dizengoff box: line border on
 * surface, bold 44px-min summary (touch-target rule from the v0.7.0 round).
 */
.wp-block-details {
	border: 1px solid var(--shakoof-line);
	background: var(--shakoof-surface);
	margin-block: 1rem;
}
.wp-block-details > summary {
	cursor: pointer;
	font-weight: 700;
	padding: 0.75rem 1rem;
	min-block-size: 44px;
}
.wp-block-details[open] > summary {
	border-block-end: 1px solid var(--shakoof-line);
}
.wp-block-details > *:not(summary) {
	padding-inline: 1rem;
}
.wp-block-details > *:last-child:not(summary) {
	padding-block-end: 0.75rem;
}

/* ------------------------------------------------- announcement (bridge §7.5) */
/*
 * One-line site notice pushed from Optika (holiday hours etc.), rendered by
 * header.php only when non-empty. Deliberately quiet — the loud ticker bar was
 * dropped from D3; this is surface + hairline with a short yellow marker.
 */
.site-announcement {
	background: var(--shakoof-surface);
	border-block-end: 1px solid var(--shakoof-line);
	color: var(--shakoof-ink);
	font-size: 0.875rem;
	text-align: center;
}
.site-announcement .wrap {
	padding-block: 0.5rem;
}
.site-announcement .wrap::before {
	content: "";
	display: inline-block;
	inline-size: 0.625rem;
	block-size: 0.625rem;
	background: var(--shakoof-yellow);
	margin-inline-end: 0.5rem;
	vertical-align: baseline;
}

/* ------------------------------------------------------------------- header */
/*
 * Blend header (DECISIONS July 8 #2, mock d4): strong ink rule = Dizengoff
 * structure; wordmark 800 with the yellow marker on "שקוף"; nav is quiet warm
 * grey, active/hovered items go ink with the inset yellow underline.
 * Dropdown panels are Dizengoff: ink border + hard shadow, no radius.
 */
.site-header {
	border-block-end: 2px solid var(--shakoof-ink);
	background: var(--shakoof-paper);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--shakoof-gap);
	padding-block: 1.125rem;
	flex-wrap: wrap;
}
.site-title {
	font-weight: 800;
	font-size: 1.4375rem;
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
}

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.375rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	font-weight: 600;
}
.site-nav__list a {
	text-decoration: none;
	color: var(--shakoof-muted-deep);
}
.site-nav__list a:hover,
.site-nav__list > li.current-menu-item > a,
.site-nav__list > li.current-menu-ancestor > a {
	color: var(--shakoof-ink);
	box-shadow: inset 0 -2px 0 0 var(--shakoof-yellow);
}

/* Header conversion CTAs (feedback round 1): compact Dizengoff buttons, always
   ≥44px tall (touch target). Markup sits first inside .site-nav so the mobile
   drawer opens with them; desktop flex order pushes them after the menu. */
.site-header__ctas {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}
.shakoof-btn--header {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	padding: 0.4rem 1rem;
	font-size: 0.875rem;
	box-shadow: 2px 2px 0 0 var(--shakoof-ink);
}
.shakoof-btn--header:hover {
	box-shadow: 1px 1px 0 0 var(--shakoof-ink);
}
.shakoof-btn--ghost.shakoof-btn--header,
.shakoof-btn--ghost.shakoof-btn--header:hover {
	box-shadow: none;
}

/* Parent-item caret (pure decoration; SR users get the submenu from the list). */
.site-nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	margin-inline-start: 0.375rem;
	border-inline: 4px solid transparent;
	border-block-start: 5px solid currentColor;
	vertical-align: 0.125rem;
}

/* Submenu toggle buttons are injected by main.js for the mobile accordion;
   on desktop the hover/focus-within dropdown makes them redundant. */
.sub-toggle { display: none; }

/* -- desktop dropdowns ----------------------------------------------------- */
@media (min-width: 961px) {
	/* Menu first, CTAs at the inline-end of the bar (markup order is reversed
	   for the mobile drawer). */
	.site-nav {
		display: flex;
		align-items: center;
		gap: 1.375rem;
	}
	.site-nav__list { order: 1; }
	.site-header__ctas { order: 2; }

	.site-nav .menu-item-has-children {
		position: relative;
	}
	.site-nav .sub-menu {
		display: none;
		position: absolute;
		inset-block-start: calc(100% + 1.125rem);
		inset-inline-start: -1rem;
		z-index: 60;
		min-inline-size: 15rem;
		margin: 0;
		padding: 0.5rem 0;
		list-style: none;
		background: var(--shakoof-paper);
		border: 2px solid var(--shakoof-ink);
		box-shadow: 4px 4px 0 0 var(--shakoof-ink);
	}
	.site-nav li:hover > .sub-menu,
	.site-nav li:focus-within > .sub-menu {
		display: grid;
	}
	/* Invisible hover bridge across the gap between the link and the panel. */
	.site-nav .sub-menu::before {
		content: "";
		position: absolute;
		inset-block-end: 100%;
		inset-inline: 0;
		block-size: 1.25rem;
	}
	/* Long lists (the 20-brand submenu) become a two-column panel. */
	.site-nav .sub-menu:has(> li:nth-child(10)) {
		grid-template-columns: 1fr 1fr;
		min-inline-size: 30rem;
	}
	.site-nav .sub-menu a {
		display: block;
		padding: 0.45rem 1.125rem;
		font-weight: 500;
		color: var(--shakoof-ink);
	}
	.site-nav .sub-menu a:hover {
		background: var(--shakoof-yellow-wash);
		box-shadow: none;
	}
}

/* mobile nav toggle — hidden on wide screens. 44×44 minimum tap area
   (feedback round 1); the 24px bars stay centered inside it. */
.nav-toggle {
	display: none;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
	min-inline-size: 44px;
	min-block-size: 44px;
	place-items: center;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--shakoof-ink);
	content: "";
	position: relative;
}
.nav-toggle__bars::before { inset-block-start: -7px; }
.nav-toggle__bars::after { inset-block-start: 5px; }

/* -- mobile drawer (76% of traffic is mobile — this is the primary nav) ---- */
@media (max-width: 960px) {
	.nav-toggle { display: grid; }
	.site-nav {
		flex-basis: 100%;
		display: none;
	}
	.site-nav.is-open {
		display: block;
		border-block-start: 1px solid var(--shakoof-line);
		padding-block: 0.25rem 0.875rem;
	}
	/* Drawer opens with the conversion CTAs on top, full-width pair. */
	.site-header__ctas {
		padding-block: 0.875rem 0.75rem;
		border-block-end: 1px solid var(--shakoof-line);
	}
	.site-header__ctas .shakoof-btn--header {
		flex: 1;
	}
	.site-nav__list {
		flex-direction: column;
		gap: 0;
		font-size: 1rem;
	}
	.site-nav__list > li {
		border-block-end: 1px solid var(--shakoof-line);
	}
	.site-nav__list > li:last-child { border-block-end: 0; }
	.site-nav__list a {
		display: block;
		padding: 0.75rem 0.125rem;
	}
	/* No hover on touch — active states only via current-item. */
	.site-nav__list > li.current-menu-item > a,
	.site-nav__list > li.current-menu-ancestor > a {
		color: var(--shakoof-ink);
		box-shadow: inset 0 -2px 0 0 var(--shakoof-yellow);
	}

	/* Parent rows: link + injected accordion toggle side by side. */
	.site-nav li.menu-item-has-children {
		position: relative;
	}
	.site-nav .menu-item-has-children > a::after {
		content: none;
	}
	.sub-toggle {
		display: block;
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		inline-size: 3rem;
		block-size: 3rem;
		background: none;
		border: 0;
		cursor: pointer;
	}
	.sub-toggle::before {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		translate: -50% -70%;
		border-inline: 5px solid transparent;
		border-block-start: 6px solid var(--shakoof-muted-deep);
		transition: rotate 0.15s ease;
	}
	[dir="rtl"] .sub-toggle::before { translate: 50% -70%; }
	li.is-sub-open > .sub-toggle::before { rotate: 180deg; }

	.site-nav .sub-menu {
		display: none;
		list-style: none;
		margin: 0;
		padding: 0 1rem 0.75rem;
	}
	li.is-sub-open > .sub-menu { display: block; }
	.site-nav .sub-menu a {
		display: flex;
		align-items: center;
		min-block-size: 44px;
		padding: 0.5rem 0.125rem;
		font-size: 1rem;
		color: var(--shakoof-muted-deep);
	}
}

/* ------------------------------------------------------------------- footer */
/* Blend skin: strong ink rule on top (Dizengoff structure), quiet warm-grey
   content (Gallery temperature), hairline copyright strip. */
.site-footer {
	margin-block-start: var(--shakoof-gap);
	border-block-start: 2px solid var(--shakoof-ink);
	background: var(--shakoof-paper);
}
.site-footer__inner {
	display: grid;
	gap: var(--shakoof-gap);
	grid-template-columns: 1fr;
	padding-block: 2.5rem 2rem;
}
@media (min-width: 768px) {
	.site-footer__inner { grid-template-columns: 1.2fr 1fr 1fr; }
}

.site-footer__logo {
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: -0.01em;
	box-shadow: inset 0 -0.45em 0 0 var(--shakoof-yellow);
}
.site-footer__tagline {
	color: var(--shakoof-muted);
	font-size: 0.875rem;
	max-inline-size: 34ch;
	margin-block: 0.75rem 0;
}

.site-footer__label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--shakoof-muted);
	margin-block-end: 0.5rem;
}
.site-footer__lines {
	font-size: 0.9375rem;
	line-height: 1.9;
	margin: 0;
}

.site-footer__nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	font-size: 0.9375rem;
}
.site-footer__nav a {
	text-decoration: none;
}
.site-footer__nav a:hover {
	box-shadow: inset 0 -2px 0 0 var(--shakoof-yellow);
}

.site-footer__strip {
	border-block-start: 1px solid var(--shakoof-line);
	padding-block: 0.875rem;
}
.site-footer__copy {
	color: var(--shakoof-muted);
	font-size: 0.8125rem;
	margin: 0;
}

/* ------------------------------------------------ single product (scaffold) */
.shakoof-product__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--shakoof-gap);
	padding-block: var(--shakoof-gap);
}
@media (min-width: 768px) {
	.shakoof-product__layout {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: start;
	}
}

.shakoof-product__title {
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
	margin-block-start: 0;
	/* Latin model names read LTR, aligned with the brand eyebrow above
	   (same rule as .shakoof-card__title). */
	direction: ltr;
	text-align: start;
	unicode-bidi: isolate;
}

.shakoof-product__price {
	font-size: 1.5rem;
	font-weight: 700;
	margin-block: 0.5rem;
}
/* When a bridge toggle hides the price or closes the shop, the block is empty —
   collapse it so no stray gap remains. */
.shakoof-product__price:empty,
.shakoof-product__cart:empty {
	display: none;
}

/* Post-commit review 2026-07-24 — product page persuasion order:
   breadcrumb → warm-stage gallery → brand/model → availability → fit
   details → CTA → why-us strip → related. */
.shakoof-product__breadcrumb {
	font-size: 0.8125rem;
	color: var(--shakoof-muted);
	padding-block: 1rem 0;
}
.shakoof-product__breadcrumb a {
	color: var(--shakoof-muted-deep);
	text-decoration: none;
}
.shakoof-product__breadcrumb a:hover {
	color: var(--shakoof-ink);
	text-decoration: underline;
	text-decoration-color: var(--shakoof-yellow);
	text-decoration-thickness: 2px;
}
.shakoof-product__breadcrumb span {
	margin-inline: 0.375rem;
}

/* The gallery shares the catalog cards' warm stage — white supplier shots
   melt in, pale frames stay visible. */
.shakoof-product__gallery .woocommerce-product-gallery__image {
	background: var(--shakoof-product-bg);
	box-shadow: inset 0 0 0 1px rgba(31, 30, 28, 0.03);
}
.shakoof-product__gallery .woocommerce-product-gallery__image img {
	mix-blend-mode: multiply;
}

/* The "enlarge" affordance is WooCommerce's own markup and it renders as a
   bare 20x24 glyph — narrower than WCAG 2.2 SC 2.5.8 (Target Size (Minimum),
   level AA) allows, which is 24x24 CSS px. Measured 20x24 on staging on both
   phone and desktop, Sep 22, 2026. Give it a real 44x44 box (SC 2.5.5's
   enhanced size, and what a thumb actually needs) without moving the glyph. */
.shakoof-product__gallery .woocommerce-product-gallery__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	/* The glyph is a font character; keep it optically where it was. */
	margin: -10px;
	text-decoration: none;
}
.shakoof-product__gallery .woocommerce-product-gallery__trigger:focus-visible {
	outline: 2px solid var(--shakoof-yellow);
	outline-offset: 2px;
}

/* Thumbnail strip — a compact ROW directly under the main image, not the
   stacked full-width column WooCommerce's FlexSlider defaults to. Until the
   first two-image product arrived (Aug 3) no gallery here had a second slide,
   so this was never styled and slide 2 sat ~800px down the page.
   `flex-control-thumbs` is FlexSlider's own list; it carries inline width and
   float from the script, so both are overridden explicitly. */
.shakoof-product__gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.625rem 0 0;
	padding: 0;
	list-style: none;
}
.shakoof-product__gallery .flex-control-thumbs li {
	width: auto;
	float: none;
	margin: 0;
	flex: 0 0 auto;
}
.shakoof-product__gallery .flex-control-thumbs img {
	width: 4.5rem;
	height: 4.5rem;
	object-fit: contain;
	background: var(--shakoof-product-bg);
	mix-blend-mode: multiply;
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px rgba(31, 30, 28, 0.06);
	opacity: 0.62;
	cursor: pointer;
	transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
/* `img:focus-visible` was here and could never match — an <img> takes no
   focus. main.js now makes the <li> the tab stop, so the ring goes there. */
.shakoof-product__gallery .flex-control-thumbs img:hover,
.shakoof-product__gallery .flex-control-thumbs li:focus-visible img,
.shakoof-product__gallery .flex-control-thumbs img.flex-active {
	opacity: 1;
	box-shadow: inset 0 0 0 2px var(--shakoof-yellow);
}
.shakoof-product__gallery .flex-control-thumbs li:focus-visible {
	outline: 2px solid var(--shakoof-ink);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.shakoof-product__gallery .flex-control-thumbs img {
		transition: none;
	}
}

/* A single-image product must not show a one-item strip — a control that
   changes nothing reads as broken. */
.shakoof-product__gallery .optika-gallery--count-1 .flex-control-thumbs {
	display: none;
}

.shakoof-product__brand {
	display: block;
	color: var(--shakoof-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: start;
}

.shakoof-product__fit {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	font-size: 0.9375rem;
}
.shakoof-product__fit li {
	padding-inline-start: 1.25rem;
	position: relative;
	margin-block-end: 0.5rem;
}
.shakoof-product__fit li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.5em;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	background: var(--shakoof-yellow);
}

.shakoof-product__visit-note {
	flex-basis: 100%;
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	color: var(--shakoof-muted);
}

.shakoof-product__why {
	margin-block-start: 2.5rem;
	padding: 1.5rem;
	background: var(--shakoof-surface);
}
.shakoof-product__why-title {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
}
.shakoof-product__why-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	font-size: 0.9375rem;
}
.shakoof-product__why-list li::before {
	content: "";
	display: inline-block;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background: var(--shakoof-yellow);
	margin-inline-end: 0.5rem;
	vertical-align: 0.0625rem;
}

/* Brand-page trait chips (approved intros, post-commit review round 2b):
   three short brand traits as a horizontal strip under the intro. */
.entry-content ul.shakoof-traits {
	list-style: none;
	padding: 0;
	margin-block: 1rem 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	font-weight: 600;
	font-size: 0.9375rem;
}
.entry-content ul.shakoof-traits li {
	margin: 0;
}
ul.shakoof-traits li::before {
	content: "";
	display: inline-block;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	background: var(--shakoof-yellow);
	margin-inline-end: 0.5rem;
}

/* Catalog header note: count + the availability promise (once per page). */
.shakoof-catalog__note {
	color: var(--shakoof-muted-deep);
	font-size: 0.9375rem;
	margin-block: 0.25rem 0;
}
.shakoof-catalog__note::before {
	content: "";
	display: inline-block;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background: var(--shakoof-yellow);
	margin-inline-end: 0.5rem;
	vertical-align: 0.0625rem;
}

/* Quiet availability: yellow dot + muted text (Gallery motif over the black
   badge — DECISIONS July 8 #2). */
.shakoof-product__availability {
	display: inline-block;
	color: var(--shakoof-muted);
	margin-block: 0.5rem;
	font-size: 0.9375rem;
}
.shakoof-product__availability::before {
	content: "";
	display: inline-block;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background: var(--shakoof-yellow);
	margin-inline-end: 0.5rem;
	vertical-align: 0.0625rem;
}

/* #57: one size in stock → no dropdown; the size reads as text instead. */
.shakoof-product--single-size .variations,
.shakoof-product--single-size .reset_variations {
	display: none;
}
.shakoof-product__size {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
}

.shakoof-product__cart {
	margin-block-start: 1rem;
}
/* Confident yellow CTA with ink border + small hard shadow (Dizengoff
   signature) — only shown when the shop-open toggle allows purchasing. */
.shakoof-product__cart .single_add_to_cart_button,
.shakoof-product__cart .button {
	background: var(--shakoof-yellow);
	color: var(--shakoof-ink);
	border: 2px solid var(--shakoof-ink);
	border-radius: 0;
	padding: 0.8rem 1.75rem;
	font-weight: 800;
	font-size: 0.9375rem;
	cursor: pointer;
	box-shadow: 3px 3px 0 0 var(--shakoof-ink);
	transition: box-shadow 0.1s ease, translate 0.1s ease;
}
.shakoof-product__cart .single_add_to_cart_button:hover,
.shakoof-product__cart .button:hover {
	translate: 1px 1px;
	box-shadow: 2px 2px 0 0 var(--shakoof-ink);
}

.shakoof-product__meta {
	margin-block-start: 1.5rem;
	color: var(--shakoof-muted);
	font-size: 0.875rem;
}

/* Mobile readability (feedback round 1): body-level product/footer text goes to
   a full 1rem on phones; deliberate micro-typography (uppercase labels, the
   copyright strip) keeps its scale. */
@media (max-width: 768px) {
	.shakoof-product__availability,
	.shakoof-product__meta,
	.site-footer__tagline,
	.site-footer__lines,
	.site-footer__nav {
		font-size: 1rem;
	}
}

.shakoof-product__tabs,
.shakoof-product__related {
	margin-block-start: 2.5rem;
}
.shakoof-product__gallery img {
	border-radius: 6px;
}

/* Woo core's .onsale is position:absolute with negative offsets; without a
   positioned ancestor it escaped to the page top and sat on the header
   (feedback round 1). Contain it in the gallery and restyle to tokens. */
.shakoof-product__gallery {
	position: relative;
}
.shakoof-product__gallery .onsale {
	position: absolute;
	inset-block-start: 0.75rem;
	inset-inline-start: 0.75rem;
	inset-inline-end: auto;
	z-index: 5;
	margin: 0;
	min-block-size: 0;
	min-inline-size: 0;
	padding: 0.25rem 0.75rem;
	background: var(--shakoof-yellow);
	color: var(--shakoof-ink);
	border: 2px solid var(--shakoof-ink);
	border-radius: 0;
	font-weight: 800;
	font-size: 0.875rem;
	line-height: 1.6;
	box-shadow: 2px 2px 0 0 var(--shakoof-ink);
}

/* --------------------------------------------------- catalog grid (scaffold) */
.shakoof-catalog {
	padding-block: var(--shakoof-gap);
}

.shakoof-catalog__title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-block-start: 0;
}

.shakoof-catalog__header {
	margin-block-end: var(--shakoof-gap);
}
.shakoof-catalog__header .term-description,
.shakoof-catalog__header .page-description {
	color: var(--shakoof-muted);
	max-inline-size: 65ch;
}

/*
 * Ruled contact-sheet grid (Dizengoff base): a strong ink rule on top, soft
 * Gallery hairlines between cells — cells touch, no card boxes or shadows.
 * Mobile-first: 2-up on phones (76% of shoppers), stepping up with space.
 */
.shakoof-catalog__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	border-block-start: 2px solid var(--shakoof-ink);
	counter-reset: shakoof-card;
}
@media (min-width: 640px) {
	.shakoof-catalog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.shakoof-catalog__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/*
 * Brand-page category sections (Aug 2026). A brand carrying both optical frames
 * and sunglasses renders one section each instead of one interleaved wall.
 * Single-category brands never reach this — they keep the plain grid.
 *
 * Logical properties throughout: the count sits AFTER the name in reading order,
 * which is to its left in RTL, without a direction-specific rule.
 */
.shakoof-catalog__section + .shakoof-catalog__section {
	margin-block-start: calc(var(--shakoof-gap) * 1.5);
}

.shakoof-catalog__section-title {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-size: clamp(1.25rem, 2.5vw, 1.625rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-block: 0 0.75rem;
}

/*
 * The count is a real element, not a bare text node: flexbox cannot reorder an
 * anonymous item, and every composed figure on this site has been bitten by it.
 */
.shakoof-catalog__section-count {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--shakoof-muted);
	font-variant-numeric: tabular-nums;
}
.shakoof-catalog__section-count::before { content: "("; }
.shakoof-catalog__section-count::after { content: ")"; }

.shakoof-catalog__section-more {
	margin-block: 0.875rem 0;
}
.shakoof-catalog__section-more a {
	font-weight: 700;
	text-decoration: none;
	border-block-end: 2px solid var(--shakoof-ink);
	padding-block-end: 0.125rem;
	color: inherit;
}
.shakoof-catalog__section-more a:hover,
.shakoof-catalog__section-more a:focus-visible {
	color: var(--shakoof-muted);
}

/* ------------------------------------------------------------- product card */
.shakoof-card {
	margin: 0;
	position: relative;
	counter-increment: shakoof-card;
	border-inline-end: 1px solid var(--shakoof-line);
	border-block-end: 1px solid var(--shakoof-line);
}
/* Contact-sheet index number (Dizengoff motif). */
.shakoof-card::before {
	content: counter( shakoof-card, decimal-leading-zero );
	position: absolute;
	inset-block-start: 0.625rem;
	inset-inline-start: 0.75rem;
	font-size: 0.6875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--shakoof-line);
	direction: ltr;
	pointer-events: none;
}

.shakoof-card__link {
	display: block;
	text-decoration: none;
	padding: 1.25rem 1rem 1rem;
	background: var(--shakoof-paper);
	transition: background-color 0.15s ease;
}
.shakoof-card__link:hover {
	background: var(--shakoof-yellow-wash);
}

.shakoof-card__media {
	aspect-ratio: 1 / 1;
	background: var(--shakoof-product-bg);
	box-shadow: inset 0 0 0 1px rgba(31, 30, 28, 0.03);
	padding: 8%;
	overflow: hidden;
}
.shakoof-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
	display: block;
	/* White supplier backgrounds melt into the warm stage; the frame itself
	   is the first thing the eye lands on (post-commit review §3). */
	mix-blend-mode: multiply;
	transition: transform 0.2s ease;
}
.shakoof-card__link:hover .shakoof-card__media img,
.shakoof-card__link:focus-visible .shakoof-card__media img {
	transform: scale(1.04);
}

.shakoof-card__body {
	padding-block-start: 0.625rem;
}

.shakoof-card__brand {
	display: block;
	color: var(--shakoof-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.shakoof-card__title {
	font-size: 0.9375rem;
	font-weight: 600;
	margin-block: 0.25rem 0;
}

.shakoof-card__price {
	font-weight: 700;
	margin-block-start: 0.25rem;
}
/* Price-less launch: the bridge empties price HTML — collapse the block. */
.shakoof-card__price:empty {
	display: none;
}

/* ------------------------------------------------- catalog pagination/empty */
.shakoof-catalog__pagination {
	margin-block-start: 2rem;
}
.shakoof-catalog__pagination .nav-links {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	flex-wrap: wrap;
}
.shakoof-catalog__pagination .page-numbers {
	display: inline-block;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--shakoof-line);
	border-radius: 4px;
	text-decoration: none;
}
.shakoof-catalog__pagination .page-numbers.current {
	background: var(--shakoof-ink);
	color: var(--shakoof-paper);
	border-color: var(--shakoof-ink);
}

.shakoof-catalog__empty {
	text-align: center;
	padding-block: 3rem;
	background: var(--shakoof-surface);
	border-radius: 6px;
}
.shakoof-catalog__empty-lead {
	font-size: 1.125rem;
	font-weight: 700;
	margin-block-end: 0.5rem;
}
.shakoof-catalog__empty-cta {
	color: var(--shakoof-muted);
	margin: 0;
}

/* ------------------------------------------------------------------ buttons */
/* The blend CTA pair (DECISIONS July 8 #2): yellow + ink border + hard shadow
   for the primary, quiet outline for the secondary. */
.shakoof-btn {
	display: inline-block;
	background: var(--shakoof-yellow);
	color: var(--shakoof-ink);
	border: 2px solid var(--shakoof-ink);
	padding: 0.8rem 1.75rem;
	font-weight: 800;
	font-size: 0.9375rem;
	text-decoration: none;
	box-shadow: 3px 3px 0 0 var(--shakoof-ink);
	transition: box-shadow 0.1s ease, translate 0.1s ease, background-color 0.1s ease;
	/* A <button> does NOT get the hand by default — only <a> does. Without this
	   the booking CTA read as decoration (David, Sep 19: "there is no hand to
	   show me that I'm going to push the button"). */
	cursor: pointer;
}
/* Hover LIFTS and deepens the shadow; the press is what sinks it. The old rule
   did the sinking on hover, which left nothing for the click to say. */
.shakoof-btn:hover {
	translate: -1px -1px;
	box-shadow: 5px 5px 0 0 var(--shakoof-ink);
	background: var(--shakoof-yellow-deep);
}
.shakoof-btn:active {
	translate: 3px 3px;
	box-shadow: 0 0 0 0 var(--shakoof-ink);
}
/* Keyboard users get the same certainty as mouse users. */
.shakoof-btn:focus-visible {
	outline: 3px solid var(--shakoof-ink);
	outline-offset: 3px;
}

/* ---- the button while the form is in flight ----
   Booking POSTs to WordPress, which calls Optika server to server. That is
   real seconds on a page that otherwise looks untouched, so the button says
   what it is doing and stops taking presses. `pointer-events: none` is what
   blocks the second click — the button is deliberately NOT `disabled`, because
   a disabled control is not always submitted with its form. */
.shakoof-btn.is-busy {
	pointer-events: none;
	cursor: progress;
	translate: 3px 3px;
	box-shadow: 0 0 0 0 var(--shakoof-ink);
	background: var(--shakoof-yellow-wash);
	opacity: 0.85;
}
.shakoof-btn.is-busy::before {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-inline-end: 0.5em;
	vertical-align: -0.1em;
	border: 2px solid currentColor;
	border-inline-start-color: transparent;
	border-radius: 50%;
	animation: shakoof-spin 0.7s linear infinite;
}
@keyframes shakoof-spin {
	to { rotate: 360deg; }
}
/* A spinner is the one thing here that must not move for people who asked for
   less motion — the label already says what is happening. */
@media (prefers-reduced-motion: reduce) {
	.shakoof-btn,
	.shakoof-btn:hover,
	.shakoof-btn:active {
		transition: none;
		translate: none;
	}
	.shakoof-btn.is-busy::before {
		animation: none;
	}
}

/* The line under the button while it works. */
.shakoof-form__working {
	margin: 0.75rem 0 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--shakoof-ink);
}
.shakoof-form__working[hidden] {
	display: none;
}
.shakoof-btn--ghost {
	background: var(--shakoof-paper);
	box-shadow: none;
	font-weight: 600;
}
.shakoof-btn--ghost:hover {
	background: var(--shakoof-yellow-wash);
	translate: none;
	box-shadow: none;
}

/* ------------------------------------------------------------- forms (GF) */
/* Embedded Gravity Forms (the eyewear-parts enquiry form): 44px touch targets
   and 16px inputs — the 16px also stops iOS zoom-on-focus (feedback round 1).
   Scoped to .gform_wrapper so nothing leaks to other markup. */
.gform_wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.gform_wrapper select,
.gform_wrapper textarea {
	min-block-size: 44px;
	font-size: 1rem;
}
.gform_wrapper input[type="submit"],
.gform_wrapper input[type="button"],
.gform_wrapper button {
	min-block-size: 44px;
	font-size: 1rem;
}

/* ------------------------------------------------------------ authored pages */
/*
 * Gutenberg landing/content pages (page.php). Prose sits in a readable column;
 * blocks opting into alignwide/alignfull break out. Headings carry the blend's
 * heavy weight; buttons get the Dizengoff CTA treatment so authored pages and
 * templated pages speak one language.
 */
.page-content {
	padding-block: 1.5rem 3rem;
}
.entry-content > * {
	max-inline-size: 46rem;
	margin-inline: auto;
}
.entry-content > .alignwide { max-inline-size: var(--shakoof-wrap); }
.entry-content > .alignfull { max-inline-size: none; }

.entry-content h1 {
	font-size: clamp(2rem, 6vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.12;
	margin-block: 1rem 0.5em;
	text-wrap: balance;
}
.entry-content h2 {
	font-size: clamp(1.375rem, 3vw, 1.875rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	margin-block: 2em 0.5em;
}
.entry-content h3 {
	font-size: 1.125rem;
	font-weight: 700;
	margin-block: 1.5em 0.375em;
}
.entry-content p,
.entry-content li {
	font-size: 1.0625rem;
	line-height: 1.75;
}
.entry-content ul,
.entry-content ol {
	padding-inline-start: 1.25rem;
}
.entry-content li { margin-block: 0.375rem; }
.entry-content figure {
	margin-block: 2rem;
}
.entry-content figure img {
	display: block;
	inline-size: 100%;
	height: auto;
}

/* Portrait in content (.shakoof-portrait) — the front page's founder treatment,
 * reused on interior pages.
 *
 * David, Aug 1 2026: "wrap it in the same CSS as the front page images. It looks
 * very nice." Same 4:5 crop, ink border and yellow offset shadow as
 * .front-founder--portrait, so a face on the optometrist page reads as the same
 * brand object as a face on the home page instead of a raw 707x1000 upload.
 *
 * Floated on wide screens so text wraps beside it; stacked and centred on
 * mobile, where a float would leave a cramped column.
 */
.entry-content .shakoof-portrait {
	margin-block: 1.75rem;
	margin-inline: auto;
	max-inline-size: 260px;
	text-align: center;
}

.entry-content .shakoof-portrait img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 15%;
	border: 2px solid var(--shakoof-ink);
	box-shadow: 5px 5px 0 0 var(--shakoof-yellow);
}

.entry-content .shakoof-portrait figcaption {
	margin-block-start: 0.75rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--shakoof-ink);
}

@media (min-width: 48em) {
	/* RTL: float to the inline-start edge so Hebrew text flows around it. */
	.entry-content .shakoof-portrait {
		float: inline-start;
		margin-inline-end: 1.75rem;
		margin-inline-start: 0;
		max-inline-size: 220px;
	}
	/* Stop the float bleeding past the section it belongs to. */
	.entry-content .shakoof-stats,
	.entry-content h2,
	.entry-content h3 {
		clear: both;
	}
}

/* Bare <img> in content — no <figure>, no block wrapper.
 *
 * Legacy pages converted off Elementor carry raw <img width="707" height="1000">
 * straight in the text flow. The global rule only caps them at 100% of the
 * column, so a 707x1000 portrait renders a full metre tall on desktop and
 * swamps the page (reported on the optometrist page, Aug 1 2026).
 *
 * Cap the DISPLAY height instead and let width follow, so tall portraits sit
 * at a sane size while wide/landscape images are unaffected. Scoped to bare
 * images: anything the editor deliberately placed in a figure or wp-block
 * keeps its intended size.
 */
.entry-content > img,
.entry-content > p > img {
	display: block;
	max-block-size: 34rem;
	inline-size: auto;
	max-inline-size: 100%;
	height: auto;
	margin-block: 1.5rem;
	margin-inline: auto;
}

/* Tall infographics and screenshots (410x1024 and similar) on the guide posts.
 *
 * ⚠️ These must NOT get the portrait's 4/5 crop — object-fit: cover would slice
 * the top and bottom off an infographic and destroy the information. Cap the
 * height and let the width follow, so the whole image stays visible and simply
 * sits at a readable size instead of running a metre down the page.
 */
.entry-content figure:not(.shakoof-portrait) img[height="1024"],
.entry-content figure:not(.shakoof-portrait) img[height="895"],
.entry-content figure:not(.shakoof-portrait) img[height="788"],
.entry-content figure:not(.shakoof-portrait) img[height="689"] {
	max-block-size: 34rem;
	inline-size: auto;
	max-inline-size: 100%;
	margin-inline: auto;
}
.entry-content figcaption {
	color: var(--shakoof-muted);
	font-size: 0.875rem;
	margin-block-start: 0.5rem;
}

/* Core buttons in the blend voice. */
.entry-content .wp-block-button__link {
	background: var(--shakoof-yellow);
	color: var(--shakoof-ink);
	border: 2px solid var(--shakoof-ink);
	border-radius: 0;
	padding: 0.8rem 1.75rem;
	font-weight: 800;
	font-size: 0.9375rem;
	text-decoration: none;
	box-shadow: 3px 3px 0 0 var(--shakoof-ink);
	transition: box-shadow 0.1s ease, translate 0.1s ease;
}
.entry-content .wp-block-button__link:hover {
	translate: 1px 1px;
	box-shadow: 2px 2px 0 0 var(--shakoof-ink);
}
.entry-content .is-style-outline .wp-block-button__link {
	background: var(--shakoof-paper);
	box-shadow: none;
	font-weight: 600;
}

/* Brand grid embedded in authored pages ([shakoof_brand_grid]): the page flow
   already spaces blocks, so drop the standalone-catalog padding, and shield the
   cards from the authored-prose heading/list rules above (which otherwise win
   on specificity — .entry-content h2 vs .shakoof-card__title). */
.shakoof-catalog--embedded {
	padding-block: 0;
}
.entry-content .shakoof-catalog__grid {
	padding: 0;
	margin-block: 1rem 0;
}
.entry-content .shakoof-catalog__grid .shakoof-card {
	margin-block: 0;
}
.entry-content .shakoof-card__title {
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0;
	margin-block: 0.25rem 0;
	text-wrap: auto;
}

/* English (and future French) authored pages: the content of these pages is
   LTR inside the site's RTL chrome. Hebrew testimonial quotes inside opt back
   in per-element with dir="rtl". */
.shakoof-ltr {
	direction: ltr;
	text-align: start;
}

/* Big index number above a landing step title (EN page trio). */
.shakoof-step-num {
	font-size: 2rem;
	font-weight: 800;
	color: var(--shakoof-line);
	margin-block-end: 0;
}

/* Landing steps row (the "איך זה עובד" trio): hairline-ruled cells like the
   catalog grid, image + bold step line + quiet caption. */
.shakoof-steps {
	border-block-start: 2px solid var(--shakoof-ink);
	padding-block-start: 1.5rem;
}
.shakoof-steps figure { margin-block: 0 1rem; }
.shakoof-steps p { font-size: 0.9375rem; }

/* ---------------------------------------------------------------- front page */
.front-hero {
	padding-block: 4rem 3rem;
}
/* Post-commit review §2 — split hero: headline inline-start, the real store
   inline-end. Mobile stacks copy first (message before picture), the photo
   capped so the info band stays within reach. */
.front-hero--split .front-hero__media {
	margin-block-start: 2rem;
}
.front-hero--split .front-hero__media img {
	display: block;
	inline-size: 100%;
	max-block-size: 340px;
	object-fit: cover;
	object-position: 20% 40%;
	border: 2px solid var(--shakoof-ink);
	box-shadow: 6px 6px 0 0 var(--shakoof-yellow);
}
/* Full-bleed variant — the store edge-to-edge under a paper wash; the wash
   is strongest at the inline-start (right in RTL) where the headline sits,
   thinning toward the inline-end so the store shows through. AA contrast for
   the ink text lives in the wash, not the photo. */
.front-hero--bleed {
	position: relative;
	overflow: hidden;
	padding-block: 5rem 4rem;
}
.front-hero--bleed .front-hero__bg {
	position: absolute;
	inset: 0;
}
.front-hero--bleed .front-hero__bg img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center 35%;
}
.front-hero--bleed .front-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to left,
		rgba(255, 255, 255, 0.96) 0%,
		rgba(255, 255, 255, 0.88) 40%,
		rgba(255, 255, 255, 0.45) 72%,
		rgba(255, 255, 255, 0.15) 100%);
}
.front-hero--bleed .wrap {
	position: relative;
}
.front-hero--bleed .front-hero__copy {
	max-inline-size: 36rem;
}
@media (min-width: 961px) {
	.front-hero--bleed {
		padding-block: 7rem 6rem;
	}
}

@media (min-width: 961px) {
	.front-hero--split {
		padding-block: 3.5rem 3rem;
	}
	.front-hero--split .wrap {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: 3.5rem;
		align-items: center;
	}
	.front-hero--split .front-hero__media {
		margin-block-start: 0;
	}
	.front-hero--split .front-hero__media img {
		max-block-size: 440px;
		block-size: 100%;
	}
}
.front-hero__title {
	font-size: clamp(2rem, 6vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.12;
	margin-block: 0 1rem;
	text-wrap: balance;
}
.front-hero__sub {
	font-size: 1.0625rem;
	color: var(--shakoof-muted);
	max-inline-size: 52ch;
	margin-block: 0 1.75rem;
}
.front-hero__ctas {
	display: flex;
	gap: 0.875rem;
	flex-wrap: wrap;
}

.front-info {
	border-block: 2px solid var(--shakoof-ink);
	/* Post-commit review §5: a warm band between the white hero and the white
	   catalog teaser — pacing, not decoration. */
	background: var(--shakoof-surface);
}
.front-info__grid {
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.front-info__grid { grid-template-columns: repeat(3, 1fr); }
}
.front-info__item {
	padding-block: 1.25rem;
	font-size: 0.9375rem;
	border-block-end: 1px solid var(--shakoof-line);
}
.front-info__item:last-child { border-block-end: 0; }
@media (min-width: 768px) {
	.front-info__item {
		border-block-end: 0;
		border-inline-end: 1px solid var(--shakoof-line);
		padding-inline-end: 1.25rem;
	}
	.front-info__item:last-child { border-inline-end: 0; }
}
.front-info__label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--shakoof-muted);
	margin-block-end: 0.25rem;
}

.front-catalog {
	padding-block: 3rem 1rem;
}
.front-catalog__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-block-end: 1.25rem;
}
.front-catalog__title {
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0;
}
.front-catalog__all {
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
}
.front-catalog__all:hover {
	box-shadow: inset 0 -2px 0 0 var(--shakoof-yellow);
}
.front-catalog__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
	.front-catalog__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.front-story {
	padding-block: 3rem 2rem;
}
.front-story__title {
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	font-weight: 800;
	margin-block: 0 0.5rem;
}
.front-story__text {
	color: var(--shakoof-muted);
	max-inline-size: 62ch;
	margin: 0;
}

/* ================================================== audit 2026-07 fixes */
/*
 * P1-1 — Elementor coexistence color guard, ROUND 2 (Law 4; post-commit
 * review 2026-07-24 issue #1, David: blue removed entirely). The kit class
 * sits on <body>, so `.elementor-kit-* a` (color) and `.elementor-kit-*
 * button` (background-color + white text) restyle EVERY link and button at
 * (0,1,1) — round 1's component whitelist missed the nav links, hamburger,
 * submenu toggles, card links and the filter button. Round 2 remaps the
 * kit's own palette variables to theme ink so every consumer goes ink at
 * once; components whose intended look is NOT plain ink are reclaimed
 * below with a body prefix. The logo image keeps its colors (brand-asset
 * decision pending). DELETE THIS WHOLE BLOCK at Phase 5 (Elementor
 * uninstall).
 */
body[class*="elementor-kit-"] {
	--e-global-color-secondary: var(--shakoof-ink);
	--e-global-color-accent: var(--shakoof-ink);
}
/* The kit's button rule also forces background, white text and its accent
   typography onto <button> elements (the filter button, GF buttons). */
body button.shakoof-btn,
body input[type="submit"].shakoof-btn,
body input[type="button"].shakoof-btn {
	background-color: var(--shakoof-yellow);
	color: var(--shakoof-ink);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 800;
	line-height: inherit;
}
body button.shakoof-btn--ghost {
	background-color: var(--shakoof-paper);
	font-weight: 600;
}
/* The kit rule above sets background-color at (0,2,1), which outranks the
   single-class :hover/.is-busy rules. Restate them here or the CTA never
   changes colour on hover and never looks busy while it submits. */
body button.shakoof-btn:hover {
	background-color: var(--shakoof-yellow-deep);
}
body button.shakoof-btn.is-busy {
	background-color: var(--shakoof-yellow-wash);
}
body button.shakoof-btn--ghost:hover {
	background-color: var(--shakoof-yellow-wash);
}
body button.nav-toggle,
body button.sub-toggle {
	background: none;
	color: var(--shakoof-ink);
}
/* Quiet warm-grey nav (blend skin, DECISIONS July 8 #2) — the kit's `a`
   rule outranked the theme's single-class selector. */
body .site-nav__list a {
	color: var(--shakoof-muted-deep);
}
body .site-nav__list a:hover,
body .site-nav__list > li.current-menu-item > a,
body .site-nav__list > li.current-menu-ancestor > a {
	color: var(--shakoof-ink);
}
body a.shakoof-btn,
body a.shakoof-btn:hover {
	color: var(--shakoof-ink);
}
body .site-footer a {
	color: var(--shakoof-ink);
	text-decoration: none;
}
body .site-footer a:hover {
	text-decoration: underline;
	text-decoration-color: var(--shakoof-yellow);
	text-decoration-thickness: 2px;
}
body .shakoof-catalog__pagination a.page-numbers,
body .shakoof-catalog__pagination span.page-numbers {
	color: var(--shakoof-ink);
}
body .entry-content a:not(.shakoof-btn):not(.wp-block-button__link):not(.shakoof-card__link) {
	color: var(--shakoof-ink);
	text-decoration: underline;
	text-decoration-color: var(--shakoof-yellow);
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

/* P1-6 — the parts enquiry form (GF 9) in the design system: ink hairlines,
 * yellow Dizengoff submit, styled upload control. Scoped to .gform_wrapper. */
.gform_wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
.gform_wrapper select,
.gform_wrapper textarea {
	border: 1px solid var(--shakoof-ink);
	border-radius: 2px;
	background: var(--shakoof-paper);
	padding-inline: 0.75rem;
}
.gform_wrapper .gfield_label {
	font-weight: 700;
}
body .gform_wrapper input[type="submit"],
body .gform_wrapper button[type="submit"] {
	background: var(--shakoof-yellow);
	color: var(--shakoof-ink);
	border: 2px solid var(--shakoof-ink);
	padding: 0.8rem 1.75rem;
	font-weight: 800;
	box-shadow: 3px 3px 0 0 var(--shakoof-ink);
	cursor: pointer;
	border-radius: 0;
}
body .gform_wrapper input[type="submit"]:hover,
body .gform_wrapper button[type="submit"]:hover {
	translate: 1px 1px;
	box-shadow: 2px 2px 0 0 var(--shakoof-ink);
}
/* Native file inputs have a fixed intrinsic width (352px) that ignores the
 * container and pushed the parts page to 392px on a 390px phone (post-commit
 * review). Cap it like any other field. */
.gform_wrapper input[type="file"] {
	max-inline-size: 100%;
}
.gform_wrapper input[type="file"]::file-selector-button {
	background: var(--shakoof-paper);
	color: var(--shakoof-ink);
	border: 2px solid var(--shakoof-ink);
	padding: 0.4rem 1rem;
	font-weight: 700;
	margin-inline-end: 0.75rem;
	cursor: pointer;
}

/* P1-7 — embedded iframes (the contact-page map) must never widen the page
 * beyond the viewport. */
.entry-content iframe {
	max-inline-size: 100%;
}

/* P2-1 — stronger visible keyboard focus (the theme's own skip-link in
 * header.php already covers skip navigation; the broken one was Pojo's —
 * retired per E#6). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--shakoof-ink);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--shakoof-yellow);
}

/* P2-2/P1-15 — catalog cards: Latin model names read LTR (no orphaned digits
 * on the wrong side), and imageless products show a quiet branded placeholder
 * instead of a broken/empty cell. */
.shakoof-card__title {
	direction: ltr;
	text-align: start;
	unicode-bidi: isolate;
}
.shakoof-card__media--placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background: var(--shakoof-surface);
	color: var(--shakoof-muted);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
}

/* P2-6 — authored step/process photos share one frame: uniform crop ratio,
 * no exposure jumps from mismatched sizes. */
.shakoof-steps img,
.entry-content .wp-block-image.shakoof-uniform img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	inline-size: 100%;
}

/* P1-14 — mobile conversion path: the header CTA pair stays visible as a
 * compact bar under the masthead on small screens (it previously lived only
 * in the desktop header / hamburger drawer). */
@media (max-width: 781px) {
	.site-header__ctas--mobile {
		display: flex;
		gap: 0.5rem;
		justify-content: center;
		padding: 0.5rem var(--shakoof-gap);
		border-block-end: 1px solid var(--shakoof-line);
	}
	.site-header__ctas--mobile .shakoof-btn {
		/* Review 2026-07-29: these measured 40.8px — padding alone left them
		   under the 44px touch target the header's own buttons already meet
		   (.shakoof-btn--header). Matching it here; inline-flex is needed so
		   min-block-size actually centres the label rather than top-aligning it. */
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-block-size: 44px;
		padding: 0.45rem 1rem;
		font-size: 0.875rem;
		box-shadow: 2px 2px 0 0 var(--shakoof-ink);
		flex: 1 1 auto;
		text-align: center;
	}
}
@media (min-width: 782px) {
	.site-header__ctas--mobile {
		display: none;
	}
}

/* P1-14b — the action block after product grids (brand pages, product page). */
.shakoof-grid-cta {
	margin-block-start: 2rem;
	padding: 1.25rem;
	border: 1px solid var(--shakoof-line);
	text-align: center;
}
.shakoof-grid-cta__lead {
	font-weight: 800;
	font-size: 1.125rem;
	margin: 0 0 0.75rem;
}
.shakoof-grid-cta .shakoof-btn {
	margin-inline: 0.375rem;
	margin-block-start: 0.25rem;
}

/* P1-3 — homepage trust strip + founder note (reinstated from the live site
 * in the new skin: numbers large, warm-grey labels, hairline rules). */
.front-trust {
	border-block-start: 1px solid var(--shakoof-line);
	padding-block: 2.5rem;
}
.front-trust__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--shakoof-gap);
	text-align: center;
}
@media (max-width: 600px) {
	.front-trust__grid { grid-template-columns: 1fr; gap: 2rem; }
}
.front-trust__num {
	font-size: clamp(2.25rem, 6vw, 3.25rem);
	font-weight: 900;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.front-trust__num::after {
	content: "";
	display: block;
	inline-size: 2.5rem;
	block-size: 0.375rem;
	background: var(--shakoof-yellow);
	margin: 0.625rem auto 0;
}
.front-trust__label {
	margin-block-start: 0.625rem;
	color: var(--shakoof-muted);
	font-weight: 600;
}
.front-founder {
	border-block-start: 1px solid var(--shakoof-line);
	padding-block: 2.5rem;
	display: flex;
	gap: 1.5rem;
	align-items: center;
	max-inline-size: 46rem;
	margin-inline: auto;
}
@media (max-width: 600px) {
	.front-founder { flex-direction: column; text-align: center; }
}
.front-founder__photo img {
	inline-size: 128px;
	block-size: 128px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid var(--shakoof-yellow);
	display: block;
}
/* Shot-list #2: the real lab portrait — framed like the hero media instead
   of the tiny circle. */
.front-founder--portrait {
	align-items: flex-start;
	gap: 2rem;
}
.front-founder--portrait .front-founder__photo img {
	inline-size: 220px;
	block-size: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 15%;
	border-radius: 0;
	border: 2px solid var(--shakoof-ink);
	box-shadow: 5px 5px 0 0 var(--shakoof-yellow);
}
@media (max-width: 600px) {
	.front-founder--portrait .front-founder__photo img {
		inline-size: min(260px, 70vw);
	}
}
.front-founder__name {
	font-weight: 800;
	font-size: 1.125rem;
	margin: 0 0 0.375rem;
}
.front-founder__note {
	color: var(--shakoof-muted);
	margin: 0;
}

/* P1-4 — footer contact line (phone/email, tap-to-call). */
.site-footer__contact a {
	font-weight: 700;
}
.site-footer__contact .shakoof-ltr-run {
	direction: ltr;
	unicode-bidi: isolate;
}

/* P1-10 — catalog filter bar (brand/category GET form, no JS dependency). */
.shakoof-catalog__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: end;
	margin-block-end: 1.5rem;
	padding-block-end: 1rem;
	border-block-end: 1px solid var(--shakoof-line);
}
.shakoof-catalog__filters label {
	display: grid;
	gap: 0.25rem;
	flex: 1 1 180px;
	max-inline-size: 260px;
}
.shakoof-catalog__filter-label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--shakoof-muted);
}
.shakoof-catalog__filters select {
	min-block-size: 44px;
	font-size: 1rem;
	border: 1px solid var(--shakoof-ink);
	border-radius: 2px;
	background: var(--shakoof-paper);
	padding-inline: 0.5rem;
}
.shakoof-catalog__filters .shakoof-btn {
	min-block-size: 44px;
	padding-block: 0.4rem;
}

/* ---------------------------------------------------------------------------
   Theme-native forms (inc/forms.php)
   Replaces the Gravity Forms front end removed in the July 26, 2026 plugin
   purge. Logical properties throughout so RTL is automatic; 44px minimum
   targets to hold the a11y-100 result on mobile.
   ------------------------------------------------------------------------- */

.shakoof-form-wrap {
	margin-block: 1.5rem;
}

.shakoof-form__hp {
	/* Honeypot: hidden from humans, still present for bots. clip-path rather
	   than an off-screen offset — see the .skip-link note above (RTL overflow). */
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.shakoof-form__intro {
	color: var(--shakoof-muted-deep);
	margin-block-end: 1rem;
}

.shakoof-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}

.shakoof-form__field {
	display: grid;
	gap: 0.35rem;
	margin: 0;
}

.shakoof-form__field--wide {
	grid-column: 1 / -1;
}

.shakoof-form__field label {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--shakoof-ink);
}

.shakoof-form__req {
	color: #B42318;
	margin-inline-start: 0.15rem;
}

.shakoof-form__field input,
.shakoof-form__field select,
.shakoof-form__field textarea {
	inline-size: 100%;
	min-block-size: 44px;
	font-family: inherit;
	font-size: 1rem;
	color: var(--shakoof-ink);
	background: var(--shakoof-paper);
	border: 1px solid var(--shakoof-line);
	border-radius: 2px;
	padding: 0.55rem 0.7rem;
}

.shakoof-form__field textarea {
	min-block-size: 120px;
	resize: vertical;
}

.shakoof-form__field input:focus-visible,
.shakoof-form__field select:focus-visible,
.shakoof-form__field textarea:focus-visible {
	outline: 2px solid var(--shakoof-yellow);
	outline-offset: 1px;
	border-color: var(--shakoof-ink);
}

.shakoof-form__actions {
	margin-block-start: 1.25rem;
}

.shakoof-form__actions .shakoof-btn {
	min-block-size: 48px;
	padding-inline: 2rem;
}

.shakoof-form__privacy {
	font-size: 0.8125rem;
	color: var(--shakoof-muted);
	margin-block-start: 0.75rem;
}

.shakoof-form__errors {
	border: 1px solid #B42318;
	background: #FEF3F2;
	border-radius: 2px;
	padding: 0.85rem 1rem;
	margin-block-end: 1.25rem;
}

.shakoof-form__errors p {
	font-weight: 700;
	margin-block: 0 0.35rem;
}

.shakoof-form__errors ul {
	margin: 0;
	padding-inline-start: 1.25rem;
}

.shakoof-form__success {
	border: 1px solid var(--shakoof-ink);
	background: var(--shakoof-yellow-wash);
	border-radius: 2px;
	padding: 1.25rem 1.5rem;
}

.shakoof-form__success-title {
	font-weight: 700;
	font-size: 1.125rem;
	margin-block: 0 0.5rem;
}

.shakoof-form__success-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-start: 1rem;
}

/* ---------------------------------------------------------------------------
   Appointment booking (optika-bridge class-optika-bridge-booking.php, §7.8)
   Server-rendered, zero JavaScript. Date and time are link grids: a tap is a
   page load, so the flow works with JS off and survives an ad-blocker. 48px
   targets; logical properties so RTL is automatic.
   ------------------------------------------------------------------------- */

.shakoof-booking {
	max-inline-size: 720px;
	margin-block: 1.5rem 3rem;
}

/* עב | EN | FR — the booking flow's own language switch (bridge 0.13.0). */
.shakoof-booking__langs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block: 0 1rem;
}

.shakoof-booking__lang {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding-inline: 0.875rem;
	border: 1px solid var(--shakoof-line);
	color: var(--shakoof-ink);
	font-size: 0.875rem;
	text-decoration: none;
}

.shakoof-booking__lang:hover,
.shakoof-booking__lang:focus-visible {
	border-color: var(--shakoof-ink);
}

.shakoof-booking__lang[aria-current="true"] {
	background: var(--shakoof-yellow);
	border-color: var(--shakoof-ink);
	font-weight: 700;
}

.shakoof-booking__title {
	font-size: clamp(1.5rem, 4vw, 2rem);
	margin-block: 0 0.5rem;
}

.shakoof-booking__lead {
	color: var(--shakoof-muted-deep);
	margin-block: 0 1.25rem;
}

.shakoof-booking__meta,
.shakoof-booking__back,
.shakoof-booking__help {
	font-size: 0.875rem;
	color: var(--shakoof-muted-deep);
}

.shakoof-booking__back {
	margin-block: 0 0.5rem;
}

.shakoof-booking__help {
	margin-block-start: 1.25rem;
}

.shakoof-booking__h2 {
	font-size: 1.0625rem;
	margin-block: 0 0.85rem;
}

.shakoof-booking__box {
	border: 1px solid var(--shakoof-line);
	background: var(--shakoof-paper);
	border-radius: 2px;
	padding: 1.25rem;
	margin-block: 1rem;
}

.shakoof-booking__types,
.shakoof-booking__grid,
.shakoof-booking__prices {
	list-style: none;
	margin: 0;
	padding: 0;
}

.shakoof-booking__types {
	display: grid;
	gap: 0.75rem;
}

.shakoof-booking__type {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.25rem 1rem;
	align-items: center;
	min-block-size: 64px;
	padding: 1rem 1.25rem;
	border: 1px solid var(--shakoof-line);
	border-radius: 2px;
	background: var(--shakoof-paper);
	color: var(--shakoof-ink);
	text-decoration: none;
}

.shakoof-booking__type:hover,
.shakoof-booking__type:focus-visible {
	border-color: var(--shakoof-ink);
	background: var(--shakoof-yellow-wash);
}

.shakoof-booking__type-name {
	font-weight: 700;
}

.shakoof-booking__type-desc {
	grid-column: 1;
	font-size: 0.875rem;
	color: var(--shakoof-muted-deep);
}

.shakoof-booking__type-meta {
	grid-column: 2;
	grid-row: 1 / span 2;
	font-size: 0.8125rem;
	color: var(--shakoof-muted-deep);
	white-space: nowrap;
}

.shakoof-booking__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 0.5rem;
}

.shakoof-booking__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-block-size: 48px;
	padding: 0.5rem;
	border: 1px solid var(--shakoof-line);
	border-radius: 2px;
	background: var(--shakoof-paper);
	color: var(--shakoof-ink);
	font-weight: 600;
	text-decoration: none;
	text-align: center;
}

.shakoof-booking__cell small {
	font-size: 0.6875rem;
	font-weight: 400;
	color: var(--shakoof-muted-deep);
}

.shakoof-booking__cell:hover,
.shakoof-booking__cell:focus-visible {
	border-color: var(--shakoof-ink);
	background: var(--shakoof-yellow);
}

/* Dates + hours on one screen (David, Sep 25, 2026). The chosen date stays
   visible and marked; its hours sit directly under the dates. */
.shakoof-booking__cell.is-active {
	border-color: var(--shakoof-ink);
	background: var(--shakoof-yellow);
	box-shadow: 2px 2px 0 0 var(--shakoof-ink);
}

.shakoof-booking__times {
	margin-block-start: 1.25rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--shakoof-line);
}

.shakoof-booking__day {
	font-weight: 400;
	color: var(--shakoof-muted-deep);
}

/* Phones: the dates become ONE swipeable row, so the dates and the hours fit
   on a single screen instead of four wrapped rows pushing the hours down.
   Cells are sized to show ~3.4 per row — the cut-off cell at the edge is
   the cue that the row swipes. The scroll is inside the row, so the page
   itself never overflows sideways. */
@media (max-width: 781px) {
	.shakoof-booking__dates {
		display: flex;
		gap: 0.5rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		/* Room for the active cell's offset shadow. */
		padding-block-end: 4px;
	}

	.shakoof-booking__dates::-webkit-scrollbar {
		display: none;
	}

	.shakoof-booking__dates > li {
		flex: 0 0 calc((100% - 3 * 0.5rem) / 3.4);
		scroll-snap-align: start;
	}

	.shakoof-booking__dates .shakoof-booking__cell {
		padding-inline: 0.25rem;
		white-space: nowrap;
	}
}

.shakoof-booking__chosen {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem;
	margin-block: 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--shakoof-ink);
	border-radius: 2px;
	background: var(--shakoof-yellow-wash);
}

.shakoof-booking__prices li {
	padding-block: 0.3rem;
	border-block-end: 1px solid var(--shakoof-line);
}

.shakoof-booking__prices li:last-child {
	border-block-end: 0;
}

.shakoof-booking__when {
	font-size: 1.25rem;
	margin-block: 0.25rem;
}

.shakoof-booking__summary p {
	margin-block: 0.25rem;
}

.shakoof-booking__canceled {
	color: #B42318;
	font-weight: 700;
}

.shakoof-booking__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block: 1rem;
}

.shakoof-booking__actions .shakoof-btn {
	min-block-size: 48px;
}

/* ---------------------------------------------------------------------------
   Catalog filter bar (P1-10)
   Theme-native replacement for the woo-product-filter plugin. Mobile-first:
   the panel is a <details>, collapsed on small screens (76% of traffic) and
   always open from 782px up. No JavaScript required for either state.
   ------------------------------------------------------------------------- */

.shakoof-filters {
	margin-block-end: 1.5rem;
}

.shakoof-filters__panel {
	border: 1px solid var(--shakoof-line);
	border-radius: 2px;
	background: var(--shakoof-surface);
}

.shakoof-filters__summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 48px;
	padding-inline: 1rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.shakoof-filters__summary::-webkit-details-marker {
	display: none;
}

/* Chevron built from a border so it needs no icon font or SVG request. */
.shakoof-filters__summary::after {
	content: "";
	inline-size: 0.55rem;
	block-size: 0.55rem;
	margin-inline-start: auto;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.shakoof-filters__panel[open] > .shakoof-filters__summary::after {
	transform: rotate(-135deg);
}

.shakoof-filters__summary:focus-visible {
	outline: 2px solid var(--shakoof-yellow);
	outline-offset: -2px;
}

.shakoof-filters__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 22px;
	block-size: 22px;
	padding-inline: 0.4rem;
	border-radius: 11px;
	background: var(--shakoof-ink);
	color: var(--shakoof-paper);
	font-size: 0.75rem;
	font-weight: 700;
}

.shakoof-catalog__filter-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 1 1 auto;
}

.shakoof-filters__clear {
	font-size: 0.875rem;
	color: var(--shakoof-muted-deep);
	text-underline-offset: 3px;
}

/* The filter form sits inside the panel, so its own border would double up. */
.shakoof-filters__panel .shakoof-catalog__filters {
	margin-block-end: 0;
	padding: 0 1rem 1rem;
	border-block-end: 0;
}

@media (min-width: 782px) {
	/* Desktop has the room: show the filters permanently and hide the toggle. */
	.shakoof-filters__summary {
		display: none;
	}

	/* ...but hiding the toggle is only half the job. The panel is a <details>
	   and the template only adds `open` when a filter is already active, so on
	   a first visit the browser kept the form collapsed while CSS removed the
	   one control that could open it: 255 frames and NO WAY TO FILTER on every
	   desktop and tablet ≥782px. Measured Sep 22, 2026 — checkVisibility() said
	   false and elementFromPoint() at the form's centre returned a product card.
	   ::details-content is the only hook that reveals a closed <details> from
	   CSS; `display` on the children does nothing (both were tested live). */
	.shakoof-filters__panel::details-content {
		content-visibility: visible;
		block-size: auto;
		overflow: visible;
	}

	.shakoof-filters__panel {
		border: 0;
		background: transparent;
	}

	.shakoof-filters__panel .shakoof-catalog__filters {
		padding: 0 0 1rem;
		border-block-end: 1px solid var(--shakoof-line);
	}
}

/* ::details-content shipped in Chrome 131 / Safari 18.4 / Firefox 139 (all
   2024-25). An older engine cannot be made to reveal a closed <details> at
   all, so give it the phone treatment — a working toggle — rather than the
   bug this block exists to fix. Keep the toggle rather than no filters. */
@supports not selector(::details-content) {
	@media (min-width: 782px) {
		.shakoof-filters__summary {
			display: flex;
		}
	}
}

/* ---------------------------------------------------------------------------
   Blog (home.php / archive.php / single.php)
   Built July 26, 2026. Before this the theme had no home.php, so WordPress
   fell back to index.php and the blog rendered as a wall of underlined links
   with no images — "you don't see any blog" (David). Presentation only:
   Law 2 keeps URLs and post content untouched.
   ------------------------------------------------------------------------- */

.shakoof-blog__header {
	margin-block: 0.5rem 2rem;
	max-inline-size: 46rem;
}

.shakoof-blog__title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 800;
	margin-block-end: 0.5rem;
}

.shakoof-blog__lead {
	color: var(--shakoof-muted-deep);
	font-size: 1.0625rem;
}

/* Post cards are wider than product cards — an excerpt needs a measure. */
.shakoof-blog__grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.shakoof-card--post .shakoof-card__media {
	aspect-ratio: 16 / 10;
	background: var(--shakoof-surface);
	overflow: hidden;
}

.shakoof-card--post .shakoof-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	/* Editorial photos are not supplier cut-outs: no multiply blend here. */
	mix-blend-mode: normal;
}

.shakoof-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
	color: var(--shakoof-muted);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	background: var(--shakoof-surface);
}

.shakoof-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.75rem;
	color: var(--shakoof-muted-deep);
	margin-block-end: 0.35rem;
}

.shakoof-card--post .shakoof-card__title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	/* Hebrew titles read RTL — override the catalog card's LTR product rule. */
	direction: rtl;
	text-align: start;
}

.shakoof-card__excerpt {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--shakoof-muted-deep);
	margin-block: 0.4rem 0.6rem;
}

.shakoof-card__more {
	font-size: 0.875rem;
	font-weight: 700;
	border-block-end: 2px solid var(--shakoof-yellow);
	padding-block-end: 1px;
}

/* ---- single post ---- */
.shakoof-post__header {
	max-inline-size: 46rem;
	margin-block: 1rem 1.5rem;
}

.shakoof-post__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: 0.8125rem;
	color: var(--shakoof-muted-deep);
	margin-block-end: 0.75rem;
}

.shakoof-post__breadcrumb-current {
	color: var(--shakoof-muted);
}

.shakoof-post__title {
	font-size: clamp(1.6rem, 4vw, 2.375rem);
	font-weight: 800;
	line-height: 1.25;
}

.shakoof-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	font-size: 0.875rem;
	color: var(--shakoof-muted-deep);
	margin-block-start: 0.5rem;
}

/* Author box — production's, restored for cutover (DECISIONS #62). Same measure
   as the post header so it reads as part of the article, not a footer block. */
.shakoof-post__author {
	max-inline-size: 46rem;
	margin-block: 2rem;
	padding-block: 1rem;
	border-block: 1px solid var(--shakoof-line);
	color: var(--shakoof-muted-deep);
	font-size: 0.95rem;
}
.shakoof-post__author-name {
	margin: 0 0 0.35rem;
	color: var(--shakoof-ink);
	font-weight: 700;
}
.shakoof-post__author p,
.shakoof-post__author ul {
	margin-block: 0.25rem;
}

.shakoof-post__related {
	margin-block-start: 3rem;
	padding-block-start: 2rem;
	border-block-start: 1px solid var(--shakoof-line);
}

.shakoof-post__related-title {
	font-size: 1.25rem;
	font-weight: 800;
	margin-block-end: 1rem;
}

.shakoof-blog-cta {
	margin-block-start: 2.5rem;
}

/* ---------------------------------------------------------------------------
   Voucher modal (inc/voucher-modal.php)
   Native <dialog> replacing the Elementor Pro popup, which stopped working
   when Pro was removed (Pro-only feature — no shim can revive it).
   ------------------------------------------------------------------------- */

.shakoof-modal {
	inline-size: min(92vw, 30rem);
	padding: 0;
	border: 2px solid var(--shakoof-ink);
	border-radius: 2px;
	background: var(--shakoof-paper);
	color: var(--shakoof-ink);
}

.shakoof-modal::backdrop {
	background: rgb(0 0 0 / 0.55);
}

.shakoof-modal__inner {
	position: relative;
	padding: 1.75rem 1.5rem 1.5rem;
}

.shakoof-modal__close {
	position: absolute;
	inset-block-start: 0.35rem;
	inset-inline-end: 0.5rem;
	inline-size: 44px;
	block-size: 44px;
	font-size: 1.6rem;
	line-height: 1;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--shakoof-muted-deep);
}

.shakoof-modal__close:hover {
	color: var(--shakoof-ink);
}

.shakoof-modal__title {
	font-size: 1.375rem;
	font-weight: 800;
	margin-block-end: 0.5rem;
	padding-inline-end: 2rem;
}

.shakoof-modal__lead {
	color: var(--shakoof-muted-deep);
	font-size: 0.9375rem;
	margin-block-end: 1rem;
}

/* One-field form inside the modal: button sits beside the input on wide
   screens, stacks on phones. */
.shakoof-modal .shakoof-form__grid {
	grid-template-columns: 1fr;
}

.shakoof-modal .shakoof-form__actions {
	margin-block-start: 1rem;
}

.shakoof-modal .shakoof-form__actions .shakoof-btn {
	inline-size: 100%;
}

/* --------------------------------------------------------------- blog TOC */
/* Replaces Elementor's table-of-contents widget (used by 18 of 19 posts). */
.shakoof-toc {
	border: 1px solid var(--shakoof-line);
	background: var(--shakoof-surface);
	border-radius: 2px;
	padding: 1rem 1.25rem;
	margin-block: 1.25rem 1.75rem;
}
.shakoof-toc__list {
	margin: 0;
	padding-inline-start: 1.1rem;
	display: grid;
	gap: 0.35rem;
}
.shakoof-toc__list a {
	text-underline-offset: 3px;
}
.shakoof-toc__sub {
	margin-inline-start: 1rem;
	font-size: 0.9375rem;
	color: var(--shakoof-muted-deep);
}

/* ---------------------------------------------------------------------------
   Runaway inline SVG guard
   Legacy content carries inline <svg> decorations with a viewBox but NO width
   or height. An SVG like that expands to fill its container — on the brand
   pages two decorative chevrons grew to ~1200px tall each and pushed the whole
   product grid below the fold (David: "some icon in huge size").
   Constrain any SVG inside authored content that has not been given a size.
   ------------------------------------------------------------------------- */
.entry-content svg:not([width]):not([height]),
.shakoof-brand-intro svg:not([width]):not([height]) {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	max-inline-size: 100%;
}

/* A lone decorative SVG in its own paragraph is a divider — centre it. */
.entry-content p > svg:only-child {
	display: block;
	margin-inline: auto;
}

/* "See all N in the catalog" — the bridge from a brand preview to the shelf. */
.shakoof-grid-more {
	text-align: center;
	margin-block: 1.5rem 0;
}

/* -------------------------------------------------------------------------
   Comments — the reader Q&A.

   These threads are original content (David answers patients by name), so they
   are styled as a readable conversation rather than a form appendix. The
   author's own replies get a badge, because "the optometrist answered" is
   exactly what a visitor arriving from Google is looking for.
   ------------------------------------------------------------------------- */
.shakoof-comments {
	margin-block: 3rem 4rem;
	max-inline-size: 46rem;
}

.shakoof-comments__title {
	font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
	margin-block-end: 1.5rem;
	padding-block-end: 0.75rem;
	border-block-end: 2px solid var(--shakoof-line);
}

.shakoof-comments__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Nested replies indent on the inline-start edge — RTL-correct by definition. */
.shakoof-comments__list .children {
	list-style: none;
	margin: 0;
	padding-inline-start: clamp(0.75rem, 3vw, 2rem);
	border-inline-start: 2px solid var(--shakoof-line);
}

.shakoof-comment {
	margin-block-end: 1.5rem;
}

.shakoof-comment__body {
	background: var(--shakoof-surface);
	border-radius: 10px;
	padding: 1rem 1.25rem;
}

/* The author's answers are the payload — lift them off the question. */
.shakoof-comment--author > .shakoof-comment__body {
	background: var(--shakoof-paper);
	border: 1px solid var(--shakoof-line);
	border-inline-start: 4px solid var(--shakoof-yellow);
}

.shakoof-comment__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-end: 0.6rem;
}

.shakoof-comment__avatar img {
	border-radius: 50%;
	display: block;
	inline-size: 2.5rem;
	block-size: 2.5rem;
}

.shakoof-comment__author {
	font-weight: 700;
}

.shakoof-comment__badge {
	font-size: 0.75rem;
	font-weight: 700;
	background: var(--shakoof-yellow);
	color: var(--shakoof-ink);
	border-radius: 999px;
	padding: 0.15rem 0.6rem;
}

.shakoof-comment__date {
	font-size: 0.85rem;
	color: var(--shakoof-muted);
	margin-inline-start: auto;
}

.shakoof-comment__content {
	line-height: 1.7;
}

.shakoof-comment__content p:last-child {
	margin-block-end: 0;
}

.shakoof-comment__moderation,
.shakoof-comments__closed {
	font-size: 0.9rem;
	color: var(--shakoof-muted);
	font-style: italic;
}

.shakoof-comment__reply a {
	display: inline-block;
	margin-block-start: 0.6rem;
	font-size: 0.9rem;
	font-weight: 600;
}

/* --- the reply form ---------------------------------------------------- */
.comment-respond {
	margin-block-start: 2.5rem;
	padding: 1.5rem;
	background: var(--shakoof-surface);
	border-radius: 12px;
}

.comment-reply-title {
	font-size: 1.15rem;
	margin-block: 0 0.5rem;
}

.shakoof-comments__notes {
	font-size: 0.85rem;
	color: var(--shakoof-muted);
	margin-block-end: 1rem;
}

.comment-respond label {
	display: block;
	font-weight: 600;
	margin-block-end: 0.35rem;
}

.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
	inline-size: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--shakoof-line);
	border-radius: 8px;
	font: inherit;
	background: var(--shakoof-paper);
	color: var(--shakoof-ink);
}

.comment-respond p {
	margin-block-end: 1rem;
}

/* 44px minimum touch target — the same floor the July 29 CTA fix established. */
.comment-respond .submit {
	min-block-size: 44px;
	padding-inline: 1.5rem;
	cursor: pointer;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.comment-form-cookies-consent label {
	font-weight: 400;
	font-size: 0.9rem;
	margin: 0;
}

.comment-form-cookies-consent input {
	margin-block-start: 0.25rem;
}

/* ---------------------------------------------------------------------------
   Stats row (.shakoof-stats)
   ---------------------------------------------------------------------------
   Replaces Elementor's `counter` widget. The conversion off Elementor kept each
   counter's LABEL but lost its VALUE — the number lived in a widget setting,
   not in the content — leaving pages showing a bare "1" and a stray "%"
   (optometrist page, reported Aug 1 2026).

   This renders the same information as static markup the theme owns: no
   JavaScript, no count-up animation, and the number is real text — so it is
   readable by search engines and screen readers, which the widget's animated
   value never was.

   Markup:
     <div class="shakoof-stats">
       <div class="shakoof-stat">
         <span class="shakoof-stat__value">25</span>
         <span class="shakoof-stat__label">שנות ניסיון</span>
       </div>
       ...
     </div>
   Add a suffix with <span class="shakoof-stat__suffix">%</span> inside value.
--------------------------------------------------------------------------- */
.shakoof-stats {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 9rem, 1fr ) );
	gap: var( --shakoof-gap );
	margin-block: 2.5rem;
	padding-block: 1.75rem;
	border-block: 1px solid var( --shakoof-line );
	text-align: center;
}

.shakoof-stat__value {
	/* Flex, not inline text, so the parts are ORDERED explicitly rather than
	   left to the bidi algorithm — which cannot satisfy both cases at once:
	   "100%" needs LTR so the % trails the number, while the Hebrew "מעל"
	   must READ FIRST, i.e. sit to the RIGHT of it (David, Aug 1 2026).
	   row-reverse lays children right-to-left: prefix first (rightmost),
	   then the number, then the suffix. */
	/* LTR row + explicit order per part, so nothing depends on the bidi
	   algorithm or on source order:
	     order 1  prefix "מעל"  → RIGHT (Hebrew reads it first)
	     order 2  the figure
	     order 3  suffix "%" / "+" → LEFT (they trail the number in LTR)
	   ⚠️ Every part must be an ELEMENT. A bare text node becomes an anonymous
	   flex item that `order` cannot address — which is exactly why the first
	   attempt left "מעל" on the wrong side (Aug 1, 2026). */
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: center;
	gap: 0.12em;
	font-size: clamp( 2rem, 1.4rem + 2.4vw, 3.25rem );
	font-weight: 700;
	line-height: 1.05;
	color: var( --shakoof-ink );
}


/* The figure itself. LTR-isolated so "200,000" keeps its comma and digit order
   regardless of the RTL page around it. */
.shakoof-stat__num {
	order: 2;
	direction: ltr;
	unicode-bidi: isolate;
}

/* "%" / "+" trail the number as they read in LTR: 100%, 200,000+ — so they sit
 * to the LEFT (order 3, the far end of an LTR row). An earlier attempt put them
 * on the RIGHT and rendered "%100" / "+200,000". */
.shakoof-stat__suffix {
	order: 3;
	font-size: 0.6em;
}

/* "מעל" before a figure (David, Aug 1 2026: "מעל 30 שנות ניסיון").
 *
 * Set smaller than the number so the FIGURE stays the dominant element and the
 * three stats keep the same visual rhythm. It sits inside .__value, which is
 * direction:ltr / isolate so "100%" renders correctly — so this Hebrew word
 * needs its own RTL isolation, or it lands on the wrong side of the number. */
/* "מעל" before a figure. In Hebrew it READS FIRST, so it must sit to the RIGHT
 * of the number (David, Aug 1 2026: "put it before the 30, not after — it's in
 * Hebrew, right to left"). The parent's row-reverse puts the first child on the
 * right, so source order alone is enough; no bidi override needed here.
 * Smaller than the figure so the NUMBER stays the dominant element. */
.shakoof-stat__prefix {
	order: 1;                 /* RIGHT of the figure — Hebrew reads it first */
	font-size: 0.42em;
	font-weight: 600;
	color: var( --shakoof-muted-deep );
}

.shakoof-stat__label {
	display: block;
	margin-block-start: 0.4rem;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var( --shakoof-muted-deep );
}

/* ---------------------------------------------------------------------------
   Brand archive editorial blocks (Aug 1, 2026)
   The automatic brand page: hero + story above the grid, closing line + CTA
   below it. Fields live on the brand term (inc/brand-fields.php), so a brand
   created in wp-admin has a complete page with no hand-building.
   Every block is optional — a brand with no story renders the grid alone.
--------------------------------------------------------------------------- */

.shakoof-brand-hero {
	margin: 0 0 1.5rem;
}

.shakoof-brand-hero__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 22rem;
	object-fit: cover;
}

/* The story reads as an article, not as catalog chrome: a measure-limited
   column at the page's text size, matching the hand-built brand pages. */
.shakoof-brand-story {
	max-inline-size: 60ch;
	margin-block: 0 1.5rem;
	color: var( --shakoof-ink );
	line-height: 1.7;
}

.shakoof-brand-story > :first-child {
	margin-block-start: 0;
}

.shakoof-brand-story > :last-child {
	margin-block-end: 0;
}

.shakoof-brand-story p {
	margin-block: 0 1rem;
}

.shakoof-brand-story h2,
.shakoof-brand-story h3 {
	margin-block: 1.5rem 0.5rem;
	line-height: 1.3;
}

.shakoof-brand-story img {
	max-inline-size: 100%;
	block-size: auto;
}

/* Below the grid. The outro repeats the page's own invitation, so it carries
   generous space above it rather than crowding the last row of frames. */
.shakoof-brand-outro {
	margin-block-start: 2.5rem;
}

.shakoof-brand-outro__note {
	max-inline-size: 60ch;
	margin-block: 0 1.5rem;
	color: var( --shakoof-muted-deep );
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* ------------------------------------------------ mobile review, Sep 25 2026 */
/* Product page: Woo's tab bar with a single tab rendered as a lone bullet
   ("• מידע נוסף") right above a heading with the same words. One tab needs no
   switcher — hide the list, keep the panel and its heading. */
.shakoof-product__tabs ul.wc-tabs:has(> li:only-child) {
	display: none;
}
/* Woo core sets attribute values in italics — Hebrew in italics reads as
   broken type ("כסף", "מתכת"). */
.woocommerce-product-attributes-item__value,
.woocommerce-product-attributes-item__value p,
table.shop_attributes td {
	font-style: normal;
}
/* Homepage catalog heading: the highlighted phrase wrapped mid-phrase on a
   phone ("הקולקציה של" / "עכשיו."). Keep it together as one unit. */
.front-catalog__title .shakoof-mark {
	display: inline-block;
}
/* Hebrew file picker (forms.php) — the native input is hidden but stays
   focusable; its focus ring shows on the Hebrew button instead. */
.shakoof-form__file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}
.shakoof-form__file-input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
	overflow: hidden;
}
.shakoof-form__file-btn {
	cursor: pointer;
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
}
.shakoof-form__file-input:focus-visible + .shakoof-form__file-btn {
	outline: 3px solid var(--shakoof-ink);
	outline-offset: 2px;
}
.shakoof-form__file-name {
	color: var(--shakoof-muted);
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}