/* roxoss-attributes swatches (Flatsome-proof: resets its button styles) */
.rxa-wrap { position: relative; }
.rxa-wrap select:not(.rxa-proxy) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important; opacity: 0; pointer-events: none; overflow: hidden; clip: rect(0 0 0 0); }
.rxa-swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 6px; }
.rxa-sw {
	position: relative; display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box;
	min-height: 36px; min-width: 36px; margin: 0; padding: 4px 11px; vertical-align: middle;
	border: 1px solid #bdbdbd; border-radius: 6px; background: #fff; color: #222; box-shadow: none;
	font: inherit; font-size: .9em; font-weight: 400; line-height: 1.2; letter-spacing: 0; text-transform: none; text-decoration: none;
	cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.rxa-sw:hover { border-color: #555; color: #222; }
.rxa-sw:focus-visible { outline: 2px solid #1a56b0; outline-offset: 2px; }
.rxa-dot { display: block; flex: none; position: relative; width: 30px; height: 30px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); overflow: hidden; }
.rxa-light .rxa-dot { box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); }
.rxa-dot--img img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; }

/* colour / image: a square frame (equal padding on all sides) with the colour centred; product pages show the name
   under it, archive cards only the square (name in the tooltip and the accessible label) */
.rxa-sw--color, .rxa-sw--image {
	flex-direction: column; align-items: center; gap: 3px; padding: 0; min-width: 0; min-height: 0;
	border: 0; background: none; box-shadow: none; vertical-align: top;
}
.rxa-box {
	position: relative; display: flex; align-items: center; justify-content: center; flex: none; box-sizing: content-box;
	padding: 2px; border: 1px solid #bdbdbd; border-radius: 5px; background: #fff; line-height: 0; transition: border-color .15s, box-shadow .15s;
}
.rxa-sw--color .rxa-name, .rxa-sw--image .rxa-name { display: block; max-width: 72px; font-size: .75em; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.rxa-sw--color:hover, .rxa-sw--image:hover { border: 0; }
.rxa-sw--color:hover .rxa-box, .rxa-sw--image:hover .rxa-box { border-color: #555; }
.rxa-archive .rxa-sw--color .rxa-name, .rxa-archive .rxa-sw--image .rxa-name { display: none; }
.rxa-archive .rxa-sw--color[data-tip]:hover::after, .rxa-archive .rxa-sw--color[data-tip]:focus-visible::after,
.rxa-archive .rxa-sw--image[data-tip]:hover::after, .rxa-archive .rxa-sw--image[data-tip]:focus-visible::after {
	content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
	background: #222; color: #fff; font-size: 12px; line-height: 1.3; padding: 3px 7px; border-radius: 4px; white-space: nowrap; z-index: 30; pointer-events: none;
}

/* selected: thicker dark ring + check mark / bold, never colour alone */
.rxa-sw.rxa-on { border-color: #111; box-shadow: 0 0 0 1px #111; }
.rxa-sw--color.rxa-on, .rxa-sw--image.rxa-on { box-shadow: none; }
.rxa-on .rxa-box { border-color: #111; box-shadow: 0 0 0 1px #111; }
.rxa-sw--color.rxa-on .rxa-name, .rxa-sw--image.rxa-on .rxa-name { font-weight: 700; }
.rxa-sw--label.rxa-on { font-weight: 700; }
.rxa-on .rxa-dot::after {
	content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: #fff; font-size: 15px; font-weight: 700; text-shadow: 0 0 2px #000, 0 0 3px #000;
}

/* unavailable (combination does not exist) / out of stock: struck through */
.rxa-sw.rxa-na { opacity: .4; }
.rxa-sw.rxa-oos { color: #777; }
.rxa-sw.rxa-na::before, .rxa-sw.rxa-oos::before {
	content: ""; position: absolute; left: 3px; right: 3px; top: 50%; border-top: 2px solid rgba(70,70,70,.85);
	transform: rotate(-45deg); pointer-events: none; z-index: 2;
}
.rxa-sw--label.rxa-na::before, .rxa-sw--label.rxa-oos::before { transform: rotate(-12deg); }
/* colour / image: the line crosses the square, not the name under it */
.rxa-sw--color.rxa-na::before, .rxa-sw--color.rxa-oos::before, .rxa-sw--image.rxa-na::before, .rxa-sw--image.rxa-oos::before { display: none; }
.rxa-na .rxa-box::before, .rxa-oos .rxa-box::before {
	content: ""; position: absolute; left: 1px; right: 1px; top: 50%; border-top: 2px solid rgba(70,70,70,.85);
	transform: rotate(-45deg); pointer-events: none; z-index: 2;
}

.rxa-current { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* chosen colour for screen readers; the names are on screen */

/* archive cards: small row */
.rxa-archive { gap: 4px; margin: 4px 0 6px; align-items: center; }   /* label, squares and text buttons on one centre line */
.rxa-archive .rxa-sw { min-height: 0; min-width: 0; font-size: .75em; padding: 1px 6px; border-radius: 4px; }
.rxa-archive .rxa-on .rxa-dot::after { font-size: 11px; }
.rxa-more { font-size: .75em; color: #555; text-decoration: none; }
.rxa-archive-label { font-size: .75em; line-height: 22px; color: #555; margin-right: 2px; }
.rxa-archive .rxa-sw[hidden], .rxa-more[hidden] { display: none !important; }
.rxa-archive .rxa-oos { opacity: .45; }
.rxa-archive-current { flex: 0 0 100%; margin-top: -2px; font-size: .75em; line-height: 1.3; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rxa-archive .rxa-sw--label { line-height: 1.2; height: 22px; min-height: 22px; padding: 0 7px; }   /* as tall as the colour squares (18 + 2x1 + 2x1) */
.rxa-archive .rxa-sw--color, .rxa-archive .rxa-sw--image { padding: 0; }
.rxa-archive .rxa-box { padding: 1px; border-radius: 3px; }
.rxa-archive .rxa-dot { width: 18px; height: 18px; border-radius: 2px; }

/* Flatsome rounds buttons (button { border-radius: 99px }) with higher specificity: keep the squares square */
.rxa-swatches .rxa-sw { border-radius: 6px !important; }
.rxa-swatches .rxa-sw--color, .rxa-swatches .rxa-sw--image { border-radius: 5px !important; }
.rxa-archive .rxa-sw--color, .rxa-archive .rxa-sw--image { border-radius: 3px !important; }
/* 0.1.7: the theme makes links in the card text display:block, so the size labels lost their flex centring and the
   text sat at the top of the 22px box (Alex 2026-10-22) */
.products .rxa-archive a.rxa-sw--label, .rxa-archive a.rxa-sw--label {
	display: inline-flex !important; align-items: center; justify-content: center; line-height: 1 !important; margin: 0 !important;
}
/* 0.2.5: hidden (folded into "+N") must beat the inline-flex !important above (it did not, so the fold showed only
   at widths where everything fitted anyway) */
.products .rxa-archive .rxa-sw[hidden], .rxa-archive a.rxa-sw[hidden], .rxa-archive .rxa-more[hidden] { display: none !important; }

/* product page: text buttons that would need a second row show as a dropdown (front.js sets .rxa-dd) */
.rxa-wrap > select.rxa-proxy { display: none; }
.rxa-wrap.rxa-dd > .rxa-swatches { display: none; }
.rxa-wrap.rxa-dd > select.rxa-proxy { display: block; width: 100%; max-width: 100%; margin: 2px 0 6px; }

/* 0.2.7: one swatch area per card (.rxa-cardsw, empty on cards without swatches, right above the button) with the
   server's height estimate for wide (data-w, text column ~200px) and narrow (data-n, ~135px) cards. Shop, category and
   search pages: every card carries its visual row's tallest area per screen size (--rxa-lw/ln desktop, mw/mn tablet,
   sw/sn phone; inc/front.php rxa_card_rows), so prices, swatch rows and buttons line up from the first paint, no
   script, nothing moves after load. Other card lists (sliders, related, home rows) reserve the tallest area of the
   whole list (:where() rules from small to large, the largest value present wins). Generated by
   tools/gen-card-reserve.py in the roxoss-plugins repo. */
.rxa-cardsw { display: flex; flex-direction: column; flex: none; }
.product-small.col > .col-inner { container: rxcard / inline-size; }
@media (min-width: 850px) {
	@container rxcard (min-width: 200px) { .rxa-cardsw[data-r] { min-height: var(--rxa-lw, 0px); } }
	@container rxcard (max-width: 199.98px) { .rxa-cardsw[data-r] { min-height: var(--rxa-ln, 0px); } }
}
@media (min-width: 550px) and (max-width: 849.98px) {
	@container rxcard (min-width: 200px) { .rxa-cardsw[data-r] { min-height: var(--rxa-mw, 0px); } }
	@container rxcard (max-width: 199.98px) { .rxa-cardsw[data-r] { min-height: var(--rxa-mn, 0px); } }
}
@media (max-width: 549.98px) {
	@container rxcard (min-width: 200px) { .rxa-cardsw[data-r] { min-height: var(--rxa-sw, 0px); } }
	@container rxcard (max-width: 199.98px) { .rxa-cardsw[data-r] { min-height: var(--rxa-sn, 0px); } }
}
@container rxcard (min-width: 200px) {
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-w="26"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 26px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-w="44"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 44px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-w="52"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 52px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-w="70"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 70px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-w="78"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 78px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-w="88"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 88px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-w="96"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 96px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-w="104"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 104px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-w="114"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 114px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-w="122"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 122px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-w="132"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 132px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-w="140"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 140px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-w="158"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 158px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-w="176"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 176px; }
}
@container rxcard (max-width: 199.98px) {
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-n="26"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 26px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-n="44"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 44px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-n="52"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 52px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-n="70"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 70px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-n="78"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 78px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-n="88"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 88px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-n="96"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 96px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-n="104"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 104px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-n="114"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 114px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-n="122"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 122px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-n="132"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 132px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-n="140"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 140px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-n="158"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 158px; }
	:where(:is(.products, .row, .flickity-slider):has(> .product-small.col .rxa-cardsw[data-n="176"]) > .product-small.col .rxa-cardsw:not([data-r])) { min-height: 176px; }
}

/* 0.2.7: a text chip never wraps inside itself (a "Samsung Galaxy XCover 4" chip broke into two lines and made its
   row taller than reserved): one line, cut with an ellipsis at the card width; the full name is in the aria-label */
.rxa-archive a.rxa-sw--label { max-width: 100%; min-width: 0; }
.rxa-archive .rxa-sw--label .rxa-name { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }