/* =========================================================================
   Sedcom — RTL Hebrew WooCommerce theme
   One file, no build step.

   Written mobile-first: every component is specified for a 360px phone, and
   `min-width` queries only ever *add* to it. Most of this site's traffic holds
   a broken laptop in one hand and a phone in the other.

   Four breakpoints, no others:
     (none)  phone
     600px   large phone / landscape
     900px   tablet — navigation becomes horizontal, bottom nav disappears
     1200px  desktop
     1440px  wide

   Colour rule: every value lives in a token below. Never write a hex inside a
   component. Contrast ratios in the comments were measured, not estimated.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts */
/*
 * Assistant, self-hosted as a variable font (400–800 in one file per subset).
 * Previously the stack *named* Assistant but never loaded it, so most visitors
 * silently got Arial — which sets Hebrew poorly. Hosting it here rather than
 * calling fonts.gstatic.com removes a third-party connection from the critical
 * path and keeps the site working offline.
 *
 * `unicode-range` means a Hebrew-only page never downloads the 22KB Latin file.
 */
@font-face {
	font-family: "Assistant";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/assistant-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: "Assistant";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/assistant-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;
}
@font-face {
	font-family: "Assistant";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/assistant-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- tokens */
:root {
	/* ===== brand =====
	 * Sampled directly from the supplied logo vectors, not estimated.
	 * The sky blue is the *identity*; it is too light to be an action colour
	 * (2.62 on white). `--sc-blue` is the *interaction* colour. Both coexist:
	 * one says who we are, the other says what to click.
	 */
	--sc-brand-sky:    #5FA5E6;  /* logo bubble fill · on navy 6.87 ok · on white 2.62 FAIL */
	--sc-brand-sky-dk: #2E86C8;  /* darker sky, for accents on light backgrounds */
	--sc-brand-line:   #252522;  /* logo outline · on white 15.37 · on navy 1.17 FAIL */
	--sc-brand-shade:  #4F4E48;  /* logo extrusion */

	/* ===== dark neutrals ===== */
	--sc-navy:      #0b1727;  /* footer only. White on it = 18.01 */
	--sc-navy-soft: #142842;
	--sc-navy-line: #24384f;

	/* ===== light hero =====
	 * The hero is light because the logo outline (#252522) scores 1.17 on navy —
	 * on a dark hero the mark loses the very edge that defines it.
	 */
	--sc-hero-from: #EAF2FD;
	--sc-hero-to:   #F8FBFF;
	--sc-hero-ink:  #14202e;  /* 14.59 on --sc-hero-from */

	/* ===== action ===== */
	--sc-blue:       #1361c9;  /* 5.86 both ways against white */
	--sc-blue-dark:  #0e4c9e;  /* 8.25 */
	--sc-blue-light: #e8f1fd;
	--sc-blue-ring:  #1361c9;

	/* ===== text ===== */
	--sc-ink:     #14202e;  /* 16.46 */
	--sc-ink-2:   #465464;  /* 7.74 */
	--sc-ink-3:   #5B6878;  /* 5.68 — was #6d7a89 at 4.38, which failed */
	--sc-ink-inv: #ffffff;

	/* ===== commerce =====
	 * The price is dark, not coloured. The loudest thing on the page should be
	 * what to click, not what it costs; the price stands out through size and
	 * weight instead.
	 */
	--sc-price:    #14202e;
	--sc-was:      #5B6878;
	--sc-deal:     #B45309;  /* amber, replaces the old magenta · 5.02 */
	--sc-deal-bg:  #FFF4E5;
	--sc-deal-ink: #8A4708;  /* 6.47 on --sc-deal-bg */

	/* ===== status ===== */
	--sc-ok:       #0F5A38;  /* 8.27 */
	--sc-ok-bg:    #E8F6EF;
	--sc-warn:     #8A4708;
	--sc-warn-bg:  #FFF4E5;
	--sc-err:      #B3261E;  /* 6.54 */
	--sc-err-bg:   #FDECEA;
	--sc-err-ink:  #8C1D18;  /* 7.97 */

	/* ===== whatsapp =====
	 * Brand green with white text is 1.98 — unreadable. Two tokens: the light
	 * green takes navy text; the dark green takes white.
	 */
	--sc-wa:       #25D366;
	--sc-wa-ink:   #0b1727;  /* 9.08 on --sc-wa */
	--sc-wa-solid: #0E7A44;  /* 5.40 with white */

	/* ===== surfaces ===== */
	--sc-bg:          #ffffff;
	--sc-bg-soft:     #f6f8fb;
	--sc-bg-sunken:   #eef2f7;
	--sc-line:        #dfe5ec;  /* decorative dividers — no contrast floor applies */
	--sc-line-2:      #eef2f6;
	/*
	 * Interactive borders. WCAG 1.4.11 asks for 3:1 on anything that is the
	 * only thing identifying a control, and a white field on a white page is
	 * identified by nothing else. The spec's suggested #c8d2df measures 1.53 —
	 * it states the 3:1 rule and then breaks it. This value clears 3:1 on every
	 * surface an input actually sits on: 3.20 on white, 3.01 on --sc-bg-soft.
	 */
	--sc-line-strong: #7992b1;

	/* Legacy aliases. Older markup and a few inline styles still reference
	 * these; pointing them at the new palette means a missed reference degrades
	 * to the right colour instead of resurrecting the magenta. */
	--sc-accent:      var(--sc-deal);
	--sc-accent-dark: var(--sc-deal-ink);
	--sc-cyan:        var(--sc-brand-sky-dk);
	--sc-focus:       var(--sc-blue-ring);

	/* ===== illustration =====
	 * The palette the drawn category tiles are built from — see
	 * inc/category-art.php. Four ink values and two grounds, deliberately no
	 * more: the whole point of a drawn set is that every tile is lit and
	 * coloured identically, and a fifth colour is how that stops being true.
	 *
	 * These are the logo's own values rather than the interface palette. The
	 * illustrations are the brand speaking, not a control to be clicked, so
	 * they take the sky blue that is too light to be an action colour.
	 */
	--sc-art-line:   var(--sc-brand-line);    /* outline, as heavy as the logo's */
	--sc-art-sky:    var(--sc-brand-sky);     /* the object's body */
	--sc-art-sky-dk: var(--sc-brand-sky-dk);  /* detail on a light face */
	--sc-art-face:   #F5F5F5;                 /* screens, labels, key caps */
	--sc-art-bg:     #E7F0FC;                 /* tile field */
	--sc-art-bg-2:   #D3E4F8;                 /* spotlight disc behind the object */

	/* ===== type ===== */
	--sc-font: "Assistant", "Rubik", "Heebo", system-ui, -apple-system,
		"Segoe UI", Arial, sans-serif;

	--sc-fs-display: 1.75rem;
	--sc-fs-h1:      1.5rem;
	--sc-fs-h2:      1.25rem;
	--sc-fs-h3:      1.0625rem;
	--sc-fs-lg:      1.0625rem;
	--sc-fs-md:      1rem;      /* body — never smaller */
	--sc-fs-sm:      .875rem;
	--sc-fs-xs:      .8125rem;  /* 13px — absolute floor is 12px */
	--sc-fs-price:   1.375rem;

	--sc-lh-tight:   1.25;
	--sc-lh-normal:  1.6;   /* Hebrew has no ascenders/descenders to open lines up */
	--sc-lh-relaxed: 1.75;

	/* ===== space (4px scale) ===== */
	--sc-s1: .25rem;  --sc-s2: .5rem;   --sc-s3: .75rem;  --sc-s4: 1rem;
	--sc-s5: 1.25rem; --sc-s6: 1.5rem;  --sc-s8: 2rem;    --sc-s10: 2.5rem;
	--sc-s12: 3rem;   --sc-s16: 4rem;

	--sc-gap:   var(--sc-s4);
	--sc-gap-2: var(--sc-s6);
	--sc-gap-3: var(--sc-s10);
	--sc-gap-4: var(--sc-s16);

	/* ===== shape ===== */
	--sc-r-sm: 8px;  --sc-r: 12px;  --sc-r-lg: 16px;
	--sc-r-xl: 20px; --sc-r-pill: 999px;

	/* Shadows all fall the same way, echoing the extrusion in the logo. */
	--sc-shadow-sm: 0 1px 2px rgba(11, 23, 39, .06);
	--sc-shadow:    0 1px 2px rgba(11, 23, 39, .06), 0 4px 14px rgba(11, 23, 39, .06);
	--sc-shadow-lg: 0 8px 32px rgba(11, 23, 39, .12);
	--sc-shadow-up: 0 -2px 12px rgba(11, 23, 39, .10);

	/* ===== metrics ===== */
	--sc-max: 1280px;
	--sc-pad-x: 1rem;
	--sc-header-h: 56px;
	--sc-bottomnav-h: 60px;
	--sc-safe-b: env(safe-area-inset-bottom, 0px);

	/*
	 * A stroke magnifier as a data URI, used to mask WooCommerce's emoji zoom
	 * trigger. Inline because it is the only place the theme needs an icon in
	 * CSS rather than in markup.
	 */
	--sc-icon-zoom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6M8.5 11h5M11 8.5v5'/%3E%3C/svg%3E");

	/* ===== motion ===== */
	--sc-dur-fast: 120ms;
	--sc-dur: 200ms;
	--sc-dur-slow: 320ms;
	--sc-ease: cubic-bezier(.4, 0, .2, 1);
	--sc-ease-out: cubic-bezier(0, 0, .2, 1);
}

@media (min-width: 600px) {
	:root { --sc-fs-display: 2rem; }
}

@media (min-width: 900px) {
	:root {
		--sc-fs-display: 2.5rem;
		--sc-fs-h1:      2rem;
		--sc-fs-h2:      1.625rem;
		--sc-fs-h3:      1.25rem;
		--sc-fs-lg:      1.125rem;
		--sc-fs-xs:      .78rem;
		--sc-fs-price:   1.5rem;
		--sc-pad-x:      1.5rem;
		--sc-header-h:   64px;
	}
}

@media (min-width: 1200px) {
	:root { --sc-pad-x: 2rem; }
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchors and skip links must not land under the sticky header. */
	scroll-padding-top: calc(var(--sc-header-h) + var(--sc-s4));
	/*
	 * `clip`, and on <html> as well as <body>.
	 *
	 * Containing the overflow on <body> alone still lets the root element pan
	 * sideways, which is what produced the sideways drag on a product page once
	 * its panels were open: a plugin overlay and an off-canvas live region
	 * pushed the document to 750px inside a 390px viewport.
	 *
	 * `clip` rather than `hidden` because `hidden` turns the element into a
	 * scroll container, and that silently disables `position: sticky` for
	 * everything inside it — this theme's header and shop sidebar both rely
	 * on it.
	 */
	overflow-x: clip;
}

body {
	margin: 0;
	font-family: var(--sc-font);
	font-size: var(--sc-fs-md);
	line-height: var(--sc-lh-normal);
	color: var(--sc-ink);
	background: var(--sc-bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden; /* fallback for engines without `clip` */
	overflow-x: clip;
	/* Clears the fixed bottom navigation so the footer is never covered. */
	padding-bottom: calc(var(--sc-bottomnav-h) + var(--sc-safe-b));
	transition: padding-bottom var(--sc-dur) var(--sc-ease);
}
/* main.js adds this only while the sticky buy bar is on screen. */
body.sc-has-buybar {
	padding-bottom: calc(var(--sc-bottomnav-h) + 66px + var(--sc-safe-b));
}
@media (min-width: 900px) {
	body, body.sc-has-buybar { padding-bottom: 0; }
}

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

[hidden] { display: none !important; }

h1, h2, h3, h4 {
	margin: 0 0 .5em;
	line-height: var(--sc-lh-tight);
	font-weight: 700;
	/* Negative tracking smears Hebrew; -.01em on large display type is the limit. */
	letter-spacing: 0;
}
h1 { font-size: var(--sc-fs-h1); }
h2 { font-size: var(--sc-fs-h2); }
h3 { font-size: var(--sc-fs-h3); font-weight: 600; }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-inline-start: 1.25em; }

/* Justified text opens white "rivers" between Hebrew words. Never. */
p, li, dd, td, th, .sc-prose { text-align: start; }

a {
	color: var(--sc-blue-dark);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
a:hover { color: var(--sc-blue); }

/* Hover is a desktop concept; on touch it either never fires or sticks. */
@media (hover: none) {
	a:hover { color: var(--sc-blue-dark); }
}

button, input, select, textarea { font: inherit; color: inherit; }

/*
 * One visible focus ring for everything focusable. Never remove it without a
 * replacement that is at least as visible.
 *
 * `tabindex="-1"` is excluded on purpose. It marks an element that script can
 * focus but Tab cannot reach — WooCommerce puts it on every checkout notice and
 * focuses it after an AJAX update. Included, that painted a 3px blue ring
 * around the "free shipping" banner, which read as an error state.
 */
:where(a, button, input, select, textarea, summary,
	[tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 3px solid var(--sc-blue-ring);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Latin runs inside Hebrew — part numbers, model names, prices — reverse
 * without this. `isolate` keeps the run intact; `plaintext` lets each element
 * pick its own base direction from its first strong character. */
.sc-ltr,
.sc-sku strong,
.sc-card__sku,
.sc-spectable td,
.sc-models__item,
.sc-modelchip,
.sc-filter__name,
.sc-keyspecs__v {
	unicode-bidi: plaintext;
}

/* An explicit LTR island, for when the content is known to be Latin. */
.sc-num, .sc-partnum {
	direction: ltr;
	unicode-bidi: isolate;
	display: inline-block;
}

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

.sc-skip {
	position: absolute; inset-inline-start: 0; top: -100px;
	background: var(--sc-navy); color: #fff;
	padding: .75rem 1.25rem; z-index: 999;
}
.sc-skip:focus { top: 0; }

/* ---------------------------------------------------------------- layout */
.sc-container {
	width: 100%;
	max-width: var(--sc-max);
	margin-inline: auto;
	padding-inline: var(--sc-pad-x);
}

.sc-main { padding-block: var(--sc-gap-2) var(--sc-gap-3); }
@media (min-width: 900px) { .sc-main { padding-block: var(--sc-gap-2) var(--sc-gap-4); } }

.sc-section { padding-block: var(--sc-s10); }
@media (min-width: 900px) { .sc-section { padding-block: var(--sc-s16); } }
.sc-section--soft { background: var(--sc-bg-soft); }

.sc-section__head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--sc-gap); flex-wrap: wrap; margin-bottom: var(--sc-gap-2);
}
.sc-section__title { margin: 0; font-size: var(--sc-fs-h2); }
/* 24px is the floor at every pointer type (WCAG 2.5.8), not just on touch —
 * this link resolves to a 22px line box on its own. */
.sc-section__link {
	display: inline-flex; align-items: center; min-height: 24px;
	font-size: var(--sc-fs-sm); font-weight: 600; white-space: nowrap;
}

/* Long copy needs a measure. 68ch is ~65 Hebrew characters. */
.sc-measure { max-width: 68ch; }

/* --------------------------------------------------------------- buttons */
.sc-btn,
.button,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 48px;             /* 44px is the floor; 48 is comfortable */
	padding: 0 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--sc-r);
	background: var(--sc-blue);
	color: #fff;
	font-family: var(--sc-font);
	font-weight: 600;
	font-size: var(--sc-fs-md);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--sc-dur-fast) var(--sc-ease),
		transform var(--sc-dur-fast) var(--sc-ease);
}
.sc-btn:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--sc-blue-dark);
	color: #fff;
}
.sc-btn:active, .button:active { transform: translateY(1px); }

/*
 * "Add to cart" is blue everywhere on the site, with no exception. It used to
 * be blue in the grid and magenta on the product page — the same action wearing
 * two faces, which is the fastest way to make an interface feel unreliable.
 */
.sc-btn--primary,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce .single_add_to_cart_button {
	background: var(--sc-blue);
	color: #fff;
}
.sc-btn--primary:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover { background: var(--sc-blue-dark); }

.sc-btn--secondary,
.sc-btn--ghost {
	background: #fff;
	color: var(--sc-ink);
	border-color: var(--sc-line-strong);
}
.sc-btn--secondary:hover,
.sc-btn--ghost:hover { background: var(--sc-bg-soft); color: var(--sc-ink); }

.sc-btn--link {
	background: transparent; border-color: transparent;
	color: var(--sc-blue-dark); min-height: 44px; padding-inline: .5rem;
}
.sc-btn--link:hover { background: var(--sc-blue-light); color: var(--sc-blue-dark); }

/* Light green carries navy text. White on #25D366 measures 1.98. */
.sc-btn--wa {
	background: var(--sc-wa);
	color: var(--sc-wa-ink);
}
.sc-btn--wa:hover { background: #1fbd5b; color: var(--sc-wa-ink); }

.sc-btn--danger { background: var(--sc-err); color: #fff; }

.sc-btn--sm { min-height: 40px; font-size: var(--sc-fs-sm); padding: 0 .875rem; }
.sc-btn--lg { min-height: 52px; font-size: var(--sc-fs-lg); }
.sc-btn--block { width: 100%; }

/* Dimming with opacity drags the label below contrast minimums. A disabled
 * control should read as "off", not as "faint". */
.sc-btn:disabled,
.sc-btn[disabled],
.button[disabled],
[aria-disabled="true"] {
	background: var(--sc-bg-sunken);
	color: var(--sc-ink-3);
	border-color: var(--sc-line);
	cursor: not-allowed;
	opacity: 1;
	transform: none;
}

.sc-iconbtn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border: 0; background: transparent; border-radius: var(--sc-r);
	color: var(--sc-ink); cursor: pointer; text-decoration: none;
	position: relative; flex: none;
}
.sc-iconbtn:hover { background: var(--sc-bg-soft); color: var(--sc-blue); }
.sc-iconbtn svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------- icon sizing */
/*
 * An icon with an explicit width/height attribute keeps it; everything else
 * scales with the surrounding text. The `:not([width])` guard is what stops
 * this default from overriding the attribute, which CSS would otherwise win.
 */
.sc-icon { flex: none; }
.sc-icon:not([width]) { width: 1.25em; height: 1.25em; }
.sc-btn .sc-icon:not([width]) { width: 1.15em; height: 1.15em; }

/* ----------------------------------------------------------------- badges */
.sc-badge {
	display: inline-flex; align-items: center; gap: .25rem;
	padding: .25rem .5rem; border-radius: var(--sc-r-sm);
	font: 600 var(--sc-fs-xs) / 1.2 var(--sc-font);
	white-space: nowrap;
}
.sc-badge--deal, .sc-badge--sale {
	background: var(--sc-deal-bg); color: var(--sc-deal-ink);
}
.sc-badge--stock { background: var(--sc-ok-bg); color: var(--sc-ok); }
.sc-badge--out   { background: var(--sc-bg-sunken); color: var(--sc-ink-2); }
.sc-badge--new   { background: var(--sc-blue-light); color: var(--sc-blue-dark); }

/* Woo's own flash is replaced by the saving-amount badge in functions.php. */
.woocommerce span.onsale { display: none; }

/* ----------------------------------------------------------------- fields */
.sc-field,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
input[type="text"], input[type="search"], input[type="email"],
input[type="tel"], input[type="number"], input[type="password"],
select, textarea {
	width: 100%;
	min-height: 48px;
	padding: .75rem 1rem;
	/* 16px exactly. Anything smaller makes iOS zoom the page on focus and the
	 * layout never fully recovers. This is not a design preference. */
	font-size: 16px;
	font-family: var(--sc-font);
	color: var(--sc-ink);
	background: #fff;
	border: 1px solid var(--sc-line-strong);
	border-radius: var(--sc-r-sm);
}
textarea { min-height: 96px; }

.sc-field::placeholder, input::placeholder, textarea::placeholder {
	color: var(--sc-ink-3);
	opacity: 1;
}
.sc-field:focus, input:focus, select:focus, textarea:focus {
	border-color: var(--sc-blue);
	box-shadow: 0 0 0 3px rgba(19, 97, 201, .18);
	outline: none;
}
.sc-field[aria-invalid="true"], input[aria-invalid="true"] { border-color: var(--sc-err); }

.sc-label {
	display: block; margin-bottom: .375rem;
	font-weight: 600; font-size: var(--sc-fs-sm); color: var(--sc-ink-2);
}
.sc-error {
	display: flex; align-items: center; gap: .35rem;
	margin-top: .35rem; font-size: var(--sc-fs-sm); color: var(--sc-err-ink);
}

/* Colour alone is not an accessible signal, so the marker keeps a glyph. */
.woocommerce abbr.required {
	border: 0; text-decoration: none; color: var(--sc-err-ink);
}

/*
 * Quantity stepper: two real targets instead of the native spinner, whose
 * arrows are a few pixels tall and effectively unusable with a thumb.
 * Assembled by main.js so it also covers markup WooCommerce renders itself.
 */
/*
 * The stepper runs left-to-right even in an RTL page. It is a numeric control,
 * and "minus on the left, plus on the right" is how one is read everywhere;
 * mirroring it put the plus where the eye expects the minus.
 */
.sc-stepper {
	display: inline-flex; align-items: stretch; width: auto;
	direction: ltr;
}
.sc-stepper__btn {
	width: 44px; min-height: 48px; flex: none;
	border: 1px solid var(--sc-line-strong); background: #fff;
	color: var(--sc-ink); font-size: 1.25rem; font-weight: 600;
	line-height: 1; cursor: pointer; padding: 0;
	display: grid; place-items: center;
	-webkit-tap-highlight-color: transparent;
}
.sc-stepper__btn:hover { background: var(--sc-bg-soft); }
/*
 * Rounding keyed to the button's role, not its position. WooCommerce puts a
 * screen-reader <label> inside `.quantity`, so `:first-child` was the label
 * rather than the minus button and only one end of the control got a corner.
 * The container is forced LTR above, so minus is always the left cap.
 */
.sc-stepper__btn--minus { border-radius: var(--sc-r-sm) 0 0 var(--sc-r-sm); }
.sc-stepper__btn--plus  { border-radius: 0 var(--sc-r-sm) var(--sc-r-sm) 0; }
.sc-stepper input.qty {
	width: 54px; min-height: 48px; text-align: center;
	border-radius: 0; border-inline: 0; padding-inline: 0;
	-moz-appearance: textfield;
}
.sc-stepper input.qty::-webkit-outer-spin-button,
.sc-stepper input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce div.product form.cart .quantity { flex: none; }

/* ----------------------------------------------------------------- logo */
/*
 * The mark ships as a cached .svg file rather than inline markup: it is a
 * fixed four-colour graphic that needs no `currentColor`, and inlining its
 * traced path data would add ~20KB of HTML to every single page.
 *
 * The word SEDCOM is live text, not artwork. No wordmark vector was supplied,
 * and text is sharper at every size, weighs nothing, stays selectable and
 * searchable, and recolours for a dark background with one CSS rule.
 */
.sc-logo {
	display: inline-flex; align-items: center; gap: .55rem;
	text-decoration: none; color: var(--sc-ink);
}
.sc-logo__mark {
	/*
	 * 36px, not the 32 the spec suggests. At 32 the mark is 39px wide, and the
	 * logo link — a real target, it goes home — lands under 44x44. 36px makes
	 * it 43.6 wide, which reaches the floor without any padding hack.
	 */
	height: 36px;
	width: auto;
	flex: none;
	/* Explicit ratio so the header never reflows once the SVG arrives. */
	aspect-ratio: 971 / 801;
}
.sc-logo__text { display: none; flex-direction: column; line-height: 1.05; }
.sc-logo__name {
	font-size: 1.3rem; font-weight: 800; letter-spacing: .04em; color: inherit;
}
.sc-logo__tag {
	font-size: .655rem; font-weight: 600; color: var(--sc-ink-3);
	letter-spacing: .005em;
}

/* Below 900px the header shows the mark alone — the wordmark costs ~140px of
 * a 360px bar, which the search and cart need more. */
@media (min-width: 900px) {
	.sc-logo__mark { height: 40px; }
	.sc-logo__text { display: flex; }
}

.sc-logo--on-dark { color: #fff; }
.sc-logo--on-dark .sc-logo__name { color: #fff; }
.sc-logo--on-dark .sc-logo__tag  { color: #c6d3e8; }

/* Footer lockup shows the full word at any width — there is room there. */
.sc-logo--lg .sc-logo__text { display: flex; }
.sc-logo--lg .sc-logo__mark { height: 48px; }
.sc-logo--lg .sc-logo__name { font-size: 1.5rem; }

/* ---------------------------------------------------------------- topbar */
.sc-topbar {
	background: var(--sc-navy);
	color: #cfe0f2;
	font-size: var(--sc-fs-xs);
}
.sc-topbar__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--sc-gap); min-height: 36px; flex-wrap: wrap;
}
.sc-topbar a { color: #cfe0f2; text-decoration: none; }
.sc-topbar a:hover { color: #fff; text-decoration: underline; }
.sc-topbar__list { display: none; gap: 1rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) {
	.sc-topbar__list { display: flex; }
}
/* The utility bar is pure overhead on a phone; the bottom nav covers it. */
@media (max-width: 599px) { .sc-topbar { display: none; } }

/* ---------------------------------------------------------------- header */
.sc-header {
	position: sticky; top: 0; z-index: 60;
	background: #fff;
	border-bottom: 1px solid var(--sc-line);
	transition: transform var(--sc-dur) var(--sc-ease),
		box-shadow var(--sc-dur) var(--sc-ease);
}
/* Retracts on downward scroll and returns on the first upward flick, buying
 * back 56px of a small screen without hiding navigation for good. */
.sc-header.is-hidden { transform: translateY(-100%); }
.sc-header.is-stuck  { box-shadow: var(--sc-shadow-sm); }
@media (min-width: 900px) {
	.sc-header.is-hidden { transform: none; }
}

.sc-header__inner {
	display: flex; align-items: center; gap: .25rem;
	min-height: var(--sc-header-h);
}
.sc-header__brand { display: flex; align-items: center; gap: .25rem; }
.sc-header__search { display: none; flex: 1; margin-inline: var(--sc-gap); }
@media (min-width: 900px) {
	.sc-header__search { display: block; }
}
.sc-header__actions { display: flex; align-items: center; gap: .1rem; margin-inline-start: auto; }

/* The phone number lives in the bottom nav on small screens. */
.sc-header__phone {
	display: none; align-items: center; gap: .45rem;
	font-weight: 700; color: var(--sc-ink); text-decoration: none;
	padding-inline: .6rem; white-space: nowrap;
}
@media (min-width: 1200px) { .sc-header__phone { display: inline-flex; } }

.sc-cart__count {
	position: absolute; top: 3px; inset-inline-end: 3px;
	min-width: 18px; height: 18px; padding: 0 4px;
	display: grid; place-items: center;
	background: var(--sc-blue); color: #fff;
	border-radius: var(--sc-r-pill);
	font-size: .68rem; font-weight: 700; line-height: 1;
}
/* An empty cart badge is noise. */
.sc-cart__count:empty,
.sc-cart__count[data-count="0"] { display: none; }

@media (min-width: 900px) { .sc-burger { display: none; } }
/* The magnifier only opens an overlay on small screens. */
@media (min-width: 900px) { .sc-header__searchtoggle { display: none; } }

/* ---------------------------------------------------------------- search */
.sc-search { position: relative; display: flex; }
.sc-search input[type="search"] {
	width: 100%;
	padding-inline: 1rem 3rem;
	border-radius: var(--sc-r-pill);
	background: var(--sc-bg-soft);
	border-color: var(--sc-line-strong);
}
.sc-search input:focus { background: #fff; }
.sc-search__submit {
	position: absolute; inset-inline-end: 5px; top: 50%; transform: translateY(-50%);
	width: 38px; height: 38px; min-height: 0; padding: 0;
	border: 0; border-radius: 50%;
	background: var(--sc-blue); color: #fff; cursor: pointer;
	display: grid; place-items: center;
}
.sc-search__submit:hover { background: var(--sc-blue-dark); }
.sc-search__hint { font-size: var(--sc-fs-xs); color: var(--sc-ink-3); margin: .3rem 0 0; }

/*
 * Full-screen search on mobile. A permanently visible field would eat the whole
 * header width; an overlay gives the query the entire screen, plus room for the
 * shortcuts that make a parts catalogue searchable at all.
 */
.sc-searchpanel {
	position: fixed; inset: 0; z-index: 95;
	background: #fff;
	display: flex; flex-direction: column;
	transform: translateY(-8px);
	opacity: 0; visibility: hidden;
	transition: opacity var(--sc-dur) var(--sc-ease),
		transform var(--sc-dur) var(--sc-ease),
		visibility var(--sc-dur);
}
.sc-searchpanel.is-open { opacity: 1; visibility: visible; transform: none; }
.sc-searchpanel__bar {
	display: flex; align-items: center; gap: .5rem;
	padding: var(--sc-s3) var(--sc-pad-x);
	border-bottom: 1px solid var(--sc-line);
}
.sc-searchpanel__bar .sc-search { flex: 1; }
.sc-searchpanel__body {
	flex: 1; overflow-y: auto; overscroll-behavior: contain;
	padding: var(--sc-s5) var(--sc-pad-x);
}
.sc-searchpanel__group { margin-bottom: var(--sc-s6); }
.sc-searchpanel__label {
	display: flex; align-items: baseline; justify-content: space-between;
	font-size: var(--sc-fs-sm); font-weight: 700; color: var(--sc-ink-2);
	margin-bottom: .6rem;
}
.sc-searchpanel__foot {
	border-top: 1px solid var(--sc-line);
	padding: var(--sc-s3) var(--sc-pad-x)
		calc(var(--sc-s3) + var(--sc-safe-b));
}
@media (min-width: 900px) { .sc-searchpanel { display: none; } }

/* Recent searches / manufacturer / type shortcuts. */
.sc-chipset { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }

/* ------------------------------------------------------------- bottom nav */
/*
 * The single largest usability gain on this site. Without it every action —
 * search, cart, categories, WhatsApp — required scrolling back to the top of a
 * long catalogue page to reach the hamburger.
 *
 * It replaces the floating WhatsApp button rather than joining it: two fixed
 * controls in the same corner compete and together cover real content.
 */
.sc-bottomnav {
	position: fixed; inset-inline: 0; bottom: 0; z-index: 70;
	height: calc(var(--sc-bottomnav-h) + var(--sc-safe-b));
	padding-bottom: var(--sc-safe-b);
	display: grid; grid-template-columns: repeat(5, 1fr);
	background: #fff;
	border-top: 1px solid var(--sc-line);
	box-shadow: var(--sc-shadow-up);
}
.sc-bottomnav__item {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 2px; min-height: 44px; position: relative;
	font-family: var(--sc-font);
	font-size: 11px; font-weight: 600; line-height: 1.2;
	color: var(--sc-ink-2); text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	/* Two of the five items are <button>, which otherwise arrive wearing the
	 * platform's grey bevel and read as pressed next to the plain links. */
	background: none; border: 0; padding: 0; cursor: pointer; appearance: none;
}
.sc-bottomnav__item:hover { color: var(--sc-blue); }
.sc-bottomnav__item:active { background: var(--sc-bg-soft); }
.sc-bottomnav__item[aria-current="page"] { color: var(--sc-blue); }
.sc-bottomnav__item svg { width: 22px; height: 22px; }
.sc-bottomnav__item .sc-cart__count { top: 4px; inset-inline-end: 50%; margin-inline-end: -20px; }
@media (min-width: 900px) { .sc-bottomnav { display: none; } }

/* ------------------------------------------------------------- primary nav */
.sc-nav { background: #fff; border-bottom: 1px solid var(--sc-line); }
.sc-nav__list {
	display: flex; align-items: center; gap: .25rem;
	list-style: none; margin: 0; padding: 0;
}
.sc-nav__list li { position: relative; }
.sc-nav__list a {
	display: block; padding: .85rem .8rem;
	color: var(--sc-ink); text-decoration: none;
	font-weight: 600; font-size: var(--sc-fs-sm); border-radius: var(--sc-r);
}
.sc-nav__list a:hover { color: var(--sc-blue); background: var(--sc-blue-light); }
.sc-nav__list a[aria-current] { color: var(--sc-blue); }

.sc-nav__sub {
	position: absolute; top: 100%; inset-inline-start: 0; z-index: 70;
	min-width: 260px; padding: .4rem;
	background: #fff; border: 1px solid var(--sc-line);
	border-radius: var(--sc-r); box-shadow: var(--sc-shadow-lg);
	list-style: none; margin: 0;
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity var(--sc-dur-fast) var(--sc-ease),
		transform var(--sc-dur-fast) var(--sc-ease), visibility var(--sc-dur-fast);
}
.sc-nav__sub a { font-weight: 500; padding: .55rem .7rem; }
.sc-nav__close { display: none; margin-inline-start: auto; }

/* Off-canvas below the tablet breakpoint. */
@media (max-width: 899px) {
	.sc-nav {
		/*
		 * Above the scrim (85), not below it. At z-index 80 the whole menu
		 * rendered behind its own backdrop: greyed out, and every link
		 * swallowed by the scrim's pointer-events. It matches the filter
		 * sheet's 90 because it is the same kind of layer.
		 */
		position: fixed; inset: 0; z-index: 90;
		background: #fff; overflow-y: auto;
		transform: translateX(100%);
		/*
		 * `visibility` matters as much as the transform here. A panel parked
		 * off-screen by transform alone is still in the tab order, so a
		 * keyboard user tabbing through the page falls into a menu they cannot
		 * see. Transitioning visibility rather than setting it outright keeps
		 * the slide-out animation intact.
		 */
		visibility: hidden;
		transition: transform var(--sc-dur) var(--sc-ease),
			visibility var(--sc-dur);
		border: 0;
		padding: var(--sc-gap) var(--sc-pad-x)
			calc(var(--sc-gap) + var(--sc-safe-b));
	}
	.sc-nav.is-open { transform: translateX(0); visibility: visible; }

	/* Sticky panel header: brand for orientation, and a close button that is
	 * actually reachable. Flex had previously pushed it past the end of an
	 * 80-item list, so the only way out was the backdrop. */
	.sc-nav__head {
		position: sticky; top: 0; z-index: 2;
		display: flex; align-items: center; justify-content: space-between;
		gap: var(--sc-gap);
		padding: .5rem var(--sc-pad-x);
		min-height: var(--sc-header-h);
		background: #fff; border-bottom: 1px solid var(--sc-line);
	}
	.sc-nav__close { display: inline-flex; }
	.sc-nav__body { padding-block: var(--sc-s2) var(--sc-s6); }

	.sc-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.sc-nav__list > li { border-bottom: 1px solid var(--sc-line-2); }
	.sc-nav__list a {
		padding: .9rem .25rem; border-radius: 0;
		display: flex; align-items: center; min-height: 48px;
	}
	.sc-nav__list > li > a { font-weight: 700; }

	/*
	 * Sub-menus collapse. Every category expanded meant about eighty links in
	 * one scroll — "chargers" alone carries twelve brands — which is a list
	 * nobody reads, only scrolls past.
	 */
	.sc-nav__sub {
		position: static; box-shadow: none; border: 0;
		padding: 0 0 .5rem; min-width: 0;
		opacity: 1; visibility: visible; transform: none;
		display: none;
	}
	.sc-nav__item.is-open > .sc-nav__sub { display: block; }
	.sc-nav__sub li { border: 0; }
	.sc-nav__sub a {
		padding-inline-start: 1.75rem; color: var(--sc-ink-2);
		font-weight: 500; min-height: 44px;
	}

	/* The disclosure sits beside the link, so the parent category stays
	 * navigable in its own right instead of being only a toggle. */
	.sc-nav__row { display: flex; align-items: center; }
	.sc-nav__row > a { flex: 1; }
	.sc-nav__toggle {
		flex: none; width: 44px; height: 44px;
		display: grid; place-items: center;
		background: none; border: 0; cursor: pointer; color: var(--sc-ink-3);
	}
	.sc-nav__toggle::after {
		content: ""; width: 8px; height: 8px;
		border: solid currentColor; border-width: 0 2px 2px 0;
		transform: rotate(45deg); transition: transform var(--sc-dur) var(--sc-ease);
	}
	.sc-nav__item.is-open > .sc-nav__row .sc-nav__toggle::after { transform: rotate(-135deg); }

	/* Contact block at the foot of the panel. */
	.sc-nav__extra {
		display: grid; gap: .1rem;
		margin-top: var(--sc-s5); padding-top: var(--sc-s4);
		border-top: 1px solid var(--sc-line);
	}
	.sc-nav__extralink {
		display: flex; align-items: center; gap: .6rem;
		min-height: 48px; text-decoration: none;
		color: var(--sc-ink-2); font-size: var(--sc-fs-sm); font-weight: 600;
	}
	.sc-nav__extralink svg { color: var(--sc-ink-3); }
	.sc-nav__extralink--hours { pointer-events: none; }
	.sc-nav__wa { margin-top: var(--sc-s4); }
}

/* Panel-only furniture; the desktop bar shows none of it. */
@media (min-width: 900px) {
	.sc-nav__head, .sc-nav__extra, .sc-nav__wa, .sc-nav__toggle { display: none; }
	.sc-nav__body { display: flex; align-items: center; }
	.sc-nav__row { display: contents; }
}
@media (min-width: 900px) {
	.sc-nav__list li:hover > .sc-nav__sub,
	.sc-nav__list li:focus-within > .sc-nav__sub {
		opacity: 1; visibility: visible; transform: translateY(0);
	}
}

/* ------------------------------------------------------------------ hero */
/*
 * Light, not dark. Two reasons, in order of weight:
 *   1. The logo's charcoal outline scores 1.17 against navy — on a dark hero
 *      the mark loses its defining edge and reads as a blue smudge.
 *   2. A single dark band at the top of an otherwise white site reads as a
 *      patch. The one dark region on this site is the footer, which anchors
 *      the page instead of interrupting it.
 */
.sc-hero {
	position: relative;
	background: linear-gradient(180deg, var(--sc-hero-from), var(--sc-hero-to));
	color: var(--sc-hero-ink);
	padding-block: var(--sc-s8);
	overflow: hidden;
	border-bottom: 1px solid var(--sc-line-2);
}
@media (min-width: 900px) { .sc-hero { padding-block: var(--sc-s12); } }

/* The logo's own blue field, enlarged and nearly transparent. Using a real
 * brand shape beats an abstract blob: it is the mark's silhouette, so the
 * decoration is on-brand by construction. */
.sc-hero::before {
	content: "";
	position: absolute;
	inset-block-start: -22%;
	inset-inline-start: -12%;
	width: min(560px, 62%);
	aspect-ratio: 971 / 801;
	background: url("../img/brand-field.svg") no-repeat center / contain;
	opacity: .07;
	pointer-events: none;
}
@media (max-width: 599px) { .sc-hero::before { opacity: .05; width: 78%; } }

/*
 * Phone: headline, then the finder, then the alternatives. Source order is
 * already that, so no reordering is needed — which also keeps the tab order
 * matching what is on screen.
 *
 * Desktop: the copy and the alternatives stack in the first column with the
 * finder alongside, which is the layout the wide screen has room for.
 */
.sc-hero__grid {
	display: grid; gap: var(--sc-gap-2);
	position: relative; z-index: 1;
}
@media (min-width: 900px) {
	.sc-hero__grid {
		grid-template-columns: 1.05fr .95fr;
		grid-template-areas:
			"copy  finder"
			"aside finder";
		align-content: center;
		align-items: start;
		gap: var(--sc-gap-2) var(--sc-gap-3);
	}
	.sc-hero__copy   { grid-area: copy; align-self: end; }
	.sc-hero__aside  { grid-area: aside; }
	.sc-hero__finder { grid-area: finder; align-self: center; }
}

.sc-hero__eyebrow {
	display: inline-flex; align-items: center; gap: .45rem;
	background: #fff;
	border: 1px solid var(--sc-line);
	color: var(--sc-ink-2);
	padding: .35rem .8rem; border-radius: var(--sc-r-pill);
	font-size: var(--sc-fs-xs); font-weight: 700; margin-bottom: .9rem;
}
.sc-hero__title {
	color: var(--sc-hero-ink);
	font-size: var(--sc-fs-display);
	font-weight: 800;
	margin-bottom: .5rem;
	letter-spacing: -.01em;
}
.sc-hero__title em { font-style: normal; color: var(--sc-blue); }
.sc-hero__lead {
	color: var(--sc-ink-2); font-size: var(--sc-fs-lg);
	max-width: 46ch; margin-bottom: 1.25rem;
}
/*
 * Secondary to the finder above them, so they are normal-height buttons rather
 * than the --lg they used to be: at 52px each they read as the main event.
 */
.sc-hero__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; }
.sc-hero__actions .sc-btn { flex: 1 1 45%; }
@media (min-width: 900px) {
	.sc-hero__actions .sc-btn { flex: 0 1 auto; }
}

/* Stats push the finder below the fold on a phone, so they move under the
 * trust bar there and only appear inside the hero from tablet up. */
.sc-hero__stats { display: none; flex-wrap: wrap; gap: var(--sc-gap-2); }
@media (min-width: 900px) { .sc-hero__stats { display: flex; } }
.sc-hero__stat strong {
	display: block; font-size: var(--sc-fs-h2); color: var(--sc-ink); line-height: 1.1; font-weight: 800;
}
.sc-hero__stat span { font-size: var(--sc-fs-xs); color: var(--sc-ink-3); }

/* Same numbers, shown after the trust bar on small screens. */
.sc-statstrip {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: var(--sc-gap); text-align: center;
	padding-block: var(--sc-s5);
}
.sc-statstrip strong { display: block; font-size: var(--sc-fs-h3); font-weight: 800; }
.sc-statstrip span { font-size: var(--sc-fs-xs); color: var(--sc-ink-3); }
@media (min-width: 900px) { .sc-statstrip { display: none; } }

/* ---------------------------------------------------------------- finder */
.sc-finder {
	background: #fff;
	color: var(--sc-ink);
	border-radius: var(--sc-r-lg);
	padding: var(--sc-gap-2);
	box-shadow: var(--sc-shadow-lg);
	border: 1px solid var(--sc-line);
}
.sc-finder__title { font-size: var(--sc-fs-h3); margin-bottom: .35rem; }
.sc-finder__subtitle { color: var(--sc-ink-2); font-size: var(--sc-fs-sm); margin-bottom: 1.1rem; }
.sc-finder__row { display: grid; gap: .7rem; }
@media (min-width: 600px) { .sc-finder__row { grid-template-columns: 1fr 1fr; } }
.sc-finder__row > .sc-finder__go { grid-column: 1 / -1; }
.sc-finder__field { display: flex; flex-direction: column; gap: .3rem; }
.sc-finder__label { font-size: var(--sc-fs-xs); font-weight: 700; color: var(--sc-ink-2); }
.sc-finder__select { background: #fff; }
/* A live control must never read as disabled. The "show matching parts" button
 * was a pale blue that looked switched off even when it worked. */
.sc-finder__go { min-height: 50px; background: var(--sc-blue); color: #fff; }
.sc-finder__go:hover:not([disabled]) { background: var(--sc-blue-dark); }
.sc-finder__hint { font-size: var(--sc-fs-xs); color: var(--sc-ink-3); margin: .9rem 0 0; }
.sc-finder__hint a { display: inline-block; padding-block: .2rem; min-height: 24px; }
.sc-finder.is-compact { box-shadow: none; padding: var(--sc-gap); }

/* -------------------------------------------------------------- trust bar */
.sc-trust { background: var(--sc-bg-soft); border-block: 1px solid var(--sc-line); }
.sc-trust__list {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: var(--sc-gap); list-style: none; margin: 0; padding: var(--sc-s5) 0;
}
@media (min-width: 900px) { .sc-trust__list { grid-template-columns: repeat(4, 1fr); } }
.sc-trust__item { display: flex; align-items: center; gap: .65rem; }
.sc-trust__icon {
	flex: none; width: 40px; height: 40px; border-radius: var(--sc-r);
	display: grid; place-items: center;
	background: #fff; border: 1px solid var(--sc-line); color: var(--sc-blue);
}
.sc-trust__icon svg { width: 20px; height: 20px; }
.sc-trust__text strong { display: block; font-size: var(--sc-fs-sm); }
.sc-trust__text span { font-size: var(--sc-fs-xs); color: var(--sc-ink-3); }

/* ------------------------------------------------------------ category tiles */
.sc-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sc-gap); }
@media (min-width: 600px)  { .sc-cats { grid-template-columns: repeat(3, 1fr); } }
/*
 * Four across on desktop, not six. The section shows eight categories, and six
 * columns leave a stranded row of two under a full row of six — a gap the width
 * of four tiles, right in the middle of the homepage. Four columns divide eight
 * exactly, and they match the product grid directly below, so the two sections
 * line up instead of arguing.
 */
@media (min-width: 900px)  { .sc-cats { grid-template-columns: repeat(4, 1fr); } }

.sc-cat {
	position: relative; display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--sc-line);
	border-radius: var(--sc-r-lg); overflow: hidden;
	text-decoration: none; color: var(--sc-ink);
	transition: border-color var(--sc-dur-fast) var(--sc-ease),
		box-shadow var(--sc-dur-fast) var(--sc-ease);
}
.sc-cat:hover { border-color: var(--sc-blue); box-shadow: var(--sc-shadow); color: var(--sc-ink); }
.sc-cat__media {
	aspect-ratio: 4 / 3; background: var(--sc-bg-soft); overflow: hidden; display: block;
}
.sc-cat__media img { width: 100%; height: 100%; object-fit: contain; padding: 12%; }
/*
 * The drawn tile. Its viewBox is 4:3, the same as the media box, so it fills
 * edge to edge with no padding and no letterbox — the illustration carries its
 * own background, which is what makes the grid read as one set.
 */
.sc-cat__art { display: block; width: 100%; height: 100%; }
/*
 * The lift on hover is the illustration's, not the tile's: the object leaves
 * its shadow behind for 2px, which is enough to feel like a response and small
 * enough that a grid of six doing it at once is not a circus.
 */
.sc-cat__art-obj { transition: transform var(--sc-dur) var(--sc-ease); }
.sc-cat:hover .sc-cat__art-obj { transform: translateY(-2.5px); }
@media (prefers-reduced-motion: reduce) {
	.sc-cat__art-obj { transition: none; }
	.sc-cat:hover .sc-cat__art-obj { transform: none; }
}
.sc-cat__body { padding: .75rem .85rem 1rem; }
.sc-cat__name { display: block; font-size: var(--sc-fs-sm); font-weight: 700; margin-bottom: .15rem; }
.sc-cat__count { font-size: var(--sc-fs-xs); color: var(--sc-ink-3); }
@media (min-width: 900px) { .sc-cat__name { font-size: var(--sc-fs-md); } }

/* ---------------------------------------------------------- product grid */
/*
 * Two columns on a phone, not one. For a parts catalogue the visitor is
 * scanning many near-identical items; two columns roughly halve the scroll,
 * and ~180px is still enough for image, two-line name, SKU, price and button.
 */
.sc-grid,
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sc-gap);
	list-style: none; margin: 0; padding: 0;
}
@media (min-width: 600px)  { .sc-grid, .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sc-grid, .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-gap-2); } }

.woocommerce ul.products li.product,
.sc-grid li.product {
	position: relative;
	display: flex; flex-direction: column;
	margin: 0 !important; width: auto !important; float: none !important;
	background: #fff;
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-r-lg);
	overflow: hidden;
	transition: border-color var(--sc-dur-fast) var(--sc-ease),
		box-shadow var(--sc-dur-fast) var(--sc-ease);
}
.woocommerce ul.products li.product:hover {
	border-color: var(--sc-blue);
	box-shadow: var(--sc-shadow);
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex; flex-direction: column; flex: 1;
	text-decoration: none; color: inherit; padding: 0;
}
/* Reserving the square before the image loads is what stops the grid from
 * jumping as thumbnails arrive. */
.woocommerce ul.products li.product img {
	width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
	background: var(--sc-bg-soft); padding: 8%;
	margin: 0 !important;
}
/*
 * Clamping to two lines *and* reserving their height keeps every card in a row
 * the same height. Without the min-height, a one-line name and a two-line name
 * produce ragged cards — the most common blemish in a two-column grid.
 */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--sc-fs-sm) !important;
	font-weight: 600; line-height: 1.35;
	padding: 0 .75rem !important; margin: .5rem 0 .25rem !important;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2 * 1.35em);
}
.sc-card__sku {
	display: block; padding: 0 .75rem; margin-bottom: .3rem;
	font-size: var(--sc-fs-xs); color: var(--sc-ink-3); font-weight: 600;
}
.sc-card__stock {
	display: block; padding: 0 .75rem; margin-bottom: .35rem;
	font-size: var(--sc-fs-xs); font-weight: 600; color: var(--sc-ok);
}
.sc-card__stock--out { color: var(--sc-ink-3); }

.woocommerce ul.products li.product .price {
	display: block; padding: 0 .75rem; margin: auto 0 .6rem !important;
	color: var(--sc-price) !important;
	font-size: var(--sc-fs-lg) !important; font-weight: 800;
}
.woocommerce ul.products li.product .price del {
	color: var(--sc-was) !important; font-size: var(--sc-fs-sm);
	font-weight: 500; margin-inline-start: .35rem;
}
.woocommerce ul.products li.product .price ins {
	text-decoration: none; color: var(--sc-price) !important;
}

.woocommerce ul.products li.product .button {
	margin: 0 .75rem .75rem !important;
	width: calc(100% - 1.5rem);
	min-height: 40px;
	font-size: var(--sc-fs-sm);
}
.woocommerce ul.products li.product .added_to_cart {
	margin: 0 .75rem .75rem; font-size: var(--sc-fs-xs);
}

/* The saving badge sits over the image; amber reads as "offer" without
 * outshouting the price the way the old magenta did. */
.woocommerce ul.products li.product .sc-badge,
.sc-grid li.product .sc-badge {
	position: absolute; top: .5rem; inset-inline-start: .5rem; z-index: 2;
}

/* Placeholder shimmer for anything still loading. */
.sc-skel {
	background: linear-gradient(90deg,
		var(--sc-bg-soft) 25%, var(--sc-bg-sunken) 37%, var(--sc-bg-soft) 63%);
	background-size: 400% 100%;
	animation: scShimmer 1.4s ease infinite;
	border-radius: var(--sc-r-sm);
}
@keyframes scShimmer {
	0%   { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

/* ---------------------------------------------------------- shop layout */
.sc-shop { display: grid; gap: var(--sc-gap-2); }
@media (min-width: 900px) {
	.sc-shop { grid-template-columns: 260px 1fr; align-items: start; gap: var(--sc-gap-2); }
}
@media (min-width: 1200px) {
	.sc-shop { grid-template-columns: 280px 1fr; gap: var(--sc-gap-3); }
}
.sc-shop__side { position: sticky; top: calc(var(--sc-header-h) + 12px); }

/* Below the tablet breakpoint the sidebar becomes a bottom sheet. A drawer
 * that slides in from the side is hard to reach one-handed; a sheet rises into
 * the thumb zone and can be dismissed by dragging down. */
@media (max-width: 899px) {
	.sc-shop__side {
		position: fixed; inset-inline: 0; bottom: 0; top: auto; z-index: 90;
		max-height: 85vh;
		display: flex; flex-direction: column;
		background: #fff;
		border-radius: var(--sc-r-xl) var(--sc-r-xl) 0 0;
		box-shadow: var(--sc-shadow-lg);
		transform: translateY(100%);
		/* Same reasoning as the off-canvas menu: a sheet held below the fold by
		 * transform alone still catches Tab. */
		visibility: hidden;
		transition: transform var(--sc-dur-slow) var(--sc-ease-out),
			visibility var(--sc-dur-slow);
		padding: 0;
		overflow: hidden;
	}
	.sc-shop__side.is-open { transform: translateY(0); visibility: visible; }
	.sc-shop__head {
		display: flex; align-items: center; justify-content: space-between;
		gap: var(--sc-gap);
		padding: var(--sc-s3) var(--sc-pad-x);
		border-bottom: 1px solid var(--sc-line);
	}
	.sc-shop__scroll {
		flex: 1; overflow-y: auto; overscroll-behavior: contain;
		padding: var(--sc-s4) var(--sc-pad-x);
	}
	.sc-shop__foot {
		border-top: 1px solid var(--sc-line);
		padding: var(--sc-s3) var(--sc-pad-x) calc(var(--sc-s3) + var(--sc-safe-b));
	}
	/* Drag handle — signals "you can pull this down". */
	.sc-shop__grip {
		width: 40px; height: 4px; border-radius: 2px; flex: none;
		background: var(--sc-line-strong); margin: .6rem auto .2rem;
	}
}
@media (min-width: 900px) {
	.sc-shop__grip, .sc-shop__foot, .sc-shop__head .sc-iconbtn { display: none; }
	.sc-shop__scroll { padding: 0; }
}

.sc-filterbar__toggle { flex: none; }
@media (min-width: 900px) { .sc-filterbar__toggle { display: none; } }

.sc-widget { margin-bottom: var(--sc-gap-2); }
.sc-widget__title {
	font-size: var(--sc-fs-md); margin-bottom: .6rem;
	padding-bottom: .5rem; border-bottom: 1px solid var(--sc-line);
}
.sc-widget ul { list-style: none; padding: 0; margin: 0; }
.sc-widget li { padding: .28rem 0; font-size: var(--sc-fs-sm); }
.sc-widget a { text-decoration: none; color: var(--sc-ink-2); }
.sc-widget a:hover { color: var(--sc-blue); }

.sc-archive__head { margin-bottom: var(--sc-gap-2); }
.sc-archive__title { margin-bottom: .3rem; }
.sc-archive__desc { color: var(--sc-ink-2); max-width: 68ch; }
.sc-archive__seo {
	margin-top: var(--sc-gap-3); padding-top: var(--sc-gap-2);
	border-top: 1px solid var(--sc-line);
	color: var(--sc-ink-2); font-size: var(--sc-fs-sm); max-width: 68ch;
}

.woocommerce .woocommerce-result-count { color: var(--sc-ink-3); font-size: var(--sc-fs-sm); margin: 0; }
.woocommerce .woocommerce-ordering { margin: 0; }
.woocommerce .woocommerce-ordering select { min-height: 44px; width: auto; }

.sc-toolbar {
	display: flex; align-items: center; gap: .5rem;
	flex-wrap: wrap; margin-bottom: var(--sc-gap);
	padding-bottom: .75rem; border-bottom: 1px solid var(--sc-line);
}
.sc-toolbar__count { margin-inline-start: auto; }

/* Active filters, each removable in one tap. */
.sc-activefilters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--sc-gap); list-style: none; padding: 0; }
.sc-activefilters .sc-chip { background: var(--sc-blue-light); border-color: var(--sc-blue-light); color: var(--sc-blue-dark); }

.sc-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0 0 var(--sc-gap-2); }
.sc-chip {
	display: inline-flex; align-items: center; gap: .4rem;
	min-height: 36px; padding: .4rem .85rem; border-radius: var(--sc-r-pill);
	background: var(--sc-bg-soft); border: 1px solid var(--sc-line);
	font-size: var(--sc-fs-sm); font-weight: 600;
	text-decoration: none; color: var(--sc-ink);
}
.sc-chip:hover { background: var(--sc-blue-light); border-color: var(--sc-blue); color: var(--sc-blue-dark); }
.sc-chip__count { font-size: var(--sc-fs-xs); color: var(--sc-ink-3); font-weight: 500; }

/* ----------------------------------------------------------- breadcrumbs */
.sc-crumbs {
	font-size: var(--sc-fs-xs); color: var(--sc-ink-3);
	margin-bottom: var(--sc-gap);
	display: flex; gap: .35rem; align-items: center;
	/* One line that scrolls, rather than a block that wraps to three. */
	overflow-x: auto; white-space: nowrap;
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sc-crumbs::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .sc-crumbs { flex-wrap: wrap; white-space: normal; overflow: visible; } }
.sc-crumbs a { color: var(--sc-ink-3); text-decoration: none; }
.sc-crumbs a:hover { color: var(--sc-blue); text-decoration: underline; }
.sc-crumb__sep { opacity: .55; }

/* --------------------------------------------------------- single product */
.woocommerce div.product { display: grid; gap: var(--sc-gap-2); }
@media (min-width: 900px) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--sc-gap-3);
		align-items: start;
	}
	.woocommerce div.product .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
	.woocommerce div.product .summary { grid-column: 2; grid-row: 1; margin: 0 !important; width: auto !important; }
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related,
	.woocommerce div.product .upsells { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
	.woocommerce div.product { grid-template-columns: 55fr 45fr; }
}
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .summary { width: auto !important; float: none !important; }

/*
 * The gallery: one main image, the rest as a thumbnail strip.
 *
 * WooCommerce prints every gallery image as a sibling. Rather than sliding
 * them, the first is given the main area and the others are laid out as a row
 * of thumbnails underneath; clicking one swaps it into the main slot
 * (initGallery in main.js). No FlexSlider, so nothing depends on a stylesheet
 * this theme deliberately does not load.
 *
 * The frame is capped rather than filling its grid column. At 1600px the column
 * is ~650px wide, and a 650px photograph of a laptop battery is not more useful
 * than a 420px one - it just pushes the price and the buy button down.
 */
.woocommerce div.product .woocommerce-product-gallery {
	border: 1px solid var(--sc-line); border-radius: var(--sc-r-lg);
	padding: var(--sc-s2); background: #fff; overflow: hidden;
	max-width: 26rem;
	margin-inline: auto;
}
@media (min-width: 900px) {
	.woocommerce div.product .woocommerce-product-gallery { margin-inline: 0; }
}
.woocommerce div.product .woocommerce-product-gallery__wrapper {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: .5rem;
}
/* The main image spans the whole row above the thumbnails. */
.woocommerce div.product .woocommerce-product-gallery__image:first-child,
.woocommerce div.product .woocommerce-product-gallery__image.is-main {
	grid-column: 1 / -1;
}
/* A single-image product has no strip and no reason to reserve room for one. */
.woocommerce div.product .woocommerce-product-gallery__wrapper:has(> :only-child) {
	display: block;
}
.woocommerce div.product .woocommerce-product-gallery__image:not(:first-child):not(.is-main) {
	border: 1px solid var(--sc-line); border-radius: var(--sc-r-sm);
	cursor: pointer; padding: 2px; background: #fff;
	transition: border-color .15s ease;
}
.woocommerce div.product .woocommerce-product-gallery__image:not(:first-child):not(.is-main):hover,
.woocommerce div.product .woocommerce-product-gallery__image.is-active {
	border-color: var(--sc-blue);
}
.woocommerce div.product .woocommerce-product-gallery__image:not(:first-child):not(.is-main) img {
	aspect-ratio: 1 / 1; object-fit: contain;
}
/*
 * The zoom overlay is meant to be larger than its frame — that is how the
 * magnifier works — and is meant to be clipped by it. Without WooCommerce's
 * stylesheet the frame has no `overflow`, so a 453px image escaped a 390px
 * screen.
 */
.woocommerce div.product .woocommerce-product-gallery__image {
	position: relative;
	overflow: hidden;
	border-radius: var(--sc-r);
}
.woocommerce div.product .woocommerce-product-gallery img {
	border-radius: var(--sc-r);
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	background: #fff;
}

.woocommerce div.product .product_title {
	font-size: var(--sc-fs-h1); margin-bottom: .4rem;
}
.sc-sku { font-size: var(--sc-fs-sm); color: var(--sc-ink-2); margin-bottom: .6rem; }
.sc-sku span { color: var(--sc-ink-3); }
.sc-sku strong { font-weight: 800; color: var(--sc-ink); letter-spacing: .02em; }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: var(--sc-fs-price) !important; font-weight: 800;
	color: var(--sc-price) !important; margin: .6rem 0 1rem;
	display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.woocommerce div.product p.price del {
	font-size: var(--sc-fs-lg); color: var(--sc-was) !important; font-weight: 500;
}
.woocommerce div.product p.price ins { text-decoration: none; color: var(--sc-price) !important; }

.sc-stock {
	display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
	font-size: var(--sc-fs-sm); font-weight: 600;
	margin: -.5rem 0 1rem;
}
.sc-stock--in  { color: var(--sc-ok); }
.sc-stock--out { color: var(--sc-ink-3); }
/* Delivery is context, not a claim of its own — it should not read as loudly
 * as the in-stock confirmation next to it. */
.sc-stock__sep { color: var(--sc-line-strong); }
.sc-stock__ship { color: var(--sc-ink-2); font-weight: 500; }

/* The saving, inline with the price rather than floating over the image. */
.sc-price__saving { align-self: center; }

.sc-keyspecs {
	display: flex; flex-wrap: wrap; gap: .45rem;
	list-style: none; padding: 0; margin: 0 0 1rem;
}
.sc-keyspecs li {
	display: inline-flex; align-items: baseline; gap: .35rem;
	background: var(--sc-bg-soft); border: 1px solid var(--sc-line);
	border-radius: var(--sc-r-sm); padding: .35rem .7rem; font-size: var(--sc-fs-xs);
}
.sc-keyspecs__k { color: var(--sc-ink-3); }
.sc-keyspecs__v { font-weight: 700; }

/* Generated description for products that were imported without one. Styled to
   read as ordinary product copy rather than as a system message — the facts in
   it are the same facts a written description would state. */
.sc-spec-summary p { margin: 0 0 .9rem; }
.sc-spec-summary__ask {
	color: var(--sc-ink-3);
	border-inline-start: 3px solid var(--sc-line);
	padding-inline-start: .7rem;
	margin-bottom: 0;
}

.woocommerce div.product form.cart {
	margin-bottom: 1rem; display: flex; flex-wrap: wrap;
	gap: .6rem; align-items: stretch;
}
/* Sized by the stepper rules above; kept only so a no-JS page still looks
 * deliberate rather than like a stray box. */
.woocommerce div.product form.cart .quantity input {
	min-height: 52px; text-align: center; padding-inline: .25rem;
}
.woocommerce div.product form.cart .sc-stepper input.qty,
.woocommerce div.product form.cart .sc-stepper .sc-stepper__btn { min-height: 52px; }
.woocommerce div.product .single_add_to_cart_button {
	min-height: 52px; flex: 1 1 180px;
}

.sc-whatsapp {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	width: 100%; min-height: 48px;
	margin-top: .3rem; padding: .7rem 1rem;
	border: 0; border-radius: var(--sc-r);
	background: var(--sc-wa); color: var(--sc-wa-ink);
	font-weight: 700; font-size: var(--sc-fs-sm); text-decoration: none;
}
.sc-whatsapp:hover { background: #1fbd5b; color: var(--sc-wa-ink); }
.sc-whatsapp__icon { width: 20px; height: 20px; flex: none; }

.sc-assurances {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem;
	list-style: none; padding: var(--sc-gap) 0 0; margin: var(--sc-gap) 0 0;
	border-top: 1px solid var(--sc-line);
}
.sc-assurances__item { font-size: var(--sc-fs-xs); }
.sc-assurances__item strong { display: block; color: var(--sc-ink-3); font-weight: 600; }
.sc-assurances__item span { font-weight: 700; color: var(--sc-ink); }

/* --------------------------------------------------- sticky buy bar (mobile) */
/*
 * On a long product page the purchase control scrolls away and the visitor has
 * to hunt back up for it. This bar reappears the moment the real button leaves
 * the viewport, and sits above the bottom nav rather than over it.
 */
.sc-buybar {
	position: fixed; inset-inline: 0;
	bottom: calc(var(--sc-bottomnav-h) + var(--sc-safe-b));
	z-index: 65;
	display: flex; align-items: center; gap: var(--sc-gap);
	padding: .6rem var(--sc-pad-x);
	background: #fff;
	border-top: 1px solid var(--sc-line);
	box-shadow: var(--sc-shadow-up);
	transform: translateY(120%);
	visibility: hidden;
	transition: transform var(--sc-dur) var(--sc-ease-out),
		visibility var(--sc-dur);
}
.sc-buybar.is-visible { transform: translateY(0); visibility: visible; }
.sc-buybar__info { flex: none; line-height: 1.2; }
.sc-buybar__price { display: block; font-size: var(--sc-fs-lg); font-weight: 800; color: var(--sc-price); }
.sc-buybar__stock { display: block; font-size: var(--sc-fs-xs); color: var(--sc-ok); font-weight: 600; }
.sc-buybar__cta { flex: 1; min-height: 48px; }
@media (min-width: 900px) { .sc-buybar { display: none; } }

/* ------------------------------------------------------------- panels */
/*
 * The product tabs are rendered as disclosures at every width (see the
 * tabs.php override). Horizontal tabs truncate on a phone, and — the real
 * objection — they hide the compatibility list, which is the one thing most
 * visitors arrived to check. Disclosures also let several sections stay open,
 * give each panel a deep-linkable id, and leave every panel in the markup for
 * a crawler.
 */
.sc-panels { margin-top: var(--sc-gap-2); }
.sc-panels .woocommerce-Tabs-panel > h2:first-child { display: none; }
/*
 * Separate cards, spaced like separate cards. They previously overlapped by
 * -1px to collapse their borders, which works for square edges but not for
 * rounded ones: the result was two distinct boxes glued together, reading as
 * neither one panel nor two.
 */
.sc-accordion {
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-r-lg);
	overflow: hidden;
	background: #fff;
}
.sc-accordion + .sc-accordion { margin-top: var(--sc-s3); }
.sc-accordion__summary {
	display: flex; align-items: center; justify-content: space-between; gap: var(--sc-gap);
	min-height: 52px; padding: .85rem var(--sc-gap);
	font-weight: 700; cursor: pointer; list-style: none;
	background: #fff;
}
.sc-accordion__summary::-webkit-details-marker { display: none; }
.sc-accordion__summary::after {
	content: ""; flex: none;
	width: 9px; height: 9px; margin-inline-start: auto;
	border: solid var(--sc-ink-3); border-width: 0 2px 2px 0;
	transform: rotate(45deg); transition: transform var(--sc-dur) var(--sc-ease);
}
.sc-accordion[open] > .sc-accordion__summary::after { transform: rotate(-135deg); }
.sc-accordion__body { padding: 0 var(--sc-gap) var(--sc-gap); border-top: 1px solid var(--sc-line-2); padding-top: var(--sc-gap); }

/* ------------------------------------------------------------ spec table */
.sc-spectable { width: 100%; border-collapse: collapse; font-size: var(--sc-fs-sm); }
.sc-spectable th, .sc-spectable td {
	padding: .6rem .8rem; text-align: start;
	border-bottom: 1px solid var(--sc-line-2); vertical-align: top;
}
.sc-spectable th { width: 40%; color: var(--sc-ink-3); font-weight: 600; }
.sc-spectable td { font-weight: 600; }
.sc-spectable tr:last-child th, .sc-spectable tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------- compatible models */
/*
 * This list is the site's competitive advantage — up to 179 models per product.
 * As a dense grid of links it is unusable on a phone. As wrapped chips with a
 * live filter, the visitor types their model and sees a green tick or a
 * WhatsApp escape hatch.
 */
.sc-models__intro {
	display: grid; gap: var(--sc-gap); margin-bottom: var(--sc-gap);
}
@media (min-width: 600px) {
	.sc-models__intro { grid-template-columns: 1fr auto; align-items: center; }
}
.sc-models__count { font-size: var(--sc-fs-h3); font-weight: 700; margin: 0; }
.sc-models__count strong { color: var(--sc-blue-dark); }
.sc-models__search input { border-radius: var(--sc-r-pill); background: var(--sc-bg-soft); }
.sc-models__search input:focus { background: #fff; }

.sc-models__group { margin-bottom: var(--sc-gap-2); }
.sc-models__brand { font-size: var(--sc-fs-sm); color: var(--sc-ink-3); margin-bottom: .5rem; font-weight: 700; }
.sc-models__list {
	display: flex; flex-wrap: wrap; gap: .4rem;
	list-style: none; padding: 0; margin: 0;
}
.sc-models__item { margin: 0; }
.sc-modelchip {
	display: inline-flex; align-items: center; gap: .3rem;
	min-height: 32px; padding: .3rem .7rem;
	border-radius: var(--sc-r-pill);
	background: var(--sc-bg-soft); border: 1px solid var(--sc-line);
	font-size: var(--sc-fs-sm); font-weight: 600;
	color: var(--sc-ink-2); text-decoration: none;
}
.sc-modelchip:hover { border-color: var(--sc-blue); color: var(--sc-blue-dark); }
/* A hit is marked with a tick as well as colour — colour alone is not a signal. */
.sc-models__item.is-match .sc-modelchip {
	background: var(--sc-ok-bg); border-color: var(--sc-ok); color: var(--sc-ok);
}
.sc-models__item.is-hidden { display: none; }
/* Long lists start truncated; typing in the filter expands them, so a match is
 * never left hidden behind a "show more" the visitor did not press. */
.sc-models:not(.is-expanded) .sc-models__item.is-overflow { display: none; }
.sc-models__empty { color: var(--sc-ink-3); font-size: var(--sc-fs-sm); }
.sc-models__ask { margin: var(--sc-gap) 0 0; }
.sc-models__hit {
	display: flex; align-items: center; gap: .5rem;
	background: var(--sc-ok-bg); color: var(--sc-ok);
	border-radius: var(--sc-r); padding: .7rem 1rem;
	font-weight: 700; font-size: var(--sc-fs-sm); margin-bottom: var(--sc-gap);
}
.sc-models__more { margin-top: .75rem; }

/* ------------------------------------------------------------- model page */
.sc-model__header {
	background: var(--sc-bg-soft); border: 1px solid var(--sc-line);
	border-radius: var(--sc-r-lg); padding: var(--sc-gap-2);
	margin-block: var(--sc-gap) var(--sc-gap-3);
}
.sc-model__title { margin-bottom: .4rem; }
.sc-model__lead { color: var(--sc-ink-2); max-width: 62ch; }
.sc-model__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.sc-model__group { margin-bottom: var(--sc-gap-3); }
.sc-model__grouphead {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: var(--sc-gap); flex-wrap: wrap; margin-bottom: var(--sc-gap);
}
.sc-model__subtitle { font-size: var(--sc-fs-h3); margin: 0; }
.sc-model__all { font-size: var(--sc-fs-sm); font-weight: 600; white-space: nowrap; }
.sc-model__help, .sc-model__empty {
	background: var(--sc-blue-light); border-radius: var(--sc-r-lg);
	padding: var(--sc-gap-2); margin-top: var(--sc-gap-3);
}

/* ------------------------------------------------------------ empty state */
/*
 * A dead end is a design surface. Someone who searched and found nothing is
 * one tap from leaving, so this offers the three things that recover them:
 * search again, browse something concrete, or ask a person.
 */
.sc-empty {
	background: var(--sc-bg-soft); border: 1px solid var(--sc-line);
	border-radius: var(--sc-r-lg);
	padding: var(--sc-gap-2); margin-block: var(--sc-gap);
}
.sc-empty__title { font-size: var(--sc-fs-h3); margin-bottom: .5rem; }
.sc-empty p { color: var(--sc-ink-2); font-size: var(--sc-fs-sm); }
.sc-empty__search { margin-block: var(--sc-gap); }
.sc-empty__label { font-weight: 600; margin-bottom: .5rem; }
.sc-empty__ask { margin: var(--sc-gap) 0 0; }

/* -------------------------------------------------------------- services */
.sc-services { display: grid; grid-template-columns: 1fr; gap: var(--sc-gap); }
@media (min-width: 600px) { .sc-services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .sc-services { grid-template-columns: repeat(3, 1fr); } }
.sc-service {
	display: flex; flex-direction: column; gap: .4rem;
	padding: var(--sc-gap-2); text-decoration: none; color: inherit;
	background: #fff; border: 1px solid var(--sc-line); border-radius: var(--sc-r-lg);
	transition: border-color var(--sc-dur-fast) var(--sc-ease),
		box-shadow var(--sc-dur-fast) var(--sc-ease);
}
.sc-service:hover { border-color: var(--sc-blue); box-shadow: var(--sc-shadow); color: inherit; }
.sc-service__icon {
	width: 44px; height: 44px; display: grid; place-items: center;
	border-radius: var(--sc-r); background: var(--sc-blue-light); color: var(--sc-blue-dark);
}
.sc-service__icon .sc-icon { width: 24px; height: 24px; }
.sc-service__name { font-size: var(--sc-fs-h3); font-weight: 700; margin: 0; }
.sc-service__desc { font-size: var(--sc-fs-sm); color: var(--sc-ink-2); margin: 0; }

/* ---------------------------------------------------------------- footer */
/*
 * The only dark region on the site. It anchors the page and, unlike the old
 * navy hero, it is the right place for the brand-sky blue — 6.87 against this
 * background.
 */
.sc-footer {
	background: var(--sc-navy); color: #a9c0da;
	margin-top: var(--sc-gap-4);
	position: relative; overflow: hidden;
}
.sc-footer a { color: #a9c0da; text-decoration: none; }
.sc-footer a:hover { color: #fff; text-decoration: underline; }
.sc-footer__brand { margin-bottom: var(--sc-gap); }
.sc-footer__grid {
	display: grid; gap: var(--sc-gap-2);
	padding-block: var(--sc-gap-3);
	grid-template-columns: 1fr;
	position: relative; z-index: 1;
}
@media (min-width: 600px)  { .sc-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .sc-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sc-gap-3); } }
.sc-footer__title { color: #fff; font-size: var(--sc-fs-md); margin-bottom: .8rem; }
.sc-footer ul { list-style: none; padding: 0; margin: 0; }
.sc-footer li { padding: .2rem 0; font-size: var(--sc-fs-sm); }
.sc-footer__contact li { display: flex; gap: .5rem; align-items: flex-start; }
.sc-footer__contact strong { color: #fff; font-weight: 600; flex: none; }
.sc-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-block: var(--sc-gap);
	display: flex; flex-wrap: wrap; gap: var(--sc-gap); justify-content: space-between;
	font-size: var(--sc-fs-xs);
	position: relative; z-index: 1;
}

/* The mark's swoosh, oversized and faint — the same trick as the hero, at the
 * other end of the page. */
.sc-footer::after {
	content: "";
	position: absolute;
	inset-block-end: -30%;
	inset-inline-end: -8%;
	width: min(680px, 70%);
	aspect-ratio: 971 / 801;
	background: url("../img/brand-field.svg") no-repeat center / contain;
	opacity: .06;
	pointer-events: none;
}

/*
 * Link columns are <details> so a phone gets three headings instead of three
 * open lists — expanded, they put about a screen and a half of links between
 * the visitor and the end of every page.
 *
 * They start closed in the markup, which is the right default for the small
 * screen. From 600px up there is room for all of them, so they are forced open
 * in CSS as well as by script: doing it in CSS means no flash of collapsed
 * columns before main.js runs.
 */
.sc-footer__col > .sc-footer__title { list-style: none; }
.sc-footer__col > .sc-footer__title::-webkit-details-marker { display: none; }

@media (max-width: 599px) {
	.sc-footer__col > .sc-footer__title {
		display: flex; align-items: center; justify-content: space-between;
		cursor: pointer; margin: 0; min-height: 48px; padding-block: .85rem;
		border-bottom: 1px solid rgba(255, 255, 255, .1);
	}
	.sc-footer__col > .sc-footer__title::after {
		content: ""; width: 8px; height: 8px; flex: none;
		border: solid #a9c0da; border-width: 0 2px 2px 0;
		transform: rotate(45deg); transition: transform var(--sc-dur) var(--sc-ease);
	}
	.sc-footer__col[open] > .sc-footer__title::after { transform: rotate(-135deg); }
	.sc-footer__col ul { padding-block: .5rem; }
	/* The grid gap would otherwise space three collapsed headings far apart. */
	.sc-footer__grid { gap: 0; }
	.sc-footer__grid > div:first-child { margin-bottom: var(--sc-gap-2); }
}

@media (min-width: 600px) {
	.sc-footer__col > *:not(summary) { display: block; }
	.sc-footer__col::details-content { content-visibility: visible; block-size: auto; }
	/* A heading that is always open should not look clickable. */
	.sc-footer__col > .sc-footer__title { cursor: default; pointer-events: none; }
}

/* ---------------------------------------------------------------- sheet */
/*
 * Generic bottom sheet. The filter panel builds its own because it doubles as
 * the desktop sidebar; this is for overlays that only ever exist on a phone.
 */
.sc-sheet {
	position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
	max-height: 85vh;
	display: flex; flex-direction: column;
	background: #fff;
	border-radius: var(--sc-r-xl) var(--sc-r-xl) 0 0;
	box-shadow: var(--sc-shadow-lg);
	transform: translateY(100%);
	visibility: hidden;
	transition: transform var(--sc-dur-slow) var(--sc-ease-out),
		visibility var(--sc-dur-slow);
	overflow: hidden;
}
.sc-sheet.is-open { transform: translateY(0); visibility: visible; }
.sc-sheet__grip {
	width: 40px; height: 4px; border-radius: 2px; flex: none;
	background: var(--sc-line-strong); margin: .6rem auto .2rem;
}
.sc-sheet__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--sc-gap); flex: none;
	padding: var(--sc-s2) var(--sc-pad-x);
	border-bottom: 1px solid var(--sc-line);
}
.sc-sheet__title { font-size: var(--sc-fs-h3); margin: 0; }
.sc-sheet__body {
	flex: 1; overflow-y: auto; overscroll-behavior: contain;
	padding: var(--sc-s2) var(--sc-pad-x);
}
.sc-sheet__foot {
	flex: none; border-top: 1px solid var(--sc-line);
	padding: var(--sc-s3) var(--sc-pad-x) calc(var(--sc-s3) + var(--sc-safe-b));
}
@media (min-width: 900px) { .sc-sheet { display: none; } }

.sc-catlist { list-style: none; margin: 0; padding: 0; }
.sc-catlist__item {
	display: flex; align-items: center; gap: .75rem;
	min-height: 56px; padding: .5rem 0;
	text-decoration: none; color: var(--sc-ink);
	border-bottom: 1px solid var(--sc-line-2);
}
.sc-catlist li:last-child .sc-catlist__item { border-bottom: 0; }
.sc-catlist__icon {
	flex: none; width: 40px; height: 40px; border-radius: var(--sc-r-sm);
	display: grid; place-items: center;
	background: var(--sc-blue-light); color: var(--sc-blue-dark);
}
.sc-catlist__icon .sc-icon { width: 22px; height: 22px; }
.sc-catlist__name { flex: 1; font-weight: 600; font-size: var(--sc-fs-sm); }
.sc-catlist__count {
	flex: none; font-size: var(--sc-fs-xs); font-weight: 600;
	color: var(--sc-ink-3);
}

/* -------------------------------------------------------- sheet & scrim */
.sc-scrim {
	position: fixed; inset: 0; z-index: 85;
	background: rgba(11, 23, 39, .5);
	opacity: 0; pointer-events: none;
	transition: opacity var(--sc-dur) var(--sc-ease);
}
.sc-scrim.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 900px) { .sc-scrim { display: none; } }

/* Locks the page behind an open sheet without losing the scroll position. */
body.sc-locked { overflow: hidden; }

/* ------------------------------------------------------------- misc woo */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	border-top: 0; border-inline-start: 4px solid var(--sc-blue);
	background: var(--sc-blue-light); color: var(--sc-ink);
	border-radius: var(--sc-r); padding: 1rem 1.2rem; margin-bottom: var(--sc-gap);
}
/*
 * Good news should not look like a form instruction.
 *
 * Deliberately NOT a flex container. WooCommerce writes these notices as a
 * bare text node with an inline <strong> — "ההזמנה זכאית ל<strong>משלוח
 * חינם</strong>" — and flex promotes each of those to its own item, so a
 * `gap` opens a hole in the middle of the sentence.
 */
.woocommerce .woocommerce-message {
	border-inline-start-color: var(--sc-ok);
	background: var(--sc-ok-bg); color: var(--sc-ok);
}
/*
 * `:not(.button)` is the whole point. Without it the "view cart" button inside
 * the notice inherited this dark green as its text colour while keeping its
 * blue background — 1.6:1, effectively unreadable.
 */
.woocommerce .woocommerce-message a:not(.button) { color: var(--sc-ok); }
/* Its own line, so it never lands mid-sentence the way an inline button does. */
.woocommerce .woocommerce-message .button {
	display: flex; width: fit-content;
	margin: 0 0 .6rem; min-height: 44px;
	background: var(--sc-blue); color: #fff;
}
.woocommerce .woocommerce-message .button:hover { background: var(--sc-blue-dark); color: #fff; }
.woocommerce .woocommerce-error {
	border-inline-start-color: var(--sc-err);
	background: var(--sc-err-bg); color: var(--sc-err-ink);
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before { display: none; }

/* ------------------------------------------------------------- checkout */
/*
 * The checkout opened with four stacked notice panels — roughly 340px before
 * the first field, on a 844px screen. Two of them said the same thing: the
 * theme prints its own, better-worded returning-customer line, and WooCommerce
 * printed a second one directly beneath it.
 *
 * Hiding the toggle wrapper removes the duplicate message while leaving the
 * login form itself in place — `a.showlogin` in the theme's line still opens it.
 */
.woocommerce-form-login-toggle { display: none; }

/*
 * Anchor target for the #register links (Sedcom_Accounts::register_anchor).
 *
 * It sits inside the registration form, which means a bare jump lands just
 * under the "הרשמה" heading and the visitor arrives at a form with no visible
 * title - indistinguishable from the login form they were trying to leave.
 * scroll-margin-top pulls the stop far enough back that the heading is on
 * screen, and clears the sticky header at the same time.
 */
.sc-anchor {
	display: block;
	scroll-margin-top: 8rem;
}

/*
 * Arriving by the link should be visible, not just positionally correct.
 * :target styles the anchor itself, so the cue is drawn on the sibling form
 * through the general sibling combinator - no JavaScript for what is a purely
 * presentational hint.
 */
.sc-anchor:target ~ .woocommerce-form-register,
.woocommerce-form-register:has(.sc-anchor:target) {
	animation: sc-register-cue 1.6s ease-out 1;
}

@keyframes sc-register-cue {
	0%   { box-shadow: 0 0 0 3px var(--sc-accent, #0b6ea8); }
	100% { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.sc-anchor:target ~ .woocommerce-form-register,
	.woocommerce-form-register:has(.sc-anchor:target) { animation: none; }
}

/* The coupon prompt is a footnote, not an announcement. */
.woocommerce-form-coupon-toggle .woocommerce-info {
	background: none; border: 0; padding: 0;
	margin-bottom: var(--sc-s3);
	color: var(--sc-ink-3); font-size: var(--sc-fs-sm);
}
.woocommerce form.checkout_coupon,
.woocommerce form.login.checkout_login,
.woocommerce-checkout form.login {
	border: 1px solid var(--sc-line); border-radius: var(--sc-r-lg);
	padding: var(--sc-gap); margin-bottom: var(--sc-gap);
}
/*
 * Present and posting its value, just not asking a question with one answer.
 *
 * `!important` is load-bearing here, not laziness: WooCommerce's address-i18n
 * script writes an inline `display:block` on every address row as it applies
 * the country's locale rules, and an inline style beats any class selector.
 * This is the documented way to override it.
 */
.form-row.sc-field-hidden { display: none !important; }

.woocommerce .checkout h3 { font-size: var(--sc-fs-h3); margin-top: var(--sc-s6); }
/* Two meta groups, "categories" and "brand", ran together on one line. */
.woocommerce div.product .product_meta > span { display: block; margin-bottom: .2rem; }
.woocommerce #order_review_heading { font-size: var(--sc-fs-h3); margin-top: var(--sc-s8); }
.woocommerce #payment ul.payment_methods { padding: 0; border: 0; }
.woocommerce #payment ul.payment_methods li {
	list-style: none; padding: .75rem 0; border-bottom: 1px solid var(--sc-line-2);
}
.woocommerce #payment div.form-row { padding: var(--sc-gap) 0 0; }
.woocommerce #payment #place_order { width: 100%; min-height: 52px; font-size: var(--sc-fs-lg); }

/*
 * WooCommerce's password reveal is positioned by its own stylesheet, which this
 * theme dequeues. Left unstyled it detaches and floats below the field as a
 * stray grey pill.
 */
.woocommerce form .form-row .woocommerce-password-hint,
.woocommerce-password-strength { font-size: var(--sc-fs-xs); }
.woocommerce form .password-input,
.woocommerce form .woocommerce-password-input { position: relative; display: block; }
.woocommerce form .show-password-input {
	position: absolute; inset-inline-end: 10px; top: 50%;
	transform: translateY(-50%);
	width: 32px; height: 32px; cursor: pointer;
	display: grid; place-items: center; border-radius: 50%;
}
.woocommerce form .show-password-input::after {
	content: "👁"; font-size: 1rem; line-height: 1; opacity: .55;
}
.woocommerce form .show-password-input.display-password::after { opacity: 1; }
/* Keep the revealed text clear of the button. */
.woocommerce form .password-input input { padding-inline-end: 48px; }

.woocommerce nav.woocommerce-pagination ul {
	border: 0; display: flex; gap: .35rem; justify-content: center;
	margin-top: var(--sc-gap-3); flex-wrap: wrap;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 44px; min-height: 44px; display: grid; place-items: center;
	border: 1px solid var(--sc-line); border-radius: var(--sc-r);
	padding: 0 .6rem; font-weight: 600; color: var(--sc-ink-2);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--sc-blue); border-color: var(--sc-blue); color: #fff;
}

.woocommerce table.shop_table { border-radius: var(--sc-r-lg); border-color: var(--sc-line); }

/* ------------------------------------------------------------------ cart */
/*
 * WooCommerce's cart is a six-column table. At 390px that leaves the product
 * name about 90px wide, so a name like "LED WXGA HD 15.6 Glossy מסך למחשב נייד"
 * wraps to five lines while three numeric columns sit nearly empty beside it.
 *
 * Below the tablet breakpoint each row becomes a card instead. WooCommerce
 * already writes a `data-title` on every cell, so the row labels come for free
 * rather than being hard-coded here and drifting out of translation.
 */
@media (max-width: 899px) {
	.woocommerce table.shop_table_responsive thead,
	.woocommerce table.shop_table.cart thead { display: none; }

	.woocommerce table.shop_table.cart,
	.woocommerce table.shop_table.cart tbody { display: block; width: 100%; border: 0; }

	/*
	 * The coupon and "update cart" row is a plain <tr> holding one colspan
	 * cell. Left as a table-row inside a block tbody the browser wraps it in
	 * an anonymous table box, which indented the whole block and left it
	 * misaligned with the product card above by about 85px.
	 */
	.woocommerce table.shop_table.cart tbody > tr:not(.cart_item) { display: block; width: 100%; }
	/*
	 * `.actions` is excluded: it is laid out as a flex column below, and this
	 * selector is more specific, so including it here silently overrode that
	 * and left the update button at its intrinsic width.
	 */
	.woocommerce table.shop_table.cart tbody > tr:not(.cart_item) > td:not(.actions) {
		display: block; width: 100%; padding: 0; border: 0;
	}

	/*
	 * Three columns, not two. The quantity stepper is ~142px wide, so putting
	 * it in the 72px thumbnail column made it overrun the subtotal beside it.
	 * The thumbnail spans all three rows; quantity takes the flexible middle
	 * column and the subtotal sizes to its own content at the end.
	 */
	.woocommerce table.shop_table.cart tr.cart_item {
		display: grid;
		grid-template-columns: 72px 1fr auto;
		grid-template-areas:
			"thumb name  name"
			"thumb price price"
			"thumb qty   subtotal";
		gap: .3rem .75rem;
		align-items: center;
		position: relative;
		/* Logical, not the physical shorthand: the remove button is pinned to
		 * inline-end, so in RTL a `padding-right` reserved the space on the
		 * opposite side and the button landed on top of the product name. */
		padding-block: var(--sc-s4);
		padding-inline: var(--sc-s4) 2.75rem;
		margin-bottom: var(--sc-s3);
		border: 1px solid var(--sc-line);
		border-radius: var(--sc-r-lg);
	}
	.woocommerce table.shop_table.cart td.product-thumbnail { align-self: start; }
	.woocommerce table.shop_table.cart td.product-quantity { justify-self: start; }
	.woocommerce table.shop_table.cart tr.cart_item td {
		display: block; border: 0; padding: 0; text-align: start;
	}
	.woocommerce table.shop_table.cart td.product-thumbnail { grid-area: thumb; }
	.woocommerce table.shop_table.cart td.product-thumbnail img {
		width: 72px; height: 72px; object-fit: contain;
		background: var(--sc-bg-soft); border-radius: var(--sc-r-sm);
	}
	.woocommerce table.shop_table.cart td.product-name { grid-area: name; }
	.woocommerce table.shop_table.cart td.product-name a {
		font-weight: 600; font-size: var(--sc-fs-sm); color: var(--sc-ink);
		text-decoration: none; display: -webkit-box;
		-webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	}
	.woocommerce table.shop_table.cart td.product-price {
		grid-area: price; font-size: var(--sc-fs-xs); color: var(--sc-ink-3);
	}
	.woocommerce table.shop_table.cart td.product-quantity { grid-area: qty; }
	.woocommerce table.shop_table.cart td.product-subtotal {
		grid-area: subtotal; text-align: end;
		font-weight: 800; font-size: var(--sc-fs-lg); color: var(--sc-price);
	}

	/*
	 * Only the unit price is labelled. The subtotal is the largest, boldest
	 * number in the card and sits at the end of the quantity row — labelling it
	 * as well just repeats what the layout already says.
	 */
	.woocommerce table.shop_table.cart td.product-price::before {
		content: attr(data-title) ": ";
		color: var(--sc-ink-3); font-weight: 500;
	}

	/* Remove: a "×" glyph is not a target. Pin it to the corner at full size. */
	.woocommerce table.shop_table.cart td.product-remove {
		position: absolute; inset-block-start: 4px; inset-inline-end: 4px;
	}

	/* The coupon row and the update button are not a table row on a phone. */
	.woocommerce table.shop_table.cart td.actions {
		display: flex; flex-direction: column; gap: .6rem;
		padding: 0; border: 0;
	}
	.woocommerce table.shop_table.cart td.actions .coupon {
		display: flex; gap: .5rem; align-items: stretch;
	}
	.woocommerce table.shop_table.cart td.actions .coupon input { flex: 1; }
}

.woocommerce table.shop_table.cart td.product-remove a.remove {
	display: grid; place-items: center;
	width: 36px; height: 36px; border-radius: 50%;
	font-size: 1.35rem; line-height: 1; text-decoration: none;
	color: var(--sc-ink-3) !important; background: var(--sc-bg-soft);
}
.woocommerce table.shop_table.cart td.product-remove a.remove:hover {
	background: var(--sc-err-bg); color: var(--sc-err-ink) !important;
}

/*
 * "Update cart" is a correction, not a destination — it should not compete
 * with the checkout button for the same blue. Coupons likewise.
 */
.woocommerce table.shop_table.cart td.actions button[name="update_cart"],
.woocommerce table.shop_table.cart td.actions input[name="update_cart"],
.woocommerce table.shop_table.cart td.actions button[name="apply_coupon"] {
	background: #fff; color: var(--sc-ink); border-color: var(--sc-line-strong);
}
.woocommerce table.shop_table.cart td.actions button[name="update_cart"]:hover,
.woocommerce table.shop_table.cart td.actions button[name="apply_coupon"]:hover {
	background: var(--sc-bg-soft); color: var(--sc-ink);
}
/* The one action that leaves this page keeps the primary colour. */
.woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: flex; width: 100%; min-height: 52px; font-size: var(--sc-fs-lg);
}
.woocommerce .cart_totals h2 { font-size: var(--sc-fs-h3); }
.woocommerce .cart-collaterals { width: 100%; }
.woocommerce .cart-collaterals .cart_totals { width: 100%; float: none; }

/*
 * Totals. WooCommerce's default puts the label in a narrow <th>, so
 * "סכום ביניים" wraps onto two lines next to a three-character number.
 */
.woocommerce .cart_totals table.shop_table,
.woocommerce .woocommerce-checkout-review-order-table { width: 100%; border: 0; }
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
	padding: .7rem 0; border: 0; border-bottom: 1px solid var(--sc-line-2);
	vertical-align: top; text-align: start;
}
.woocommerce .cart_totals table.shop_table th {
	width: auto; white-space: nowrap; font-weight: 600; color: var(--sc-ink-2);
}
.woocommerce .cart_totals table.shop_table td { text-align: end; }
.woocommerce .cart_totals table.shop_table tr.order-total th,
.woocommerce .cart_totals table.shop_table tr.order-total td {
	border-bottom: 0; font-size: var(--sc-fs-lg); color: var(--sc-price);
}
.woocommerce .cart_totals table.shop_table tr.order-total td { font-weight: 800; }

/* Shipping choices are radio options, not a bulleted list. */
.woocommerce ul#shipping_method,
.woocommerce-checkout ul#shipping_method {
	list-style: none; margin: 0; padding: 0;
}
.woocommerce ul#shipping_method li {
	display: flex; align-items: center; gap: .5rem;
	padding: .45rem 0; margin: 0;
}
.woocommerce ul#shipping_method li label { margin: 0; font-size: var(--sc-fs-sm); }
.woocommerce ul#shipping_method .amount { font-weight: 700; }
.woocommerce .woocommerce-shipping-destination { font-size: var(--sc-fs-xs); color: var(--sc-ink-3); }

/* Sticky cart / checkout summary, so the total and the next step stay in reach. */
.sc-stickytotal {
	position: sticky; bottom: calc(var(--sc-bottomnav-h) + var(--sc-safe-b));
	z-index: 40;
	display: flex; align-items: center; justify-content: space-between; gap: var(--sc-gap);
	background: #fff; border: 1px solid var(--sc-line); border-radius: var(--sc-r);
	padding: .75rem 1rem; box-shadow: var(--sc-shadow-up);
	margin-top: var(--sc-gap);
}
.sc-stickytotal__sum { font-size: var(--sc-fs-lg); font-weight: 800; }
@media (min-width: 900px) { .sc-stickytotal { position: static; box-shadow: none; } }

/* Free-shipping progress. A concrete gap ("120 ₪ more") converts better than a
 * threshold stated in the abstract. */
.sc-freeship { margin-bottom: var(--sc-gap); font-size: var(--sc-fs-sm); }
.sc-freeship__track {
	height: 6px; border-radius: 3px; background: var(--sc-bg-sunken);
	overflow: hidden; margin-top: .4rem;
}
.sc-freeship__fill { height: 100%; background: var(--sc-ok); border-radius: 3px; }

/* --------------------------------------------------- price on request */
.sc-price-request {
	display: inline-block;
	font-size: var(--sc-fs-md); font-weight: 700;
	color: var(--sc-blue-dark);
}
.sc-request {
	margin: var(--sc-gap) 0; padding: var(--sc-gap-2);
	background: var(--sc-blue-light); border-radius: var(--sc-r-lg);
}
.sc-request__lead { font-size: var(--sc-fs-sm); margin-bottom: .9rem; }
.sc-request__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.woocommerce ul.products li.product .price .sc-price-request { font-size: var(--sc-fs-sm); }

/* ---------------------------------------------------------------- account */
.sc-authlink {
	font-size: var(--sc-fs-sm); font-weight: 700;
	color: var(--sc-ink); text-decoration: none;
	padding: .45rem .5rem; white-space: nowrap; border-radius: var(--sc-r);
}
.sc-authlink:hover { color: var(--sc-blue); background: var(--sc-blue-light); }
.sc-authlink--register { color: var(--sc-blue-dark); }
.sc-authsep { color: var(--sc-line-strong); font-size: var(--sc-fs-sm); }
@media (max-width: 1199px) { .sc-authlink, .sc-authsep { display: none; } }

.sc-account { width: auto; gap: .4rem; padding-inline: .6rem; }
.sc-account__name {
	font-size: var(--sc-fs-sm); font-weight: 700; max-width: 9ch;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 899px) { .sc-account__name { display: none; } }

.sc-checkout-hint {
	background: var(--sc-blue-light); border-radius: var(--sc-r);
	padding: .8rem 1rem; font-size: var(--sc-fs-sm); margin-bottom: var(--sc-gap);
}
.sc-form-alt { font-size: var(--sc-fs-xs); color: var(--sc-ink-3); margin-top: .75rem; }

/* ----------------------------------------------------------------- prose */
/*
 * 68 characters is the measure prose should be read at, and it is the reason
 * the cart table was 535px wide inside a 1280px container: the cart is a page,
 * its shortcode output lands inside .sc-prose, and a shopping table is not
 * prose. The shop pages opt out.
 */
.sc-prose { max-width: 68ch; line-height: var(--sc-lh-relaxed); }
.woocommerce-cart .sc-prose,
.woocommerce-checkout .sc-prose,
.woocommerce-account .sc-prose { max-width: none; }
.sc-prose h2 { font-size: var(--sc-fs-h2); margin-top: 2rem; }
.sc-prose h3 { font-size: var(--sc-fs-h3); margin-top: 1.5rem; }
.sc-prose ul, .sc-prose ol { padding-inline-start: 1.4em; }
.sc-prose li { margin-bottom: .4rem; }
.sc-prose code {
	background: var(--sc-bg-soft); border: 1px solid var(--sc-line);
	border-radius: 5px; padding: .1em .4em; font-size: .9em; unicode-bidi: plaintext;
}
.sc-prose .sc-lead { font-size: var(--sc-fs-lg); color: var(--sc-ink-2); }
.sc-prose .sc-btn { margin-inline-end: .5rem; }
.sc-prose img { border-radius: var(--sc-r); }
.sc-prose table { width: 100%; border-collapse: collapse; font-size: var(--sc-fs-sm); }
.sc-prose th, .sc-prose td {
	padding: .55rem .7rem; border-bottom: 1px solid var(--sc-line-2); text-align: start;
}
/* Tables are the one thing allowed to scroll sideways, inside their own box. */
.sc-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------- reviews */
/*
 * The star control and the review form.
 *
 * WooCommerce draws its stars with an icon font loaded by `woocommerce-general`,
 * which this theme dequeues. Unstyled, each star link falls back to its own
 * accessible label — "Very poor", "Poor", … — so the five of them stretched the
 * review form to 616px inside a 390px viewport and pushed half of it off screen.
 *
 * Drawn here with a text star instead: no extra font, and it scales with the
 * type. The labels stay in the markup for assistive technology.
 */
.woocommerce #respond,
.woocommerce #review_form,
.woocommerce .comment-form { max-width: 100%; }
.woocommerce .comment-form input,
.woocommerce .comment-form textarea { max-width: 100%; }
.woocommerce .comment-reply-title { display: block; font-weight: 700; }

/*
 * WooCommerce wraps the five links in a <span>, so `p.stars` has exactly one
 * child. Making the paragraph a flex row therefore laid out that single span
 * and left the anchors inside it as blocks, one per line - a 40x200 column of
 * stars. The wrapper needs to be the flex container too.
 */
.woocommerce #review_form p.stars,
.woocommerce #review_form p.stars > span {
	display: flex; gap: .15rem; padding: 0;
	/* Rating runs low-to-high; keep that order regardless of page direction. */
	direction: ltr; width: fit-content;
}
.woocommerce #review_form p.stars { margin: 0 0 1rem; }
.woocommerce #review_form p.stars a {
	width: 40px; height: 40px; flex: none;
	display: grid; place-items: center;
	font-size: 0; text-indent: 0; text-decoration: none;
	color: var(--sc-line-strong);
}
.woocommerce #review_form p.stars a::before {
	content: "\2605"; font-size: 1.6rem; line-height: 1;
}
/* Hovering a star fills it and everything before it, as a rating should. */
.woocommerce #review_form p.stars:hover a { color: var(--sc-deal); }
.woocommerce #review_form p.stars a:hover ~ a { color: var(--sc-line-strong); }
.woocommerce #review_form p.stars a.active,
.woocommerce #review_form p.stars a.active ~ a { color: var(--sc-line-strong); }
.woocommerce #review_form p.stars a.active { color: var(--sc-deal); }
.woocommerce #review_form p.stars.selected a:not(.active) { color: var(--sc-deal); }
.woocommerce #review_form p.stars.selected a.active ~ a { color: var(--sc-line-strong); }

/* The read-only rating shown on cards and next to a product title. */
.woocommerce .star-rating {
	position: relative; display: inline-block;
	width: 5.4em; height: 1.2em; overflow: hidden;
	font-size: var(--sc-fs-sm); line-height: 1.2;
	direction: ltr; color: var(--sc-deal);
}
.woocommerce .star-rating::before {
	content: "\2605\2605\2605\2605\2605";
	position: absolute; inset-inline-start: 0; top: 0;
	color: var(--sc-line-strong); letter-spacing: .08em;
}
.woocommerce .star-rating span {
	position: absolute; inset-inline-start: 0; top: 0;
	overflow: hidden; padding-top: 1.2em; height: 0;
}
.woocommerce .star-rating span::before {
	content: "\2605\2605\2605\2605\2605";
	position: absolute; inset-inline-start: 0; top: 0;
	letter-spacing: .08em;
}

/* ------------------------------------------------- third-party containment */
/*
 * Elements from plugins that carry no styling of their own here, because this
 * theme dequeues the stylesheets they expect. Left alone they sit outside the
 * viewport and widen the document.
 *
 * Masked by the `overflow-x: clip` above, but fixed at the source too — a
 * hidden overflow still affects scroll extents, focus scrolling and the
 * position of anything anchored to the viewport.
 */
/*
 * Filter Everything prints a loading scrim on archive pages, but its stylesheet
 * is never enqueued here — the shop's facets are rendered by the theme, not by
 * that plugin's widget. Unstyled, the div fell into normal flow at 650px wide
 * and widened the document.
 *
 * Positioning it instead of hiding it is worse than the bug: the plugin's own
 * rule is a fixed full-width scrim at opacity 0, which is invisible and
 * swallows every tap underneath it.
 */
/* Filter Everything was deactivated - it had no filter sets, no shortcodes and
   no widget, but still injected inline CSS and a noindex hook into every page.
   This rule hid a stray 650px overlay it left behind; kept as a guard in case
   the plugin is ever switched back on. */
.wpc-filters-overlay { display: none !important; }

/*
 * WooCommerce's cart live region announces changes to a screen reader. Absolute
 * positioning with no offsets leaves it at its static position — which is past
 * the end of the content — so a 1px box was sitting at x=750.
 */
.widget_shopping_cart_live_region,
.woocommerce .screen-reader-text[aria-live],
[aria-live].screen-reader-text {
	position: absolute !important;
	inset-block-start: 0; inset-inline-start: 0;
	width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Long unbroken part numbers — imported descriptions carry runs like
 * "PK13HR60700/AEAT8TPU213" — cannot break at a space because there is none.
 */
.sc-accordion__body,
.sc-prose,
.woocommerce-Tabs-panel {
	overflow-wrap: anywhere;
	word-break: break-word;
}
/*
 * Any table still standing in imported content scrolls inside its own box
 * rather than stretching the page. The layout scaffolding from the old site is
 * unwrapped in PHP before it reaches here (see sedcom_flatten_layout_tables),
 * so this is a safety net for genuine tables, not the main treatment.
 *
 * `.sc-spectable` is excluded — that one is the theme's own specification
 * table, laid out deliberately.
 */
.sc-accordion__body table:not(.sc-spectable),
.woocommerce-Tabs-panel table:not(.sc-spectable) {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}
/* Imported images carry hard pixel dimensions for the same reason. */
.sc-accordion__body img,
.woocommerce-Tabs-panel img {
	max-width: 100%; height: auto;
}

/* ------------------------------------------------------------ directional */
/*
 * Only genuinely directional icons mirror. A cart, a magnifier or a phone
 * points nowhere, and flipping it just makes it look wrong.
 */
[dir="rtl"] .sc-icon--flip { transform: scaleX(-1); }

/* ------------------------------------------------------------------ print */
@media print {
	.sc-header, .sc-topbar, .sc-nav, .sc-footer, .sc-bottomnav,
	.sc-buybar, .sc-whatsapp, .sc-scrim, .sc-searchpanel { display: none !important; }
	body { padding-bottom: 0; }
}

/* ----------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------- facets */
.sc-filter__list { list-style: none; padding: 0; margin: 0; }
@media (min-width: 900px) { .sc-filter__list { max-height: 280px; overflow-y: auto; } }
.sc-filter__item {
	display: flex; align-items: center; gap: .6rem;
	/* 48px rows on touch: a 17px checkbox is not a tap target. */
	min-height: 48px; padding: .3rem .1rem; text-decoration: none;
	color: var(--sc-ink-2); font-size: var(--sc-fs-sm);
}
@media (min-width: 900px) { .sc-filter__item { min-height: 36px; } }
.sc-filter__item:hover { color: var(--sc-blue-dark); }
.sc-filter__box {
	flex: none; width: 22px; height: 22px;
	border: 1.5px solid var(--sc-line-strong); border-radius: 5px; background: #fff;
	position: relative;
}
.sc-filter__item.is-active { color: var(--sc-blue-dark); font-weight: 700; }
.sc-filter__item.is-active .sc-filter__box { background: var(--sc-blue); border-color: var(--sc-blue); }
.sc-filter__item.is-active .sc-filter__box::after {
	content: ""; position: absolute; inset-inline-start: 7px; top: 3px;
	width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.sc-filter__name { flex: 1; }
.sc-filter__count { color: var(--sc-ink-3); font-size: var(--sc-fs-xs); font-weight: 500; }

/* ----------------------------------------------------- touch target floor */
/*
 * Controls that measure fine under a mouse but fall short of the 44px a finger
 * needs. Found by measuring the rendered page at 390px rather than by reading
 * the stylesheet — several of these look correct in source and only fail once
 * line-height and padding resolve.
 *
 * Scoped to coarse pointers: padding a desktop layout out to touch sizes makes
 * it loose for no benefit.
 */
@media (pointer: coarse) {
	.sc-logo { min-height: 44px; }

	/* "לכל הקטגוריות ←" and friends resolve to 22px of line box alone. */
	.sc-section__link {
		display: inline-flex; align-items: center;
		min-height: 44px; padding-inline: .25rem;
	}

	/* The card's add-to-cart and the shop's filter button were both 40px. */
	.woocommerce ul.products li.product .button,
	.sc-btn--sm { min-height: 44px; }

	/*
	 * Model chips are the one deliberate exception. The spec asks for 32px
	 * here (§5.9) and 44px in general (§5.1); with up to 179 chips, 44 turns
	 * the list into a wall and defeats the scanning it exists for. 40px clears
	 * the AA requirement of 24px (WCAG 2.5.8) with room to spare and keeps the
	 * list dense enough to read.
	 */
	.sc-modelchip { min-height: 40px; }

	.sc-finder__hint a { padding-block: .5rem; min-height: 44px; }

	/* The magnifier inside the search field was 38px in a 48px field. */
	.sc-search__submit { width: 44px; height: 44px; inset-inline-end: 2px; }

	/* Suggestion and category chips sat at 37px. Model chips stay at 40 —
	 * see the note on .sc-modelchip for why that one is different. */
	.sc-chip { min-height: 44px; }

	.woocommerce form .show-password-input { width: 44px; height: 44px; }

	/*
	 * "Remember me", the terms box and the review-form consent: each row was
	 * 29px tall, so the only real target was the checkbox itself.
	 *
	 * Padding rather than flex. A flex container gives its anonymous text item
	 * `min-width: auto`, which stops the label wrapping — the consent sentence
	 * grew to its full single-line width and ran off the side of the screen.
	 */
	.woocommerce form .woocommerce-form__label-for-checkbox,
	.woocommerce-privacy-policy-text + p.form-row label,
	.woocommerce form .form-row label.checkbox,
	/* WordPress's own comment form, used for product reviews. */
	.comment-form-cookies-consent label {
		display: block; min-height: 44px;
		padding-block: .6rem; margin: 0;
	}
	.woocommerce form .form-row label.checkbox input[type="checkbox"],
	.woocommerce form .woocommerce-form__label-for-checkbox input[type="checkbox"],
	.comment-form-cookies-consent input[type="checkbox"] {
		vertical-align: middle;
		margin-inline-end: .5rem;
	}
}

/*
 * The gallery zoom trigger. WooCommerce's own label is a "🔍" character, which
 * renders as a full-colour emoji and is the only one on the site — it reads as
 * a stray sticker on the photo. Hiding the glyph and drawing the magnifier as a
 * masked SVG keeps it in the same stroke language as every other icon.
 */
.woocommerce div.product .woocommerce-product-gallery__trigger {
	width: 44px; height: 44px;
	display: grid; place-items: center;
	font-size: 0; line-height: 1; color: var(--sc-ink-2);
	background: #fff; border-radius: var(--sc-r-pill);
	box-shadow: var(--sc-shadow-sm); text-decoration: none;
}
.woocommerce div.product .woocommerce-product-gallery__trigger::after {
	content: ""; width: 22px; height: 22px; background: currentColor;
	-webkit-mask: var(--sc-icon-zoom) center / contain no-repeat;
	mask: var(--sc-icon-zoom) center / contain no-repeat;
}
.woocommerce div.product .woocommerce-product-gallery__trigger:hover { color: var(--sc-blue); }

/*
 * The SKU is printed twice: once by the theme, directly under the title where
 * a technician looks for it, and again inside WooCommerce's product meta block
 * further down. One is enough, and the prominent one wins.
 */
.woocommerce div.product .product_meta .sku_wrapper { display: none; }
/* Category/tag meta under a product: 21px line boxes. */
.woocommerce div.product .posted_in a,
.woocommerce div.product .tagged_as a {
	display: inline-block; padding-block: .2rem;
}
/* Review-form consent box shipped at 13x13; 24px is the 2.5.8 minimum. */
input[type="checkbox"], input[type="radio"] {
	width: 24px; height: 24px; min-height: 0;
	accent-color: var(--sc-blue);
}

/* ------------------------------------------------------------ utilities */
.sc-hide-mobile { display: none; }
@media (min-width: 900px) { .sc-hide-mobile { display: revert; } }
@media (min-width: 900px) { .sc-only-mobile { display: none !important; } }

/* Defer rendering of long sections that start below the fold. */
.sc-defer { content-visibility: auto; contain-intrinsic-size: auto 500px; }

/* ---------------------------------------------------- repair status page
 *
 * The one page a customer opens while their laptop is somewhere else, often
 * while standing up and often on a phone. It is built to be read in a glance:
 * the current stage is the largest thing on the screen, the trail below it
 * answers "and what happens next", and everything else is quiet.
 */
.sc-repair { max-width: 34rem; margin-inline: auto; }

.sc-repair__lead { color: var(--sc-ink-3); margin-bottom: 1rem; }

.sc-repair__form .sc-field { display: block; margin-bottom: 1rem; }
.sc-repair__form .sc-field__label {
	display: block; margin-bottom: .3rem; font-weight: 600;
}
.sc-repair__form input {
	width: 100%;
	/* Numbers read left-to-right even in a right-to-left page. */
	direction: ltr; text-align: start;
}
.sc-repair__error {
	background: var(--sc-warn-bg); color: var(--sc-warn);
	border-radius: var(--sc-r-sm); padding: .7rem .9rem; margin-bottom: 1rem;
}
.sc-repair__help { color: var(--sc-ink-3); font-size: var(--sc-fs-sm); margin-top: 1rem; }

.sc-repair__card {
	background: var(--sc-bg-soft); border-radius: var(--sc-r);
	padding: 1.1rem; margin-bottom: 1.2rem;
}
.sc-repair__ticket { margin: 0; color: var(--sc-ink-3); }
.sc-repair__ticket strong { direction: ltr; unicode-bidi: embed; }
.sc-repair__device { margin: .2rem 0 .8rem; font-weight: 600; }
.sc-repair__status { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.sc-repair__status-label { font-size: var(--sc-fs-lg); font-weight: 800; color: var(--sc-blue); }
.sc-repair__since { color: var(--sc-ink-3); font-size: var(--sc-fs-sm); }

.sc-repair__stages { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.sc-repair__stage {
	position: relative; display: flex; align-items: baseline; gap: .7rem;
	padding: 0 0 1.1rem;
	padding-inline-start: 1.6rem;
	color: var(--sc-ink-3);
}
/* The connecting line is drawn from the dot downwards, so the last item has
   none - otherwise the trail appears to continue past the final stage. */
.sc-repair__stage::before {
	content: ""; position: absolute; inset-block-start: 1.1em; inset-block-end: 0;
	inset-inline-start: .32rem;
	width: 2px; background: var(--sc-line);
}
.sc-repair__stage:last-child::before { display: none; }
.sc-repair__dot {
	position: absolute; inset-inline-start: 0; inset-block-start: .35em;
	width: .75rem; height: .75rem; border-radius: 50%;
	background: #fff; border: 2px solid var(--sc-line);
}
.sc-repair__stage.is-done { color: var(--sc-ink-2, var(--sc-ink-3)); }
.sc-repair__stage.is-done .sc-repair__dot { background: var(--sc-ok); border-color: var(--sc-ok); }
.sc-repair__stage.is-done::before { background: var(--sc-ok); }
.sc-repair__stage.is-current { color: var(--sc-ink); font-weight: 700; }
.sc-repair__stage.is-current .sc-repair__dot {
	background: var(--sc-blue); border-color: var(--sc-blue);
	box-shadow: 0 0 0 4px var(--sc-blue-light);
}
.sc-repair__badge {
	font-size: var(--sc-fs-xs); font-weight: 600;
	background: var(--sc-blue-light); color: var(--sc-blue-dark);
	border-radius: 999px; padding: .1rem .55rem;
}

.sc-repair__notes { margin-bottom: 1.2rem; }
.sc-repair__notes-title { font-size: var(--sc-fs-base); margin: 0 0 .5rem; }
.sc-repair__notes ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.sc-repair__notes li {
	background: #fff; border: 1px solid var(--sc-line);
	border-radius: var(--sc-r-sm); padding: .7rem .9rem;
}
.sc-repair__notes p { margin: 0 0 .25rem; }
.sc-repair__notes time { color: var(--sc-ink-3); font-size: var(--sc-fs-xs); }

.sc-repair__history summary { cursor: pointer; color: var(--sc-ink-3); }
.sc-repair__history ul { list-style: none; padding: .6rem 0 0; margin: 0; display: grid; gap: .35rem; }
.sc-repair__history li { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--sc-fs-sm); }
.sc-repair__history time { color: var(--sc-ink-3); }

.sc-repair__contact { margin-top: 1.4rem; color: var(--sc-ink-3); }
.sc-repair__again { margin-top: 1.2rem; }

/* The stage the customer is waiting for, and the stage that needs them to act,
   are the two moments worth colouring. Which stage that is comes from the lab
   as a `tone`, so this file never has to know what "ready" is called. */
.sc-repair__card.is-success {
	background: var(--sc-ok-bg);
	border-inline-start: 4px solid var(--sc-ok);
}
.sc-repair__card.is-success .sc-repair__status-label { color: var(--sc-ok); }
.sc-repair__card.is-attention {
	background: var(--sc-warn-bg);
	border-inline-start: 4px solid var(--sc-warn);
}
.sc-repair__card.is-attention .sc-repair__status-label { color: var(--sc-warn); }

/* ------------------------------------------------------------------ 404
 *
 * A keyboard with three keycaps missing, which you put back by pressing them.
 *
 * The keyboard is drawn from tokens, so it follows the palette instead of
 * fighting it, and the whole scene costs a few kilobytes rather than the
 * hundreds a photograph of a keyboard would.
 */
.sc-404 {
	--sc-404-deck-1: #1b2a3d;
	--sc-404-deck-2: #0b1727;   /* the brand navy, as the deck */
	--sc-404-cap-1:  #33445c;
	--sc-404-cap-2:  #223145;
	--sc-404-well:   #060d16;
}

.sc-404__stage {
	max-width: 44rem;
	margin-inline: auto;
	padding: 1.5rem 1rem 0;
	text-align: center;
}

/* The diagnostic line. A label, not a fake terminal: the joke is the keyboard,
   and two gags competing for the same second is one gag too many. */
.sc-404__diag {
	display: inline-flex; align-items: center; gap: .5rem;
	font-size: var(--sc-fs-xs); color: var(--sc-ink-2);
	background: var(--sc-bg-soft); border: 1px solid var(--sc-line);
	border-radius: var(--sc-r-pill); padding: .3rem .8rem;
	margin: 0 0 1rem;
	font-variant-numeric: tabular-nums;
}
.sc-404__diag-dot {
	width: .5rem; height: .5rem; border-radius: 50%;
	background: var(--sc-warn); flex: none;
}
.sc-404.is-fixed .sc-404__diag-dot { background: var(--sc-ok); }

.sc-404__title { font-size: var(--sc-fs-display); margin: 0 0 .5rem; }
.sc-404__lead { color: var(--sc-ink-2); margin: 0 0 1.5rem; }
.sc-404__hint { display: block; margin-top: .4rem; }
.sc-404__lead kbd {
	display: inline-block; min-width: 1.6em; padding: .1em .4em;
	border: 1px solid var(--sc-line-strong); border-bottom-width: 2px;
	border-radius: 5px; background: #fff; color: var(--sc-ink);
	font: 600 .95em/1.4 var(--sc-font); font-variant-numeric: tabular-nums;
}

.sc-404__kbd-wrap { position: relative; margin-bottom: 1.25rem; }
.sc-404__kbd {
	width: 100%; height: auto; display: block;
	filter: drop-shadow(0 12px 24px rgb(11 23 39 / .18));
}
.sc-404__deck { fill: var(--sc-404-deck-2, #0b1727); }
.sc-404__key  { fill: var(--sc-404-cap-1, #33445c); }
.sc-404__seated-cap { fill: var(--sc-404-cap-1, #33445c); }

/*
 * The backlight, off until the repair is done - a lit keyboard being another
 * thing this shop sells, so the payoff stays inside the catalogue.
 *
 * Every fill here carries a literal fallback on purpose. An SVG shape with no
 * resolvable fill does not fade or degrade, it paints opaque black: losing this
 * one rule in an edit turned the entire keyboard into a black slab, and the
 * computed styles all still looked correct because the element simply had no
 * styles at all. A fallback makes the failure mode "slightly wrong colour"
 * instead of "the artwork is gone".
 */
.sc-404__glow {
	fill: var(--sc-brand-sky, #5FA5E6);
	opacity: 0;
	transition: opacity .5s ease;
	pointer-events: none;
}
.sc-404.is-fixed .sc-404__glow { opacity: .12; }

/* The empty well: a dark recess with the mechanism the cap clips onto. This is
   the detail that separates "keyboard drawn with gaps" from "keyboard with the
   keys taken off", and it is exactly what this shop replaces all day. */
.sc-404__well-hole { fill: var(--sc-404-well); }
/* The mechanism sits behind the legend, not in front of it: it is texture that
   says "a key was removed here", and the digit is the message. At full strength
   the scissor arms cut straight through the numeral and the 404 stops reading. */
.sc-404__mech { fill: none; stroke: #5b7093; opacity: .45; }
.sc-404__mech path { stroke: #5b7093; stroke-width: 2; stroke-linecap: round; }
.sc-404__frame { stroke: #46587a; stroke-width: 2; }
.sc-404__clip { fill: #7286a6; stroke: none; }
.sc-404__dome { fill: #6c7f9e; stroke: none; opacity: .55; }
.sc-404__dome-in { fill: #93a5c1; stroke: none; opacity: .6; }

/* The legend that belongs in the well, ghosted onto the deck - so the gap reads
   as "4 0 4" before a single cap goes back, which is the entire joke. */
/* The legend that belongs in the empty well. This is the whole joke - the gap
   has to spell 404 before anything is clicked - so it is the brightest thing in
   the recess. Sized in px rather than rem: SVG text is measured in user units,
   and a rem here silently rescales with the root font size. */
.sc-404__ghost {
	fill: #adc2de;
	font-family: var(--sc-font); font-weight: 800; font-size: 46px;
	font-variant-numeric: tabular-nums; opacity: .92;
	paint-order: stroke; stroke: var(--sc-404-well, #060d16); stroke-width: 6px;
}

/* The seated cap, drawn over the well once it is back. */
.sc-404__seated { opacity: 0; transition: opacity .3s ease; }
.sc-404__seated text {
	fill: #eef3fa;
	font-family: var(--sc-font); font-weight: 800; font-size: 46px;
	font-variant-numeric: tabular-nums;
}
.sc-404__well.is-filled .sc-404__seated { opacity: 1; }
.sc-404__well.is-filled .sc-404__mech,
.sc-404__well.is-filled .sc-404__ghost { opacity: 0; }
.sc-404__mech, .sc-404__ghost { transition: opacity .3s ease; }

/* The loose caps. Real buttons: tab-reachable, 48px, and the only way in on a
   phone, which has no 4 key. */
.sc-404__caps {
	display: flex; justify-content: center; gap: .75rem;
	list-style: none; padding: 0; margin: 1rem 0 0;
}
.sc-404__cap {
	width: 48px; height: 48px;
	display: grid; place-items: center;
	font: 800 1.1rem/1 var(--sc-font); font-variant-numeric: tabular-nums;
	color: var(--sc-ink);
	background: linear-gradient(#fff, #eef2f7);
	border: 1px solid var(--sc-line-strong); border-bottom-width: 3px;
	border-radius: 9px; cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, opacity .2s ease;
}
.sc-404__cap:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgb(11 23 39 / .16); }
.sc-404__cap:active { transform: translateY(1px); border-bottom-width: 1px; }
.sc-404__cap.is-placed { opacity: 0; pointer-events: none; transform: translateY(-8px) scale(.9); }

.sc-404__fixed { margin-top: 1.25rem; }
.sc-404__fixed-line {
	display: inline-flex; align-items: center; gap: .45rem;
	color: var(--sc-ok); font-weight: 600; margin: 0 0 .8rem;
}
.sc-404__home { display: inline-flex; align-items: center; gap: .5rem; }
.sc-404__cursor { width: 22px; height: auto; }

/* The useful half. Never gated behind the puzzle - someone who arrived from a
   dead link wanting a battery can scroll or Tab straight past the toy. */
.sc-404__help { max-width: 44rem; margin-inline: auto; padding-block: 2rem 1rem; }
.sc-404__help-title { font-size: var(--sc-fs-h2); text-align: center; margin: 0 0 1.2rem; }
.sc-404__search { margin-bottom: 1.5rem; }
.sc-404__or { color: var(--sc-ink-2); font-size: var(--sc-fs-sm); margin: 1.2rem 0 .5rem; }
.sc-404__cats { margin-bottom: 1.5rem; }
.sc-404__ask { color: var(--sc-ink-2); font-size: var(--sc-fs-sm); margin-bottom: .7rem; }
.sc-404__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.sc-404__actions .sc-btn { display: inline-flex; align-items: center; gap: .45rem; }

@media (min-width: 600px) {
	.sc-404__title { font-size: 2.25rem; }
	.sc-404__cap { width: 56px; height: 56px; font-size: 1.25rem; }
}

/*
 * Reduced motion: the scene is still the scene and the puzzle still works, it
 * just stops moving. The caps do not fly, the backlight does not fade in, and
 * nothing bounces.
 */
@media (prefers-reduced-motion: reduce) {
	.sc-404__cap,
	.sc-404__glow,
	.sc-404__seated,
	.sc-404__mech,
	.sc-404__ghost { transition: none; }
	.sc-404__cap:hover { transform: none; }
	.sc-404__cap.is-placed { transform: none; }
}

/* ------------------------------------------------- cart & checkout: desktop
 *
 * Everything above this point styles these two pages for a phone, and they were
 * never given a wide layout - so on a 1600px screen the cart was a 535px column
 * of stacked blocks and the checkout was a single file of fields a metre long.
 *
 * Two things were wrong underneath, and both are worth naming because neither
 * announces itself:
 *
 *   1. This theme dequeues `woocommerce-general`, and with it the rule that
 *      makes `table.shop_table` full width. A table with no width shrinks to fit
 *      its content, which is why the columns collapsed until "מחיר" was 44px and
 *      its heading broke one character per line.
 *   2. The cart and checkout are ordinary pages, so page.php gave them the
 *      900px reading measure meant for an article.
 */
.woocommerce table.shop_table { width: 100%; }
.sc-container--wide { max-width: var(--sc-max); }

@media (min-width: 900px) {
	/*
	 * Items on one side, money on the other. The totals card is sticky: on a
	 * cart with several lines the button to continue should not require
	 * scrolling back up to find it.
	 */
	.woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 22rem;
		align-items: start;
		gap: var(--sc-gap-2);
	}
	/* Anything that is not the items or the totals spans the full width and
	   stays above them - notices, the free-shipping banner, and whatever a
	   plugin decides to inject tomorrow. */
	.woocommerce-cart .woocommerce > *:not(form.woocommerce-cart-form):not(.cart-collaterals) {
		grid-column: 1 / -1;
		/* Auto-placement follows source order, and the free-shipping banner is
		   printed after the form - which dropped it below the whole cart. */
		order: -1;
	}
	/* Both in row 2, explicitly. Leaving the form on `auto` put it in a row of
	   its own below the totals, with a screen of white space between them. */
	.woocommerce-cart form.woocommerce-cart-form { grid-column: 1; grid-row: 2; margin: 0; }
	.woocommerce-cart .cart-collaterals {
		grid-column: 2; grid-row: 2;
		position: sticky; top: calc(var(--sc-header-h, 72px) + 1rem);
	}
	.woocommerce-cart .cart-collaterals .cart_totals {
		background: var(--sc-bg-soft);
		border: 1px solid var(--sc-line);
		border-radius: var(--sc-r-lg);
		padding: 1.1rem;
	}

	/* The table becomes a table again: real columns, real headings. */
	.woocommerce table.shop_table.cart thead th {
		font-size: var(--sc-fs-sm); color: var(--sc-ink-2); font-weight: 600;
		text-align: start; white-space: nowrap; padding: .6rem .75rem;
		border-bottom: 1px solid var(--sc-line);
	}
	.woocommerce table.shop_table.cart td {
		padding: .9rem .75rem; vertical-align: middle;
		border-bottom: 1px solid var(--sc-line-2);
	}
	/* Column widths, so the product name gets the room and the numbers do not
	   claim more than they need. */
	.woocommerce table.shop_table.cart th.product-remove,
	.woocommerce table.shop_table.cart td.product-remove { width: 44px; }
	.woocommerce table.shop_table.cart th.product-thumbnail,
	.woocommerce table.shop_table.cart td.product-thumbnail { width: 88px; }
	.woocommerce table.shop_table.cart td.product-thumbnail img {
		width: 72px; height: 72px; object-fit: contain;
		background: var(--sc-bg-soft); border-radius: var(--sc-r-sm); padding: 4px;
	}
	.woocommerce table.shop_table.cart th.product-price,
	.woocommerce table.shop_table.cart td.product-price,
	.woocommerce table.shop_table.cart th.product-subtotal,
	.woocommerce table.shop_table.cart td.product-subtotal { width: 8rem; white-space: nowrap; }
	.woocommerce table.shop_table.cart th.product-quantity,
	.woocommerce table.shop_table.cart td.product-quantity { width: 10rem; }
	.woocommerce table.shop_table.cart td.product-name a { font-weight: 600; }
	.woocommerce table.shop_table.cart td.product-subtotal { font-weight: 700; }

	/*
	 * The coupon row.
	 *
	 * The cell stays a table-cell. Giving a <td> `display: flex` takes it out of
	 * the table layout, and with it the colspan that makes it span the row - the
	 * cell collapsed to 118px and "החלת קופון" wrapped one character per line.
	 * The children are laid out instead.
	 */
	.woocommerce table.shop_table.cart td.actions {
		display: table-cell; padding: 1rem .75rem; text-align: start;
	}
	.woocommerce table.shop_table.cart td.actions .coupon {
		display: inline-flex; gap: .5rem; align-items: center;
		width: min(26rem, 60%); vertical-align: middle;
	}
	.woocommerce table.shop_table.cart td.actions .coupon input { flex: 1; min-width: 0; }
	.woocommerce table.shop_table.cart td.actions button[name="update_cart"],
	.woocommerce table.shop_table.cart td.actions input[name="update_cart"] {
		width: auto; float: inline-end;
	}

	/*
	 * Checkout: the form on one side, what you are paying for on the other -
	 * visible while filling the fields rather than a scroll away underneath.
	 */
	.woocommerce-checkout form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 24rem;
		align-items: start;
		gap: var(--sc-gap-2);
	}
	/*
	 * Explicit rows on all three. The fields block is far taller than the
	 * heading beside it, so with auto placement the order summary landed in row
	 * 2 - underneath the whole form, with a screen of white space above it,
	 * which is the layout it was supposed to replace.
	 */
	.woocommerce-checkout form.checkout > .col2-set,
	.woocommerce-checkout form.checkout > #customer_details {
		grid-column: 1; grid-row: 1 / span 2;
	}
	.woocommerce-checkout form.checkout > h3#order_review_heading { grid-column: 2; grid-row: 1; }
	.woocommerce-checkout form.checkout > #order_review { grid-column: 2; grid-row: 2; }
	.woocommerce-checkout form.checkout > #order_review {
		position: sticky; top: calc(var(--sc-header-h, 72px) + 1rem);
		background: var(--sc-bg-soft);
		border: 1px solid var(--sc-line);
		border-radius: var(--sc-r-lg);
		padding: 1.1rem;
	}
	.woocommerce-checkout form.checkout > h3#order_review_heading { margin-top: 0; }

	/* Billing fields side by side instead of one per line. */
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
		display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem;
	}
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide,
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper #billing_address_1_field,
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper #billing_email_field {
		grid-column: 1 / -1;
	}
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row { float: none; width: auto; }
}

/* Above the container width there is no reason to keep growing the money
   column; the extra space goes to the product names. */
@media (min-width: 1200px) {
	.woocommerce-cart .woocommerce { grid-template-columns: minmax(0, 1fr) 24rem; }
}

/* ------------------------------------------------------------ star rating
 *
 * The stars were stacking vertically. `.star-rating` is a WooCommerce widget
 * that works by overlaying one row of filled stars on a row of empty ones, and
 * every part of that - the fixed 5.4em width, the single line-height, the
 * absolutely positioned overlay - lives in `woocommerce-general`, which this
 * theme dequeues. Left with defaults the two <span>s became blocks and the
 * glyphs wrapped one per line.
 */
.woocommerce .star-rating {
	position: relative;
	display: inline-block;
	width: 5.4em;
	height: 1.2em;
	line-height: 1.2;
	overflow: hidden;
	font-size: 1em;
	font-family: star, sans-serif;
	white-space: nowrap;
	vertical-align: middle;
	color: var(--sc-deal, #b26a00);
	direction: ltr;
}
.woocommerce .star-rating::before {
	content: ";;;;;";
	color: var(--sc-line-strong);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	white-space: nowrap;
}
.woocommerce .star-rating span {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	overflow: hidden;
	padding-block-start: 1.5em;
	white-space: nowrap;
}
.woocommerce .star-rating span::before {
	content: "+++++";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	white-space: nowrap;
}
.woocommerce .woocommerce-product-rating { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.woocommerce .woocommerce-review-link { color: var(--sc-ink-2); font-size: var(--sc-fs-sm); }