/*=============================================================================
  COLOR BROWSER

  * Color selection block in description area of desc page
=============================================================================*/

.color-browser__search-bar {
    display: block;
    padding-bottom: var(--spacing-06);
}

.color-browser__sort-column {
    max-width: 100%;
}

.color-browser__sort-column .color-drawer__sort-select {
    height: calc(2.25rem + 12px);
}

.color-browser__sort-column:first-of-type {
    padding-bottom: var(--spacing-04);
}

.color-browser__search-bar input {
    height: calc(2.25rem + 12px);
}

.color-browser-card {
    background-color: var(--color-surface-primary);
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: var(--spacing-03) var(--spacing-03) var(--spacing-01);
    align-items: center;
    border: var(--border-weight-01) solid var(--color-border-card-default);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    cursor: pointer;
}

.color-browser-card:focus,
.color-browser-card:active,
.color-browser-card:hover {
    border: var(--border-weight-01) solid var(--color-border-card-hover);
    box-shadow: var(--box-shadow-black);
}

.color-browser-card:focus .color-browser-card__button,
.color-browser-card:active .color-browser-card__button,
.color-browser-card:hover .color-browser-card__button {
	background-color: var(--color-surface-button-ghost-hover);
	color: var(--color-text-button-on-ghost-hover);
    border: var(--border-weight-01) solid var(--color-border-button-ghost-hover);
}

.color-browser-card__image-section {
    padding: 0 0 var(--spacing-04);
}

.color-browser-card__image-wrap {
    width: 100%;
}

.color-browser-card__image {
    width: 100%;
    transform: none;
    aspect-ratio: var(--image-bait);
}

.color-browser-card__info-section {
    width: 100%;
    padding: 0;
}

.color-browser-card__info-tag {
    font: var(--text-flag);
    padding-bottom: var(--spacing-01);
}

.color-browser-card__info-tag--new-item {
    color: var(--color-text-flag-new);
}

.color-browser-card__info-tag--best-seller {
    color: var(--color-text-flag-bestseller);
}

.color-browser-card__info-tag--clearance-item,
.color-browser-card__info-tag--reduced-item,
.color-browser-card__info-tag--sale-item {
    color: var(--color-text-flag-promo);
}

.color-browser-card__info-tag--pre-order {
    color: var(--color-text-flag-pre-order);
}

.color-browser-card__name {
    font: var(--text-product-name-sm);
    color: var(--color-text-primary-dark);
    padding-bottom: var(--spacing-01);
}

.color-browser-card__model {
    font: var(--text-product-type-sm);
    color: var(--color-text-secondary);
    padding-bottom: var(--spacing-01);
}

.color-browser-card__price {
    font: var(--text-price-sm);
    color: var(--color-text-price-primary);
    padding-bottom: var(--spacing-03);
}

.color-browser-card__sizes-label {
    font: var(--text-body-xs-compact);
    color: var(--color-text-primary-dark);
    padding-bottom: var(--spacing-02);
}

.color-browser-card__sizes-list {
    list-style-type: none;
    padding-left: 0;
}

.color-browser-card__size {
    font-family: var(--font-family-02);
    font-style: var(--font-style-normal);
    font-size: var(--font-size-25);
    line-height: var(--font-line-height-02);
    font-weight: var(--font-weight-med);
    color: var(--color-text-primary-dark);
    padding: var(--spacing-01) var(--spacing-03);
    border: var(--border-weight-01) solid var(--color-border-primary);
    border-radius: var(--border-radius-sm);
    margin: 0 var(--spacing-01) var(--spacing-01) 0;
    float: left;
    position: relative;
}

.color-browser-card__size:last-of-type {
    margin-bottom: var(--spacing-03);
}

.color-browser-card__size--is-backordered {
    border: var(--border-weight-01) dashed var(--color-border-order-backorder);
    color: var(--color-text-order-backorder);
}

.color-browser-card__size-icon--is-low-stock {
    height: var(--spacing-01);
    width: var(--spacing-01);
    background-color: var(--color-surface-primary-inverse);
    border-radius: 50%;
    position: absolute;
    right: 2px;
    top: 2px;
}

.color-browser-card__button {
	background-color: var(--color-surface-button-ghost);
	color: var(--color-text-button-on-ghost);
	border: var(--border-weight-01) solid var(--color-border-button-ghost);
    width: 100%;
    font: var(--text-button-sm);
    padding: var(--spacing-01) var(--spacing-02);
    margin-bottom: var(--spacing-03);
}

@media ( min-width: 480px ) {

    .color-browser__search-bar {
        display: flex;
	}

    .color-browser__sort-column:first-of-type {
        padding-bottom: 0;
    }
}