/**
 * Visually hidden text for screen readers (e.g. page H1).
 */
.nono-visually-hidden,
.sr-only,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/**
 * Skip navigation link: hidden until keyboard focus (WCAG 2.4.1).
 */
.nono-skip-link {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	z-index: 100000;
}

html.nono-keyboard-nav .nono-skip-link:focus-visible {
	width: auto;
	height: auto;
	margin: 0;
	padding: 8px 16px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	background: #f9f9f9;
	color: #4b3c1e;
	text-decoration: none;
}

/**
 * Suppress focus rings until the user navigates with the keyboard.
 * Programmatic focus on open (dialogs, search) keeps the default look.
 */
html:not(.nono-keyboard-nav) :focus-visible {
	outline: none !important;
	outline-offset: 0 !important;
}

/**
 * Site-wide keyboard focus indicator (WCAG 2.4.7).
 * Only active while html.nono-keyboard-nav is set (see nono-keyboard-nav.js).
 */
html.nono-keyboard-nav :is(
	a,
	area,
	button,
	input,
	select,
	textarea,
	summary,
	[href],
	iframe,
	[tabindex]:not([tabindex="-1"]),
	[role="button"],
	[role="link"],
	[role="tab"],
	[role="menuitem"],
	[role="menuitemcheckbox"],
	[role="menuitemradio"],
	[role="option"],
	[role="checkbox"],
	[role="radio"],
	[role="switch"],
	[role="combobox"],
	[role="slider"],
	.owl-prev,
	.owl-next,
	.mmenu,
	.nono-motion-control-btn,
	.nono-skip-link,
	.cc-window .cc-btn,
	.cc-window .cc-link
):focus:not(:focus-visible) {
	outline: none;
}

html.nono-keyboard-nav :is(
	a,
	area,
	button,
	input,
	select,
	textarea,
	summary,
	[href],
	iframe,
	[tabindex]:not([tabindex="-1"]),
	[role="button"],
	[role="link"],
	[role="tab"],
	[role="menuitem"],
	[role="menuitemcheckbox"],
	[role="menuitemradio"],
	[role="option"],
	[role="checkbox"],
	[role="radio"],
	[role="switch"],
	[role="combobox"],
	[role="slider"],
	.owl-prev,
	.owl-next,
	.mmenu,
	.nono-motion-control-btn,
	.nono-skip-link,
	.cc-window .cc-btn,
	.cc-window .cc-link
):focus-visible {
	outline: 2px solid #4b3c1e;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(75, 60, 30, 0.35);
}

/*
 * Dark header / toolbar surfaces: light focus ring for contrast.
 * Body classes are set from ACF header / running-line background colors.
 */
html.nono-keyboard-nav body.nono-dark-header-surface header.main-header .header-container :is(
	a,
	button,
	[tabindex]:not([tabindex="-1"]),
	[role="button"],
	.mmenu
):focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35);
}

html.nono-keyboard-nav body.nono-dark-header-surface header.main-header .header-container .mmenu:focus-visible {
	outline-offset: 3px;
}

/* Dropdown panels inside the header bar use a light background. */
html.nono-keyboard-nav body.nono-dark-header-surface header.main-header .header-container :is(
	ul#menu-top-menu a,
	ul#menu-top-menu button,
	ul#menu-top-menu [tabindex]:not([tabindex="-1"]),
	.user-menu-block nav a
):focus-visible {
	outline: 2px solid #4b3c1e;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(75, 60, 30, 0.35);
}

html.nono-keyboard-nav body.nono-dark-running-line-surface .running-line-block :is(
	a,
	button,
	.nono-motion-control-btn
):focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35);
}

html.nono-keyboard-nav .nono-slots-header-container :is(
	a,
	button,
	[tabindex]:not([tabindex="-1"]),
	[role="button"]
):focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35);
}

/*
 * Select2 combobox: visible ring on the rendered selection box (site-wide).
 */
html.nono-keyboard-nav .select2-container .select2-selection:focus-visible {
	outline: 2px solid #4b3c1e !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(75, 60, 30, 0.35);
	border-color: #4b3c1e !important;
}

/*
 * Custom checkboxes with visually hidden inputs — show focus on the visible box.
 */
html.nono-keyboard-nav .checkbox_field input[type="checkbox"]:focus-visible,
html.nono-keyboard-nav .save_to_account_label input[type="checkbox"]:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

html.nono-keyboard-nav .checkbox_field input[type="checkbox"]:focus-visible + label::after,
html.nono-keyboard-nav input[type="checkbox"]:focus-visible + .input_checkbox_style {
	outline: 2px solid #4b3c1e;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(75, 60, 30, 0.35);
}

html.nono-keyboard-nav .checkbox-block input[type="checkbox"]:focus-visible {
	outline: 2px solid #4b3c1e;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(75, 60, 30, 0.35);
}

html.nono-keyboard-nav .input_date_wrap .openCalendar:focus-visible,
html.nono-keyboard-nav .input_date_wrap .clearCalendar:focus-visible {
	outline: 2px solid #4b3c1e;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(75, 60, 30, 0.35);
}

html.nono-keyboard-nav .nono-motion-control-btn:focus-visible {
	width: auto;
	height: auto;
	margin: 4px;
	padding: 4px 8px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	z-index: 10;
}

html.nono-keyboard-nav .running-line-block .nono-motion-control-btn:focus-visible {
	top: 0;
	left: 0;
}

html.nono-keyboard-nav .home-top-slider-section .home-top-slider-autoplay-btn:focus-visible {
	top: auto;
	left: auto;
	inset-inline-start: 32px;
	bottom: 32px;
}

/* Branch locator: scroll container must not enter tab order or show a focus ring. */
html.nono-keyboard-nav .archive_branch .branch_list_wrap:focus,
html.nono-keyboard-nav .archive_branch .branch_list_wrap:focus-visible {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
}

/*
 * Branch locator: branch list items use border fill instead of outline ring.
 */
html.nono-keyboard-nav .archive_branch .branch_list_search_input:focus-visible,
html.nono-keyboard-nav .archive_branch .select2-container .select2-selection:focus-visible,
html.nono-keyboard-nav .archive_branch .branch_list_search .clear_button:focus-visible,
html.nono-keyboard-nav .archive_branch .close_mobile_branch_list:focus-visible {
	outline: 2px solid #4b3c1e !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(75, 60, 30, 0.35);
}

html.nono-keyboard-nav .archive_branch .select2-container .select2-selection:focus-visible {
	border: 2px solid #4b3c1e !important;
}

html.nono-keyboard-nav .archive_branch .branch_list_search_input:focus-visible {
	border-color: #4b3c1e !important;
}

html.nono-keyboard-nav .archive_branch .branch_list .branch_details:focus-visible {
	border: 2px solid #4b3c1e !important;
	background-color: #fff7f0;
	outline: none !important;
	box-shadow: none;
}

html.nono-keyboard-nav .archive_branch .branch_list li.active .branch_details:focus-visible {
	background-color: #d5c199;
	border: 2px solid #4b3c1e !important;
	outline: 2px solid #ffffff !important;
	outline-offset: -4px;
	box-shadow: none;
}

/*
 * Product cards: focus ring on the whole card when the product link is focused.
 * Use ::after (inset border) instead of outline — outline/box-shadow get clipped
 * by carousel overflow and only show as corner fragments.
 */
html.nono-keyboard-nav li.product:has(> a.woocommerce-loop-product__link:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

html.nono-keyboard-nav li.product:has(> a.woocommerce-loop-product__link:focus-visible)::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 2px solid #4b3c1e;
	border-radius: 8px;
	box-shadow: 0 0 0 4px rgba(75, 60, 30, 0.35);
	pointer-events: none;
	z-index: 11;
}

html.nono-keyboard-nav li.product > a.woocommerce-loop-product__link:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

html.nono-keyboard-nav li.product a.add_to_cart_button:focus-visible,
html.nono-keyboard-nav li.product a.button:focus-visible,
html.nono-keyboard-nav li.product .change_delivery_date_button:focus-visible,
html.nono-keyboard-nav li.product a.product_type_simple:focus-visible,
html.nono-keyboard-nav li.product a.product_type_variable:focus-visible,
html.nono-keyboard-nav li.product a.product_type_grouped:focus-visible {
	outline: 2px solid #4b3c1e !important;
	outline-offset: 3px;
	border-radius: 8px;
	box-shadow: 0 0 0 4px rgba(75, 60, 30, 0.35) !important;
}

html.nono-keyboard-nav li.product .uw-wishlist-button-container {
	overflow: visible;
}

html.nono-keyboard-nav li.product .uw-wishlist-button:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	position: relative;
	z-index: 2;
}

html.nono-keyboard-nav li.product .uw-wishlist-button-container:has(.uw-wishlist-button:focus-visible)::before {
	content: '';
	position: absolute;
	inset: -4px;
	border: 2px solid #4b3c1e;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #fff7f0;
	pointer-events: none;
	z-index: 1;
}