/* Customer OSL appearance. Original layout and shared styles are preserved. */
.osl-colour-grid {display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow-y:auto;}
.osl-colour-card {background:white;border:1.5px solid var(--line);border-radius:12px;padding:14px;display:flex;align-items:center;gap:10px;text-align:left;font:inherit;cursor:pointer;color:var(--ink);}
.osl-swatch {width:22px;height:22px;border-radius:50%;flex-shrink:0;border:1px solid #0001;}
.osl-swatch.Grey {background:#7b879b}.osl-swatch.Pink {background:#d689aa}.osl-swatch.Orange {background:#d88a56}.osl-swatch.Brown {background:#9b7564}.osl-swatch.Green {background:#7aab79}.osl-swatch.Blue {background:#588abb}.osl-swatch.Purple {background:#7e63b1}
.osl-colour-card small {display:block;color:var(--muted);font-size:10px;margin-top:3px;}


/* RX-style treatment in the existing OSL entry position, using warm orange. */
#addProductBtn.osl-entry {
  background:linear-gradient(135deg,rgba(255,107,53,0.10),rgba(255,255,255,0.92));
  border-color:rgba(255,107,53,0.22);
  color:#b45309;
  font-weight:800;
}

/* Relabel the original Local box; its click handler stays unchanged. */
.empty-state .local-stock-title {display:block;color:var(--ink-2);font-weight:700;}
.empty-state .local-stock-subtitle {display:block;margin-top:2px;font-size:11px;line-height:1.35;font-weight:500;color:var(--muted);}

/* OSL navigation stays in the bottom action row. */
.osl-dialog-actions {display:flex;gap:10px;flex-shrink:0;margin-top:12px;}
.osl-dialog-actions > .modal-btn-secondary {flex:1;min-width:0;margin-top:0;}

/* Same RX notice styling, positioned above OSL footer actions. */
.osl-order-notice {margin:12px 0 0;text-align:left;}

/* Availability describes the supply route; both statuses remain selectable. */
.osl-product-pick-title {flex-wrap:wrap;row-gap:3px;}
.osl-availability {font-size:12px;font-weight:500;line-height:1.5;letter-spacing:normal;white-space:normal;}
.osl-availability-available {color:#28724f;}
.osl-availability-special {color:#c62828;animation:osl-special-pulse 1.6s ease-in-out infinite;}
@keyframes osl-special-pulse {0%,100%{opacity:1;}50%{opacity:.4;}}
@media (prefers-reduced-motion:reduce) {.osl-availability-special {animation:none;}}
.osl-available-colours > .osl-availability {margin-left:4px;}
.osl-availability-note {margin:14px 0 0;color:var(--muted);font-size:12px;line-height:1.6;text-align:left;}
.osl-colour-copy {min-width:0;}
.osl-colour-copy > .osl-availability {display:block;margin-top:3px;}

/* Supported photochromic colours, separated by a middle dot. */
.osl-available-colours {margin-top:6px;font-size:12px;font-weight:600;line-height:1.5;}
.osl-available-colour {white-space:nowrap;}
.osl-colour-separator {color:var(--muted);}
.osl-available-colour.Grey {color:#6b7280;}
.osl-available-colour.Brown {color:#8b6343;}
.osl-available-colour.Pink {color:#b83e73;}
.osl-available-colour.Orange {color:#b45309;}
.osl-available-colour.Green {color:#15803d;}
.osl-available-colour.Blue {color:#2563eb;}
.osl-available-colour.Purple {color:#7e57c2;}

/* Tint the photochromic title with only its available colours. */
.osl-photo-title-tint {
  --osl-colour-Grey:#6b7280;--osl-colour-Brown:#8b6343;--osl-colour-Pink:#b83e73;
  --osl-colour-Orange:#b45309;--osl-colour-Green:#15803d;--osl-colour-Blue:#2563eb;--osl-colour-Purple:#7e57c2;
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

/* OSL progress uses the established customer status sheet layout. */
.customer-osl-status-btn{background:#fff4e8;border-color:#f0cfac;color:#995018}
.customer-osl-status-message{padding:22px 12px;text-align:center;color:var(--muted);line-height:1.5}