/* ==========================================================================
   Accessibility modes (One Click Accessibility / pojo-a11y) - image fixes

   The plugin paints `background: #000|#fff !important` over every element in
   high contrast / negative contrast / light background mode, which flattens
   every background image and tints every picture. These rules keep the media
   itself looking the way it does with the accessibility toolbar switched off.

   Specificity note: the plugin's selectors are written as
   `*:not(#pojo-a11y-toolbar)`, so they carry ID weight. `:not(#_a11y)` matches
   every element while adding the ID weight needed to out-rank them - that is
   the only reason it is here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Elements that carry a background image.
   js/a11y-bg-fix.js tags them with [data-a11y-bg] and re-applies the real
   image inline. This rule is the fallback that stops the black/white matte
   from covering it.
   -------------------------------------------------------------------------- */
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) [data-a11y-bg],
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) [data-a11y-bg],
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) [data-a11y-bg] {
	background-color: transparent !important;
}

/* Elementor paints section/container images through an overlay layer. */
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .elementor-background-overlay,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .elementor-background-overlay,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .elementor-background-overlay,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .elementor-background-slideshow,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .elementor-background-slideshow,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .elementor-background-slideshow,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .elementor-background-slideshow__slide__image,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .elementor-background-slideshow__slide__image,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .elementor-background-slideshow__slide__image,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .wp-block-cover__image-background,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .wp-block-cover__image-background,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .wp-block-cover__image-background {
	background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   2. Real media elements.
   High contrast paints #808080 behind every <img>, which shows through any
   transparent PNG (logos, badges, payment icons) and greys the edges of
   rounded product shots.
   -------------------------------------------------------------------------- */
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) img,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) picture,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) video,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) canvas,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) iframe,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) img,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) picture,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) video,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) canvas,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) iframe {
	/* White matte instead of black/grey: transparent artwork stays readable
	   and opaque photos are unaffected.

	   Background colour only. The plugin never sets opacity, filter or
	   visibility, so overriding those buys nothing and breaks things that
	   rely on them - forcing `opacity: 1` pinned the product gallery's zoom
	   overlay (img.zoomImg, normally opacity: 0) permanently on top of the
	   photo. Blend mode is the one exception; see below. */
	background-color: #fff !important;
}

/* --------------------------------------------------------------------------
   2b. Blend modes.

   The parent theme blends product imagery into the page:

       .c-product-grid__thumb { mix-blend-mode: darken }
       body.woo-variation-swatches .image-variable-item img { mix-blend-mode: darken }

   `darken` keeps whichever of backdrop and image is darker per pixel. On the
   site's white page that is always the image, so the photo comes through
   untouched and its white studio background melts into the tile - which is the
   whole point of the rule.

   High contrast and negative contrast paint the backdrop black. Black is
   darker than every pixel of the photo, so `darken` returns black for the
   entire element and the tile renders as a solid black square with only the
   title showing. That is the missing-images report: the images load fine, they
   are blended away.

   Light background keeps a white backdrop, so `darken` still resolves to the
   image there and that mode is left alone.

   Applied to every element, not just the two selectors above, so any other
   blended layer the theme or a plugin adds later is covered too.
   -------------------------------------------------------------------------- */
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) *:not(#pojo-a11y-toolbar),
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) *:not(#pojo-a11y-toolbar) {
	mix-blend-mode: normal !important;
	background-blend-mode: normal !important;
}

body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) img,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) picture,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) video,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) canvas,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) iframe {
	background-color: transparent !important;
}

/* An <img> that is itself the background of a tagged element keeps its own
   snapshot - do not force the white matte on it. */
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) img[data-a11y-bg],
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) img[data-a11y-bg],
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) img[data-a11y-bg] {
	background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   3. Product imagery sits on its own white studio background already, so the
   matte must not show at the edges of rounded or zoomed shots.
   -------------------------------------------------------------------------- */
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .woocommerce-product-gallery img,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .c-product__slider img,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .c-product-grid img,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .woocommerce-product-gallery img,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .c-product__slider img,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .c-product-grid img,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .woocommerce-product-gallery img,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .c-product__slider img,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .c-product-grid img {
	background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   4. Tables - drop the white grid.

   High contrast and negative contrast both apply
   `table, td, th, tr, tt { border: 1px solid #ffffff !important }`, which boxes
   every cell of the cart, checkout, order and account tables. The design has no
   grid there, so the borders go and a single soft rule between rows takes over
   where the data still has to be told apart.

   Form controls (input, textarea, select, button) keep their outline - without
   it the field itself would be invisible on a black page.
   -------------------------------------------------------------------------- */
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) table,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) thead,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) tbody,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) tfoot,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) tr,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) td,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) th,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) tt,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) table,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) thead,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) tbody,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) tfoot,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) tr,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) td,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) th,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) tt {
	border: 0 !important;
}

/* No row separators are re-added. Cart, checkout, order and account tables
   read fine without them, and the rules they replaced were still lines the
   design does not have. */

/* Variation lists inside a cart line get `dt { border-top: thin solid grey }`,
   which draws a stray rule above every attribute. */
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) dt {
	border-top: 0 !important;
}

/* --------------------------------------------------------------------------
   5. Text sitting on top of a restored background image.

   Every wrapper over the photo - the widget div, the widget container, the
   button wrapper - is painted solid by the mode and covers the picture with a
   full-width block. Those go transparent; the text keeps a plate just wide
   enough to stay readable over the image.

   Scoped to descendants of [data-a11y-bg], so only elements actually stacked
   on a restored photo are touched. Nothing else on the site changes.
   -------------------------------------------------------------------------- */
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) [data-a11y-bg] *:not(img):not(picture):not(video):not(canvas):not(iframe):not(svg):not(input):not(textarea):not(select):not(button):not(a):not([data-a11y-bg]),
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) [data-a11y-bg] *:not(img):not(picture):not(video):not(canvas):not(iframe):not(svg):not(input):not(textarea):not(select):not(button):not(a):not([data-a11y-bg]),
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) [data-a11y-bg] *:not(img):not(picture):not(video):not(canvas):not(iframe):not(svg):not(input):not(textarea):not(select):not(button):not(a):not([data-a11y-bg]) {
	background-color: transparent !important;
}

/* The plate. Three :not(#id) here, two above - the transparent rule carries a
   lot of element weight from its exclusions and would otherwise win. */
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] h1,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] h2,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] h3,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] h4,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] h5,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] h6,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] p,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] .elementor-heading-title,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] h1,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] h2,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] h3,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] h4,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] h5,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] h6,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] p,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] .elementor-heading-title {
	background-color: #000 !important;
	display: inline-block !important;
	width: auto !important;
	max-width: 100% !important;
	padding: 0.08em 0.4em !important;
}

body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] h1,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] h2,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] h3,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] h4,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] h5,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] h6,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] p,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] .elementor-heading-title {
	background-color: #fff !important;
	display: inline-block !important;
	width: auto !important;
	max-width: 100% !important;
	padding: 0.08em 0.4em !important;
}

/* An empty heading would still draw an empty plate. */
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] :empty,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] :empty,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2):not(#_a11y3) [data-a11y-bg] :empty {
	background-color: transparent !important;
	padding: 0 !important;
}

/* --------------------------------------------------------------------------
   6. Buttons need an edge in every mode.

   The plugin only borders real <button> and <input> elements, so link-buttons
   (.elementor-button, .c-button, WooCommerce's a.button) are left as a bare
   colour block. White on the dark modes, black on the light one.
   -------------------------------------------------------------------------- */
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) button,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) input[type="button"],
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) input[type="submit"],
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) input[type="reset"],
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .button,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .c-button,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .elementor-button,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .wp-block-button__link,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .single_add_to_cart_button,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .checkout-button,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) button,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) input[type="button"],
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) input[type="submit"],
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) input[type="reset"],
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .button,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .c-button,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .elementor-button,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .wp-block-button__link,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .single_add_to_cart_button,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .checkout-button {
	border: 2px solid #fff !important;
	/* `.elementor-button` transitions `all`, so the border fades in over 300ms
	   and reads as missing. Nothing here should animate. */
	transition: none !important;
}

/* Light background leaves everything white on white - controls need an edge. */
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) button,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) input,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) textarea,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) select,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .button,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .c-button,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .elementor-button,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .wp-block-button__link,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .single_add_to_cart_button,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .checkout-button {
	border: 2px solid #000 !important;
	transition: none !important;
}

/* The child theme's mobile rule `.btn-solid .elementor-button { border-color:
   #fff !important }` would paint a white edge on a white button in light mode.
   The ID weight above already out-ranks it - this keeps that explicit. */
@media ( max-width: 767px ) {
	body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .btn-solid .elementor-button {
		border-color: #000 !important;
	}
}

/* The wishlist share field is a readonly box that just displays a URL - it is
   not something you type into, so it needs no edge. */
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .c-wishlist__share-link,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .js-wishlist-share-link,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .c-wishlist__share-link,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .js-wishlist-share-link,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .c-wishlist__share-link,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .js-wishlist-share-link {
	border: 0 !important;
}

/* --------------------------------------------------------------------------
   7. Borders the design already has must stay visible.

   The plugin only ever recolours borders on form and table elements, never on
   a div. So a line the theme draws in black - the header's
   `border-bottom: 1px solid #000`, for one - simply vanishes once the page
   turns black. This repaints existing borders to match the palette. It only
   changes colour, never width, so an element with no border still has none.
   -------------------------------------------------------------------------- */
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link),
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) {
	border-color: #fff !important;
}

body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) *:not(#pojo-a11y-toolbar):not(.pojo-a11y-toolbar-link) {
	border-color: #000 !important;
}

/* The header line specifically - widened, because 1px between two black areas
   reads as nothing on a phone. `.custom-header` covers both the desktop
   (#main_header) and mobile (#mobile_header) containers. Elementor puts
   `transition: border .3s` on every .e-con, which fades the line in and makes
   it look absent. */
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .custom-header,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .custom-header {
	border-bottom: 2px solid #fff !important;
	transition: none !important;
}

body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .custom-header {
	border-bottom: 2px solid #000 !important;
	transition: none !important;
}

/* Checkboxes and radios are thinned to 1px, not stripped.

   The comment that used to sit here said they "keep the browser's own control",
   and set `border: 0`. There is no browser control to keep: moderno's min.css
   puts `appearance: none` on every input[type=radio] and input[type=checkbox]
   on this site and draws them itself - a 14px circle / 18px square whose ring
   IS a 1px border, with the state marker in ::after. So `border: 0` was not
   uncovering a native widget, it was rubbing out the ring and leaving the
   marker floating on the page. That is the missing outline in light mode.

   The 2px above is still too heavy for a 14px circle, hence 1px: the width the
   theme itself uses. Only the width is set - section 7 recolours the border to
   #000, and in the two dark modes the ring is already 1px #fff and correct. */
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) input[type="checkbox"],
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) input[type="radio"] {
	border-width: 1px !important;
}

/* The checked marker has to be recoloured by hand.

   The plugin paints with `body.pojo-a11y-* *`, and `*` does not match a
   pseudo-element, so nothing it does ever reaches `input:checked::after` - the
   6px dot the theme fills with its own near-black #070707. Measured in all
   three modes with the dot untouched at rgb(7,7,7):

     high contrast      dot #070707 on a #000 radio, black page   INVISIBLE
     negative contrast  dot #070707 on a #000 radio, black page   INVISIBLE
     light background   dot #070707 on a #fff radio               fine

   Which is exactly the report: on the cart page in the two dark modes both
   shipping options look identical and you cannot tell which is selected.

   `currentColor` rather than a literal per mode: the input's own colour is
   already set by the palette - #fff in high contrast, #ffff00 in negative,
   #000 in light background - so the dot follows the mode and matches the text
   beside it.

   Radios only. The checkbox marker is not painted from a fixed colour the way
   the radio dot is - its ::after was measured resolving to currentColor in all
   three modes, so it already tracks the palette and needs nothing here. */
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) input[type="radio"]:checked::after,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) input[type="radio"]:checked::after,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) input[type="radio"]:checked::after {
	background-color: currentColor !important;
}

/* --------------------------------------------------------------------------
   8. The floating WhatsApp button stays transparent.

   Section 2 puts a white matte behind every <img> so transparent artwork does
   not disappear into the black page. The WhatsApp logo is the one place that
   backfires: it is a green circle on an empty canvas, so the matte shows up as
   a white square with a circle sitting in it. The mark is high contrast on its
   own and needs no plate.

   The widget div behind it is painted solid by the mode and is exactly the same
   70x70 as the icon, so it has to go transparent too or the square just changes
   colour. `.elementor-widget-container` and the <a> are already transparent.

   Matched on the wa.me link rather than the image file, so re-uploading the
   icon does not undo this. The Elementor id is listed alongside `:has()` to
   cover browsers without `:has()` support.
   -------------------------------------------------------------------------- */
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) a[href*="wa.me"] img,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) a[href*="wa.me"] img,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) a[href*="wa.me"] img,
body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .elementor-element-350b774,
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .elementor-element-350b774,
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .elementor-element-350b774 {
	background-color: transparent !important;
}

body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .elementor-widget-image:has( a[href*="wa.me"] ),
body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .elementor-widget-image:has( a[href*="wa.me"] ),
body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .elementor-widget-image:has( a[href*="wa.me"] ) {
	background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   9. The product grid's add-to-cart block stays transparent below 1190px.

   On a phone or tablet this block is not a bar - the theme hides the quick-view
   button and the "add to cart" label and leaves a single bag glyph floating in
   the bottom corner of the product photo (moderno min.css, inside
   `@media (max-width: 1189px)`: quickview and text `display:none`, the link
   `padding: 10px; background-color: transparent`). 1189px is the theme's own
   breakpoint for that switch, so it is the one used here rather than a rounder
   number. From 1190px up the same block IS a solid bar that slides in on hover,
   and there it is left alone.

   With no accessibility mode on, the block and its link are already transparent
   and none of this applies. It is the contrast palettes that paint them: every
   element gets `background: #000|#fff !important`, which turns the floating
   glyph into an opaque square sitting on the product photo. A plain
   `background: transparent !important` in the theme CSS cannot undo that -
   `body.pojo-a11y-high-contrast *` outweighs a bare class selector - which is
   why the fix belongs here, with the id weight the rest of this file uses.

   Trade-off worth knowing: the glyph then sits directly on the photo rather
   than on a flat plate, so its contrast is whatever the product image gives it.
   The icon font draws a filled bag shape behind the outline (`--icon-bag-back`
   on the ::after), so it keeps an edge over most images - but if a specific
   category's photography ever swallows it, the answer is a plate sized to the
   glyph, not repainting the whole block.
   -------------------------------------------------------------------------- */
@media ( max-width: 1189px ) {
	body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .c-product-grid__atc-block,
	body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .c-product-grid__atc-block > a,
	body.pojo-a11y-high-contrast:not(#_a11y):not(#_a11y2) .c-product-grid__atc-block > button,
	body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .c-product-grid__atc-block,
	body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .c-product-grid__atc-block > a,
	body.pojo-a11y-negative-contrast:not(#_a11y):not(#_a11y2) .c-product-grid__atc-block > button,
	body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .c-product-grid__atc-block,
	body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .c-product-grid__atc-block > a,
	body.pojo-a11y-light-background:not(#_a11y):not(#_a11y2) .c-product-grid__atc-block > button {
		background-color: transparent !important;
	}
}

/* Grayscale mode is a deliberate visitor choice - the page-wide
   `filter: grayscale(100%)` on <body> is left alone.

   The focus outline (`:focus { outline: thin dotted }`) and the dotted
   underline on <abbr> are left alone too - both are the affordance, not
   decoration. */