/* LeoScorpioLeo — Colors + Sizes variation controls (2026-08-05)
   Solid colors only: no gradients, no rounded corners, no black/dark-blue
   background, no native white anywhere (closed OR opened).
   - Panel (A = the "Colors"/"Sizes" label column, B = the value column
     holding each control + the "Clear" link): solid rust #B5551E.
   - Both Colors and Sizes are custom dropdowns (built by
     lsl-size-swatches.js) instead of plain <select>s — needed because
     Chrome/Edge give no CSS hook to recolor a native <select>'s
     option-hover state (only Firefox does), and give NO hook at all to
     recolor the native popup's background — it's always the browser's own
     OS-chrome white, regardless of CSS. Both triggers look identical
     (solid amber, same border/padding/radius). Opened, Colors rows hover
     to that color's real Gildan 5000 hex (light/dark hover text chosen
     per row so the name stays readable — same light-ink/dark-ink garment
     grouping already used for the product-photo backgrounds); Sizes rows
     have no per-value color, so they hover to a flat lighter-amber accent
     instead.
   Every background/border rule here carries !important — theme/plugin
   CSS loaded after this file has repeatedly won ties on unguarded rules,
   so nothing in this dropdown is left unguarded.
   Uses its own --lsl-swatch-* custom properties so it can't collide with
   or get overridden by the sitewide lsl-cyberpunk-theme.css palette. */

:root {
    --lsl-swatch-panel: #B5551E;       /* (A) label column + (B) value column */
    --lsl-swatch-panel-ink: #F5E9D6;   /* text sitting directly on the panel */
    --lsl-swatch-control: #C4873F;     /* Colors/Sizes trigger, closed state */
    --lsl-swatch-control-ink: #2A1608; /* dark text on the amber controls */
    --lsl-swatch-control-border: #8C4116;
    --lsl-swatch-hover: #DDA860;       /* flat hover accent for rows with no real color (Sizes) */
    --lsl-swatch-glow: #8FFF4D;        /* focus accent only */
}

/* ---------- Row layout: flex instead of default table sizing ---------- */
/* The default <table> column-auto-sizing left an awkward gap between the
   label and its control (each column sized to its own widest cell,
   independent of the other), plus let the Sizes select overhang the
   panel's right edge. Flex rows with a fixed label width + a control that
   fills the rest close both gaps and keep every row's control flush left
   at the same x-position. */
form.variations_form table.variations,
form.variations_form table.variations tbody {
    display: block;
    width: 100%;
}
form.variations_form table.variations tr {
    display: flex;
    align-items: stretch; /* was "center" — left the shorter th.label cell's rust
        background not covering the full row height whenever td.value was taller
        (e.g. the Sizes row, taller because of the Clear link below its control),
        exposing bare white in the gap. Stretching th.label to the row's full
        height (see th.label below) closes that gap for good. */
}

/* ---------- (A) label column + (B) value column: solid rust panel ---------- */
form.variations_form table.variations th.label,
form.variations_form table.variations td.value {
    background: var(--lsl-swatch-panel) !important;
    padding: 12px 14px !important;
    border-radius: 0 !important;
    position: relative; /* anchors the Colors dropdown list */
    display: block;
    box-sizing: border-box;
}
form.variations_form table.variations th.label {
    flex: 0 0 90px;
    display: flex;       /* stretched to the row's full height by the parent's
        align-items: stretch above; this nested flex re-centers the label text
        vertically within that now-taller box instead of leaving it pinned top. */
    align-items: center;
}
form.variations_form table.variations td.value {
    flex: 1 1 auto;
    min-width: 0; /* let the control below shrink to fit instead of overflowing */
}
form.variations_form table.variations th.label label {
    color: var(--lsl-swatch-panel-ink) !important;
    font-weight: 700;
}
form.variations_form .reset_variations {
    display: inline-block;
    margin-top: 6px;
    color: var(--lsl-swatch-panel-ink) !important;
}
form.variations_form .reset_variations:hover {
    color: var(--lsl-swatch-glow) !important;
}

/* ---------- Colors + Sizes: hide the real <select>s, they're the JS's source of truth ---------- */
.lsl-has-swatches select {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Colors + Sizes: custom dropdown ---------- */
.lsl-color-select {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.lsl-color-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    background-color: var(--lsl-swatch-control) !important;
    color: var(--lsl-swatch-control-ink) !important;
    border: 1px solid var(--lsl-swatch-control-border) !important;
    border-radius: 0 !important;
    padding: 8px 10px;
    font-weight: 700;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
}
.lsl-color-select__trigger:focus-visible {
    outline: 2px solid var(--lsl-swatch-glow);
    outline-offset: 2px;
}
.lsl-color-select__arrow {
    transition: transform .15s ease;
}
.lsl-color-select.is-open .lsl-color-select__arrow {
    transform: rotate(180deg);
}

.lsl-color-select__list {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 300px;
    overflow-y: auto;
    background: var(--lsl-swatch-control) !important;
    border: 1px solid var(--lsl-swatch-control-border) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.lsl-color-select__list[hidden] {
    display: none;
}
.lsl-color-select__list li {
    padding: 8px 10px;
    color: var(--lsl-swatch-control-ink);
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, .15);
    font-weight: 600;
}
.lsl-color-select__list li:last-child {
    border-bottom: none;
}
/* Colors rows hover/focus to their own real garment color (--lsl-row-hex
   is set inline per row by the JS from the Gildan hex map). Sizes rows
   have no such map, so the JS falls back to --lsl-swatch-hover for those
   — same declaration handles both since the custom property just differs
   per row. */
.lsl-color-select__list li:hover,
.lsl-color-select__list li:focus {
    background: var(--lsl-row-hex) !important;
    outline: none;
}
.lsl-color-select__list li[data-hover-ink="light"]:hover,
.lsl-color-select__list li[data-hover-ink="light"]:focus {
    color: #FFFFFF;
}
.lsl-color-select__list li[data-hover-ink="dark"]:hover,
.lsl-color-select__list li[data-hover-ink="dark"]:focus {
    color: var(--lsl-swatch-control-ink);
}
.lsl-color-select__list li:focus-visible {
    box-shadow: inset 0 0 0 2px var(--lsl-swatch-glow);
}
.lsl-color-select__list li.is-selected {
    font-weight: 800;
    box-shadow: inset 3px 0 0 var(--lsl-swatch-panel-ink);
}
.lsl-color-select__list li.is-disabled {
    opacity: .5;
    text-decoration: line-through;
    cursor: not-allowed;
    pointer-events: none;
}