.color-choices { display:flex; flex-wrap:wrap; gap:8px; }
.color-choice { width:76px; padding:4px; border:2px solid #ddd; border-radius:8px; background:white; color:#222; cursor:pointer; font:inherit; }
.color-choice img { display:block; width:64px; height:64px; object-fit:contain; }
.color-choice span { display:block; font-size:12px; line-height:1.2; overflow-wrap:anywhere; }
.color-choice[aria-pressed="true"] { border-color:#222; box-shadow:0 0 0 1px #222; }
.color-choice:focus-visible, .card-color-choice:focus-visible { outline:3px solid #222; outline-offset:3px; }
.detail-option-select[hidden] { display:none; }
.card-color-choices { display:flex; flex-wrap:wrap; padding:5px 8px; margin:4px 0; gap:5px 0; }
.card-color-choice { display:block; position:relative; width:40px; height:44px; margin-right:-8px; border:2px solid white; border-radius:6px; background:white; box-shadow:0 0 2px #999; }
.card-color-choice img { width:100%; height:100%; object-fit:contain; border-radius:4px; }
.card-color-choice:hover, .card-color-choice:focus-visible { z-index:1; transform:translateY(-3px); }

/* Keep images, options, and actions inside catalog cards sized to their row. */
.productCard {
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    height:auto;
    min-height:0;
    max-width:calc(100% - 24px);
    padding:12px;
}
.productCard > div:first-child { flex:0 0 200px; }
.productCard .productInfo { display:flex; flex-direction:column; flex:1; min-height:0; }
.productCard .productInfo > h4:first-child { font-size:16px; line-height:1.3; margin:8px 0; overflow-wrap:anywhere; }
.productCard .product-price { font-size:18px; line-height:1.3; margin:4px 0; }
.productCard .card-color-choices { flex-shrink:0; }
.productCard .productInfo > a:last-child { margin-top:auto; padding-top:8px; }
.productCard .productCardActionBtn { margin-top:0; font-size:14px; }

/* Flex lines stretch independently; ordinary products have an outer wrapper. */
.shop-container.category-products { align-items:stretch; }
.category-products > div:not(.productCard) { display:flex; max-width:100%; }
.category-products > div:not(.productCard) > .productCard { flex:1; }