/*
 * 0.8.8: the Colour and Size picker on the product page (inc/variants.php, assets/js/variants.js).
 * Phone first: buttons wrap, every target is at least 44 px high. With the script, the buttons
 * show and the dropdowns hide; without it, the other way round (no jump either way: the class is
 * set by an inline script before the picker paints).
 */
.single-product form.cart.sia-vp-form { display: block; margin: var(--space-4) 0; }
.sia-vp { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.sia-vp__group { display: grid; gap: var(--space-2); min-width: 0; }
.sia-vp__label { margin: 0; font: 600 14px/20px var(--font-sans); color: var(--ink); }
.sia-vp__picked { font-weight: 400; color: var(--ink-muted); }
.sia-vp__opts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sia-vp__opt {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: var(--size-tap); min-height: var(--size-tap); padding: 0 14px;
	border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink);
	font: 500 14px/18px var(--font-sans); cursor: pointer; text-align: center; transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease);
	-webkit-tap-highlight-color: transparent;
}
.sia-vp__opt:hover:not([disabled]) { border-color: var(--ink); }
.sia-vp__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sia-vp__opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); font-weight: 600; }
.sia-vp__opt.is-out { color: var(--ink-subtle); border-style: dashed; border-color: var(--line); background: var(--surface-sunken); }
.sia-vp__opt.is-out .sia-vp__name { text-decoration: line-through; text-decoration-thickness: 1px; }
.sia-vp__opt[disabled] { cursor: not-allowed; }
.sia-vp__opt[aria-pressed="true"].is-out { border-style: solid; border-color: var(--danger); box-shadow: none; }
.sia-vp__dot { flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(29, 33, 37, .25); }
.sia-vp__status { margin: 0; min-height: 20px; font: 500 14px/20px var(--font-sans); color: var(--success); }
.sia-vp__status.is-out { color: var(--danger); }
.sia-vp__sku { margin: calc(-1 * var(--space-2)) 0 0; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.sia-vp__sku[hidden] { display: none; }

/* The dropdowns are the no-script form. */
.sia-vp__selects { display: grid; gap: var(--space-3); }
.sia-vp__field { display: grid; gap: 6px; margin: 0; }
.sia-vp__field label { font: 600 13px/16px var(--font-sans); }
.sia-vp__field select { height: var(--size-tap); max-width: 320px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); padding: 0 32px 0 12px; font: 400 15px/20px var(--font-sans); }
.sia-vp:not(.is-js) .sia-vp__group, .sia-vp:not(.is-js) .sia-vp__status { display: none; }
.sia-vp.is-js .sia-vp__selects { display: none; }

.sia-vp__buy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.sia-vp__buy .single_add_to_cart_button { flex: 1 1 180px; }
.sia-vp__buy .single_add_to_cart_button.is-waiting { opacity: .72; }
.sia-vp__buy .single_add_to_cart_button[disabled] { opacity: .5; cursor: not-allowed; }
@media (min-width: 900px) { .sia-vp__buy .single_add_to_cart_button { flex: 0 1 260px; } }