/* ── LS Label Configurator v1.2.0 ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');

.lslc-wrap { font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:13px; max-width:1400px; width:100%; margin:0 auto; padding:0 16px 40px; box-sizing:border-box; }
.lslc-wrap *,.lslc-wrap *::before,.lslc-wrap *::after { box-sizing:border-box; }

/* ── Two-column grid ── */
.lslc-grid { display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; }
@media(max-width:860px){ .lslc-grid{grid-template-columns:1fr} .lslc-sticky{position:static!important;width:auto!important;} }

/* ── Cards ── */
.lslc-card { background:#fff; border-radius:10px; border:1px solid #e2e6ea; }
.lslc-card-header { background:#499CC2; color:#fff; padding:10px 20px; font-size:13px; font-weight:600; letter-spacing:.3px; border-radius:10px 10px 0 0; }
.lslc-card-header-dark { background:#499CC2; }
.lslc-card-body { padding:20px; }

/* ── Sticky sidebar (JS-controlled) ── */
.lslc-sticky { transition:none; }
/* The left column's "Configure Your Label" card aligns at the top of the grid; the
   right-column summary sits 15px lower so its header doesn't crowd the top edge. */
.lslc-sticky > .lslc-card:first-child { margin-top:15px; }
.lslc-right { align-self:stretch; position:relative; }
/* Overflow visible for sticky on desktop only */
@media(min-width:861px){ .lslc-grid, .lslc-wrap, .lslc-left, .lslc-right { overflow:visible !important; } }

/* ── Fields ── */
.lslc-field { margin-bottom:14px; }
.lslc-label { display:block; font-size:13px; font-weight:500; color:#555; margin-bottom:4px; }
.lslc-label-lg { display:block; font-size:13px; font-weight:600; color:#444; margin-bottom:6px; }
.lslc-label-sm { display:block; font-size:13px; font-weight:500; color:#666; margin-bottom:4px; }
.lslc-select,.lslc-input { width:100%; padding:9px 10px; border:1px solid #d5d8dc; border-radius:6px; font-size:13px; font-family:'DM Sans',sans-serif; color:#252531; background:#fff; appearance:auto; }
.lslc-select:focus,.lslc-input:focus { outline:none; border-color:#499CC2; box-shadow:0 0 0 2px rgba(73,156,194,.12); }
textarea.lslc-input { resize:vertical; }
.lslc-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.lslc-divider { border:none; border-top:1px solid #e2e6ea; margin:16px 0; }
.lslc-hidden { display:none!important; }

/* ── Shape cards ── */
.lslc-shape-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:16px; }
.lslc-wrap .lslc-shape-card { display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 4px 8px; border-radius:7px; border:2px solid #e2e6ea; background:#fff; cursor:pointer; color:#8A909A; font-size:10px; font-weight:500; font-family:'DM Sans',sans-serif; transition:border-color .15s, color .15s, background-color .15s; }
.lslc-wrap .lslc-shape-card:hover { border-color:#499CC2; color:#499CC2; background:#EDF6FB; }
.lslc-wrap .lslc-shape-card.active { border-color:#499CC2; background:#499CC2; color:#fff; font-weight:600; }
.lslc-wrap .lslc-shape-card svg { width:36px; height:36px; }
@media(max-width:480px){ .lslc-shape-grid{grid-template-columns:repeat(3,1fr)} .lslc-shape-card svg{width:30px;height:30px} }

/* ── Size panel ── */
.lslc-size-panel { background:#F7F8FA; border:1px solid #e2e6ea; border-radius:7px; padding:14px; margin-bottom:14px; }
.lslc-sec-label { font-size:10px; font-weight:600; color:#8A909A; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.lslc-size-inputs { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.lslc-size-inputs.lslc-single { grid-template-columns:1fr; }

/* ── Corner toggle ── */
.lslc-corner-toggle { display:flex; gap:6px; margin-bottom:10px; }
.lslc-wrap .lslc-ct-btn { flex:1; padding:8px; border-radius:6px; border:2px solid #e2e6ea; background:#fff; cursor:pointer; text-align:center; font-size:13px; font-weight:500; font-family:'DM Sans',sans-serif; color:#8A909A; transition:border-color .15s, color .15s, background-color .15s; }
.lslc-wrap .lslc-ct-btn:hover { border-color:#499CC2; color:#499CC2; background:#EDF6FB; }
.lslc-wrap .lslc-ct-btn.active { border-color:#499CC2; background:#499CC2; color:#fff; font-weight:600; }

/* ── Pills ── */
.lslc-pills { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:10px; }
.lslc-wrap .lslc-pill { padding:3px 8px; border-radius:12px; border:1px solid #e2e6ea; background:#fff; color:#252531; font-size:10px; font-weight:400; font-family:'DM Sans',sans-serif; cursor:pointer; transition:border-color .15s, color .15s, background-color .15s; }
.lslc-wrap .lslc-pill:hover { border-color:#499CC2; color:#499CC2; background:#EDF6FB; }
.lslc-wrap .lslc-pill.active { border:2px solid #E8833A; background:#FFF3E8; color:#E8833A; font-weight:600; }
.lslc-wrap .lslc-pill.close { border:1px solid #BFDCEB; background:#EDF6FB; color:#2C6B8A; font-weight:500; }
.lslc-wrap .lslc-pill.close:hover { border-color:#499CC2; color:#1F5775; background:#DCEBF4; }

/* ── Size suggestions row (stock match or close matches, auto) ── */
.lslc-size-suggestions { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; margin-bottom:6px; }
.lslc-size-suggestions:empty { display:none; }

/* ── Collapsible popular-sizes grid ── */
.lslc-pills-expand { margin-bottom:10px; }
.lslc-wrap .lslc-pills-toggle { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; margin:4px 0; background:transparent; border:none; color:#499CC2; font-size:11px; font-weight:500; font-family:'DM Sans',sans-serif; cursor:pointer; border-radius:4px; transition:background-color .15s, color .15s; }
.lslc-wrap .lslc-pills-toggle:hover { background:#EDF6FB; color:#2C6B8A; }
.lslc-pills-toggle-count { color:#8A909A; font-weight:400; }
.lslc-pills-caret { transition:transform .2s ease; }
.lslc-wrap .lslc-pills-toggle[aria-expanded="true"] .lslc-pills-caret { transform:rotate(180deg); }
.lslc-pills-grid { display:flex; flex-wrap:wrap; gap:3px; margin-top:4px; padding:8px; background:#F9FAFB; border:1px solid #e2e6ea; border-radius:5px; }
.lslc-pills-grid[hidden] { display:none; }

/* ── Special note ── */
.lslc-special-note { font-size:11px; color:#8A909A; margin-top:6px; line-height:1.5; padding:8px 10px; background:#fff; border-radius:5px; border:1px solid #e2e6ea; }

/* ── Preview ── */
.lslc-preview-card { background:#fff; border:1px solid #e2e6ea; border-radius:7px; padding:10px; margin-bottom:10px; }
.lslc-preview-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.lslc-preview-label { font-size:9px; font-weight:600; color:#8A909A; text-transform:uppercase; letter-spacing:.04em; }
.lslc-preview-scale { font-size:8px; color:#8A909A; background:#f4f6f8; padding:2px 6px; border-radius:8px; }
.lslc-preview-svg { width:100%; max-width:420px; display:block; margin:0 auto; }
.lslc-artwork-tip { font-size:10px; color:#8A909A; margin-top:6px; text-align:center; line-height:1.5; }
.lslc-artwork-tip strong { color:#252531; }
.lslc-wrap .lslc-download-btn { display:flex; align-items:center; justify-content:center; gap:5px; width:100%; padding:8px 12px; margin-top:8px; margin-bottom:6px; border-radius:5px; border:1px solid #499CC2; background:#fff; color:#499CC2; font-size:13px; font-weight:600; font-family:'DM Sans',sans-serif; cursor:pointer; transition:background-color .15s; }
.lslc-wrap .lslc-download-btn:hover { background:#EDF6FB; color:#499CC2; }

/* ── Badges ── */
.lslc-badge { display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:5px; margin-bottom:8px; }
.lslc-badge-stock { background:#EAFBE7; border:1px solid rgba(52,168,83,.15); }
.lslc-badge-stock .lslc-badge-title { color:#1B5E20; font-size:11px; font-weight:600; }
.lslc-badge-stock .lslc-badge-sub { color:#388E3C; font-size:9px; }
.lslc-badge-custom { background:#FFF3E8; border:1px solid rgba(232,131,58,.15); }
.lslc-badge-custom .lslc-badge-title { color:#BF360C; font-size:11px; font-weight:600; }
.lslc-badge-custom .lslc-badge-sub { color:#E65100; font-size:9px; }
.lslc-badge-close { padding:6px 10px; background:#FFF8E1; border:1px solid rgba(255,213,79,.33); border-radius:5px; margin-bottom:8px; }
.lslc-badge-close .lslc-badge-title { color:#E65100; font-size:11px; font-weight:600; }
.lslc-badge-close .lslc-badge-sub { color:#BF360C; font-size:9px; }
.lslc-suggestion { margin-top:6px; padding:6px 10px; background:#fff; border-radius:5px; display:flex; align-items:center; justify-content:space-between; border:1px solid #e2e6ea; }
.lslc-suggestion span { font-size:10px; color:#252531; }
.lslc-suggestion strong { font-weight:600; }
.lslc-wrap .lslc-suggestion-btn { background:#499CC2; color:#fff; border:none; border-radius:4px; padding:4px 10px; font-size:10px; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; white-space:nowrap; margin-left:8px; }

/* ── Material tabs ── */
.lslc-mat-tabs { display:flex; gap:4px; margin-bottom:12px; }
.lslc-wrap .lslc-mt { flex:1; padding:7px 8px; border-radius:6px; border:1px solid #e2e6ea; background:#fff !important; text-align:center; font-size:13px; font-weight:500; font-family:'DM Sans',sans-serif; color:#8A909A !important; cursor:pointer; transition:border-color .15s, background-color .15s, color .15s; }
.lslc-wrap .lslc-mt:hover { border-color:#499CC2 !important; color:#499CC2 !important; background:#EDF6FB !important; }
.lslc-wrap .lslc-mt.active { background:#499CC2 !important; color:#fff !important; border-color:#499CC2 !important; font-weight:600; }

/* ── Material cards ── */
.lslc-mat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
@media(max-width:640px){ .lslc-mat-grid{grid-template-columns:repeat(2,1fr)} }
.lslc-wrap .lslc-matc { border:2px solid #e2e6ea; border-radius:8px; padding:10px; text-align:center; cursor:pointer; transition:border-color .15s, background-color .15s; background:#fff; font-family:'DM Sans',sans-serif; }
.lslc-wrap .lslc-matc:hover { border-color:#499CC2; background:#EDF6FB; }
.lslc-wrap .lslc-matc.active { border-color:#499CC2; background:#EDF6FB; }
.lslc-matc-icon { width:56px; height:56px; border-radius:50%; background:#f0f2f5; margin:0 auto 6px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lslc-matc-icon svg { width:32px; height:32px; color:#8A909A; }
.lslc-matc-icon img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.lslc-wrap .lslc-matc.active .lslc-matc-icon { background:#d9eef7; }
.lslc-wrap .lslc-matc.active .lslc-matc-icon svg { color:#499CC2; }
.lslc-matc-label { font-size:10px; font-weight:500; color:#444; line-height:1.3; }
.lslc-wrap .lslc-matc.active .lslc-matc-label { color:#499CC2; font-weight:600; }

/* ── Application toggle ── */
.lslc-app-toggle { display:flex; gap:6px; margin-bottom:12px; }
.lslc-wrap .lslc-app-btn { flex:1; padding:10px; border-radius:7px; border:2px solid #e2e6ea; background:#fff; cursor:pointer; text-align:center; font-family:'DM Sans',sans-serif; transition:border-color .15s, background-color .15s; }
.lslc-wrap .lslc-app-btn:hover { border-color:#499CC2; background:#EDF6FB; }
.lslc-wrap .lslc-app-btn.active { border-color:#499CC2; background:#EDF6FB; }
.lslc-wrap .lslc-app-btn svg { display:block; margin:0 auto 4px; color:#8A909A; }
.lslc-wrap .lslc-app-btn:hover svg { color:#499CC2; }
.lslc-wrap .lslc-app-btn.active svg { color:#499CC2; }
.lslc-wrap .lslc-app-btn span { font-size:13px; font-weight:500; color:#8A909A; }
.lslc-wrap .lslc-app-btn:hover span { color:#499CC2; }
.lslc-wrap .lslc-app-btn.active span { color:#499CC2; font-weight:600; }

/* ── Wind direction grid ── */
.lslc-wind-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:12px; }
.lslc-wrap .lslc-wind-btn { padding:8px 4px; border-radius:6px; border:2px solid #e2e6ea; background:#fff; cursor:pointer; text-align:center; font-family:'DM Sans',sans-serif; transition:border-color .15s, background-color .15s; }
.lslc-wrap .lslc-wind-btn:hover { border-color:#499CC2; background:#EDF6FB; }
.lslc-wrap .lslc-wind-btn.active { border-color:#499CC2; background:#EDF6FB; }
.lslc-wrap .lslc-wind-btn img { width:40px; height:40px; display:block; margin:0 auto 4px; object-fit:contain; }
.lslc-wrap .lslc-wind-btn span { font-size:9px; font-weight:500; color:#8A909A; display:block; }
.lslc-wrap .lslc-wind-btn:hover span { color:#499CC2; }
.lslc-wrap .lslc-wind-btn.active span { color:#499CC2; font-weight:600; }

/* ── Machine options panel ── */
.lslc-machine-opts { background:#F7F8FA; border:1px solid #e2e6ea; border-radius:7px; padding:14px; margin-bottom:14px; }

/* ── Version rows ── */
.lslc-ver-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
@media(max-width:640px){ .lslc-ver-row{grid-template-columns:1fr} }

/* ── Summary specs ── */
.lslc-spec-line { display:flex; justify-content:space-between; padding:5px 0; font-size:13px; border-bottom:1px solid #f0f2f4; }
.lslc-spec-line:last-child { border-bottom:none; }
.lslc-spec-line .lslc-sl { color:#8A909A; }
.lslc-spec-line .lslc-sv { font-weight:500; color:#252531; }

/* ── Totals ── */
.lslc-total-line { display:flex; justify-content:space-between; padding:5px 0; font-size:13px; color:#777; }
.lslc-total-val { font-weight:600; color:#555; }
.lslc-grand-total { background:linear-gradient(135deg,#f8fbfd,#f0f7fb); border:1px solid #dde9f0; border-radius:7px; padding:10px 14px; margin-top:10px; }
.lslc-grand-row { display:flex; justify-content:space-between; align-items:center; }
.lslc-grand-label { font-size:15px; font-weight:700; color:#252531; }
.lslc-grand-val { font-size:18px; font-weight:700; color:#499CC2; }
.lslc-per-label { font-size:11px; color:#8A909A; text-align:right; margin-top:1px; }
.lslc-eta { display:flex; align-items:center; gap:6px; margin-top:10px; padding:6px 10px; background:#f0f7fb; border-radius:5px; font-size:13px; color:#499CC2; font-weight:500; }

/* ── CTAs ── */
.lslc-wrap .lslc-atc-btn { width:100%; padding:13px; margin-top:12px; background:#E8833A; color:#fff; border:none; border-radius:8px; font-size:14px; font-weight:700; font-family:'DM Sans',sans-serif; letter-spacing:.3px; cursor:pointer; transition:background-color .15s, transform .15s, box-shadow .15s; }
.lslc-wrap .lslc-atc-btn:hover:not(:disabled) { background:#d4742f; transform:translateY(-1px); box-shadow:0 4px 12px rgba(232,131,58,.3); }
.lslc-wrap .lslc-atc-btn:disabled { opacity:.5; cursor:not-allowed; }
.lslc-wrap .lslc-email-btn { width:100%; padding:11px; margin-top:8px; background:transparent; color:#499CC2; border:1px solid #499CC2; border-radius:8px; font-size:13px; font-weight:600; font-family:'DM Sans',sans-serif; cursor:pointer; transition:background-color .15s, color .15s; }
.lslc-wrap .lslc-email-btn:hover { color:#fff; background:#499CC2; }

/* ── Help + Trust ── */
.lslc-help-inline { display:flex; align-items:center; justify-content:center; gap:6px; padding:12px 0 0; font-size:13px; color:#8A909A; }
.lslc-help-inline a { color:#499CC2; text-decoration:none; font-weight:600; }
.lslc-help-sep { color:#ddd; }
.lslc-trust { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:14px; }
.lslc-trust-item { background:#fff; border:1px solid #e2e6ea; border-radius:6px; padding:8px 10px; display:flex; align-items:center; gap:6px; font-size:11px; font-weight:500; }

/* ── Email Quote Modal ── */
.lslc-eq-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.45); z-index:99999; display:flex; align-items:center; justify-content:center; }
.lslc-eq-modal { background:#fff; border-radius:10px; padding:28px 24px; width:90%; max-width:440px; box-shadow:0 20px 60px rgba(0,0,0,.2); font-family:'DM Sans',sans-serif; position:relative; }
.lslc-eq-title { font-size:18px; font-weight:700; color:#252531; margin:0 0 4px; }
.lslc-eq-sub { font-size:13px; color:#8A909A; margin:0 0 16px; line-height:1.4; }
.lslc-eq-fields { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.lslc-eq-input { width:100%; padding:10px 12px; border:1px solid #d5d8dc; border-radius:6px; font-size:13px; font-family:'DM Sans',sans-serif; color:#252531; box-sizing:border-box; }
.lslc-eq-input:focus { outline:none; border-color:#499CC2; box-shadow:0 0 0 2px rgba(73,156,194,.12); }
textarea.lslc-eq-input { resize:vertical; }
.lslc-eq-status { font-size:12px; min-height:18px; margin-bottom:8px; }
.lslc-eq-btns { display:flex; justify-content:flex-end; gap:8px; }
.lslc-eq-cancel { padding:9px 18px; border:1px solid #e2e6ea; border-radius:6px; background:#fff; color:#8A909A; font-size:13px; font-weight:500; font-family:'DM Sans',sans-serif; cursor:pointer; }
.lslc-eq-cancel:hover { background:#f9f9f9; border-color:#bbb; }
.lslc-eq-send { padding:9px 22px; border:none; border-radius:6px; background:#E8833A; color:#fff; font-size:13px; font-weight:600; font-family:'DM Sans',sans-serif; cursor:pointer; transition:background .15s; }
.lslc-eq-send:hover { background:#d4742f; }
.lslc-eq-send:disabled { opacity:.6; cursor:not-allowed; }

/* ── Material info tooltip ── */
.lslc-matc { position:relative; }
.lslc-matc-info {
    position:absolute; top:6px; right:6px; width:18px; height:18px;
    border-radius:50%; border:1.5px solid #c0c4ca; background:#fff;
    color:#8A909A; font-size:11px; font-weight:700; font-style:italic;
    font-family:Georgia,serif; line-height:16px; text-align:center;
    cursor:help; z-index:2; transition:border-color .15s, color .15s;
}
.lslc-matc-info:hover { border-color:#499CC2; color:#499CC2; }
.lslc-matc-info::after {
    content:attr(data-tip);
    position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
    width:240px; max-width:280px; padding:10px 12px;
    background:#252531; color:#fff; font-size:12px; font-weight:400;
    font-style:normal; font-family:'DM Sans',sans-serif;
    line-height:1.5; border-radius:6px; word-wrap:break-word; white-space:normal;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .15s, visibility .15s;
    z-index:10;
}
.lslc-matc-info::before {
    content:''; position:absolute; bottom:calc(100% + 2px); left:50%; transform:translateX(-50%);
    border:6px solid transparent; border-top-color:#252531;
    opacity:0; visibility:hidden; transition:opacity .15s, visibility .15s;
    z-index:10;
}
.lslc-matc-info:hover::after,
.lslc-matc-info:hover::before { opacity:1; visibility:visible; }

/* ── Qty validation error ── */
.lslc-qty-error { font-size:12px; color:#d93025; font-weight:500; margin-top:4px; padding:6px 10px; background:#fef2f2; border:1px solid #fecaca; border-radius:5px; }

/* ── Price breaks grid ── */
.lslc-pb-wrap { margin-bottom:14px; }
.lslc-pb-label { font-size:11px; font-weight:500; color:#252531; margin-bottom:8px; }
.lslc-pb-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
@media (max-width: 900px) { .lslc-pb-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 480px) { .lslc-pb-grid { grid-template-columns:1fr; } }
.lslc-pb-empty { grid-column:1 / -1; font-size:11px; color:#8A909A; font-style:italic; padding:14px; text-align:center; background:#fff; border:1px dashed #e2e6ea; border-radius:5px; }
.lslc-wrap .lslc-pb-card {
    position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; padding:12px 8px 10px;
    background:#fff; border:1px solid #e2e6ea; border-radius:6px;
    font-family:'DM Sans',sans-serif; cursor:pointer;
    transition:border-color .15s, background-color .15s, transform .1s;
}
.lslc-wrap .lslc-pb-card:hover { border-color:#499CC2; background:#F5FAFD; }
.lslc-wrap .lslc-pb-card:active { transform:scale(0.98); }
.lslc-wrap .lslc-pb-card.active { border:2px solid #E8833A; background:#FFF3E8; padding:11px 7px 9px; }
.lslc-wrap .lslc-pb-card.best { border-color:#BFDCEB; }
.lslc-wrap .lslc-pb-card.best.active { border-color:#E8833A; }
/* Read-only: multi-version renders as non-interactive divs. */
.lslc-wrap .lslc-pb-card.readonly { cursor:default; }
.lslc-wrap .lslc-pb-card.readonly:hover { border-color:#e2e6ea; background:#fff; }
.lslc-wrap .lslc-pb-card.readonly:active { transform:none; }
.lslc-wrap .lslc-pb-card.readonly.best:hover { border-color:#BFDCEB; }
.lslc-wrap .lslc-pb-card.readonly.active:hover { border-color:#E8833A; background:#FFF3E8; }
.lslc-pb-qty { font-size:16px; font-weight:700; color:#252531; letter-spacing:-0.01em; }
.lslc-wrap .lslc-pb-card.active .lslc-pb-qty { color:#E8833A; }
.lslc-pb-total { font-size:13px; font-weight:600; color:#499CC2; }
.lslc-pb-ppl { font-size:10px; color:#8A909A; font-weight:400; }
.lslc-pb-badge {
    position:absolute; top:-8px; left:50%; transform:translateX(-50%);
    padding:2px 8px; background:#499CC2; color:#fff;
    font-size:9px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
    border-radius:3px; white-space:nowrap;
}

/* ── Material popular badge ── */
.lslc-matc-pop {
    position:absolute; top:6px; left:6px;
    padding:2px 7px; border-radius:3px;
    background:#499CC2; color:#fff;
    font-size:9px; font-weight:600; font-family:'DM Sans',sans-serif;
    letter-spacing:.02em; text-transform:uppercase; line-height:1.4;
    z-index:2;
}

/* ── Section tooltip icon (inline with labels) ── */
.lslc-tip-icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:16px; height:16px; border-radius:50%;
    border:1.5px solid #c0c4ca; background:#fff;
    color:#8A909A; font-size:10px; font-weight:700; font-style:italic;
    font-family:Georgia,serif; line-height:1;
    cursor:help; position:relative; vertical-align:middle; margin-left:4px;
    transition:border-color .15s, color .15s;
}
.lslc-tip-icon:hover { border-color:#499CC2; color:#499CC2; }
.lslc-tip-icon::after {
    content:attr(data-tip);
    position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
    width:240px; max-width:300px; padding:10px 12px;
    background:#252531; color:#fff; font-size:12px; font-weight:400;
    font-style:normal; font-family:'DM Sans',sans-serif;
    line-height:1.5; border-radius:6px; word-wrap:break-word; white-space:normal;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .15s, visibility .15s;
    z-index:20; text-align:left;
}
.lslc-tip-icon::before {
    content:''; position:absolute; bottom:calc(100% + 2px); left:50%; transform:translateX(-50%);
    border:6px solid transparent; border-top-color:#252531;
    opacity:0; visibility:hidden; transition:opacity .15s, visibility .15s;
    z-index:20;
}
.lslc-tip-icon:hover::after,
.lslc-tip-icon:hover::before { opacity:1; visibility:visible; }

/* ── Color + Coating card grids ── */
.lslc-color-grid, .lslc-coat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px; }
@media(max-width:640px){ .lslc-color-grid,.lslc-coat-grid{grid-template-columns:repeat(2,1fr)} }
.lslc-optc { position:relative; border:2px solid #e2e6ea; border-radius:8px; padding:10px 6px 8px; text-align:center; cursor:pointer; transition:border-color .15s, background-color .15s; background:#fff; font-family:'DM Sans',sans-serif; }
.lslc-wrap .lslc-optc:hover { border-color:#499CC2; background:#EDF6FB; }
.lslc-wrap .lslc-optc.active { border-color:#499CC2; background:#EDF6FB; }
.lslc-optc-icon { width:44px; height:44px; border-radius:50%; background:#f0f2f5; margin:0 auto 6px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lslc-optc-icon svg { width:28px; height:28px; color:#8A909A; }
.lslc-optc-icon img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.lslc-optc.active .lslc-optc-icon { background:#d9eef7; }
.lslc-optc.active .lslc-optc-icon svg { color:#499CC2; }
.lslc-optc-label { font-size:10px; font-weight:500; color:#444; line-height:1.3; }
.lslc-optc.active .lslc-optc-label { color:#499CC2; font-weight:600; }

/* ── Section label bars ── */
.lslc-section-label {
    font-size:11px; font-weight:700; color:#499CC2;
    text-transform:uppercase; letter-spacing:.06em;
    padding:12px 0 10px; margin-top:8px;
    border-top:2px solid #e9edf1;
    display:flex; align-items:center; gap:8px;
}
.lslc-section-label::after {
    content:''; flex:1; height:0; border:none;
}
.lslc-card-body > .lslc-section-label:first-child {
    border-top:none; margin-top:0; padding-top:0;
}

/* ── Section panels (alternating shaded/white containers) ── */
.lslc-panel { border:1px solid #e2e6ea; border-radius:7px; padding:14px; margin-bottom:14px; }
.lslc-panel-shaded { background:#F7F8FA; }
.lslc-panel-white { background:#fff; }
.lslc-panel .lslc-label-lg { margin-top:0; }
.lslc-panel .lslc-mat-grid,
.lslc-panel .lslc-color-grid,
.lslc-panel .lslc-coat-grid,
.lslc-panel .lslc-app-toggle { margin-bottom:0; }

/* ── Mobile constraints ── */
@media(max-width:860px){
    .lslc-wrap { overflow-x:hidden; padding:0 12px 30px; }
    .lslc-card-body { padding:14px; }
    .lslc-panel { padding:10px; }
}

/* ── Accent panel (orange left border, warm background) ── */
.lslc-panel-accent {
    background:#FFF9F2;
    border:1px solid #F5E6D0;
    border-left:4px solid #E8833A;
    border-radius:7px;
}

/* ── Artwork upload note ── */
.lslc-artwork-note { text-align:center; font-size:12.5px; color:#8A909A; padding:12px 0 0; line-height:1.5; }