/* ==========================================================================
   Accessibility remediation — diesel.co.il
   Added 2026-08-13. Target WCAG 2.2 AA; legal floor IS 5568 Part 1 (WCAG 2.0 AA).
   Site is dir="rtl", so every offset below uses CSS logical properties.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Sale notice bar — replaces Elementor popup 417331.
   Geometry and typography copied from the popup's measured computed styles so
   customers see the same strip: #000 background, #fff text, 12.8px/600 Assistant,
   centred, full width, pinned to the bottom. White on black = 21:1 (SC 1.4.3).
   -------------------------------------------------------------------------- */
.diesel-notice-bar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 9990; /* below Elementor's own modals (9999) so it never covers them */

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	min-block-size: 39px;
	padding-block: 6px;
	padding-inline: 52px; /* keeps text clear of the close button on both sides */

	background-color: #000;
	color: #fff;
}

.diesel-notice-bar__text {
	margin: 0;
	font-family: Assistant, sans-serif;
	font-size: 12.8px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	color: #fff;
}

.diesel-notice-bar__close {
	position: absolute;
	inset-inline-end: 8px;
	inset-block-start: 50%;
	transform: translateY(-50%);

	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* SC 2.5.8 Target Size (Minimum) — 24x24 CSS px floor. */
	inline-size: 32px;
	block-size: 32px;

	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.diesel-notice-bar__close:hover {
	background: rgba(255, 255, 255, 0.18);
}

/* SC 2.4.7 Focus Visible / SC 2.4.11 Focus Not Obscured — the indicator has to
   read against the black bar, so it is white with a dark offset ring. */
.diesel-notice-bar__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	background: rgba(255, 255, 255, 0.18);
}

/* Stop the fixed bar permanently covering the end of the document, which would
   hide a focused element down there (SC 2.4.11). Class is toggled by the inline
   script next to the bar, so it stays in sync with dismissal. */
body.diesel-has-notice-bar {
	padding-block-end: 44px;
}

html {
	scroll-padding-block-end: 52px;
}

@media (max-width: 849px) {
	.diesel-notice-bar {
		min-block-size: 34px;
		padding-inline: 44px;
	}

	.diesel-notice-bar__text {
		line-height: 1.1;
	}

	body.diesel-has-notice-bar {
		padding-block-end: 38px;
	}
}

/* --------------------------------------------------------------------------
   2. Colour contrast — SC 1.4.3 Contrast (Minimum), AA. Legal floor.
   -------------------------------------------------------------------------- */

/* Checkout/cart step breadcrumb: #ccc on #fff measured 1.6:1 against a 3:1
   requirement at 25.6px. #767676 is 4.54:1 on white, so it clears the bar for
   normal text too and still reads as "step not reached". */
.checkout-breadcrumbs a,
.checkout-breadcrumbs a.no-click,
nav.breadcrumbs.checkout-breadcrumbs a {
	color: #767676;
}

/* Homepage collection banners: white 56px/900 headings sit directly on the
   photography, measured 1.85:1 against a 3:1 requirement for large text. A 50%
   black scrim behind the words clears 3:1 over anything the photo can put behind
   them (6.4:1 over the measured #bebebe, 3.98:1 even over pure white) without
   dimming the image itself. */
.elementor-element-908b4f7 .elementor-heading-title,
.elementor-element-d008f90 .elementor-heading-title {
	display: inline-block;
	padding: 0.05em 0.4em;
	background-color: rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   3. Product gallery thumbnails — SC 2.1.1 Keyboard (A).
   The strip is a horizontal scroll region (scrollWidth 1193 > clientWidth 530)
   with no focusable children, so it was unreachable without a mouse. JS adds
   tabindex="0"; this gives that new stop a visible indicator.
   -------------------------------------------------------------------------- */
.product-thumbnails[tabindex]:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. Catalogue product-title links — SC 2.5.8 Target Size (Minimum), WCAG 2.2 AA.
   This one sits above the IS 5568 legal floor but is cheap to satisfy: the links
   measured under 24px tall, so they get a little vertical padding rather than a
   layout change.
   -------------------------------------------------------------------------- */
.box-text-products .name.product-title .woocommerce-loop-product__link {
	display: inline-block;
	min-block-size: 24px;
	padding-block: 2px;
}

/* --------------------------------------------------------------------------
   5. Focus-visible backstop — SC 2.4.7 Focus Visible (AA).
   The theme already styles focus on most controls; this catches anything that
   slips through (including the new scroll region and any future markup) rather
   than leaving a keyboard user with no indicator at all.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Two controls beat the backstop above on specificity and were left with no
   indicator at all under keyboard use (SC 2.4.7). Both are called out by name.

   1. The WooCommerce quantity field, zeroed out by Flatsome's .form-minimal.
   2. The accessibility widget's own toggle button, which ships outline-style:none
      from the remote stylesheet — so the widget's launcher was itself invisible
      to keyboard users. White ring plus a black halo so it reads against the
      widget's coloured background either way. */
.ux-quantity input.qty:focus-visible,
input.input-text.qty:focus-visible {
	outline: 2px solid #000 !important;
	outline-offset: -2px;
}

#ac-accessibility-title-wrapper:focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: -3px;
	box-shadow: 0 0 0 3px #000 !important;
}

/* Flatsome's skip link must be visible once focused (SC 2.4.1). */
.skip-link:focus,
.skip-link:focus-visible {
	position: fixed !important;
	inset-block-start: 8px;
	inset-inline-start: 8px;
	z-index: 100000;
	inline-size: auto !important;
	block-size: auto !important;
	padding: 12px 20px;
	clip: auto !important;
	clip-path: none !important;
	background: #fff;
	color: #000;
	font-weight: 700;
	outline: 2px solid #000;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.diesel-notice-bar {
		transition: none;
	}
}