/* ==========================================================================
   WOW24 — PDP redesign sandbox: styles for markup generated by pdp-designs.js
   (owned by the JS side; layout/visual system lives in pdp-designs.css).
   Uses the tokens defined there. Picker markup only exists outside "orig".
   ========================================================================== */

/* ---- shade tile grid: a shade with no swatch image/hex becomes a text tile.
   Same outline and grid cell as its neighbours, no empty grey swatch box. */
#pdpx-picker .pdpx-shade.pdpx-shade-nosw{
    justify-content:center; min-height:var(--ctl-sm, 40px);
}
#pdpx-picker .pdpx-shades:not(.pdpx-shades-txt) .pdpx-shade-nosw .pdpx-sn{
    padding-top:var(--x3, 12px);
}
#pdpx-picker .pdpx-shades:not(.pdpx-shades-txt) .pdpx-shade-nosw .pdpx-sp{
    padding-bottom:var(--x3, 12px);
}

/* ---- text chip mode: most shades have no swatch. Compact chips in a wrap row,
   a small colour dot where the shade does have one. */
#pdpx-picker .pdpx-shades.pdpx-shades-txt{
    display:flex; flex-wrap:wrap; gap:var(--x2, 8px);
}
#pdpx-picker .pdpx-shades-txt .pdpx-shade{
    flex-direction:row; align-items:center; gap:var(--x2, 8px);
    min-height:var(--ctl-sm, 40px); padding:var(--x2, 8px) var(--x3, 12px);
    justify-content:flex-start;
}
#pdpx-picker .pdpx-shades-txt .pdpx-shade .pdpx-sn,
#pdpx-picker .pdpx-shades-txt .pdpx-shade .pdpx-sp{
    padding:0; white-space:nowrap;
}
#pdpx-picker .pdpx-shades-txt .pdpx-shade .pdpx-sp{
    font-weight:400; color:var(--muted, #6c7075);
}
#pdpx-picker .pdpx-shades-txt .pdpx-shade.on .pdpx-sp{ color:var(--ink, #111214); }
#pdpx-picker .pdpx-dot-sw{
    flex:0 0 auto; width:14px; height:14px; border-radius:50%;
    background-size:cover; background-position:center;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);
}
#pdpx-picker .pdpx-shade.out{ opacity:.5; }
@media (max-width:600px){
    #pdpx-picker .pdpx-shades-txt .pdpx-shade{ max-width:100%; }
    #pdpx-picker .pdpx-shades-txt .pdpx-shade .pdpx-sn{ white-space:normal; }
}

/* ---- option rows: shade name above the packaging label */
#pdpx-picker .pdpx-opt .pdpx-wsh{
    display:block; font-size:var(--t-xs, 11px); font-weight:400; color:var(--muted, #6c7075);
    margin-bottom:1px;
}