/* ===== Clean overrides for closet & grit try-ons (loaded after module CSS) ===== */

/* --- tab bar: remove legacy labels / grey strip --- */
#tabs_closet > ul { display: flex !important; gap: 8px; list-style: none; margin: 0 0 16px !important; padding: 0 !important; background: none !important; height: auto !important; }
#tabs_closet > ul::before, #tabs_closet > ul::after { content: none !important; display: none !important; }
#tabs_closet > ul li { margin: 0 !important; }
#tabs_closet > ul li a { display: block; padding: 9px 18px; border-radius: 999px; background: var(--surface) !important; border: 1px solid var(--border) !important; text-decoration: none; color: var(--text) !important; font-weight: 600; font-size: 14px; }
#tabs_closet > ul li a.active, #tabs_closet > ul li.active a { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }

/* --- stage / carousel --- */
.choose_closet { width: auto !important; max-width: 100% !important; height: auto !important; padding: 0 !important; background: none !important; }
.wrapp_doors_12, .wrapp_doors_34, .wrapp_doors_1, .wrapp_doors_2, .wrapp_doors_3, .wrapp_doors_4 { margin: 0 !important; width: 100% !important; max-width: 100% !important; }
.fit { max-width: 100%; }
/* single, large room preview (no grid of many) */
[id^="carousel_"] { display: block !important; max-width: 680px !important; margin: 0 auto !important; padding: 0 !important; list-style: none !important; overflow: visible !important; width: 100% !important; height: auto !important; }
[id^="carousel_"] > li { display: none !important; margin: 0 !important; }
[id^="carousel_"] > li:first-child { display: block !important; }

/* the room card: explicit geometry so apertures align */
.style_doors { position: relative; width: 100%; aspect-ratio: 2280 / 1546; overflow: hidden; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
.room_doors_style { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.img_doors_style img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; max-width: none !important; }

/* grit: css facade (correct door count + exact pattern overlay) */
.facade { position: relative; max-width: 860px; margin: 6px auto 0; aspect-ratio: 16 / 9; padding: 12px; border-radius: 14px; background: linear-gradient(180deg, #8a6a46, #6d5133); box-shadow: 0 24px 60px -26px rgba(0, 0, 0, .55); }
.facade .inner { position: relative; width: 100%; height: 100%; }
.facade .glass { position: absolute; inset: 0; border-radius: 3px; background-color: #eef2f5; background-size: cover; background-position: center; background-repeat: no-repeat; }
.facade .mullion { position: absolute; top: 0; bottom: 0; width: 10px; background: #6d5133; transform: translateX(-50%); }
.facade::after { content: ""; position: absolute; inset: 12px; border-radius: 3px; background: linear-gradient(120deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .14)); pointer-events: none; }

/* fullscreen */
li.max_width_room .style_doors { position: fixed; inset: 0; width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; z-index: 100; background: #000; }
li.max_width_room .style_doors .room_doors_style { object-fit: contain; }
.scrren_room_style { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; background-color: rgba(0, 0, 0, .55) !important; border-radius: 9px; background-size: 55% !important; background-position: center !important; opacity: .85; z-index: 20; }
.scrren_room_style:hover { opacity: 1; }
.wrapp_load { display: none !important; }
.hotspot_block, .scrren_room_style { display: none !important; }

/* --- controls block --- */
.wrapp_img_4doors { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 22px !important; }
.left_part_wi4d { flex: 0 0 220px; }
.right_part_wi4d { flex: 1 1 320px; min-width: 0; }
.wrapp_cat_block { height: auto !important; float: none !important; }
.list_all_cat { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; float: none !important; }
.list_all_cat a { display: inline-block; padding: 7px 13px; border-radius: 999px; background: var(--surface) !important; border: 1px solid var(--border) !important; text-decoration: none; color: var(--text) !important; font-size: 14px; }
.list_all_cat a.active_cat { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.wrapp_list_id_closet { background: none !important; height: auto !important; padding: 0 !important; }
.ul_load_img_closet { display: flex !important; flex-wrap: wrap; gap: 8px; max-height: 430px; overflow: auto; padding: 10px; background: var(--surface) !important; border: 1px solid var(--border); border-radius: 14px; margin: 0; }
.ul_load_img_closet li { border: 2px solid transparent !important; border-radius: 10px; padding: 5px !important; background: var(--surface) !important; float: none !important; margin: 0 !important; width: auto !important; height: auto !important; }
.ul_load_img_closet li:nth-child(4n) { margin-right: 0 !important; }
.ul_load_img_closet li.this_closet_active, .ul_load_img_closet li:hover { border-color: var(--accent) !important; }
.ul_load_img_closet li img.big_i { height: 78px !important; width: auto !important; display: block; }
.ul_load_img_closet .id_closet { font-size: 11px; color: var(--muted); display: block; text-align: center; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.search_img_closet { background: none !important; height: auto !important; padding: 0 !important; margin-top: 16px; position: static !important; float: none !important; clear: both; }
.num_befor { display: none !important; }
.wrapp_search_id_closet { display: flex; gap: 8px; align-items: stretch; }
.wrapp_search_id_closet .f_id_style { flex: 1; padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); height: auto !important; }
.wrapp_search_id_closet .bt_id_ok_closet { background: var(--accent) !important; color: #fff !important; border: 0; border-radius: 10px; padding: 0 18px; cursor: pointer; font-weight: 700; height: auto !important; }

/* grit tab classes */
#tabs_closet > ul li.other_doors_active.active a, #tabs_closet > ul li.third_doors_active.active a, #tabs_closet > ul li.chet_doors_active.active a { background: var(--accent); border-color: var(--accent); color: #fff; }

@media (max-width: 820px) {
  .wrapp_img_4doors { display: block !important; }
  .left_part_wi4d { width: 100% !important; max-width: 100% !important; min-width: 0; overflow-x: auto; margin-bottom: 16px; }
  .right_part_wi4d { width: 100% !important; max-width: 100% !important; min-width: 0; }
  .wrapp_cat_block, .list_all_cat { min-width: 0; max-width: 100%; }
  #tabs_closet > ul { flex-wrap: wrap; }
  .list_all_cat { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .list_all_cat li { flex: 0 0 auto; }
  .ul_load_img_closet { max-height: 52vh; }
  [id^="carousel_"] > li { width: min(86vw, 460px); }
}

/* dark theme */
[data-theme="dark"] .wrapp_count_doors,
[data-theme="dark"] .choose_closet,
[data-theme="dark"] .wrapp_list_id_closet,
[data-theme="dark"] .wrapp_doors_12,
[data-theme="dark"] .wrapp_doors_34,
[data-theme="dark"] .wrapp_img_4doors,
[data-theme="dark"] .left_part_wi4d,
[data-theme="dark"] .right_part_wi4d,
[data-theme="dark"] .wrapp_cat_block { background: transparent !important; }
[data-theme="dark"] .ul_load_img_closet { background: var(--surface) !important; }

/* keep fullscreen toggle clickable above the image */
li.max_width_room .scrren_room_style { z-index: 120 !important; }

/* force theme background over legacy module css */
body { background: var(--bg) !important; color: var(--text) !important; }

/* --- peening: mode switch (Фасад / Шкаф-купе) --- */
.mode { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.mode button { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; transition: .18s var(--ease); }
.mode button:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.mode button.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --- peening: wardrobe stage, reuses closet room geometry (self-contained) --- */
#wardrobe { max-width: 680px; margin: 22px auto 0; }
#wardrobe .style_doors { display: none; }
#wardrobe .style_doors.active { display: block; }
.wrapp_after_line { position: absolute; overflow: hidden; height: 74.9%; left: 16.7%; top: 12.2%; background-color: #eef2f5; }
.after_line1 { width: 16%; }
.after_line2 { width: 32.8%; }
.after_line3 { width: 49.8%; }
.after_line4 { width: 66.8%; }
.img_doors_style { width: 100%; height: 100%; overflow: hidden; background-color: #eef2f5; }
.img_doors_style img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; max-width: none !important; display: block; }
.after_line2::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1px; background: #693117; }
.after_line3::before { content: ""; position: absolute; top: 0; bottom: 0; left: 33.3%; width: 3px; margin-left: -1px; background: #693117; }
.after_line3::after { content: ""; position: absolute; top: 0; bottom: 0; right: 33.3%; width: 3px; margin-left: -1px; background: #693117; }
.after_line4::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1px; background: #693117; }
.after_line4::after { content: ""; position: absolute; top: 0; bottom: 0; left: 24%; width: 52%; border-left: 3px solid #693117; border-right: 3px solid #693117; }