.ldd { --gold: #b08d4f; --gold-dark: #98763c; --line: #e3e0da; --ink: #1d1d1f; --muted: #6f6f6f; --bg-soft: #faf8f5; --dark: #141414;
color: var(--ink); font-size: 14px; line-height: 1.45; margin: 0 auto; max-width: 1240px; }
.ldd *, .ldd *::before, .ldd *::after { box-sizing: border-box; }
.ldd button { font-family: inherit; } .ldd-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 14px; }
.ldd-tab { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 100px; padding: 10px 20px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: all .2s; }
.ldd-tab:hover { border-color: var(--gold); color: var(--gold-dark); }
.ldd-tab.is-active { background: var(--dark); border-color: var(--dark); color: #fff; }
.ldd-tab-count { opacity: .6; font-size: 11px; margin-left: 4px; }
.ldd-note { text-align: center; color: var(--muted); font-size: 13px; max-width: 760px; margin: 0 auto 22px; } .ldd-filters { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 22px 36px; padding: 18px 0 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.ldd-fgroup { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ldd-fgroup[hidden] { display: none; }
.ldd-f-shape { flex: 1 1 100%; }
.ldd-flabel { font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 600; }
.ldd-fbtns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ldd-fbtn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border: 1px solid var(--line); border-radius: 100px; background: #fff; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; transition: all .15s; }
.ldd-fbtn svg { opacity: .55; width: 20px; height: 20px; }
.ldd-fbtn:hover { border-color: var(--gold); color: var(--gold-dark); }
.ldd-fbtn:hover svg { opacity: .9; }
.ldd-fbtn.is-active { background: var(--gold); border-color: var(--gold); color: #fff; }
.ldd-fbtn.is-active svg { opacity: 1; }
.ldd-fbtn.is-empty { opacity: .35; pointer-events: none; }
.ldd-fcount { font-style: normal; font-size: 10px; opacity: .6; } .ldd-shape-card { display: flex; align-items: center; gap: 18px; margin-top: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); max-width: 640px; }
.ldd-shape-card[hidden] { display: none; }
.ldd-shape-media { flex: 0 0 120px; width: 120px; height: 120px; border-radius: 8px; overflow: hidden; background: #fff; }
.ldd-shape-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ldd-shape-text strong { display: block; font-size: 15px; margin-bottom: 4px; }
.ldd-shape-text p { margin: 0; color: var(--muted); font-size: 13px; } .ldd-slider { display: flex; align-items: center; gap: 10px; min-width: 300px; }
.ldd-sval { font-size: 12px; font-weight: 600; min-width: 42px; text-align: center; }
.ldd-sunit { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ldd-strack { position: relative; flex: 1; height: 28px; display: flex; align-items: center; }
.ldd-strack::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 3px; background: var(--line); border-radius: 2px; transform: translateY(-50%); }
.ldd-sfill { position: absolute; top: 50%; height: 3px; background: var(--gold); border-radius: 2px; transform: translateY(-50%); pointer-events: none; }
.ldd-strack input[type="range"] { position: absolute; width: 100%; height: 28px; margin: 0; padding: 0; background: transparent; appearance: none; -webkit-appearance: none; pointer-events: none; }
.ldd-strack input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.ldd-strack input[type="range"]::-moz-range-track { background: transparent; }
.ldd-strack input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; pointer-events: all; position: relative; z-index: 2; }
.ldd-strack input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; pointer-events: all; }
.ldd-strack input[type="range"]:focus { outline: none; } .ldd-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); }
.ldd-table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; margin: 0; }
.ldd-table thead { background: var(--dark); color: #fff; }
.ldd-table th { padding: 13px 16px; font-weight: 500; text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #fff; border: 0; }
.ldd-table th.ldd-sortable { cursor: pointer; user-select: none; }
.ldd-table th.ldd-sortable::after { content: '↕'; opacity: .4; margin-left: 6px; font-size: 11px; }
.ldd-table th.is-asc::after { content: '↑'; opacity: 1; }
.ldd-table th.is-desc::after { content: '↓'; opacity: 1; }
.ldd-table td { padding: 10px 16px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.ldd-table tbody tr:hover { background: var(--bg-soft); }
.ldd-table tr.is-order td { color: #444; }
.ldd-td-ct { font-weight: 600; }
.ldd-td-price { font-weight: 700; color: var(--gold-dark); font-size: 15px; white-space: nowrap; }
.ldd-td-actions { text-align: right; white-space: nowrap; }
.ldd-avail { display: inline-block; padding: 3px 9px; border-radius: 100px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.ldd-avail.stock { background: #e8f3ea; color: #2f6b3a; }
.ldd-avail.order { background: #f3eee4; color: #7a5c1e; }
.ldd-shape-cell { display: inline-flex; align-items: center; gap: 7px; }
.ldd-shape-cell svg { color: var(--gold); width: 18px; height: 18px; }
.ldd-video-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--gold); cursor: pointer; padding: 0; margin-left: 6px; vertical-align: middle; }
.ldd-video-btn:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
.ldd-btn, .ldd-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 6px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none !important; cursor: pointer; transition: all .15s; line-height: 1.2; }
.ldd-btn { background: var(--gold); color: #fff !important; border: 1px solid var(--gold); }
.ldd-btn:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.ldd-btn-outline { background: #fff; color: var(--gold-dark) !important; border: 1px solid var(--gold); }
.ldd-btn-outline:hover { background: var(--gold); color: #fff !important; }
.ldd-td-actions .ldd-btn-outline { margin-right: 6px; }
.ldd-qty { width: 52px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 4px; font-size: 13px; text-align: center; margin-right: 6px; vertical-align: middle; }
.ldd-empty td { text-align: center; color: var(--muted); padding: 28px; white-space: normal; }
.ldd-count { text-align: center; color: var(--muted); font-size: 13px; margin: 12px 0 0; }
.ldd-more { text-align: center; margin: 10px 0 0; }
.ldd-more button[hidden] { display: none; }
.ldd-show-more.ldd-auto { border-color: transparent; background: transparent; color: var(--muted); text-transform: none; letter-spacing: 0; cursor: default; } .ldd-modal { position: fixed; inset: 0; z-index: 2147483000; background: rgba(20,18,14,.88); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.ldd-modal[hidden] { display: none; }
.ldd-modal video { max-width: min(92vw, 720px); max-height: 80vh; border-radius: 8px; background: #000; box-shadow: 0 10px 50px rgba(0,0,0,.5); }
.ldd-modal-title { color: #fff; margin: 12px 0 0; font-size: 14px; }
.ldd-modal-close { position: absolute; top: 14px; right: 22px; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; } @media (max-width: 782px) {
.ldd { font-size: 13px; }
.ldd-filters { gap: 16px; }
.ldd-slider { min-width: 0; width: 100%; }
.ldd-f-size { width: 100%; }
.ldd-shape-card { flex-direction: column; text-align: center; }
.ldd-table-wrap { border: 0; overflow: visible; }
.ldd-table, .ldd-table tbody, .ldd-table tr, .ldd-table td { display: block; white-space: normal; }
.ldd-table thead { display: none; }
.ldd-table tr { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; background: #fff; }
.ldd-table td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: 12px; }
.ldd-table td::before { content: attr(data-label); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; flex: 0 0 auto; }
.ldd-td-actions { justify-content: flex-end; padding-top: 10px !important; }
.ldd-td-actions::before { display: none; }
.ldd-td-price { font-size: 17px; }
.ldd-empty td { display: block; }
}