/* ИВАТА — стили внутренних страниц. Итерация 003.
   Подключается после style.css, переменные берёт оттуда. */

/* ---------- крошки и шапка страницы ---------- */
.crumbs{padding:16px 0 0;font-size:13.5px;color:var(--muted)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:7px;align-items:center;list-style:none;margin:0;padding:0}
.crumbs li::after{content:'›';margin-left:7px;color:#B6BEB0}
.crumbs li:last-child::after{content:''}
.crumbs a:hover{color:var(--green)}
.crumbs li[aria-current]{color:var(--ink-2)}

.phead{padding:22px 0 30px}
.phead h1{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em}
.phead__lead{margin-top:14px;font-size:17px;color:var(--ink-2);max-width:760px}
.phead__facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.fact{
	display:inline-flex;align-items:center;gap:8px;background:var(--green-bg);color:var(--ink-2);
	border-radius:999px;padding:8px 15px;font-size:14px
}
.fact b{color:var(--ink)}

/* ---------- плашки подкатегорий и фильтры ---------- */
.plashki{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.plashka{
	display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff;
	border-radius:999px;padding:9px 18px;font-size:15px;transition:.15s
}
.plashka:hover{border-color:var(--green);color:var(--green)}
.plashka.is-active{background:var(--green);border-color:var(--green);color:#fff}
.plashka span{
	background:var(--green-bg);color:var(--green);border-radius:999px;padding:1px 8px;font-size:12.5px;font-weight:700
}
.plashka.is-active span{background:rgba(255,255,255,.22);color:#fff}
.plashki__note{font-size:13.5px;color:var(--muted);margin:-14px 0 24px}

/* ---------- две колонки ---------- */
.cols{display:grid;grid-template-columns:1fr 330px;gap:40px;align-items:start}
.aside{position:sticky;top:20px;display:flex;flex-direction:column;gap:18px}
.abox{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:#fff}
.abox--green{background:var(--green-bg);border-color:transparent}
.abox h3{font-size:17px;margin-bottom:10px}
.abox p{font-size:14.5px;color:var(--muted)}
.abox ul li{font-size:14.5px;color:var(--ink-2);padding-left:22px;position:relative;margin-top:9px}
.abox ul li::before{
	content:'';position:absolute;left:2px;top:7px;width:8px;height:8px;border-radius:50%;background:var(--green-l)
}

/* ---------- текстовые блоки ---------- */
.prose h2{font-size:clamp(21px,2.4vw,28px);margin:38px 0 14px}
.prose h3{font-size:18px;margin:26px 0 10px}
.prose p{margin-bottom:12px;color:var(--ink-2)}
.prose ul.dots li{position:relative;padding-left:24px;margin-bottom:9px;color:var(--ink-2)}
.prose ul.dots li::before{
	content:'';position:absolute;left:4px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--green-l)
}
.prose .ph{margin:20px 0}

/* элементы грид-сеток не должны распирать страницу шире экрана */
.cols>*,.cart>*,.tovar>*,.citem>*,.mcalc>*,.goods>*,.step>*,.fgrid>*{min-width:0}

/* сетка полей формы */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:680px){.fgrid{grid-template-columns:1fr}}

.tbl-wrap{overflow-x:auto;margin:16px 0;-webkit-overflow-scrolling:touch}
.tbl-wrap .tbl{margin:0;min-width:520px}
.tbl{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px}
.tbl th,.tbl td{border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
.tbl th{background:var(--green-bg);font-weight:700;font-size:14px}
.tbl tr:nth-child(even) td{background:var(--green-bg2)}

.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:18px 0}
.card-s{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:#fff}
.card-s b{display:block;margin-bottom:6px;font-size:16px}
.card-s p{font-size:14.5px;color:var(--muted)}
.card-s .n{
	display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
	background:var(--green);color:#fff;font-weight:700;font-size:14px;margin-bottom:12px
}

/* ---------- шаги «Как купить» ---------- */
.steps{display:flex;flex-direction:column;gap:16px}
.step{
	display:grid;grid-template-columns:54px 1fr;gap:18px;border:1px solid var(--line);
	border-radius:var(--radius);padding:24px;background:#fff
}
.step__n{
	width:44px;height:44px;border-radius:12px;background:var(--green);color:#fff;
	display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700
}
.step h2{font-size:20px;margin-bottom:10px}
.step p{color:var(--ink-2);margin-bottom:10px}
.step .two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
.step .way{border:1px solid var(--line);border-radius:var(--radius-s);padding:18px;background:var(--green-bg2)}
.step .way b{display:block;margin-bottom:8px}
.step .way ul li{font-size:14.5px;color:var(--muted);padding-left:16px;position:relative;margin-top:6px}
.step .way ul li::before{content:'—';position:absolute;left:0;color:var(--green)}

/* ---------- история компании ---------- */
.tl{border-left:2px solid var(--line);margin-left:10px;padding-left:26px}
.tl__i{position:relative;padding-bottom:24px}
.tl__i::before{
	content:'';position:absolute;left:-34px;top:4px;width:14px;height:14px;border-radius:50%;
	background:#fff;border:3px solid var(--green)
}
.tl__y{font-weight:700;color:var(--green);font-size:17px}
.tl__i p{color:var(--ink-2);margin-top:3px}

/* ---------- отзывы ---------- */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:#fff}
.rev p{font-size:15px;color:var(--ink-2);margin-bottom:14px}
.rev__a{display:flex;gap:12px;align-items:center;border-top:1px solid var(--line-2);padding-top:14px}
.rev__av{
	width:40px;height:40px;border-radius:50%;background:var(--green-bg);color:var(--green);
	display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0
}
.rev__a b{display:block;font-size:14.5px}
.rev__a span{display:block;font-size:13px;color:var(--muted)}

/* ---------- карточка товара ---------- */
.tovar{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:40px;align-items:start}
.gal__main{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--green-bg2)}
.gal__main img{width:100%;height:100%;object-fit:cover}
.gal__thumbs{display:flex;gap:10px;margin-top:12px}
.gal__thumbs div{width:78px;height:64px;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer}
.gal__thumbs div.is-active{border-color:var(--green)}
.gal__thumbs img{width:100%;height:100%;object-fit:cover}

.buy{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:#fff}
.buy__labels{display:flex;gap:8px;margin-bottom:12px}
.buy h1{font-size:26px;margin-bottom:10px}
.buy__meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--muted);margin-bottom:18px}
.buy__meta b{color:var(--ink);font-weight:500}
.instock{color:#2E7D32;font-weight:500}

.prices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px}
.price{border-radius:var(--radius-s);padding:16px;border:1px solid}
.price--small{background:#FFF7EC;border-color:#F6D9AE}
.price--big{background:var(--green-bg);border-color:#CADFA4}
.price__t{font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-bottom:6px}
.price--small .price__t{color:#A5620A}
.price--big .price__t{color:var(--green-d)}
.price__v{font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.price__v small{font-size:14px;font-weight:500;color:var(--muted)}
.price__c{font-size:13px;color:var(--muted);margin-top:6px}
.price.is-on{outline:2px solid var(--green);outline-offset:2px}

.calc{border-top:1px solid var(--line-2);margin-top:18px;padding-top:18px}
.calc__row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden}
.qty button{width:42px;height:46px;border:0;background:#fff;font-size:20px;cursor:pointer;color:var(--ink-2)}
.qty button:hover{background:var(--green-bg);color:var(--green)}
.qty input{width:62px;height:46px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font:inherit;font-weight:700;outline:none}
.calc__sum{margin-left:auto;text-align:right}
.calc__sum span{display:block;font-size:13px;color:var(--muted)}
.calc__sum b{font-size:24px;letter-spacing:-.02em}
.calc__hint{font-size:13.5px;color:var(--muted);margin-top:10px}
.buy__cta{display:flex;gap:10px;margin-top:16px}
.buy__cta .btn{flex:1}
.btn--icon{flex:0 0 52px;padding:0;width:52px}

.specs{width:100%;border-collapse:collapse;font-size:15px}
.specs td{padding:11px 0;border-bottom:1px dashed var(--line);vertical-align:top}
.specs td:first-child{color:var(--muted);width:46%}
.specs td:last-child{font-weight:500}

/* ---------- корзина ---------- */
.cart{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start}
.cart__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:16px;flex-wrap:wrap}
.cart__clear{color:var(--muted);border-bottom:1px dashed currentColor;font-size:14px;cursor:pointer;background:none;border-top:0;border-left:0;border-right:0;padding:0}
.cart__clear:hover{color:#D3342A}
.citem{
	display:grid;grid-template-columns:96px minmax(0,1fr) 150px 130px 34px;gap:16px;align-items:center;
	border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:#fff;margin-bottom:12px
}
.citem__pic{width:96px;height:80px;border-radius:8px;overflow:hidden;background:var(--green-bg2)}
.citem__pic img{width:100%;height:100%;object-fit:cover}
.citem__n{font-weight:500;font-size:15.5px}
.citem__n:hover{color:var(--green)}
.citem__m{font-size:13px;color:var(--muted);margin-top:4px}
.citem__sum{text-align:right;font-weight:700;font-size:18px}
.citem__sum span{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:2px}
.citem__del{
	width:34px;height:34px;border:0;background:none;color:#B6BEB0;cursor:pointer;border-radius:8px;
	display:flex;align-items:center;justify-content:center
}
.citem__del:hover{background:#FDECEA;color:#D3342A}
.citem .qty button{width:34px;height:38px;font-size:17px}
.citem .qty input{width:46px;height:38px}

.total{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:#fff;position:sticky;top:20px}
.total h3{font-size:19px;margin-bottom:16px}
.total__r{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:15px;color:var(--ink-2)}
.total__r b{font-weight:500;color:var(--ink)}
.total__big{
	display:flex;justify-content:space-between;align-items:baseline;gap:12px;
	border-top:1px solid var(--line);margin-top:10px;padding-top:14px;font-size:15px
}
.total__big b{font-size:26px;letter-spacing:-.02em}
.minsum{
	background:#FFF7EC;border:1px solid #F6D9AE;border-radius:var(--radius-s);padding:14px;margin:16px 0;font-size:14px;color:#8A5200
}
.minsum b{display:block;margin-bottom:8px}
.bar{height:8px;border-radius:4px;background:#F0E0C4;overflow:hidden}
.bar i{display:block;height:100%;background:var(--orange);border-radius:4px}
.minsum--ok{background:var(--green-bg);border-color:#CADFA4;color:var(--green-d)}

.empty{text-align:center;padding:60px 20px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--green-bg2)}
.empty__ic{
	width:76px;height:76px;border-radius:50%;background:#fff;border:1px solid var(--line);
	display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:#B6BEB0
}
.empty h2{font-size:24px;margin-bottom:8px}
.empty p{color:var(--muted);margin-bottom:22px}

.done{max-width:720px;margin:0 auto;text-align:center;padding:40px 0}
.done__ic{
	width:82px;height:82px;border-radius:50%;background:var(--green);color:#fff;
	display:flex;align-items:center;justify-content:center;margin:0 auto 22px
}
.done h1{font-size:clamp(26px,3vw,34px);margin-bottom:12px}
.done__num{
	display:inline-block;background:var(--green-bg);color:var(--green-d);font-weight:700;font-size:19px;
	border-radius:var(--radius-s);padding:10px 22px;margin:8px 0 18px
}
.done p{color:var(--ink-2);margin-bottom:12px}
.done__next{
	text-align:left;border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:#fff;margin:24px 0
}
.done__next li{position:relative;padding-left:30px;margin-bottom:12px;color:var(--ink-2)}
.done__next li::before{
	content:'';position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;
	background:var(--green-bg);border:2px solid var(--green-l)
}
.done__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- калькулятор матрасов ---------- */
.mcalc{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:end}
.mcalc .fld label{display:block;font-size:13.5px;color:var(--muted);margin-bottom:6px}
.mcalc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mcalc select,.fld select{
	width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-s);
	font:inherit;background:#fff;outline:none;color:var(--ink);appearance:none;
	background-image:linear-gradient(45deg,transparent 50%,#7F8A78 50%),linear-gradient(135deg,#7F8A78 50%,transparent 50%);
	background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px;
	background-size:6px 6px,6px 6px;background-repeat:no-repeat
}
.mcalc select:focus,.fld select:focus{border-color:var(--green)}
.mcalc__out{background:var(--green);color:#fff;border-radius:var(--radius);padding:20px;text-align:center}
.mcalc__out span{display:block;font-size:13.5px;color:#E4EFCE}
.mcalc__out b{display:block;font-size:28px;letter-spacing:-.02em;margin-top:4px}

/* ---------- адаптив ---------- */
@media (max-width:1180px){
	.cols{grid-template-columns:1fr 290px;gap:28px}
	.tovar{grid-template-columns:minmax(0,1fr) 360px;gap:28px}
	.cart{grid-template-columns:minmax(0,1fr) 310px}
	.revs{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
	.cols{grid-template-columns:1fr}
	.aside{position:static;flex-direction:row;flex-wrap:wrap}
	.aside .abox{flex:1 1 260px}
	.tovar{grid-template-columns:1fr}
	.cart{grid-template-columns:1fr}
	.total{position:static}
	.cards3{grid-template-columns:1fr}
	.step .two{grid-template-columns:1fr}
	.mcalc{grid-template-columns:1fr}
	.mcalc__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
	.revs{grid-template-columns:1fr}
	.prices{grid-template-columns:1fr}
	.citem{grid-template-columns:72px 1fr 34px;gap:12px}
	.citem__pic{width:72px;height:62px}
	.citem .qty{grid-column:2}
	.citem__sum{grid-column:2;text-align:left}
	.citem__del{grid-row:1;grid-column:3}
	.step{grid-template-columns:1fr}
	.mcalc__grid{grid-template-columns:1fr}
	.aside{display:block}
	.aside .abox{margin-bottom:14px}
}
