/**
 * ─────────────────────────────────────────────────────────────────────────────
 * ds-a11y.css — the three QR accessibility findings, LIVE site           2026-09-10
 * ─────────────────────────────────────────────────────────────────────────────
 * Enqueued site-wide from sitewide_enqueue() in functions.php, handle
 * `ds-a11y`. Companion to js/ds-a11y.js (site-wide) and
 * js/ds-a11y-customizer.js (is_product() only).
 *
 * This sheet only ADDS rules for states the theme never styled: `:focus-visible`
 * on the customizer's option chips, the skip link, and the mini-cart's dialog
 * chrome. Nothing here changes a rest, hover or active state, so a mouse user
 * sees exactly the page they saw before.
 *
 * WHY :focus-visible AND NOT :focus
 * ---------------------------------
 * Every control this sheet reaches is a click target the theme drives with a
 * jQuery click handler, and js/ds-a11y-customizer.js has to make them
 * programmatically focusable to be operable at all. A plain `:focus` rule would
 * therefore paint a ring on every mouse click too - a visible regression on a
 * page whose whole job is looking at furniture. `:focus-visible` is the browser's
 * own answer to "was this focus keyboard-driven", so the ring appears for the
 * keyboard and never for the pointer.
 *
 * There is no :focus fallback for browsers without :focus-visible on purpose.
 * Support is Chrome/Edge 86+, Firefox 85+, Safari 15.4+; anything older is far
 * below this site's floor, and the cost of guessing wrong is a permanent ring on
 * every swatch click.
 *
 * THE RING IS TWO RINGS
 * ---------------------
 * `outline` alone fails on the swatches: they are 20px CSS-sprite chips sitting
 * directly on white, and several of them ARE near-black (#leg_black) or
 * near-white (cream fabrics), so a single-colour ring is invisible against one
 * end of the catalog. So: a dark outline for the light chips, offset off the
 * chip so it lands on the page rather than on the colour, plus a white
 * box-shadow halo immediately outside it for the dark chips. One of the two
 * always has contrast, whatever the swatch is.
 *
 * The halo is a box-shadow rather than a second outline because only one
 * `outline` can exist per element. It can be clipped where a chip sits inside an
 * `overflow: hidden` scroller (the simplebar fabric rails); the outline itself
 * is drawn by the browser's focus machinery and survives, so the ring degrades
 * to single-colour there rather than disappearing.
 *
 * @package dreamsofa
 * @since   2026-09-10
 */

/* ════════════════════════════════════════════════════════════════════════════
   THE RING COLOUR, IN ONE PLACE
   ════════════════════════════════════════════════════════════════════════════
   #191412 is the theme's own ink - the same value the newer sections use as
   --manoela-nav-fg and as their heading/border colour (ds_mosaic_header.css,
   ds_orbital_scroll.css, css/lifestyle-section.css, product-cinema.css). Using
   it rather than a generic black means the focus ring reads as part of the
   brand rather than as browser furniture.

   Contrast against the surface the ring actually lands on: #191412 on the white
   page and on the pale swatch row is over 18:1, far past the 3:1 that WCAG
   1.4.11 asks of a focus indicator. Against the darkest chip in the catalog
   (#leg_black, near-black) it has almost none - which is exactly what the white
   halo below is for.

   Declared as a custom property so the eight rules below cannot drift apart,
   and so changing the ring is a one-line edit. Custom properties are safe here
   for the same reason :focus-visible is: everything this sheet does already
   requires a 2022-era browser.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
	--ds-a11y-ring: #191412;
	--ds-a11y-halo: rgba(255, 255, 255, 0.95);
}

/* ════════════════════════════════════════════════════════════════════════════
   1. THE SKIP LINK                          (QR finding 3: "Skip to content"
                                              link is missing)
   ════════════════════════════════════════════════════════════════════════════
   Emitted by ds_output_skip_link() on `theme_after_body_tag_start`, so it is the
   first focusable thing in the document on every page of the site.

   Off-screen rather than `display: none` / `visibility: hidden`: the latter two
   take an element out of the tab order entirely, which would make the link
   unfocusable and therefore useless. `left: -9999px` keeps it focusable and
   keeps it out of the layout.

   It is NOT the .screen-reader-text pattern (1px clipped box) because this link
   has to become genuinely visible on focus - a sighted keyboard user is the
   person it exists for. */
.ds-skip-link {
	position: absolute;
	top: 0;
	left: -9999px;
	z-index: 100000; /* above .mk-header (10) and the mini-cart backdrop (200) */
	display: block;
	padding: 14px 22px;
	background: #ffffff;
	color: var(--ds-a11y-ring);
	font-family: 'Josefin Sans', Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 0 0 3px 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* :focus, not :focus-visible. The skip link is keyboard-only by nature - it is
   off-screen, so a pointer cannot reach it and there is no mouse-click case to
   suppress. Using :focus here also means it still reveals itself in a browser
   that never implemented :focus-visible. */
.ds-skip-link:focus,
.ds-skip-link:focus-visible {
	left: 0;
	outline: 3px solid var(--ds-a11y-ring);
	outline-offset: -3px;
	color: var(--ds-a11y-ring);
}

/* The landing point, emitted at the end of views/header/styles/header-1.php so
   it sits between the header and the page's first content block.

   Zero-height and empty: it is a focus anchor, not a box. It carries
   `tabindex="-1"` in the markup so that focus can actually land on it - without
   that, browsers move focus to <body> and the next Tab restarts at the top of
   the page, which is the exact bug a skip link is supposed to fix.

   scroll-margin-top clears the sticky header: the header overlays the top of
   the document, so scrolling this anchor to y=0 would put the first heading
   underneath it. */
.ds-skip-target {
	display: block;
	height: 0;
	overflow: hidden;
	scroll-margin-top: 120px;
}

/* Never draw a ring on the anchor itself. Focus lands here programmatically
   after the skip, and a ring on a 0px-tall element renders as a stray line
   across the page. The user's own next Tab produces the first real ring. */
.ds-skip-target:focus,
.ds-skip-target:focus-visible {
	outline: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   2. THE CUSTOMIZER'S OPTION CHIPS          (QR finding 1: interactive elements
                                              are not keyboard focusable)
   ════════════════════════════════════════════════════════════════════════════
   js/ds-a11y-customizer.js puts a native radio or checkbox over each chip.
   This is the other half of that: the ring that says where the keyboard is.

   The hook is `[data-ds-a11y-opt]`, the marker that script stamps on each
   option it takes over, NOT a list of the twenty-odd group selectors. Two
   reasons. A duplicated selector list drifts the first time a group is added to
   the script's GROUPS table and not to this file, and the ring would then be
   missing on exactly the control nobody thought to re-test. And keying off the
   marker means an option can never show a focus ring without the keyboard
   behaviour that ring is promising.

   `position: relative` is asserted because a few of these chips are statically
   positioned with their sprite painted by a ::before sibling; without a
   stacking position the halo lands under the neighbouring chip. */
[data-ds-a11y-opt]:focus-visible,
[data-ds-a11y-opt]:focus-within {
	outline: 2px solid var(--ds-a11y-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--ds-a11y-halo);
	position: relative;
	z-index: 20; /* over the 4x hover lens on the neighbouring chip */
}

/* ── The ring must not animate ───────────────────────────────────────────────
   Most of these chips carry `.c_animate`, which is a blanket
   `transition: all 0.4s ease` utility (customizer_style.css:262) applied across
   the whole customizer. `all` catches the focus ring, so without this the
   indicator CRAWLS into existence: measured on the live page, focusing a leg
   swatch started at `3px solid rgb(0,0,0)` - the un-focused initial values, a
   3px black ring - and only reached `2px solid #191412` after 400ms.

   That is bad specifically for a focus indicator. A keyboard user arrowing
   along a row changes focus faster than 400ms, so the ring never settles and
   spends its whole life at the wrong width and the wrong colour.

   The fix relies on transition-property's duplicate-wins rule: when a property
   is named more than once, the LAST occurrence decides its timing. So `all`
   keeps the theme's duration for everything it was written for - the hover
   scale, the opacity fade-in with the step - while the four ring properties are
   re-declared after it at 0s and become instant, in both directions.

   Durations mirror customizer_style.css:262 (.c_animate 0.4s), :274
   (.c_animate_fast 0.2s) and :268 (.c_animate_slow 0.6s). Restating them is the
   cost of not having to enumerate every property `all` covers; if those values
   ever change, the only symptom here is that a chip's own animation speeds up
   or slows down, never a missing focus ring.

   transition-timing-function is deliberately not restated: the theme's `ease`
   is a single-item list, which CSS repeats across every entry above.

   Chips with no `.c_animate` class - the 212 fabric swatches, which measured
   `transition-duration: 0s` - need none of this and are not selected. */
[data-ds-a11y-opt].c_animate,
#mini_shopping_cart_close.c_animate {
	transition-property: all, outline-color, outline-width, outline-offset, box-shadow;
	transition-duration: 0.4s, 0s, 0s, 0s, 0s;
}

[data-ds-a11y-opt].c_animate_fast {
	transition-property: all, outline-color, outline-width, outline-offset, box-shadow;
	transition-duration: 0.2s, 0s, 0s, 0s, 0s;
}

[data-ds-a11y-opt].c_animate_slow {
	transition-property: all, outline-color, outline-width, outline-offset, box-shadow;
	transition-duration: 0.6s, 0s, 0s, 0s, 0s;
}

/* The Add to Cart plate is the same problem from a different rule: it is not a
   .c_animate element, it has `transition: all 0.25s ease-in-out` of its own
   (customizer_style.css:2659). Measured before this rule, its ring started at
   `rgb(255,255,255)` - currentColor, because the plate's text is white on teal -
   and took the full 250ms to reach #191412, i.e. the ring was invisible against
   the white page for a quarter of a second on the page's primary action. */
#c_finalize {
	transition-property: all, outline-color, outline-width, outline-offset;
	transition-duration: 0.25s, 0s, 0s, 0s;
}

/* The swatch groups (fabric, shade, colour filter) tag themselves `tight`.
   Those are the chips that can be near-white on a white row, where a dark ring
   standing 2px off the chip reads as a detached box rather than as focus.
   Hug the chip instead and let the white halo fall outside the ring. */
[data-ds-a11y-opt="tight"]:focus-visible,
[data-ds-a11y-opt="tight"]:focus-within {
	outline-offset: 1px;
}

/* Kill only native button chrome. Do not set font/color/background here —
   those overrides beat customizer_style.css (#c_finalize color, line-height,
   the #c_price / #c_add_to_cart fills) and washed the plate out. */
button#c_finalize {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	padding: 0;
	display: block;
	width: 100%;
	cursor: pointer;
	box-sizing: border-box;
}
button#c_finalize::-moz-focus-inner {
	border: 0;
	padding: 0;
}
button#c_finalize #c_price,
button#c_finalize #c_add_to_cart,
button#c_finalize #c_full_price {
	display: block;
}
#c_finalize::after {
	pointer-events: none;
}
#c_finalize:focus-visible {
	outline: 3px solid var(--ds-a11y-ring);
	outline-offset: -3px;
}

/* Native radio/checkbox overlay on existing chips (JSON: real input + label).
   Opacity 0 keeps the control in the tree and tab order; display:none is not
   used. Focus ring is drawn on the host via :focus-within. */
.ds-native-choice-host,
[data-ds-a11y-opt] {
	position: relative;
}
.ds-native-choice {
	position: absolute;
	inset: 0;
	z-index: 2;
	margin: 0;
	cursor: pointer;
	pointer-events: none;
}
.ds-native-choice__input {
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	pointer-events: none;
}
.ds-native-choice__input:focus {
	outline: none;
}
/* .ds-native-choice:has(.ds-native-choice__input:disabled) {
	pointer-events: none;
} */

/* Theme click widgets upgraded to native <button type="button">.
   Do not use the `background` shorthand here — Jupiter paints some of these
   with background-image icons. The paint/box restore is the block below. */
button.mk-nav-responsive-link,
button.mk-nav-arrow,
button.ssz_add_remove,
button.ssz_mdets,
button.swatch_to_order,
button#sdb_add_remove,
button#mini_shopping_cart_close,
button.mk-fullscreen-close,
button#mobi_search_trigger,
button.startShoping,
button.sizingButton,
button.pop4sections_start,
button.ds-native-btn {
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	color: inherit;
	border: 0;
	cursor: pointer;
}

/* These controls all shipped as <div>/<span> with no background and no padding.
   As buttons they pick up the UA `background-color: ButtonFace` and
   `padding: 1px 6px`, which painted grey boxes behind the mobile hamburger, the
   mobile search icon and every collapsible row of the responsive nav
   (.mk-responsive-nav .mk-nav-arrow is width:100%/height:100%, so it filled the
   whole row). background-color, not the shorthand, so background-image icons
   survive. #sdb_add_remove and #mini_shopping_cart_close are deliberately out of
   this list: the theme gives them real backgrounds (#aa9870 and #FFF) that these
   element+id selectors would otherwise out-specify. */
button.mk-nav-responsive-link,
button.mk-nav-arrow,
button.ssz_add_remove,
button.ssz_mdets,
button.swatch_to_order,
button.mk-fullscreen-close,
button#mobi_search_trigger,
button.startShoping,
button.sizingButton,
button.pop4sections_start {
	background-color: transparent;
}

/* Only the ones that had no padding of their own before the upgrade.
   .mk-nav-responsive-link is left out — its 10px comes from the theme and a
   reset here would out-specify it and shrink the hamburger box. */
button.mk-nav-arrow,
button.mk-fullscreen-close,
button#mobi_search_trigger,
button#mini_shopping_cart_close,
button.startShoping {
	padding: 0;
}

/* min-width:44px above (WCAG 2.5.8) widened the box and buttons centre their
   content, which moved the magnifier a few px left of where it used to sit. */
button#mobi_search_trigger {
	text-align: right;
}
button.ds-native-btn {
	display: block;
	width: 100%;
	height: 100%;
	background: transparent;
	padding: 0;
	margin: 0;
}
button.mk-nav-arrow {
	display: block;
}

/* ════════════════════════════════════════════════════════════════════════════
   3. THE MINI-CART DIALOG                   (QR finding 2: focus does not move
                                              from the trigger to the dialog)
   ════════════════════════════════════════════════════════════════════════════
   The panel is the site-wide Jupiter mini-cart, .mk-shopping-cart-box, which
   js/flo_rd_customizer.js auto-opens after an add-to-cart by putting
   `mini-cart-open` on #mk-boxed-layout. js/ds-a11y.js gives it the dialog
   semantics and moves focus into it; these rules only make the close control
   look like the button it now is. */

/* #mini_shopping_cart_close ships as `<div class="c_animate">x</div>` - no role,
   no tabindex, and a lowercase letter x for a label. js/ds-a11y.js turns it into
   a real button with an accessible name; this gives it the pointer affordance
   and the ring. */
#mini_shopping_cart_close {
	cursor: pointer;
	color: #767372;
}

#mini_shopping_cart_close:focus-visible {
	outline: 2px solid var(--ds-a11y-ring);
	outline-offset: 2px;
}

/* The cart's own links and buttons (View cart, Checkout, the per-line remove
   controls) come from WooCommerce and are already real anchors, so they are
   focusable without help. They had no ring of their own because the theme
   resets outlines globally - restore one inside the dialog only, where the
   keyboard is now guaranteed to land. */
.mk-shopping-cart-box a:focus-visible,
.mk-shopping-cart-box button:focus-visible {
	outline: 2px solid var(--ds-a11y-ring);
	outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════════════
   4. TOUCH TARGETS AND ICON-ONLY CONTROLS
   ════════════════════════════════════════════════════════════════════════════
   WCAG 2.5.8 asks for 24×24 CSS px (or equivalent spacing). Header cart
   measured ~20px tall because the 16px SVG set the link box. Footer social
   icons on the live Jupiter footer are 25×18. Carousel arrows and dots are
   the same class of icon-only control. */
.mk-search-trigger.add-header-height,
.shopping-cart-header.add-header-height .mk-shoping-cart-link {
	min-width: 44px;
	min-height: 44px;
}

#mobi_search_trigger {
	min-width: 44px;
	box-sizing: border-box;
}

.slick-dots li button {
	min-width: 24px;
	min-height: 24px;
	padding: 7px;
	box-sizing: border-box;
}

a:has(> img[src*="social_media_logo"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	box-sizing: border-box;
}
a:has(> img[src*="social_media_logo"]) img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

img.other_pic {
	font-size: 0;
	line-height: 0;
	color: transparent;
}

/* ════════════════════════════════════════════════════════════════════════════
   5. INLINE LINKS NEED A NON-COLOR CUE
   ════════════════════════════════════════════════════════════════════════════
   Jupiter strips underlines from body links. WooCommerce info notices (e.g.
   "Sign in to your account" on communication-preferences) and prose links on
   shipping / category copy then fail "Links must be distinguishable without
   relying on color". Sale and product CTAs keep their existing treatment. */
.woocommerce-info a,
.woocommerce-message a,
.theme-content p a:not(.design_yours):not(.ds-md-btn),
.theme-content li a:not(.design_yours):not(.ds-md-btn) {
	text-decoration: underline;
}

/* Pages that hide #mk-page-introduce still need a visible H1 in the content. */
.ds-a11y-page-h1 {
	font-size: 32px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: #333;
	margin: 0 0 1em;
	line-height: 1.25;
}

/* Privacy / Terms: keep section titles looking like the old bold paragraphs. */
.theme-content h2.ds-policy-h2 {
	font-size: 18px;
	font-weight: 700;
	line-height: 27px;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
	font-family: inherit;
	margin: 0 0 20px;
}

/* Header: Jupiter sets outline:none on every a:focus. Restore a keyboard ring. */
html {
	scroll-padding-top: 72px;
}

.mk-header a:focus-visible,
.mk-header button:focus-visible,
.mk-header-inner a:focus-visible,
.mk-header-inner button:focus-visible,
.mk-header-nav-container a:focus-visible,
.mk-header-nav-container button:focus-visible,
.mk-header-toolbar a:focus-visible,
.manoela-nav-header-shell a:focus-visible,
.manoela-nav-header-shell button:focus-visible {
	outline: 2px solid var(--ds-a11y-ring);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--ds-a11y-halo);
}

/* Our Story shopping overlay: black CTAs and the X close sit on dark photos.
   Invert the header ring so the white outline lands on the black button. */
a.btn-black:focus-visible,
a.startShoping:focus-visible,
.pop4sections .close-button:focus-visible,
.pop4sections a:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--ds-a11y-ring);
}

#modify_wrap_login .update_cart.cart_link:focus-visible {
	outline: 2px solid var(--ds-a11y-ring);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--ds-a11y-halo);
}

/* Blog comparison tables: keep the page to vertical scroll; the table
   itself becomes a labelled two-dimensional region when it overflows. */
.ds-table-scroll {
	max-inline-size: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Contact CF7: row font-size is 0, so labels need an explicit size. */
.mk-contact-form-wrapper .ds-contact-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.04em;
	color: #333;
	margin: 0 0 8px;
}
.mk-contact-form-wrapper .ds-contact-req,
.mk-contact-form-wrapper .ds-contact-opt {
	font-weight: 400;
	color: #555;
}

/* Reviews: gold quote columns, popup copy, and EmbedSocial "Read more". */
.vc_custom_1557494978903,
.vc_custom_1557494983920 {
	background-color: #86734C !important;
}
.vc_custom_1557494969666,
.vc_custom_1557494969666 p {
	color: #787366 !important;
}
#ds-popup h2 {
	color: #787366;
}
#ds-popup .ds-subh,
#ds-popup .ds-pt {
	color: #707071;
}
#theme-page .es-text-shortener-control {
	color: #0068F3 !important;
}
.ds-bottom-heading {
	color: #787366;
}
.page-id-36057 h2.brandon:not(.ds_rw_featured_in_h2) {
	color: #787366;
}

/* Keyboard-reachable leftover scroll panes (PLP SimpleBar rails, etc.).
   Product-type chips wrap in archive_product_filter.css, so this ring is only
   for regions js/ds-a11y.js still has to stamp tabindex on. */
[data-ds-a11y-scroll]:focus-visible {
	outline: 2px solid var(--ds-a11y-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--ds-a11y-halo);
}

/* PLP type / style / shade chips and free-swatch actions: keyboard ring only. */
#pf_prod_types li:focus-visible,
#pf_prod_types li:focus-within,
#pf_prod_types_unique li:focus-visible,
#pf_prod_types_unique li:focus-within,
#pf_prod_styles li:focus-visible,
#pf_prod_styles li:focus-within,
#pf_prod_colors li:focus-visible,
#pf_prod_colors li:focus-within,
#pf_prod_filters_wrap .pf_f_block_close:focus-visible,
#pf_prod_filters_wrap .pf_f_block_close:focus-within,
#ssh_c li:focus-visible,
#ssh_c li:focus-within,
#ssh_price li:focus-visible,
#ssh_price li:focus-within,
.kid_pet_cleanable_filters:focus-visible,
.kid_pet_cleanable_filters:focus-within,
#extra_filters_toggle:focus-visible,
#extra_filters_toggle:focus-within,
.mk-search-trigger:focus-visible,
.mk-fullscreen-close:focus-visible,
#mk-fullscreen-search-input:focus-visible,
#mobi_search_trigger:focus-visible,
.mk-nav-responsive-link:focus-visible,
.mk-responsive-nav .mk-nav-arrow:focus-visible {
	outline: 2px solid var(--ds-a11y-ring);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--ds-a11y-halo);
}

.mk-fullscreen-search-overlay .mk-fullscreen-close:focus-visible,
.mk-fullscreen-search-overlay #mk-fullscreen-search-input:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--ds-a11y-ring);
}

.ssz_add_remove:focus-visible,
.ssz_mdets:focus-visible,
#sdb_add_remove:focus-visible,
.swatch_to_order:focus-visible {
	outline: 2px solid var(--ds-a11y-ring);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--ds-a11y-halo);
}

/* “More Details” sits off-canvas until hover. Bring it in for keyboard focus. */
.ssz_imgwrap:focus-within img {
	filter: brightness(0.7);
}
.ssz_imgwrap:focus-within .ssz_mdets {
	top: 50%;
}

/* Checkout email: visible only after WooCommerce marks the field invalid. */
.woocommerce-checkout .ds-checkout-error {
	display: block;
	margin: 8px 0 0;
	color: #b00000;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.02em;
}
.woocommerce-checkout .ds-checkout-error[hidden] {
	display: none;
}

.woocommerce-checkout #customer_details .form-row > label:focus-visible,
.woocommerce-checkout .shipping_ns_option input:focus-visible,
.woocommerce-checkout #gateways_select_wrap input:focus-visible {
	outline: 2px solid var(--ds-a11y-ring);
	outline-offset: 3px;
}

/* MAN-NAV-002: disclosure button beside destination links. Hover stays. */
.ds-nav-disclosure {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0 2px;
	padding: 0 7px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: inherit;
	cursor: pointer;
}
.ds-nav-disclosure:focus-visible {
	outline: 2px solid var(--ds-a11y-ring);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--ds-a11y-halo);
}
#flo_menu_pull_right .menu-item-has-children.ds-submenu-open > .sub-menu {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* MAN-MEDIA-001: pause/play stays in the accessibility tree and tab order,
   but is visually hidden until keyboard focus so it does not overlay the video. */
.ds-motion-host {
	position: relative;
}
.ds-motion-toggle {
	position: absolute !important;
	z-index: 3;
	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;
	background: transparent;
	color: transparent;
}
.ds-motion-toggle:focus,
.ds-motion-toggle:focus-visible {
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	white-space: normal;
	right: 10px;
	bottom: 10px;
	padding: 8px 12px;
	border: 2px solid #191412;
	background: #ffffff;
	color: #191412;
	font-family: 'Josefin Sans', Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	cursor: pointer;
}
.ds-motion-toggle:focus-visible {
	outline: 2px solid var(--ds-a11y-ring);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--ds-a11y-halo);
}

/* G-21db50df33 / G-8733ec5461 / G-e6b381d465 — recorded homepage greys on white. */
[style*="#a8a8a8" i],
[style*="color: rgb(168, 168, 168)"] {
	color: #949494 !important;
}
[style*="#afafaf" i],
[style*="color: rgb(175, 175, 175)"] {
	color: #767676 !important;
}
[style*="#bebebe" i],
[style*="color: rgb(190, 190, 190)"] {
	color: #949494 !important;
}

/* MAN-MEDIA-004: Plyr wrap around oEmbed YouTube. Keep the embed inside the
   article column; the player CSS otherwise only needs its own file. */
.ds-plyr-embed,
.theme-content .plyr {
	max-width: 100%;
}

/* ════════════════════════════════════════════════════════════════════════════
   6. REDUCED MOTION
   ════════════════════════════════════════════════════════════════════════════
   The skip link slides in from -9999px. That is not a transition today (no
   `transition` property on .ds-skip-link), so there is nothing to disable - the
   block exists to keep the next person from adding one without thinking about
   it. `.c_animate` on the close button IS a 0.4s all-transition from
   customizer_style.css; scope the opt-out to this file's own controls rather
   than touching the shared class. */
@media (prefers-reduced-motion: reduce) {
	.ds-skip-link,
	#mini_shopping_cart_close {
		transition: none !important;
	}
}

/* ── Customizer accordion step heads ─────────────────────────────────────────
   js/ds-a11y-customizer.js setupStepHeads() makes the collapsible
   #cstep_N_head divs role=button / tabindex=0 and stamps data-ds-a11y-step.
   Same ring as the options, keyed off the marker for the same reason. */
[data-ds-a11y-step]:focus-visible {
	outline: 2px solid var(--ds-a11y-ring);
	outline-offset: -2px;
	box-shadow: inset 0 0 0 4px var(--ds-a11y-halo);
}