.hdc-selection-button {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--hdc-space-2) - 3px);
    margin: var(--hdc-space-2) calc(var(--hdc-space-2) - 2px) 0 0;
    padding: calc(var(--hdc-space-2) - 1px) calc(var(--hdc-space-3) - 2px);
    border: 1px solid var(--hdc-border);
    border-radius: var(--hdc-button-radius);
    background: var(--hdc-surface);
    color: inherit;
    font-size: .8rem;
    cursor: pointer;
}
.hdc-selection-button:not(.hdc-product-card__wishlist) .hdc-icon { width: var(--hdc-icon-sm); height: var(--hdc-icon-sm); }
.hdc-selection-button[aria-pressed="true"] { border-color: var(--hdc-primary); background: var(--hdc-primary); color: var(--hdc-button-text); }
.hdc-selection-button[data-hdc-wishlist][aria-pressed="true"] { border-color: var(--hdc-card-wishlist-active-color, var(--hdc-success)); background: var(--hdc-surface); color: var(--hdc-card-wishlist-active-color, var(--hdc-success)); }
.hdc-selection-button[data-hdc-wishlist][aria-pressed="true"] .hdc-icon,
.hdc-selection-button[data-hdc-wishlist][aria-pressed="true"] .hdc-icon path { fill: currentColor; stroke: currentColor; }
.hdc-selection-button[data-hdc-compare][aria-pressed="true"] { border-color: var(--hdc-compare-active-color, var(--hdc-success)); background: var(--hdc-compare-active-color, var(--hdc-success)); color: #fff; }
.hdc-selection-button.is-pending { cursor: progress; }

.hdc-selection-document { display: grid; gap: var(--hdc-space-5); margin-block: var(--hdc-space-4) var(--hdc-space-7); color: var(--hdc-text); }
.hdc-selection-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--hdc-space-5);
    padding: clamp(20px, 3vw, 34px);
    border: 1px solid color-mix(in srgb, var(--hdc-selection-hero-accent, var(--hdc-primary)) 32%, var(--hdc-border));
    border-radius: var(--hdc-radius);
    background: var(--hdc-selection-hero-background, var(--hdc-surface-subtle));
    color: var(--hdc-selection-hero-text, var(--hdc-text));
}
.hdc-selection-hero__copy { max-width: 760px; }
.hdc-selection-hero__eyebrow { margin: 0 0 6px; color: var(--hdc-selection-hero-accent, var(--hdc-primary)); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hdc-selection-hero h2 { margin: 0; color: inherit; font-family: var(--hdc-font-heading); font-size: clamp(1.55rem, 3vw, 2.35rem); line-height: 1.12; }
.hdc-selection-hero__copy > p:last-child { max-width: 62ch; margin: 10px 0 0; color: color-mix(in srgb, currentColor 72%, transparent); line-height: 1.55; }
.hdc-selection-hero__actions, .hdc-selection-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; }
.hdc-selection-toolbar { padding: 12px; border: 1px solid var(--hdc-border); background: var(--hdc-surface); }
.hdc-selection-count { display: inline-flex; min-height: 38px; align-items: center; gap: 5px; padding-inline: 12px; border: 1px solid var(--hdc-border); border-radius: 999px; background: var(--hdc-surface); color: var(--hdc-muted-text); font-size: .78rem; white-space: nowrap; }
.hdc-selection-count strong { color: var(--hdc-text); font-size: .9rem; }
.hdc-selection-action { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 8px 14px; border: 1px solid var(--hdc-border); border-radius: 999px; font-size: .78rem; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; }
.hdc-selection-action--primary { border-color: var(--hdc-primary); background: var(--hdc-primary); color: var(--hdc-button-text); }
.hdc-selection-action--primary:hover, .hdc-selection-action--primary:focus-visible { border-color: var(--hdc-primary-hover); background: var(--hdc-primary-hover); color: var(--hdc-button-text); }
.hdc-selection-action--secondary { background: var(--hdc-surface); color: var(--hdc-text); }
.hdc-selection-action--secondary:hover, .hdc-selection-action--secondary:focus-visible { border-color: var(--hdc-primary); color: var(--hdc-primary-hover); }
.hdc-selection-action--danger { border-color: var(--hdc-danger); background: var(--hdc-surface); color: var(--hdc-danger); }
.hdc-selection-action--danger:hover, .hdc-selection-action--danger:focus-visible { background: var(--hdc-danger); color: #fff; }
.hdc-selection-action:disabled { opacity: .45; cursor: not-allowed; }
.hdc-selection-content { min-width: 0; }
.hdc-selection-grid { display: grid; grid-template-columns: repeat(var(--hdc-selection-grid-desktop, 6), minmax(0, 1fr)); gap: var(--hdc-space-3); }
.hdc-selection-grid__item { min-width: 0; }
.hdc-selection-empty { display: grid; min-height: 300px; place-items: center; align-content: center; gap: 10px; padding: 34px 20px; border: 1px solid var(--hdc-border); background: var(--hdc-surface); text-align: center; }
.hdc-selection-empty__icon { display: grid; width: 64px; height: 64px; place-items: center; border: 1px solid var(--hdc-border); border-radius: 50%; background: var(--hdc-surface-subtle); color: var(--hdc-primary-hover); }
.hdc-selection-empty__icon .hdc-icon { width: 30px; height: 30px; }
.hdc-selection-empty h3 { margin: 0; font-size: 1.15rem; }
.hdc-selection-empty p { max-width: 48ch; margin: 0 0 6px; color: var(--hdc-muted-text); }

.hdc-compare-scroll { overflow: auto; border: 1px solid var(--hdc-border); background: var(--hdc-surface); }
.hdc-compare-table { width: 100%; min-width: 780px; border-collapse: collapse; background: var(--hdc-surface); }
.hdc-compare-table th, .hdc-compare-table td { padding: 14px; border: 1px solid var(--hdc-border); text-align: start; vertical-align: top; }
.hdc-compare-table tbody th { width: 150px; background: var(--hdc-surface-subtle); font-size: .78rem; font-weight: 700; }
.hdc-compare-table thead th { min-width: 190px; background: var(--hdc-surface-subtle); }
.hdc-compare-table thead th:first-child { min-width: 150px; }
.hdc-compare-product { position: relative; display: grid; gap: 8px; }
.hdc-compare-product > a { display: grid; gap: 8px; color: var(--hdc-text); font-weight: 700; text-decoration: none; }
.hdc-compare-product img { display: block; width: 112px; height: 112px; margin-inline: auto; object-fit: contain; }
.hdc-compare-product__remove { position: absolute; z-index: 2; top: -5px; inset-inline-end: -5px; display: grid; width: 28px; height: 28px; place-items: center; padding: 0; border: 1px solid var(--hdc-danger); border-radius: 50%; background: var(--hdc-surface); color: var(--hdc-danger); cursor: pointer; }
.hdc-compare-product__remove:hover, .hdc-compare-product__remove:focus-visible { background: var(--hdc-danger); color: #fff; }
.hdc-compare-product__remove .hdc-icon { width: 14px; height: 14px; }
.hdc-compare-table__price { color: var(--hdc-text); font-size: 1rem; font-weight: 700; }
.hdc-compare-actions { display: grid; gap: 8px; }

.hdc-selection-feedback { position: fixed; z-index: 2147483600; top: 50%; left: 50%; display: inline-flex; max-width: min(280px, calc(100vw - 32px)); min-height: 32px; align-items: center; justify-content: center; padding: 7px 13px; border: 0; border-radius: 999px; color: #fff; font-family: var(--hdc-font-ui); font-size: .76rem; font-weight: 700; line-height: 1.2; text-align: center; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -50%) scale(.96); transition: opacity 110ms ease, visibility 110ms ease, transform 110ms ease; }
.hdc-selection-feedback.is-success { background: var(--hdc-success, #15803D); }
.hdc-selection-feedback.is-danger { background: var(--hdc-danger, #DC2626); }
.hdc-selection-feedback.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

@media (max-width: 1180px) { .hdc-selection-grid { grid-template-columns: repeat(var(--hdc-selection-grid-tablet, 3), minmax(0, 1fr)); } }
@media (max-width: 782px) {
    .hdc-selection-hero { grid-template-columns: 1fr; }
    .hdc-selection-hero__actions, .hdc-selection-toolbar { justify-content: flex-start; }
}
@media (max-width: 560px) { .hdc-selection-grid { grid-template-columns: repeat(var(--hdc-selection-grid-mobile, 1), minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .hdc-selection-feedback { transition: none; } }