/* v0.7.6.11 Colour dots. 44px tap targets, visible focus ring, the colour name is always shown (not colour-only). */
.bhc{margin:.25rem 0 1rem}
.bhc-now{margin:0 0 .4rem;font-size:1rem}
.bhc-lab{font-weight:600}
.bhc-cnt{color:#5b5560;font-size:.9em}
.bhc-dots{display:flex;flex-wrap:wrap;gap:2px;margin:0 -4px}
.bhc-dot{width:44px;height:44px;min-width:44px;padding:0;margin:0;border:0;background:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
.bhc-dot[hidden]{display:none}
/* edge #858585 = 3.7:1 on white, so near-white swatches (White, Natural, Ivory...) are still told apart */
.bhc-sw{width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px #858585;display:block}
.bhc-dot[aria-checked="true"] .bhc-sw{box-shadow:inset 0 0 0 1px #858585,0 0 0 2px #fff,0 0 0 4px #3d2f4f}
/* check colour picked per swatch in JS by WCAG contrast (ck-dark / ck-light, >=3:1); two-tone swatches get a white disc behind a dark check (15:1) */
.bhc-dot[aria-checked="true"]::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:12px;margin:-8px 0 0 -4px;border:solid #2b2233;border-width:0 3px 3px 0;transform:rotate(45deg)}
.bhc-dot.ck-light[aria-checked="true"]::after{border-color:#fff}
.bhc-dot.two[aria-checked="true"]::before{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #858585}
.bhc-dot:focus-visible{outline:3px solid #6b3fa0;outline-offset:1px;z-index:1}
.bhc-lab[hidden]{display:none}
.bhc-tone{margin:.35rem 0 0}
.bhc-dot:hover .bhc-sw{transform:scale(1.08)}
.bhc-dot:disabled{cursor:not-allowed;opacity:.35}
.bhc-dot:disabled .bhc-sw{background-image:linear-gradient(135deg,transparent 46%,#555 46%,#555 54%,transparent 54%)!important}
.bhc-more{min-height:44px;margin-top:.35rem;padding:.4rem 1rem;border:1px solid #3d2f4f;border-radius:999px;background:#fff;color:#3d2f4f;font:inherit;font-weight:600;cursor:pointer}
.bhc-more:focus-visible{outline:3px solid #6b3fa0;outline-offset:2px}
/* Woo: label above the dots (one column), select stays below */
table.variations tr.bhc-row,table.variations tr.bhc-row>td{display:block!important;width:100%!important;max-width:none;text-align:left;padding-left:0}
/* the dots show 'Color: <name>'; the select's own label stays for screen readers only */
table.variations tr.bhc-row>th{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
table.variations{width:100%}
/* Woo: the select stays for no-JS and screen readers, smaller under the dots */
.bhc-woo{margin-bottom:.5rem}
select.bhc-select{max-width:260px}
@media (prefers-reduced-motion:no-preference){.bhc-sw{transition:transform .12s}}
/* v0.7.6.23.8.36: colour dots on shop cards (Audra Nov 1). Pictures only inside the card button; visible 'N colors' label. */
.bhs-sws{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:6px 0 2px}
.bhs-swd{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px}
.bhs-swc{display:inline-block;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px #858585}
.bhs-swm,.bhs-swl{font-size:13px;line-height:1.2;color:#4a4458;font-weight:600}
.bhs-sws .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Woo category / product-collection cards (server-rendered, inc/swatches.php) */
.bh-wsw{display:flex;flex-wrap:wrap;align-items:center;justify-content:inherit;gap:4px 8px;margin:4px 0 6px}
.bh-wsw .bhs-swd{justify-content:center}
/* v0.7.6.23.8.37: card dots are buttons (tap = that colour's photo). 28px tap circle around the same 18px dot; ring = chosen. */
.bhs-swb{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:0;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}
.bhs-swd:has(.bhs-swb){gap:0 1px}
.bhs-swb[aria-checked="true"] .bhs-swc{box-shadow:inset 0 0 0 1px #858585,0 0 0 2px #fff,0 0 0 4px #2b2233}
.bhs-swb:focus-visible{outline:2px solid #2b2233;outline-offset:0}
button.bhs-swm{appearance:none;background:none;border:0;padding:0 4px;min-height:28px;cursor:pointer;font-family:inherit}
a.bhs-swm{text-decoration:none;min-height:28px;display:inline-flex;align-items:center}
/* shop grid: the dot row sits inside the card box, under the price (outside the card button; a button cannot hold buttons) */
.bhs-card{position:relative}
.bhs-swsp{display:block;flex:none;width:100%;height:56px}
.bhs-cdots{position:absolute;left:4px;right:4px;bottom:14px;margin:0;justify-content:center;gap:0 6px}
.bhs-cdots .bhs-swd{gap:0}
.bhs-cdots .bhs-swd{justify-content:center}