/* Variant picker — shared by the shop and every rep dashboard.
   Scoped under .vp so it cannot leak into the very different page styles it
   has to sit inside. Light and dark are both handled: the storefront follows
   the visitor's theme. */

.vp {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
}

.vp__title {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Until an option is picked this is a question, not a panel of extras — so it
   is coloured like one. Once picked it goes quiet and green, and the shopper
   can see at a glance that nothing more is owed. */
.vp--needed {
    border-color: #fcd34d;
    background: #fffbeb;
}
.vp--done {
    border-color: #bbf7d0;
    background: #f0fdf4;
}
.vp__req {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #92400e;
    background: #fde68a;
    padding: 3px 8px;
    border-radius: 999px;
}

/* Shaken when someone tries to add without choosing. Brief, and skipped
   entirely for anyone who has asked for less motion. */
.vp--nudge {
    animation: vpNudge .42s cubic-bezier(.36, .07, .19, .97);
}
@keyframes vpNudge {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-7px); }
    40%, 60% { transform: translateX(7px); }
}
@media (prefers-reduced-motion: reduce) {
    .vp--nudge { animation: none; }
}

.vp__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.vp__field {
    flex: 1 1 190px;
    min-width: 0;
}

.vp__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    margin-bottom: 5px;
}

.vp__select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    color: #0f172a;
    font-size: 14px;
}

.vp__clear {
    padding: 9px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.vp__clear:hover { background: #f1f5f9; }

.vp__count {
    margin-top: 10px;
    font-size: 13px;
    color: #64748b;
}

.vp__grid {
    margin-top: 14px;
    display: grid;
    /* `minmax(272px, 1fr)` cannot shrink below 272px, so inside anything
       narrower than that — a product modal on a small phone — the cards
       stood outside their own panel: 13px over at 288px, 41px at 260px,
       61px at 240px, measured. `min()` lets the track fall back to the
       full width of whatever is holding it. */
    grid-template-columns: repeat(auto-fill, minmax(min(272px, 100%), 1fr));
    gap: 12px;
}

.vp__card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.vp__card:hover { border-color: #94a3b8; transform: translateY(-1px); }

.vp__card.is-on {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}

/* Out of stock stays visible — knowing the shop carries it in green matters
   even when today's answer is no — but it cannot be chosen. */
.vp__card.is-out { opacity: .55; cursor: not-allowed; }
.vp__card.is-out:hover { border-color: #e2e8f0; transform: none; }

.vp__thumb {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    object-fit: cover;
    border-radius: 9px;
    background: #f1f5f9;
}

.vp__body { flex: 1 1 120px; min-width: 0; }

.vp__chips { display: flex; flex-wrap: wrap; gap: 4px; }

.vp__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: 11px;
    line-height: 1.5;
}

.vp__chipk { color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.vp__chipv { color: #0f172a; font-weight: 600; }

.vp__sku { margin-top: 4px; font-size: 11px; color: #94a3b8; overflow-wrap: anywhere; }

.vp__stock {
    display: inline-block;
    margin-top: 5px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
}

.vp__stock--in  { background: #dcfce7; color: #166534; }
.vp__stock--out { background: #fee2e2; color: #991b1b; }

.vp__price {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 15px;
    font-weight: 800;
    color: #1d4ed8;
    white-space: nowrap;
}

.vp__empty {
    grid-column: 1 / -1;
    padding: 18px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}

/* The chosen variant, echoed next to the price so the shopper can see what
   they are about to buy without scrolling back down to the cards. */
.vp-chosen {
    display: none;
    margin: 10px 0;
    padding: 9px 12px;
    border: 1px solid #ddd6fe;
    border-radius: 10px;
    background: #f5f3ff;
}

.vp-chosen.is-on { display: block; }
.vp-chosen__head { font-size: 11px; font-weight: 800; color: #6d28d9; text-transform: uppercase; letter-spacing: .4px; }
.vp-chosen__body { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px; }

@media (prefers-color-scheme: dark) {
    .vp { background: #0f172a; border-color: #1e293b; }
    .vp__title { color: #e2e8f0; }
    .vp__label { color: #94a3b8; }
    .vp__select, .vp__clear { background: #1e293b; border-color: #334155; color: #e2e8f0; }
    .vp__clear:hover { background: #334155; }
    .vp__count, .vp__empty { color: #94a3b8; }
    .vp__card { background: #1e293b; border-color: #334155; }
    .vp__card:hover { border-color: #64748b; }
    .vp__chip { background: #334155; }
    .vp__chipv { color: #e2e8f0; }
    .vp__price { color: #93c5fd; }
    .vp-chosen { background: #2e1065; border-color: #4c1d95; }
    .vp-chosen__head { color: #c4b5fd; }
}

:root[data-theme="dark"] .vp { background: #0f172a; border-color: #1e293b; }
:root[data-theme="dark"] .vp__title { color: #e2e8f0; }
:root[data-theme="dark"] .vp--needed,
html.dark .vp--needed { border-color: #78350f; background: rgba(120, 53, 15, .22); }
:root[data-theme="dark"] .vp--done,
html.dark .vp--done { border-color: #14532d; background: rgba(20, 83, 45, .22); }
:root[data-theme="dark"] .vp__req,
html.dark .vp__req { color: #fde68a; background: rgba(146, 64, 14, .55); }
:root[data-theme="dark"] .vp__select,
:root[data-theme="dark"] .vp__clear { background: #1e293b; border-color: #334155; color: #e2e8f0; }
:root[data-theme="dark"] .vp__card { background: #1e293b; border-color: #334155; }
:root[data-theme="dark"] .vp__chip { background: #334155; }
:root[data-theme="dark"] .vp__chipv { color: #e2e8f0; }

:root[data-theme="light"] .vp { background: #f8fafc; border-color: #e2e8f0; }

/* The two states again at the specificity the theme rules use.
   `:root[data-theme=…] .vp` is an attribute plus a class, which outranks a
   lone `.vp--needed` however far down the file it sits — so the panel kept the
   neutral background and only the badge showed the requirement. */
:root[data-theme="light"] .vp--needed,
html.light .vp--needed,
.vp.vp--needed { background: #fffbeb; border-color: #fcd34d; }
:root[data-theme="light"] .vp--done,
html.light .vp--done,
.vp.vp--done { background: #f0fdf4; border-color: #bbf7d0; }
:root[data-theme="dark"] .vp--needed,
html.dark .vp--needed { background: rgba(120, 53, 15, .22); border-color: #78350f; }
:root[data-theme="dark"] .vp--done,
html.dark .vp--done { background: rgba(20, 83, 45, .22); border-color: #14532d; }
:root[data-theme="light"] .vp__card { background: #fff; border-color: #e2e8f0; }

/* On a phone the filters stack, and the Clear button was left sharing a row
   with whichever dropdown happened to fall last — tidy on two attributes,
   lopsided on three. Give it its own full-width row below them instead. */
@media (max-width: 560px) {
    .vp__field { flex: 1 1 100%; }
    .vp__clear { width: 100%; margin-top: 2px; }
}