/* ================================================================
   Dunn Edwards — выбор цвета колеровки
   Все классы с префиксом .de- чтобы не пересекаться со стилями сайта.
   Подключается в head.php.
   ================================================================ */

/* ---------- общее ---------- */
.de-mono{font-family:Menlo,Consolas,"Courier New",monospace}

/* ---------- блок бренда на странице категории ---------- */
.de-brand{
	border:1px solid #ece9e4;
	background:#fbfaf8;
	background:linear-gradient(180deg,#fbfaf8,#ffffff);
	border-radius:14px;
	padding:24px 26px;
	margin:20px 0 26px;
	display:-ms-flexbox;display:flex;
	-ms-flex-wrap:wrap;flex-wrap:wrap;
	-ms-flex-align:center;align-items:center;
	gap:24px;
}
.de-brand .de-brand-txt{-ms-flex:1;flex:1;min-width:280px}
.de-brand .de-ey{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#b08d57;font-weight:700;margin:0 0 8px}
.de-brand h2{font-size:20px;line-height:1.3;margin:0 0 10px;color:#33302c;font-weight:700}
.de-brand p{margin:0;color:#5c5854;font-size:14.5px;line-height:1.55}
.de-brand p b{color:#33302c}
.de-brand .de-pal{-ms-flex:none;flex:none}
.de-palbtn{
	display:-ms-inline-flexbox;display:inline-flex;
	-ms-flex-align:center;align-items:center;
	gap:12px;background:#33302c;color:#fff;border:none;
	padding:15px 22px;border-radius:11px;font-size:15px;font-weight:600;
	cursor:pointer;text-decoration:none;line-height:1.25;
}
.de-palbtn:hover,.de-palbtn:focus{background:#4a453f;color:#fff;text-decoration:none}
.de-palbtn .de-sw{display:-ms-flexbox;display:flex;gap:3px}
.de-palbtn .de-sw i{width:11px;height:22px;border-radius:2px;display:block}
.de-palbtn small{display:block;font-size:11px;font-weight:500;opacity:.75;letter-spacing:.02em}

/* ---------- строка выбора цвета на карточке товара ---------- */
.de-color-row{
	border:1px solid #e0e0e0;border-radius:8px;padding:14px 16px;margin:14px 0 18px;
	display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;
	-ms-flex-wrap:wrap;flex-wrap:wrap;gap:14px;background:#fbfbfa;
}
.de-color-row .de-cur{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:11px;-ms-flex:1;flex:1;min-width:190px}
.de-color-row .de-dot{
	width:34px;height:34px;border-radius:8px;-ms-flex:none;flex:none;
	box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
	background:#f1f1f1;
}
.de-color-row .de-lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9a9a9a;font-weight:600}
.de-color-row .de-nm{font-size:15px;font-weight:600;color:#3a3a3a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.de-color-row .de-nm.de-empty{color:#a5a5a5;font-weight:500}
.de-pickbtn{
	border:1px solid #7d94a3;background:#fff;color:#4d6675;font-size:14px;font-weight:600;
	padding:9px 16px;border-radius:7px;cursor:pointer;white-space:nowrap;
}
.de-pickbtn:hover{background:#7d94a3;color:#fff}
.de-hint{font-size:12px;color:#b04a4a;margin:-10px 0 14px;display:none}
.de-hint.de-on{display:block}

/* ---------- модалка пикера ---------- */
.de-overlay{
	position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(20,18,16,.55);
	display:none;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;
	padding:20px;z-index:10000;
}
.de-overlay.de-show{display:-ms-flexbox;display:flex}
.de-modal{
	background:#fff;border-radius:14px;width:880px;max-width:100%;max-height:88vh;
	display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;
	overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.de-modal h3{margin:0;font-size:18px;line-height:1.3}
.de-mhead{padding:18px 22px;border-bottom:1px solid #eee;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;gap:12px}
.de-mhead p{margin:2px 0 0;font-size:13px;color:#999}
.de-mx{border:none;background:#f0f0f0;width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:16px;color:#666;-ms-flex:none;flex:none;line-height:1}
.de-mx:hover{background:#e4e4e4}
.de-mctrl{padding:14px 22px;border-bottom:1px solid #f0f0f0}
.de-search{position:relative}
.de-search input{width:100%;padding:10px 14px 10px 38px;border:1px solid #dcdcdc;border-radius:9px;font-size:14px;outline:none;background:#fff;height:auto}
.de-search input:focus{border-color:#7d94a3;box-shadow:0 0 0 3px #eef2f4}
.de-search svg{position:absolute;left:12px;top:50%;margin-top:-9px;color:#aaa}
.de-chips{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:7px;margin-top:12px}
.de-chip{
	border:1px solid #dcdcdc;background:#fff;padding:5px 11px;border-radius:999px;font-size:12.5px;
	cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;gap:6px;-ms-flex-align:center;align-items:center;color:#3a3a3a;
}
.de-chip .de-cnt{color:#aaa}
.de-chip[aria-pressed=true]{background:#4d6675;border-color:#4d6675;color:#fff}
.de-chip[aria-pressed=true] .de-cnt{color:rgba(255,255,255,.7)}
.de-chip .de-d{width:9px;height:9px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.de-mbody{padding:16px 22px;overflow-y:auto;-ms-flex:1;flex:1}
.de-cnt-line{font-size:12px;color:#aaa;margin:0 0 12px}
.de-grid{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:7px}
.de-sw{
	border:none;padding:0;cursor:pointer;position:relative;border-radius:8px;height:58px;
	box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.de-sw:hover{-webkit-transform:scale(1.08);transform:scale(1.08);z-index:2}
.de-sw.de-on{box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 2px #fff,0 0 0 4px #4d6675}
.de-sw .de-ck{position:absolute;top:0;left:0;right:0;bottom:0;display:none;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-weight:700}
.de-sw.de-on .de-ck{display:-ms-flexbox;display:flex}
.de-mfoot{border-top:1px solid #eee;padding:14px 22px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:14px;-ms-flex-wrap:wrap;flex-wrap:wrap}
.de-mfoot .de-prev{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:11px;-ms-flex:1;flex:1;min-width:170px}
.de-mfoot .de-pd{width:38px;height:38px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);-ms-flex:none;flex:none;background:#f0f0f0}
.de-mfoot .de-pn{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.de-mfoot .de-pc{font-size:12px;color:#999}
.de-okbtn{background:#4d6675;color:#fff;border:none;font-size:14px;font-weight:600;padding:11px 22px;border-radius:8px;cursor:pointer;white-space:nowrap}
.de-okbtn[disabled]{background:#dcdcdc;color:#999;cursor:default}
.de-empty{grid-column:1/-1;text-align:center;color:#aaa;padding:36px}

/* ---------- отдельная страница «Цвета Dunn Edwards» ---------- */
.de-page-lead{color:#7d7d7d;margin:0 0 22px;max-width:70ch}
.de-page-controls{background:#fff;padding:14px 0 16px;border-bottom:1px solid #e6e4e0;margin-bottom:6px}
.de-page-controls .de-search{max-width:440px}
.de-page-grid{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.de-card{
	border-radius:10px;cursor:pointer;border:none;padding:0;text-align:left;overflow:hidden;
	background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);display:block;width:100%;
}
.de-card:hover{box-shadow:0 8px 20px rgba(0,0,0,.14)}
.de-card .de-col{height:74px;width:100%}
.de-card .de-meta{padding:7px 9px 9px}
.de-card .de-n{font-size:12px;font-weight:600;color:#3a3a3a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.de-card .de-c{font-size:11px;color:#a2a2a2}

/* модалка «выберите краску в этом цвете» */
.de-modal-narrow{width:560px;max-height:90vh;display:block;overflow:auto}
.de-mtop{height:120px;display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;padding:16px;background:#eee}
.de-mtop .de-fam{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.de-mwrap{position:relative}
.de-mwrap .de-mx{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.85)}
.de-mbody2{padding:20px 22px 24px}
.de-mname{font-size:22px;font-weight:700;margin:0}
.de-mcode{font-size:13px;color:#999;margin:2px 0 18px}
.de-mh{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#9a9a9a;font-weight:600;margin:0 0 12px}
.de-line{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #f0f0f0}
.de-line .de-info{-ms-flex:1;flex:1;min-width:0}
.de-line .de-t{font-size:14px;font-weight:600;color:#3a3a3a}
.de-line .de-s{font-size:12px;color:#999}
.de-line .de-p{font-weight:700;font-size:15px;white-space:nowrap}
.de-line .de-buy{
	border:1px solid #8ba0ac;background:#fff;color:#4d6675;font-size:13px;font-weight:600;
	padding:8px 14px;border-radius:7px;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block;
}
.de-line .de-buy:hover{background:#8ba0ac;color:#fff;text-decoration:none}

/* ---------- цвет в корзине ---------- */
.de-cart-color{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:8px;margin:4px 0 0;font-size:13px;color:#666}
.de-cart-color i{width:16px;height:16px;border-radius:4px;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);-ms-flex:none;flex:none}

@media (max-width:600px){
	.de-brand{padding:18px}
	.de-brand .de-pal{width:100%}
	.de-palbtn{width:100%;-ms-flex-pack:center;justify-content:center}
	.de-page-grid{grid-template-columns:repeat(auto-fill,minmax(86px,1fr))}
	.de-modal{max-height:92vh}
}