/**
 * Linked articles under the colour palette.
 *
 * The block is a <li> inside the theme's ul.type-color, so the first job is to
 * opt out of the swatch sizing that list applies to its items: full width, no
 * fixed dimensions, normal flow inside.
 *
 * 1.0.0 rendered links as bare swatches appended to that palette. Three
 * identical squares after 56 real colours told the buyer nothing and every
 * click led out of the page, so the whole presentation is replaced here.
 */

.product-variants ul li.mdmelange-block {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    background: none;
    border: 0;
}

/* Grid themes need the same escape as flex ones. */
.product-variants ul li.mdmelange-block {
    grid-column: 1 / -1;
}

.mdmelange-heading {
    margin-bottom: 8px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9b9b9b;
}

/* --- alternatives: navigation ------------------------------------------ */

.mdmelange-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mdmelange-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border: 1px solid #e3e3e3;
    background: #fff;
    color: inherit;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.2;
    transition: border-color .15s;
}

.mdmelange-chip:hover,
.mdmelange-chip:focus {
    border-color: #9b9b9b;
    color: inherit;
    text-decoration: none;
}

/* The article being looked at. Not a link: it leads the row so the row reads
   as a choice rather than as a list of ways out. */
.mdmelange-chip.is-active {
    border-color: #c92466;
    color: #c92466;
    cursor: default;
}

.mdmelange-chip__swatch {
    display: block;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    background-color: #f4f4f4;
    background-size: cover;
    background-position: center;
}

/* --- upsell: cards with a cart ----------------------------------------- */

.mdmelange-upsell {
    margin-top: 18px;
}

.mdmelange-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* flex-grow 0: with a single complement a growing card stretched across the
   whole column and the buy row spread out with it. A card keeps card width
   and the row fills with the next card instead. */
.mdmelange-card {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 1 380px;
    min-width: 0;
    padding: 10px;
    border: 1px solid #e3e3e3;
    background: #fff;
}

/* Cards past the configured count start folded, so the add-to-cart button of
   the main product is not pushed off the screen on short laptops. */
.mdmelange-card.is-folded {
    display: none;
}

.mdmelange-card__media {
    display: block;
    flex: 0 0 56px;
    line-height: 0;
}

.mdmelange-card__swatch {
    display: block;
    width: 56px;
    height: 56px;
    background-color: #f4f4f4;
    background-size: cover;
    background-position: center;
}

.mdmelange-card__body {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}

.mdmelange-card__text {
    min-width: 0;
    flex: 1 1 auto;
}

.mdmelange-card__name {
    display: block;
    color: inherit;
    font-size: 13px;
    line-height: 1.3;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mdmelange-card__name:hover {
    color: inherit;
    text-decoration: underline;
}

.mdmelange-card__price {
    margin-top: 2px;
    font-size: 13px;
    font-weight: 600;
}

.mdmelange-card__buy {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* The theme stretches every input inside the colour palette:
   .product-variants-item ul li input { width: 100%; height: 100% }.
   Our block IS such an li, so the quantity field inherited that and ran the
   full width of the card. Matching the theme's specificity is the whole point
   of this selector — a bare .mdmelange-qty loses to it. */
.product-variants-item ul li.mdmelange-block .mdmelange-qty,
.mdmelange-qty {
    width: 76px;
    flex: 0 0 76px;
    height: 34px;
    padding: 0 8px;
    margin: 0;
    border: 1px solid #d6d6d6;
    border-radius: 0;
    background: #fff;
    font-size: 13px;
    line-height: 32px;
    text-align: center;
}

.mdmelange-card__unit {
    font-size: 12px;
    color: #6f6f6f;
}

/* Secondary on purpose. The solid button on this page is ADD TO CART for the
   fabric itself; two equal calls to action would leave none. */
.product-variants-item ul li.mdmelange-block .mdmelange-add,
.mdmelange-add {
    height: 34px;
    padding: 0 14px;
    border: 1px solid #c92466;
    background: #fff;
    color: #c92466;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

.mdmelange-add:hover:not([disabled]) {
    background: #c92466;
    color: #fff;
}

.mdmelange-add.is-done {
    border-color: #2e7d32;
    background: #fff;
    color: #2e7d32;
    cursor: default;
}

.mdmelange-add.is-error {
    border-color: #c0392b;
    color: #c0392b;
}

.mdmelange-add[disabled] {
    opacity: .6;
    cursor: default;
}

.mdmelange-card__out {
    font-size: 12px;
    color: #9b9b9b;
}

.mdmelange-more {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: #c92466;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.mdmelange-note {
    margin: 12px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: #9b9b9b;
}

/* Phones: cards full width, the row scrolls vertically like the rest of the
   page instead of squeezing three columns into 360 px. */
@media (max-width: 575px) {
    .mdmelange-card {
        flex: 1 1 100%;
    }

    /* On a phone the name needs the width more than the buy row does. */
    .mdmelange-card__body {
        flex-wrap: wrap;
    }
}

/* --- melange colours inside the palette (3.0.0) ------------------------- */

/*
 * These list items are the theme's own swatch markup, so size, gap and the
 * 32px .color square are inherited rather than redeclared. Only three things
 * are added: a stacking context for the badge, the badge itself, and the
 * invisible link laid over the square.
 */
.product-variants-item ul li.mdmelange-swatch {
    position: relative;
}

/* The theme sizes every span in a palette item that is not .color as a
   32px bordered box — that rule is meant for size/radio labels and would
   turn the badge into a second swatch. The selector below is one level
   deeper than the theme's, which is the whole reason it wins. */
.product-variants > .product-variants-item li.mdmelange-swatch > span.mdmelange-swatch__badge,
.product-variants-item ul li.mdmelange-swatch > span.mdmelange-swatch__badge {
    position: absolute;
    right: -2px;
    bottom: -4px;
    z-index: 4;
    display: block;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 1px 3px;
    border: 0;
    border-radius: 2px;
    background: #111;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

/* A ring rather than a border: a border would move the square by a pixel and
   the melange swatches would sit a hair off the grid the palette draws. */
.product-variants-item ul li.mdmelange-swatch .color {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.product-variants-item ul li.mdmelange-swatch .mdmelange-swatch__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: block;
}

/* While the swap request is in flight. The palette is about to be replaced
   wholesale, so the feedback has to live on the item that was clicked. */
.product-variants-item ul li.mdmelange-swatch.is-loading {
    opacity: .45;
    pointer-events: none;
}

/* --- legend ------------------------------------------------------------- */

/*
 * One line naming each linked article next to its badge. Without it the badge
 * is a two-letter mystery; with it the buyer knows the extra colours belong to
 * a different article before clicking anything.
 */
.mdmelange-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 12px;
}

.mdmelange-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b6b6b;
}

.mdmelange-legend__badge {
    display: inline-block;
    padding: 1px 4px;
    border-radius: 2px;
    background: #111;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* --- a melange colour chosen in place (3.0.1) --------------------------- */

/*
 * The ring is drawn as a shadow, not a border: a border would resize the
 * square and the chosen swatch would jump a pixel out of the palette grid.
 */
.product-variants-item ul li.mdmelange-swatch.is-selected .color {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 0 0 2px #444;
}

/*
 * While a melange colour is the chosen one, the article's own colours must
 * stop looking chosen — otherwise two swatches wear a ring and neither of them
 * tells the truth. The theme sets that ring with !important, so this needs both
 * the extra class and its own !important to win.
 */
.product-variants-item ul.mdmelange-foreign-active li input:checked + span {
    border-color: transparent !important;
}

/*
 * What is actually going into the basket. The page still shows the article the
 * buyer opened, which is the point of choosing in place — but the basket is
 * about to receive a different article, and that has to be visible before the
 * button is pressed, not afterwards in the cart.
 */
.mdmelange-selected {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border-left: 3px solid #111;
    background: #f6f6f6;
    font-size: 13px;
    line-height: 1.4;
}

.mdmelange-selected__label {
    color: #7a7a7a;
}

.mdmelange-selected__badge {
    display: inline-block;
    padding: 1px 4px;
    border-radius: 2px;
    background: #111;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mdmelange-selected__colour {
    color: #444;
}

.mdmelange-selected__hint {
    flex: 1 1 100%;
    color: #9b9b9b;
    font-size: 11px;
}

/*
 * An article whose photo file is missing from the server. The frame keeps the
 * gallery's shape instead of collapsing, and the grey reads as "no photo"
 * rather than as a broken page.
 */
.mdmelange-noimage {
    object-fit: contain;
    background: #f4f4f4;
}