/* ==========================================================================
   Страница «Оттенки дерева» (ottenki.html): породы вкладками, поиск и группа
   оттенков, карточки образцов, увеличение и сравнение до 12 образцов.
   Разметка - templates/frontend/mmoscal/dz_ottenki_wood.tpl.html
   (подставляет includes/show_aux_page.php для дополнительной страницы с
   адресом ottenki), скрипт - js/ottenki-wood.js. Классы ow-*.
   Панель сравнения, всплывающее сообщение и окно скрипт переносит в body
   (у .ow container-type - он «ловит» position: fixed), поэтому их стили
   не вложены в .ow.
   ========================================================================== */
.ow,.ow-tray,.ow-toast,.ow-ov{--ow-blue:#1f74c2;--ow-blue-d:#165e92;--ow-ink:#123f63;--ow-text:#1f2937;--ow-mut:#6b7f93;
	--ow-line:#e3e8ef;--ow-bg:#f3f8fd;--ow-soft:#eef5fc;}
.ow{container-type:inline-size;color:var(--ow-text);margin:0 0 28px;font-family:inherit;}
.ow *,.ow *::before,.ow *::after,.ow-tray *,.ow-ov *{box-sizing:border-box;}
.ow p{text-indent:0;}
.ow [hidden],.ow-tray[hidden],.ow-ov[hidden]{display:none!important;}

/* шапка */
.ow-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 28px;margin:4px 0 22px;}
.ow-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ow-blue);margin-bottom:6px;}
h1.ct-title.ow-h1{margin:0 0 8px;}
.ow-sub{margin:0;color:var(--ow-mut);font-size:16px;line-height:1.5;}
.ow-tip{flex:0 0 auto;max-width:360px;padding:14px 20px;border-radius:14px;background:var(--ow-soft);font-size:14px;line-height:1.5;color:var(--ow-mut);}
.ow-tip strong{display:flex;align-items:center;gap:6px;color:var(--ow-ink);font-size:15px;margin-bottom:2px;}
.ow-tip svg{width:16px;height:16px;flex:0 0 auto;}

/* образец (фон) */
.ow-tex{display:block;background-color:#d9c3a5;background-size:cover;background-position:center;background-repeat:no-repeat;}

/* вкладки пород */
.ow-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:22px;}
.ow-tab{display:flex;align-items:center;gap:14px;min-width:0;padding:14px;border:1px solid var(--ow-line);border-radius:12px;background:#fff;
	font:inherit;text-align:left;color:var(--ow-ink);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;}
.ow-tab:hover{border-color:#b9cfe6;box-shadow:0 4px 14px rgba(18,63,99,.07);}
.ow-tab.is-active{border:2px solid var(--ow-blue);padding:13px;background:var(--ow-bg);}
.ow-tab .ow-tex{flex:0 0 52px;width:52px;height:52px;border-radius:8px;}
.ow-tab__t{display:flex;flex-direction:column;min-width:0;font-size:17px;font-weight:700;line-height:1.25;}
.ow-tab.is-active .ow-tab__t{color:var(--ow-blue-d);}
.ow-tab__t small{font-size:13px;font-weight:400;color:var(--ow-mut);margin-top:3px;}

/* поиск и фильтр */
.ow-bar{display:grid;grid-template-columns:minmax(0,1fr) 280px auto;gap:14px;margin-bottom:26px;}
.ow-search{position:relative;display:block;margin:0;}
.ow-search svg{position:absolute;left:18px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--ow-mut);pointer-events:none;}
.ow-search input,.ow-select{width:100%;height:58px;border:1px solid var(--ow-line);border-radius:10px;background:#fff;font:inherit;font-size:17px;color:var(--ow-text);outline:none;
	transition:border-color .15s,box-shadow .15s;}
.ow-search input{padding:0 16px 0 54px;background:#f7fafd;-webkit-appearance:none;appearance:none;}
.ow-select{padding:0 14px;cursor:pointer;}
.ow-search input:focus,.ow-select:focus{border-color:var(--ow-blue);box-shadow:0 0 0 3px rgba(31,116,194,.15);}

/* кнопки */
.ow-btn,.ow-tray .ow-btn,.ow-ov .ow-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 26px;border-radius:10px;
	font:inherit;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,color .15s;}
.ow-btn svg{width:18px;height:18px;flex:0 0 auto;}
.ow-btn--main{background:var(--ow-blue);border:1px solid var(--ow-blue);color:#fff;}
.ow-btn--main:hover{background:var(--ow-blue-d);border-color:var(--ow-blue-d);}
.ow-btn--main:disabled{opacity:.45;cursor:default;background:var(--ow-blue);}
.ow-btn--line{background:#fff;border:1px solid var(--ow-blue);color:var(--ow-blue);}
.ow-btn--line:hover{background:var(--ow-bg);}
.ow-btn--quiet{background:var(--ow-soft);border:1px solid var(--ow-soft);color:var(--ow-blue-d);}
.ow-btn--quiet:hover{background:#e1edf9;}
.ow-bar .ow-btn{height:58px;}

/* заголовок результатов */
.ow-res{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;}
.ow-res h2{margin:0;font-size:22px;font-weight:700;color:var(--ow-ink);}
#ow-count{font-size:14px;color:var(--ow-mut);white-space:nowrap;}

/* карточки */
.ow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
.ow-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ow-line);border-radius:14px;padding:12px;transition:border-color .15s,box-shadow .15s;}
.ow-card.is-hidden{display:none;}
.ow-card:hover{box-shadow:0 8px 22px rgba(18,63,99,.08);}
.ow-card.is-chosen{border-color:var(--ow-blue);box-shadow:0 0 0 1px var(--ow-blue);}
.ow-sample{position:relative;display:block;width:100%;padding:0;border:0;border-radius:8px;overflow:hidden;background:none;cursor:zoom-in;}
.ow-sample .ow-tex{width:100%;aspect-ratio:8/7;transition:transform .35s ease;}
/* пока превью грузится - прелоадер сайта (js/ottenki-wood.js ставит фон после загрузки) */
.ow-card .ow-tex:not([style]){background:#f4f1ec url('/templates/frontend/mmoscal/images/preloader/preloud.gif') no-repeat center;background-size:auto;}
.ow-card .ow-tex.is-in{animation:owTexIn .3s ease;}
@keyframes owTexIn{from{opacity:.25}to{opacity:1}}
.ow-sample:hover .ow-tex{transform:scale(1.04);}
.ow-sample:focus-visible{outline:3px solid rgba(31,116,194,.45);outline-offset:2px;}
.ow-zoom{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--ow-ink);display:flex;align-items:center;justify-content:center;
	box-shadow:0 2px 8px rgba(0,0,0,.18);}
.ow-zoom svg{width:20px;height:20px;}
.ow-card__body{padding:14px 4px 2px;}
.ow-card h3{margin:0 0 12px;font-size:17px;line-height:1.3;font-weight:700;color:var(--ow-ink);}
.ow-chk{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--ow-mut);cursor:pointer;user-select:none;margin:0;}
.ow-chk input{width:20px;height:20px;margin:0;accent-color:var(--ow-blue);cursor:pointer;}
.ow-card.is-chosen .ow-chk{color:var(--ow-blue-d);}

.ow-empty{padding:40px 20px;text-align:center;border:1px dashed var(--ow-line);border-radius:14px;color:var(--ow-mut);font-size:16px;}
.ow-empty p{margin:0 0 14px;}

/* помощь и примечание */
.ow-help{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;margin-top:28px;padding:22px 26px;
	background:var(--ow-bg);border:1px solid var(--ow-line);border-radius:14px;}
.ow-help strong{display:block;font-size:19px;color:var(--ow-ink);margin-bottom:4px;}
.ow-help p{margin:0;color:var(--ow-mut);font-size:15px;line-height:1.5;}
.ow-note{margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--ow-mut);}
.ow-svc{display:none!important;}
.ow-text{margin-top:24px;}

/* панель сравнения внизу экрана (в body) */
.ow-tray{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:900;width:min(1180px,calc(100% - 32px));display:flex;align-items:center;gap:14px;
	padding:12px 14px 12px 20px;background:#fff;border:1px solid var(--ow-line);border-radius:16px;box-shadow:0 12px 40px rgba(18,63,99,.18);
	font-family:inherit;color:var(--ow-text);animation:owUp .25s ease;}
@keyframes owUp{from{opacity:0;transform:translate(-50%,20px);}to{opacity:1;transform:translate(-50%,0);}}
.ow-tray__t{flex:0 0 auto;display:flex;flex-direction:column;line-height:1.3;}
.ow-tray__t strong{color:var(--ow-ink);font-size:15px;}
.ow-tray__t small{color:var(--ow-mut);font-size:13px;}
.ow-tray__list{flex:1 1 auto;display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding:2px;min-width:0;}
.ow-pick{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:4px 30px 4px 4px;border:1px solid var(--ow-line);border-radius:10px;background:#fff;
	font-size:13px;line-height:1.2;color:var(--ow-ink);max-width:220px;}
.ow-pick .ow-tex{flex:0 0 34px;width:34px;height:34px;border-radius:6px;}
.ow-pick span{display:flex;flex-direction:column;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;}
.ow-pick small{font-weight:400;color:var(--ow-mut);}
.ow-pick button{position:absolute;right:4px;top:50%;margin-top:-11px;width:22px;height:22px;border:0;border-radius:50%;background:var(--ow-soft);color:var(--ow-ink);
	font-size:15px;line-height:22px;padding:0;cursor:pointer;}
.ow-pick button:hover{background:#dbe8f6;}
.ow-tray .ow-btn{min-height:44px;padding:8px 20px;}

/* всплывающее сообщение */
.ow-toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);z-index:1001;max-width:calc(100% - 32px);padding:12px 18px;border-radius:10px;
	background:var(--ow-ink);color:#fff;font-size:14px;line-height:1.4;box-shadow:0 8px 24px rgba(0,0,0,.2);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;}
.ow-toast.is-on{opacity:1;visibility:visible;}

/* окно увеличения / сравнения (в body) */
.ow-ov{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,32,51,.6);
	font-family:inherit;color:var(--ow-text);animation:owFade .2s ease;}
@keyframes owFade{from{opacity:0;}to{opacity:1;}}
.ow-modal{display:flex;flex-direction:column;width:min(1100px,100%);max-height:calc(100vh - 40px);background:#fff;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.3);overflow:hidden;}
.ow-modal.is-single{width:min(720px,100%);}
.ow-modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--ow-line);}
.ow-modal__head h2{margin:0;font-size:21px;color:var(--ow-ink);}
.ow-close{width:40px;height:40px;border:0;border-radius:50%;background:var(--ow-soft);color:var(--ow-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.ow-close:hover{background:#dbe8f6;}
.ow-close svg{width:20px;height:20px;}
.ow-modal__body{overflow:auto;padding:20px 22px;}
.ow-mgrid{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:18px;}
.ow-mgrid section{min-width:0;}
.ow-mgrid .ow-tex{width:100%;aspect-ratio:1/1;border-radius:10px;}
.ow-modal.is-single .ow-mgrid .ow-tex{aspect-ratio:4/3;}
.ow-mgrid h3{margin:12px 0 2px;font-size:16px;color:var(--ow-ink);}
.ow-mgrid p{margin:0 0 10px;font-size:13px;color:var(--ow-mut);}
.ow-mgrid .ow-btn{min-height:38px;padding:6px 14px;font-size:14px;}
.ow-modal__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 22px;border-top:1px solid var(--ow-line);background:#fafcfe;}
.ow-modal__foot p{margin:0;font-size:13px;color:var(--ow-mut);}
.ow-modal__foot .ow-btn{min-height:42px;padding:8px 20px;font-size:15px;}
html.ow-lock,html.ow-lock body{overflow:hidden;}

/* раскладка по ширине блока */
@container (max-width:1100px){
	.ow-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
	.ow-tab{gap:10px;padding:10px;}
	.ow-tab.is-active{padding:9px;}
	.ow-tab .ow-tex{flex-basis:42px;width:42px;height:42px;}
	.ow-tab__t{font-size:15px;}
}
@container (max-width:820px){
	.ow-intro{flex-direction:column;}
	.ow-tip{max-width:none;}
	.ow-tabs{display:flex;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px;margin-left:-2px;padding-left:2px;}
	.ow-tab{flex:0 0 auto;}
	.ow-bar{grid-template-columns:minmax(0,1fr) auto;}
	.ow-search{grid-column:1/-1;}
	.ow-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
	.ow-search input,.ow-select,.ow-bar .ow-btn{height:50px;}
}
@container (max-width:420px){
	.ow-card{padding:8px;}
	.ow-card h3{font-size:15px;margin-bottom:8px;}
	.ow-chk{font-size:13px;gap:7px;}
	.ow-zoom{width:32px;height:32px;top:8px;right:8px;}
	.ow-help{padding:18px;}
	.ow-help .ow-btn{width:100%;}
}
@media (max-width:760px){
	.ow-tray{flex-wrap:wrap;bottom:8px;width:calc(100% - 16px);padding:10px;gap:8px 10px;}
	.ow-tray__list{order:3;flex-basis:100%;}
	.ow-tray__t{flex:1 1 auto;}
	.ow-tray .ow-btn{min-height:40px;padding:6px 14px;font-size:14px;}
	.ow-mgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
	.ow-modal.is-single .ow-mgrid{grid-template-columns:1fr;}
	.ow-ov{padding:8px;}
	.ow-modal{max-height:calc(100vh - 16px);}
	.ow-modal__head,.ow-modal__body,.ow-modal__foot{padding-left:14px;padding-right:14px;}
}
html.ow-tray-on body{padding-bottom:110px;}

/* листание в окне одного образца: стрелки (компьютер), свайп (телефон) - js */
.ow-mstage{position:relative;}
.ow-mnav{position:absolute;top:50%;width:46px;height:46px;margin-top:-23px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ow-ink);
	box-shadow:0 2px 10px rgba(0,0,0,.2);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s,transform .15s;}
.ow-mnav:hover{background:#fff;transform:scale(1.06);}
.ow-mnav svg{width:22px;height:22px;}
.ow-mnav--prev{left:14px;}.ow-mnav--next{right:14px;}
.ow-mpos{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:3px 10px;border-radius:20px;background:rgba(15,32,51,.6);color:#fff;font-size:13px;line-height:1.4;}
.ow-mstage .ow-tex{touch-action:pan-y;}
@media (hover:none) and (pointer:coarse){.ow-mnav{display:none;}}