/* =================== hc-pdp-variants.css =================== */
.hc-pdp-variants {margin-bottom: var(--hc-sp-3); margin: var(--hc-sp-4) 0; padding: var(--hc-sp-4); background: var(--hc-paper-2); border-radius: var(--hc-r-md); border: 1px solid var(--hc-line)}
.hc-pdp-variants__label {font-size: var(--hc-fs-xs); color: var(--hc-ink-mid); margin-bottom: 8px; display: block; font-family: var(--hc-mono); text-transform: uppercase; letter-spacing: var(--hc-ls-wide)}
.hc-pdp-variants__row {display: flex; flex-wrap: wrap; gap: 8px}
.hc-pdp-variants__opt {padding: 8px 14px; background: var(--hc-paper); border: 1px solid var(--hc-line-2); border-radius: var(--hc-r-sm); font-size: var(--hc-fs-sm); color: var(--hc-ink-soft); cursor: pointer; transition: all var(--hc-dur-fast); display: inline-flex; align-items: center}
.hc-pdp-variants__opt:hover {border-color: var(--hc-ink-mid); color: var(--hc-ink)}
.hc-pdp-variants__opt.is-selected {background: var(--hc-gold-soft); border-color: var(--hc-accent); color: var(--hc-ink); font-weight: 500}
.hc-pdp-variants__opt.is-active {background: var(--hc-ink); color: var(--hc-paper, #ffffff); border-color: var(--hc-ink)}
.hc-pdp-variants__group {margin-bottom: var(--hc-sp-3)}
.hc-pdp-variants__opt-img {width: 20px; height: 20px; margin-right: 6px; border-radius: 3px; object-fit: cover; vertical-align: middle}
.hc-pdp-variants__delta {margin-left: 6px}
.hc-pdp-variants__sku {margin-top: var(--hc-sp-2); font-family: var(--hc-mono)}