/* Colour swatches + product hero spacing (2026-10-04). Loaded only on product pages when enabled. */

.dv-colour-options { margin: 12px 0 14px; }
.dv-colour-options__label {
    margin: 0 0 8px;
    font-size: .8125rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--scs-muted, #6b6470);
}
.dv-colour-options__label span { color: var(--scs-ink, #1d1720); font-weight: 600; text-transform: none; letter-spacing: 0; }
.dv-swatches { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dv-swatch {
    width: 18px; height: 18px; padding: 0; border-radius: 50%;
    background: var(--dv-swatch, #999);
    border: 1px solid rgba(0, 0, 0, .18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
    cursor: pointer; position: relative;
    transition: transform .15s ease, box-shadow .15s ease;
}
.dv-swatch:hover { transform: scale(1.08); }
.dv-swatch.is-selected { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--scs-ink, #1d1720); }
.dv-swatch:focus-visible { outline: 2px solid var(--scs-accent, #7a3e9d); outline-offset: 3px; }
.dv-swatch::after { content: ""; position: absolute; inset: -8px; }   /* 34px tap target, visual stays 18px */

/* Product hero spacing (desktop): title → price +15px, price → short description +20px,
   short description → categories +15px. Mobile layout unchanged apart from the swatch row. */
@media (min-width: 900px) {
    .dv-hero-v2.woocommerce div.product .summary .product_title { margin-bottom: 15px; }
    .dv-hero-v2.woocommerce div.product .summary p.price { margin-bottom: 20px; }
    .dv-hero-v2.woocommerce div.product .summary .dv-colour-options { margin: 0 0 20px; }
    .dv-hero-v2.woocommerce div.product .summary .product_meta { padding-top: 15px; }   /* padding: a margin would collapse into the paragraph margin above */
}

/* Orderable colours: WooCommerce's colour selector stays in the form (it drives the variation) but the swatches are the
   visible control. Same price for every colour, so the duplicate variation price line is hidden. */
.dv-hero-v2 form.variations_form table.variations { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dv-hero-v2 form.variations_form .reset_variations,
.dv-hero-v2 form.variations_form .woocommerce-variation-price { display: none !important; }