/**
 * Accessibility: minimum touch-target size (WCAG 2.2 SC 2.5.8 / axe `target-size`).
 *
 * Carousel pagination dots ship at 4–10px, far below the 24x24 CSS-pixel
 * minimum. Each rule below grows only the *hit box* — the painted pill keeps
 * its original size, colour and radius — so the controls look identical while
 * becoming operable by touch.
 *
 * Two techniques are used, depending on where the visual lives:
 *   - Owl dots paint their pill on an inner <span>, so the <button> itself can
 *     simply be grown to at least 24x24 and centre its child.
 *   - Swiper / product-gallery dots paint the pill on the element itself, so a
 *     transparent border widens the border box (what hit-testing and axe
 *     measure) while `background-clip: padding-box` keeps the paint at its
 *     original size.
 *
 * Negative block margins keep each dots row at its original height, so none of
 * this shifts surrounding layout.
 */

/* --- Owl Carousel dots (product carousels) ---
   Selectors are deliberately heavier than they look like they need to be.
   Two rules outrank a plain `.owl-dots .owl-dot`:
     - owl.theme.default: `.owl-theme .owl-dots .owl-dot { display:inline-block }` (0,3,0)
     - Blocksy product-card.css, <=600px: `.products.owl-theme .owl-dots
       { display:flex; gap:8px }` (0,3,0)
   With those winning, the dots kept an 8px gap on top of the 24px boxes and
   the pill sat at the left edge of its box instead of the centre. Both rules
   below are (0,3,1). The row can be flex (mobile) or block with inline dots
   (desktop), so the dots are inline-flex: correct in either.

   min-width, not width: the pill differs by breakpoint. On mobile it is a
   10x4 dot (grown to a 24x24 box, 24px apart — its native 18px spacing cannot
   fit 24px targets). On desktop it is a 96x4 bar with 7px side margins, so the
   button is already 110px wide and only its 14px height was short; a fixed
   24px width squashed those bars to 10px pills. */
.owl-carousel div.owl-dots:not(.disabled) {
	gap: 0; /* 24px hit boxes sit edge-to-edge: centres land exactly 24px apart */
	align-items: center;
}

.owl-carousel .owl-dots button.owl-dot {
	display: inline-flex;
	vertical-align: middle;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 24px;
	height: 24px;
	margin-block: -10px; /* row height unchanged (4px mobile, one line box desktop) */
	padding: 0;
	background: none;
	border: 0;
}

/* --- Swiper pagination bullets ---
   Bullets ship at either 8px or 10px across the site, so the border is sized
   for the smaller of the two: 8 + 16 = 24. The active bullet is wider (24px
   or 30px), so its hit box is 40x24 or 46x26.

   The margins need their own, heavier rule. Swiper's
   `.swiper-pagination-horizontal.swiper-pagination-bullets
   .swiper-pagination-bullet { margin: 0 var(--…-horizontal-gap,4px) }` is
   (0,3,0) and outranked a plain (0,2,0) selector, so the border applied but
   the margins did not: the row grew 8px -> 24px, the pills rose 8px and sat
   24px apart. The rule below is (0,4,0). Hit boxes sit edge-to-edge, so
   inactive pills are 16px apart — their native 8px cannot fit 24px targets
   without overlapping neighbouring hit boxes (which axe fails). */
.swiper-pagination-bullets .swiper-pagination-bullet {
	box-sizing: content-box;
	border: 8px solid transparent;
	background-clip: padding-box;
}

.swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet {
	margin-block: -8px; /* row keeps its original height and position */
	margin-inline: 0;
}

/* --- Product gallery / related-products carousel dots ---
   The row's own `gap: 12px` (product-carousels.css) would stack on top of the
   16px of border, pushing painted pills 28px apart. Zero it, as for Owl above:
   hit boxes sit edge-to-edge and pills end up 16px apart — the closest to the
   original 12px that doesn't overlap neighbouring hit boxes (which axe fails). */
.carousel-dots {
	gap: 0;
}

.carousel-dots .dot {
	box-sizing: content-box;
	border: 8px solid transparent;
	margin-block: -8px;
	background-clip: padding-box;
}