/* ===== 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 { overflow: hidden; max-width: 100%; }
[id^="carousel_"] { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 12px; list-style: none; margin: 0; scroll-snap-type: x proximity; }
[id^="carousel_"] > li { flex: 0 0 auto; width: min(80vw, 560px); scroll-snap-align: start; }

/* --- 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; }

/* 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; }

/* --- 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; }