/*
 * HappyHarrys_SoldByUnit — "Select the size" chooser.
 *
 * Overrides hh_theme_revised's copy of this file through single-file theme
 * fallback, so this file has to restate EVERYTHING the parent styles — the
 * chooser panel, the select, the read-only qty mirror, the hint and the
 * preview. Anything omitted here is simply unstyled, not inherited.
 *
 * The DOM and class names are the parent's. sold-by-unit-quantity.js binds to
 * [data-role="sold-by-unit-select"] and [data-role="sold-by-unit-preview"],
 * and adds .sold-by-unit__qty-locked to the native qty box; none of that is
 * touched here — only the presentation is re-authored to match hh_theme_new.
 *
 * Plain CSS rather than LESS because it is loaded as a standalone stylesheet
 * by HappyHarrys_SoldByUnit/layout/catalog_product_view.xml, which is
 * inherited from the parent theme.
 *
 * Selectors carry one extra ancestor class wherever blank styles the same
 * element (the select, the qty input). Blank's desktop rules are emitted by
 * styles-l.less *after* this stylesheet, so an equal-specificity rule there
 * would win above 768px — see README, "styles-l.less loads after styles-m.css".
 */

.sold-by-unit {
    margin: 18px 0 20px;
}

/* ---------------------------------------------------------------- chooser */

.sold-by-unit__chooser {
    background: #f6f8fb;
    border: 1px solid #e3e8ef;
    border-radius: 12px;
    margin: 0 0 12px;
    padding: 18px 20px;
}

.sold-by-unit__chooser-title {
    color: #0f1419;
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 12px;
}

/* ----------------------------------------------------------------- select */

.sold-by-unit .sold-by-unit__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b7684' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 14px center;
    background-repeat: no-repeat;
    background-size: 12px 8px;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    box-shadow: none;
    color: #0f1419;
    cursor: pointer;
    font-size: 1.5rem;
    height: auto;
    max-width: 100%;
    min-height: 46px;
    padding: 11px 40px 11px 14px;
    text-overflow: ellipsis;
    width: 260px;
    transition: border-color .16s cubic-bezier(.2, .7, .3, 1),
                box-shadow .16s cubic-bezier(.2, .7, .3, 1);
}

.sold-by-unit .sold-by-unit__select:hover {
    border-color: #c9d4e2;
}

.sold-by-unit .sold-by-unit__select:focus {
    border-color: #0f4b91;
    box-shadow: 0 0 0 3px rgba(15, 75, 145, .28);
    outline: none;
}

/* The placeholder ("Choose a size") is not a value — read it as prompt text. */
.sold-by-unit .sold-by-unit__select:invalid,
.sold-by-unit .sold-by-unit__select option[value=""] {
    color: #6b7684;
}

/* Long lists render as a native popup; keep the options legible on every OS. */
.sold-by-unit .sold-by-unit__select option {
    color: #0f1419;
    font-size: 1.4rem;
}

/* ------------------------------------------------------ read-only qty box */

/*
 * The dropdown is the only way to set qty, so the native box is an output.
 * .box-tocart .input-text.qty is blank's own rule at (0,3,0); this has to
 * outrank it or the field keeps looking editable while refusing input.
 */
.box-tocart .input-text.qty.sold-by-unit__qty-locked,
input.sold-by-unit__qty-locked {
    background: #eef1f6;
    border-color: #e3e8ef;
    color: #5a6674;
    cursor: not-allowed;
    pointer-events: none;
}

/* ------------------------------------------------------- hint and preview */

.sold-by-unit__hint {
    color: #6b7684;
    font-size: 1.3rem;
    line-height: 1.5;
    margin: 0 0 8px;
}

/*
 * Result panel — brand blue rather than the parent's amber, so a confirmed
 * size reads as information rather than as a warning.
 */
.sold-by-unit__preview {
    background: #eef5ff;
    border: 1px solid #dcebff;
    border-left: 3px solid #0f4b91;
    border-radius: 0 8px 8px 0;
    color: #082b53;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
    padding: 10px 14px;
}

.sold-by-unit__preview[hidden] {
    display: none;
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 767px) {
    .sold-by-unit__chooser {
        padding: 16px;
    }

    .sold-by-unit .sold-by-unit__select {
        width: 100%;
    }
}