/* ==========================================================================
   Door Configurator — public styles
   Everything is scoped to .dc-root. Colors/sizes come from CSS variables
   injected by the shortcode from plugin settings; the theme must not leak in.
   ========================================================================== */

.dc-root {
	--dc-primary: #1f3a5f; --dc-bg: #fff; --dc-card: #f5f6f8; --dc-border: #d9dde3; --dc-text: #1c1c1e;
	--dc-muted: #6b7280; --dc-price: #1f3a5f; --dc-active: #1f3a5f; --dc-btn-text: #fff;
	--dc-radius: 8px; --dc-thumb-min: 120px; --dc-max-width: 1200px; --dc-sticky-top: 24px;
	--dc-font: inherit;
	box-sizing: border-box; max-width: var(--dc-max-width); margin: 0 auto; color: var(--dc-text); background: var(--dc-bg);
	--dc-font-size: 16px; --dc-heading-size: 18px; --dc-section-gap: 36px; --dc-views-gap: 16px;
	font-family: var(--dc-font); font-size: var(--dc-font-size); line-height: 1.45; -webkit-text-size-adjust: 100%;
}
.dc-root *, .dc-root *::before, .dc-root *::after { box-sizing: inherit; }

/* --- Theme reset (neutralize OceanWP / Elementor / Woo globals) --- */
.dc-root h3, .dc-root h2 { margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: 0; text-transform: none; }
.dc-root p { margin: 0; }
.dc-root img { display: block; max-width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 0; background: none; }
.dc-root a, .dc-root a:hover { color: var(--dc-primary); text-decoration: none; box-shadow: none; border: 0; }
.dc-root ul, .dc-root dl { margin: 0; padding: 0; list-style: none; }
.dc-root button, .dc-root input, .dc-root textarea {
	font: inherit; color: inherit; margin: 0; letter-spacing: 0; text-transform: none; line-height: inherit;
	background: none; border: 0; border-radius: 0; box-shadow: none; outline: none; -webkit-appearance: none; appearance: none; min-height: 0;
}
.dc-root button { cursor: pointer; text-align: inherit; padding: 0; transition: none; }
.dc-root button:hover, .dc-root button:focus { background: none; color: inherit; border-color: inherit; box-shadow: none; transform: none; }
.dc-root button:focus-visible, .dc-root input:focus-visible, .dc-root textarea:focus-visible { outline: 2px solid var(--dc-active); outline-offset: 2px; }
.dc-root input[type="checkbox"] { -webkit-appearance: checkbox; appearance: checkbox; }

/* --- Layout --- */
.dc-layout { display: grid; grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.dc-preview-col.is-sticky { position: sticky; top: var(--dc-sticky-top); }
.dc-options-col { display: flex; flex-direction: column; gap: var(--dc-section-gap); min-width: 0; }
.dc-section-title { font-size: var(--dc-heading-size); font-weight: 600; margin-bottom: 14px; }

/* --- Preview --- */
.dc-views { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dc-views-gap); }
.dc-view-label { text-align: center; font-size: .85em; color: var(--dc-muted); margin-bottom: 8px; }
.dc-canvas { position: relative; width: 100%; background: var(--dc-card); border-radius: var(--dc-radius); overflow: hidden; }
.dc-frame-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; z-index: 1; transform: scaleX(var(--dc-flip, 1)); }
.dc-leaf { position: absolute; z-index: 2; background: var(--dc-card); }
.dc-leaf-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; transform: scaleX(var(--dc-flip, 1)); transition: transform .28s ease; }
.dc-leaf .dc-noimg { position: absolute; inset: 0; z-index: 0; }
.dc-leaf.has-img .dc-noimg { display: none; }
.dc-overlay { position: absolute; z-index: 3; transform: translate(-50%, -50%); height: auto; pointer-events: none; }
.dc-noimg { display: flex; align-items: center; justify-content: center; color: var(--dc-muted); font-size: .8em; background: repeating-linear-gradient(135deg, var(--dc-card) 0 12px, rgba(0,0,0,.03) 12px 24px); width: 100%; height: 100%; }

/* image switch animation */
.dc-anim-fade .dc-leaf-img, .dc-anim-fade .dc-frame-img, .dc-anim-fade .dc-overlay { opacity: 0; transition: opacity .28s ease; }
.dc-anim-fade .dc-leaf-img.is-loaded, .dc-anim-fade .dc-frame-img.is-loaded, .dc-anim-fade .dc-overlay { opacity: 1; }
.dc-anim-fade .dc-frame-img:not([src]) { opacity: 0; }
.dc-anim-slide .dc-leaf-img { opacity: 0; transform: translateX(6%) scaleX(var(--dc-flip, 1)); transition: opacity .28s ease, transform .28s ease; }
.dc-anim-slide .dc-leaf-img.is-loaded { opacity: 1; transform: scaleX(var(--dc-flip, 1)); }
@media (prefers-reduced-motion: reduce) { .dc-root * { transition: none !important; } }

/* --- Price & actions --- */
.dc-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--dc-border); }
.dc-price-label { color: var(--dc-muted); }
.dc-price-value { font-size: 1.6em; font-weight: 700; color: var(--dc-price); }
.dc-actions { display: flex; gap: 8px; margin-top: 12px; }
.dc-actions .dc-btn { flex: 1; }
.dc-share-box { display: flex; gap: 8px; margin-top: 10px; }
.dc-share-box input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--dc-border); border-radius: var(--dc-radius); background: var(--dc-card); font-size: .85em; }

.dc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: var(--dc-radius); font-weight: 600; line-height: 1.2; }
.dc-btn-primary { background: var(--dc-primary); color: var(--dc-btn-text); }
.dc-btn-primary:hover { background: var(--dc-primary); color: var(--dc-btn-text); filter: brightness(1.08); }
.dc-btn-primary:disabled { opacity: .6; cursor: default; }
.dc-btn-ghost { border: 1px solid var(--dc-border); color: var(--dc-text); }
.dc-btn-ghost:hover { border-color: var(--dc-primary); color: var(--dc-primary); }
.dc-btn-small { padding: 8px 12px; font-size: .85em; border: 1px solid var(--dc-border); }
.dc-icon { display: inline-flex; width: 1.1em; height: 1.1em; }
.dc-icon svg { width: 100%; height: 100%; }

/* --- Panel grid --- */
.dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--dc-thumb-min), 1fr)); gap: 12px; }
.dc-thumb { display: block; width: 100%; border: 2px solid transparent; border-radius: var(--dc-radius); padding: 4px; background: var(--dc-card); transition: border-color .15s, box-shadow .15s; }
.dc-thumb:hover { border-color: var(--dc-border); background: var(--dc-card); }
.dc-thumb.is-selected { border-color: var(--dc-active); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dc-active) 20%, transparent); background: var(--dc-card); }
.dc-thumb-img { aspect-ratio: 1 / 2.1; border-radius: calc(var(--dc-radius) - 3px); overflow: hidden; background: var(--dc-bg); }
.dc-thumb-img img { width: 100%; height: 100%; object-fit: cover; }
.dc-thumb-name { font-size: .85em; margin-top: 6px; line-height: 1.25; }
.dc-tag { font-size: .78em; color: var(--dc-muted); margin-top: 2px; }
.dc-tag-included { color: var(--dc-muted); }
.dc-tag-level { color: var(--dc-price); font-weight: 600; letter-spacing: .05em; }
.dc-empty { color: var(--dc-muted); }

/* --- Hardware list --- */
.dc-hw-list { display: grid; gap: 10px; }
.dc-hw { display: grid; grid-template-columns: 96px 1fr; gap: 14px; width: 100%; padding: 10px; border: 2px solid var(--dc-border); border-radius: var(--dc-radius); background: var(--dc-bg); transition: border-color .15s; }
.dc-hw:hover { border-color: var(--dc-muted); background: var(--dc-bg); }
.dc-hw.is-selected { border-color: var(--dc-active); background: var(--dc-card); }
.dc-hw-none { grid-template-columns: 1fr; padding: 12px 14px; }
.dc-hw-img { aspect-ratio: 1; border-radius: calc(var(--dc-radius) - 3px); overflow: hidden; background: var(--dc-card); }
.dc-hw-img img { width: 100%; height: 100%; object-fit: contain; }
.dc-hw-body { min-width: 0; }
.dc-hw-brand { font-size: .78em; color: var(--dc-muted); }
.dc-hw-name { font-weight: 600; }
.dc-hw-descr { font-size: .88em; color: var(--dc-muted); margin-top: 6px; }
.dc-hw-specs { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: .82em; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--dc-border); }
.dc-hw-specs dt { color: var(--dc-muted); }
.dc-hw-specs dd { margin: 0; }

/* --- Chips (sizes, side) --- */
.dc-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.dc-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 16px; border: 2px solid var(--dc-border); border-radius: var(--dc-radius); background: var(--dc-bg); min-width: 96px; }
.dc-chip:hover { border-color: var(--dc-muted); background: var(--dc-bg); }
.dc-chip.is-selected { border-color: var(--dc-active); background: var(--dc-card); }
.dc-chip .dc-icon { width: 1.6em; height: 1.6em; }
.dc-chip-sub { font-size: .78em; color: var(--dc-muted); }

/* --- Toggles (casing/slope) --- */
.dc-toggles { display: grid; gap: 10px; }
.dc-toggle { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--dc-border); border-radius: var(--dc-radius); cursor: pointer; }
.dc-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.dc-toggle-switch { flex: none; width: 40px; height: 22px; border-radius: 11px; background: var(--dc-border); position: relative; transition: background .15s; }
.dc-toggle-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.dc-toggle input:checked + .dc-toggle-switch { background: var(--dc-primary); }
.dc-toggle input:checked + .dc-toggle-switch::after { left: 21px; }
.dc-toggle input:focus-visible + .dc-toggle-switch { outline: 2px solid var(--dc-active); outline-offset: 2px; }
.dc-toggle-label { flex: 1; }
.dc-toggle-price { color: var(--dc-muted); font-size: .85em; }
.dc-toggle-note { font-size: .78em; color: var(--dc-muted); }

/* --- Form --- */
.dc-form-fields { display: grid; gap: 12px; }
.dc-field input, .dc-field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--dc-border); border-radius: var(--dc-radius); background: var(--dc-bg); }
.dc-field input:focus, .dc-field textarea:focus { border-color: var(--dc-active); }
.dc-field input.is-invalid, .dc-field textarea.is-invalid { border-color: #c0392b; }
.dc-field textarea { min-height: 90px; resize: vertical; }
.dc-field-error { font-size: .78em; color: #c0392b; margin-top: 4px; min-height: 0; }
.dc-hp { position: absolute; left: -9999px; }
.dc-form-message { font-size: .9em; }
.dc-form-message.is-success { color: #1e7e34; }
.dc-form-message.is-error { color: #c0392b; }

.dc-form-card { padding: 22px; background: var(--dc-card); border-radius: var(--dc-radius); border-top: 4px solid var(--dc-primary); }
.dc-form-card .dc-field input, .dc-form-card .dc-field textarea { background: var(--dc-bg); }
.dc-form-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 22px; background: var(--dc-card); border-radius: var(--dc-radius); }
.dc-summary-title { font-weight: 600; margin-bottom: 10px; }
.dc-summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: .88em; padding: 5px 0; border-bottom: 1px dashed var(--dc-border); }
.dc-summary-total { display: flex; justify-content: space-between; margin-top: 10px; font-size: 1.05em; color: var(--dc-price); }

/* --- Mirrored door: thumbnails and previews follow the chosen hand --- */
.dc-flipped .dc-thumb-img img, .dc-flipped .dc-tip img, .dc-flipped .dc-preset-img img { transform: scaleX(-1); }
.dc-thumb-img img, .dc-tip img, .dc-preset-img img { transition: transform .2s ease; }

/* --- Selection styles --- */
.dc-select-fill .dc-thumb.is-selected { background: var(--dc-active); box-shadow: none; }
.dc-select-fill .dc-thumb.is-selected .dc-thumb-name, .dc-select-fill .dc-thumb.is-selected .dc-tag { color: var(--dc-btn-text); }
.dc-select-fill .dc-hw.is-selected, .dc-select-fill .dc-chip.is-selected { background: var(--dc-active); color: var(--dc-btn-text); }
.dc-select-fill .dc-hw.is-selected .dc-hw-brand, .dc-select-fill .dc-hw.is-selected .dc-tag, .dc-select-fill .dc-hw.is-selected .dc-hw-descr, .dc-select-fill .dc-hw.is-selected .dc-hw-specs dt, .dc-select-fill .dc-chip.is-selected .dc-chip-sub { color: inherit; opacity: .8; }
.dc-select-check .dc-thumb { position: relative; }
.dc-select-check .dc-thumb.is-selected { box-shadow: none; }
.dc-select-check .dc-thumb.is-selected .dc-thumb-img { position: relative; }
.dc-select-check .dc-thumb.is-selected .dc-thumb-img::after, .dc-select-check .dc-hw.is-selected .dc-hw-img::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 32px no-repeat; }
.dc-select-check .dc-hw-img { position: relative; }

/* --- Disabled by rules --- */
.dc-thumb.is-disabled, .dc-hw.is-disabled, .dc-chip.is-disabled, .dc-card.is-disabled { opacity: .45; filter: grayscale(1); cursor: not-allowed; position: relative; }
.dc-thumb.is-disabled::after, .dc-hw.is-disabled::after, .dc-chip.is-disabled::after { content: "недоступно"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: .72em; padding: 3px 8px; border-radius: 999px; background: var(--dc-text); color: var(--dc-bg); white-space: nowrap; }
.dc-thumb.is-disabled:hover, .dc-hw.is-disabled:hover, .dc-chip.is-disabled:hover { border-color: var(--dc-border); }

/* --- Presets --- */
.dc-presets-block { margin-bottom: var(--dc-section-gap); }
.dc-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.dc-preset { border: 2px solid var(--dc-border); border-radius: var(--dc-radius); overflow: hidden; background: var(--dc-bg); display: flex; flex-direction: column; }
.dc-preset-img { position: relative; aspect-ratio: 4 / 3; background: var(--dc-card); }
.dc-preset-img img { width: 100%; height: 100%; object-fit: cover; }
.dc-badge { position: absolute; top: 10px; left: 10px; padding: 3px 10px; border-radius: 999px; background: var(--dc-primary); color: var(--dc-btn-text); font-size: .75em; font-weight: 600; }
.dc-preset-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.dc-preset-name { font-weight: 600; }
.dc-preset-descr { font-size: .88em; color: var(--dc-muted); }
.dc-preset-body .dc-btn { margin-top: auto; align-self: flex-start; }

/* --- Progress --- */
.dc-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.dc-progress-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--dc-card); overflow: hidden; }
.dc-progress-bar span { display: block; height: 100%; background: var(--dc-primary); transition: width .3s; }
.dc-progress-text { font-size: .85em; color: var(--dc-muted); white-space: nowrap; }

/* --- Interactive zones --- */
.dc-zone { position: absolute; z-index: 5; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.dc-zone-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--dc-primary); border: 2px solid #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--dc-primary) 30%, transparent); transition: transform .15s; }
.dc-zone:hover .dc-zone-dot { transform: scale(1.25); }
.dc-zone-label { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px); padding: 3px 8px; border-radius: 4px; background: var(--dc-text); color: var(--dc-bg); font-size: .72em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; }
.dc-zone:hover .dc-zone-label, .dc-zone:focus-visible .dc-zone-label { opacity: 1; }
.dc-zones-blink .dc-zone-dot { animation: dc-blink 1s ease-in-out 3; }
@keyframes dc-blink { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
.dc-leaf.has-zones .dc-overlay { pointer-events: none; }

/* --- Wizard --- */
.dc-mode-wizard .dc-options-col > .dc-section { display: none; }
.dc-mode-wizard .dc-options-col > .dc-section.is-current-step { display: block; }
.dc-wizard-nav { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--dc-border); }
.dc-wizard-dots { flex: 1; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.dc-wizard-dots button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--dc-border); font-size: .8em; font-weight: 600; display: flex; align-items: center; justify-content: center; color: var(--dc-muted); }
.dc-wizard-dots button.is-done { border-color: var(--dc-primary); color: var(--dc-primary); }
.dc-wizard-dots button.is-current { background: var(--dc-primary); border-color: var(--dc-primary); color: var(--dc-btn-text); }
.dc-wizard-nav .dc-btn:disabled { opacity: .4; cursor: default; }

/* --- Custom design form --- */
.dc-custom { margin-top: calc(var(--dc-section-gap) * 1.5); display: flex; justify-content: center; }
.dc-custom-card { width: 100%; max-width: 560px; padding: 32px 28px; border-radius: var(--dc-radius); background: var(--dc-card); border-top: 4px solid var(--dc-primary); text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.dc-custom-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--dc-primary); color: var(--dc-btn-text); display: flex; align-items: center; justify-content: center; }
.dc-custom-icon .dc-icon { width: 26px; height: 26px; }
.dc-custom-card .dc-section-title { margin-bottom: 0; }
.dc-custom-text { color: var(--dc-muted); max-width: 42ch; }
.dc-custom-form { width: 100%; display: grid; gap: 12px; text-align: left; }
.dc-custom-form .dc-field input { background: var(--dc-bg); }
.dc-drop { position: relative; border: 2px dashed var(--dc-border); border-radius: var(--dc-radius); padding: 24px; text-align: center; cursor: pointer; background: var(--dc-bg); transition: border-color .15s; }
.dc-drop.is-over { border-color: var(--dc-primary); }
.dc-drop-text { display: flex; flex-direction: column; gap: 4px; }
.dc-drop-text span { font-size: .85em; color: var(--dc-muted); }
.dc-hp-file { display: none; }
.dc-drop-preview { position: relative; display: inline-block; }
.dc-drop-preview img { max-height: 220px; width: auto; border-radius: calc(var(--dc-radius) - 3px); }
.dc-drop-remove { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--dc-text); color: var(--dc-bg); display: flex; align-items: center; justify-content: center; line-height: 1; }
.dc-custom-form .dc-btn { justify-self: center; }

/* --- Lock comparison --- */
.dc-hw-wrap { position: relative; }
.dc-hw-wrap > .dc-hw { width: 100%; }
.dc-cmp-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: .78em; color: var(--dc-muted); padding: 4px 8px; border-radius: 999px; border: 1px solid transparent; }
.dc-hw-wrap > .dc-cmp-toggle { position: absolute; right: 10px; top: 10px; background: var(--dc-bg); border-color: var(--dc-border); }
.dc-cmp-toggle:hover { color: var(--dc-primary); border-color: var(--dc-primary); background: var(--dc-bg); }
.dc-cmp-toggle.is-on { color: var(--dc-btn-text); background: var(--dc-primary); border-color: var(--dc-primary); }
.dc-cmp-toggle.is-on:hover { color: var(--dc-btn-text); background: var(--dc-primary); }
.dc-cmp-toggle .dc-icon { width: 1em; height: 1em; }
.dc-hw-view-compact .dc-hw-wrap > .dc-cmp-toggle { top: 50%; transform: translateY(-50%); }
.dc-hw-view-compact .dc-hw-wrap > .dc-cmp-toggle span, .dc-hw-view-cards .dc-hw-wrap > .dc-cmp-toggle span { display: none; }
.dc-card-btns { display: inline-flex; gap: 6px; align-items: center; }
.dc-card-btns .dc-cmp-toggle span { display: none; }

.dc-cmp-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 9997; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--dc-bg); color: var(--dc-text); border: 1px solid var(--dc-border); border-radius: 999px; box-shadow: 0 8px 28px rgba(0,0,0,.18); }
.dc-cmp-bar[hidden] { display: none; }
.dc-cmp-count { font-weight: 600; white-space: nowrap; }
.dc-toast { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%) translateY(8px); z-index: 9997; padding: 8px 14px; background: var(--dc-text); color: var(--dc-bg); border-radius: 999px; font-size: .85em; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.dc-toast.is-visible { opacity: 1; transform: translateX(-50%); }

.dc-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.dc-modal[hidden] { display: none; }
.dc-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.dc-modal-panel { position: relative; width: 100%; max-width: 1000px; max-height: 90vh; display: flex; flex-direction: column; background: var(--dc-bg); color: var(--dc-text); border-radius: var(--dc-radius); box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.dc-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--dc-border); }
.dc-modal-head .dc-section-title { margin: 0; }
.dc-cmp-table-wrap { overflow: auto; padding: 8px 20px 20px; }
.dc-cmp-table { border-collapse: collapse; width: 100%; min-width: 560px; }
.dc-cmp-table th, .dc-cmp-table td { padding: 10px 12px; border-bottom: 1px solid var(--dc-border); text-align: left; vertical-align: top; font-weight: normal; }
.dc-cmp-table thead th { vertical-align: bottom; position: relative; }
.dc-cmp-table tbody th { color: var(--dc-muted); font-size: .88em; width: 160px; }
.dc-cmp-table tbody tr:nth-child(even) td { background: var(--dc-card); }
.dc-cmp-table td.is-best, .dc-cmp-table th.is-best { background: color-mix(in srgb, var(--dc-primary) 10%, transparent); }
.dc-cmp-img { width: 120px; aspect-ratio: 1; background: var(--dc-card); border-radius: calc(var(--dc-radius) - 3px); overflow: hidden; margin-bottom: 8px; }
.dc-cmp-img img { width: 100%; height: 100%; object-fit: contain; }
.dc-cmp-remove { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; color: var(--dc-muted); display: flex; align-items: center; justify-content: center; font-size: 1.2em; line-height: 1; }
.dc-cmp-remove:hover { background: var(--dc-card); color: var(--dc-text); }
.dc-badge-inline { position: static; display: inline-block; margin-left: 8px; }
.dc-cmp-actions td { border-bottom: 0; }

/* --- Brand filter tabs --- */
.dc-filter-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.dc-filter-tabs button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--dc-border); font-size: .85em; }
.dc-filter-tabs button.is-active { background: var(--dc-primary); color: var(--dc-btn-text); border-color: var(--dc-primary); }

/* --- Hardware view modes --- */
.dc-hw-view-cards { grid-template-columns: repeat(var(--dc-hw-cols, 3), 1fr); }
.dc-hw-view-cards .dc-hw { grid-template-columns: 1fr; gap: 8px; }
.dc-hw-view-cards .dc-hw-none { grid-column: 1 / -1; }
.dc-hw-view-cards .dc-hw-descr, .dc-hw-view-cards .dc-hw-specs { display: none; }
.dc-hw-view-compact .dc-hw { grid-template-columns: 44px 1fr; padding: 6px 8px; gap: 10px; align-items: center; }
.dc-hw-view-compact .dc-hw-none { grid-template-columns: 1fr; }
.dc-hw-view-compact .dc-hw-descr, .dc-hw-view-compact .dc-hw-specs { display: none; }
.dc-hw-view-compact .dc-hw-name { font-weight: 500; font-size: .95em; }

/* --- Tooltip --- */
.dc-root { position: relative; }
.dc-tip { position: absolute; z-index: 50; width: 220px; padding: 8px; background: var(--dc-bg); border: 1px solid var(--dc-border); border-radius: var(--dc-radius); box-shadow: 0 8px 24px rgba(0,0,0,.15); opacity: 0; pointer-events: none; transition: opacity .12s; }
.dc-tip.is-visible { opacity: 1; }
.dc-tip img { width: 100%; height: auto; border-radius: calc(var(--dc-radius) - 3px); }
.dc-tip-name { font-size: .85em; margin-top: 6px; }

/* --- Info blocks: catalogs & gallery --- */
.dc-info { display: flex; flex-direction: column; gap: var(--dc-section-gap); margin-top: calc(var(--dc-section-gap) * 1.5); padding-top: var(--dc-section-gap); border-top: 1px solid var(--dc-border); }
.dc-catalog { display: grid; grid-template-columns: repeat(var(--dc-catalog-cols, 3), 1fr); gap: 16px; }
.dc-card { border: 2px solid var(--dc-border); border-radius: var(--dc-radius); overflow: hidden; background: var(--dc-bg); display: flex; flex-direction: column; }
.dc-card.is-selected { border-color: var(--dc-active); }
.dc-card-img { aspect-ratio: 4 / 3; background: var(--dc-card); }
.dc-catalog-medium .dc-card-img, .dc-catalog-compact .dc-card-img { aspect-ratio: 1; }
.dc-card-img img { width: 100%; height: 100%; object-fit: contain; }
.dc-card-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.dc-catalog-medium .dc-card-body { padding: 10px; }
.dc-catalog-compact .dc-card-body { padding: 8px; font-size: .9em; }
.dc-card-name { font-weight: 600; }
.dc-card-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dc-card-foot .dc-tag { margin: 0; font-size: .95em; color: var(--dc-price); font-weight: 600; }
.dc-card.is-selected .dc-card-pick { background: var(--dc-active); color: var(--dc-btn-text); border-color: var(--dc-active); }

.dc-gallery { display: grid; grid-template-columns: repeat(var(--dc-gallery-cols, 4), 1fr); gap: 12px; }
.dc-gallery-item { position: relative; aspect-ratio: 1; border-radius: var(--dc-radius); overflow: hidden; background: var(--dc-card); padding: 0; width: 100%; }
.dc-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.dc-gallery-item:hover img { transform: scale(1.03); }
.dc-gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; font-size: .82em; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.65)); text-align: left; }

.dc-lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.dc-lightbox[hidden] { display: none; }
.dc-lb-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.88); }
.dc-lb-figure { position: relative; margin: 0; max-width: 92vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dc-lb-figure img { max-width: 92vw; max-height: 82vh; width: auto; height: auto; object-fit: contain; }
.dc-lb-caption { color: #fff; font-size: .9em; text-align: center; }
.dc-lb-btn { position: absolute; z-index: 2; color: #fff; font-size: 2.4em; line-height: 1; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.dc-lb-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.dc-lb-close { top: 12px; right: 12px; }
.dc-lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.dc-lb-next { right: 12px; top: 50%; transform: translateY(-50%); }

/* --- Dark theme --- */
.dc-dark .dc-noimg { background: repeating-linear-gradient(135deg, var(--dc-card) 0 12px, rgba(255,255,255,.04) 12px 24px); }
.dc-dark .dc-toggle-switch::after { background: var(--dc-text); }
.dc-dark .dc-share-box input, .dc-dark .dc-field input, .dc-dark .dc-field textarea { color: var(--dc-text); }

/* --- Mobile chrome (hidden on desktop) --- */
.dc-mobile-bar, .dc-mobile-footer, .dc-sheet { display: none; }
.dc-print { display: none; }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1024px) {
	.dc-layout { grid-template-columns: 1fr; gap: 32px; }
	.dc-catalog { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
	.dc-gallery { grid-template-columns: repeat(3, 1fr); }
	.dc-preview-col.is-sticky { position: static; }
	.dc-preview { max-width: 560px; margin: 0 auto; }
}

/* ==========================================================================
   Mobile: preview on top, category bar, bottom sheets, sticky price footer
   ========================================================================== */
@media (max-width: 782px) {
	.dc-root { font-size: 15px; padding-bottom: 76px; }
	.dc-layout { gap: 20px; }
	.dc-views { gap: 10px; }
	.dc-price { margin-top: 12px; }
	.dc-actions .dc-btn span { display: none; }
	.dc-actions .dc-btn { flex: 0 0 auto; padding: 10px 14px; }
	.dc-actions { justify-content: flex-end; }

	.dc-mobile-bar { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-top: 14px; padding-bottom: 4px; }
	.dc-mobile-bar::-webkit-scrollbar { display: none; }
	.dc-mobile-bar button { flex: none; padding: 9px 14px; border: 1.5px solid var(--dc-border); border-radius: 999px; font-size: .9em; white-space: nowrap; background: var(--dc-bg); }
	.dc-mobile-bar button.is-done { border-color: var(--dc-primary); }
	.dc-mobile-bar button.is-active { background: var(--dc-primary); color: var(--dc-btn-text); border-color: var(--dc-primary); }

	.is-mobile .dc-options-col > .dc-section:not(.dc-section-form) { display: none; }
	.dc-form-summary { grid-template-columns: 1fr; }
	.dc-catalog, .dc-hw-view-cards { grid-template-columns: repeat(2, 1fr); }
	.dc-gallery { grid-template-columns: repeat(2, 1fr); }
	.dc-tip { display: none; }
	.dc-cmp-bar { bottom: 74px; padding: 8px 12px; }
	.dc-toast { bottom: 130px; }
	.dc-modal { padding: 0; align-items: flex-end; }
	.dc-modal-panel { max-height: 92vh; border-radius: 16px 16px 0 0; }
	.dc-cmp-table tbody th { width: 110px; }
	.dc-mode-wizard .dc-options-col > .dc-section-form { display: block; }
	.dc-wizard-nav { display: none; }
	.dc-zone-label { display: none; }
	.dc-custom-card { padding: 24px 18px; }
	.dc-presets { display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; }
	.dc-preset { flex: 0 0 68%; scroll-snap-align: start; }
	.dc-cat-tabs { flex-wrap: nowrap; overflow-x: auto; }

	.dc-sheet { display: block; position: fixed; inset: 0; z-index: 9999; }
	.dc-sheet[hidden] { display: none; }
	.dc-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
	.dc-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 78vh; display: flex; flex-direction: column; background: var(--dc-bg); color: var(--dc-text); border-radius: 16px 16px 0 0; animation: dc-sheet-in .22s ease-out; }
	@keyframes dc-sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
	.dc-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--dc-border); font-weight: 600; }
	.dc-sheet-close { font-size: 1.6em; line-height: 1; padding: 0 4px; color: var(--dc-muted); }
	.dc-sheet-body { overflow-y: auto; padding: 14px 18px 24px; }
	.dc-sheet-body .dc-grid { display: flex; overflow-x: auto; gap: 10px; scroll-snap-type: x mandatory; padding-bottom: 6px; }
	.dc-sheet-body .dc-thumb { flex: 0 0 var(--dc-thumb-min); scroll-snap-align: start; }
	.dc-sheet-body .dc-hw { grid-template-columns: 72px 1fr; }
	.dc-sheet-body .dc-hw-none { grid-template-columns: 1fr; }
	body.dc-sheet-open { overflow: hidden; }

	.dc-mobile-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--dc-bg); border-top: 1px solid var(--dc-border); box-shadow: 0 -4px 16px rgba(0,0,0,.06); }
	.dc-mobile-price { font-weight: 700; font-size: 1.15em; color: var(--dc-price); }
	.dc-mobile-footer .dc-btn { padding: 10px 16px; }
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
	body.dc-printing > *:not(.dc-print-host) { visibility: hidden; }
	body.dc-printing .dc-root, body.dc-printing .dc-root * { visibility: visible; }
	body.dc-printing .dc-root > *:not(.dc-print) { display: none !important; }
	.dc-print { display: block !important; position: absolute; left: 0; top: 0; width: 100%; padding: 20px; }
	.dc-print-imgs { display: flex; gap: 24px; margin: 16px 0; }
	.dc-print-imgs > div { width: 40%; }
	.dc-print table { width: 100%; border-collapse: collapse; }
	.dc-print td { padding: 6px 8px; border-bottom: 1px solid #ccc; }
	.dc-print-total td { font-weight: 700; }
}