*{box-sizing:border-box}html,body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#001a34;background:#fff}button,input{font:inherit}.site-header{position:relative;width:calc(100% - 32px);max-width:1416px;margin:0 auto;padding:12px 24px 0;border-radius:0 0 34px 34px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.04)}.top-row{display:grid;grid-template-columns: 198px 150px minmax(572px,1fr) 308px;gap:28px;align-items:center}.logo{display:flex;height:58px;align-items:center}.logo img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}.logo svg{width:190px;height:58px}.logo text{font-family:Arial Black,Arial,sans-serif;font-size:58px;font-weight:900;letter-spacing:1px;fill:#000000}.catalog-btn{height:45px;border:0;border-radius:18px;background:#000000;color:#fff;display:flex;align-items:center;justify-content:center;gap:12px;font-size:16px;font-weight:500;cursor:pointer}.catalog-btn:hover{background:color(display-p3 0.8754 0.1906 0.1293)}.grid-icon{display:grid;grid-template-columns:repeat(2,5px);gap:5px}.grid-icon i{width:6px;height:6px;background:#fff;border-radius:1px}.search{height:48px;border:2px solid #000000;border-radius:18px;background:#000000;display:flex;overflow:hidden}.scope{border:0;background:#f1f4f8;color:#64778b;padding:0 18px;font-size:16px;white-space:nowrap;border-radius:14px 0 0 14px}.scope span{font-size:14px}.search input{min-width:0;flex:1;border:0;outline:0;padding:0 14px;font-size:15px;color:#001a34}.search input::placeholder{color:#9aa7b4}.camera,.search-btn{border:0;display:grid;place-items:center;cursor:pointer}.camera{width:62px;background:#fff}.camera svg{width:32px;fill:#8d9aa8}.search-btn{width:104px;background:#000000;border-radius:10px}.search-btn svg{width:34px;fill:#fff}.quick-actions{display:flex;justify-content:space-between;gap:4px}.action{position:relative;width:96px;text-align:center;color:#8c9aa8;text-decoration:none;font-size:16px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:3px}.action svg{width:28px;height:28px;fill:#93a0ad}.action:hover,.action:hover svg{color:#000000;fill:#000000}.badge{position:absolute;top:-10px;right:9px;padding:2px 8px;border-radius:999px;background:#f20b7a;color:#fff;font-size:15px}.menu-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:4px;height:42px}.main-menu{display:flex;align-items:center;gap:22px;white-space:nowrap;overflow:hidden}.main-menu a,.address{text-decoration:none;color:#60758a;font-size:18px;background:none;border:0;padding:0}.main-menu a:hover,.address:hover{color:#000000}.main-menu .fresh{color:#00a8a8}.address{color:#000000;white-space:nowrap;cursor:pointer}.promo{height:96px;margin:2px -24px 0;overflow:hidden;border-radius:0 0 34px 34px;background:radial-gradient(circle at 75% 130%, #000000, transparent 17%),linear-gradient(186deg, #ff0000, rgb(196, 41, 41) 30.67%, #000000 38%, #d34300 62%, #ff5555);position:relative;display:flex;align-items:center;justify-content:center}.promo:before,.promo:after{content:"";position:absolute;left:-5%;right:-5%;height:8px;border-radius:50%;border-top:4px solid rgba(255,255,255,.65)}.promo:before{top:17px;transform:rotate(1deg)}.promo:after{bottom:13px;transform:rotate(-1deg)}.promo-content{display:flex;align-items:center;gap:36px;z-index:2}.promo h1{margin:0;color:#fff;font-size:30px;line-height:1;font-weight:900;text-shadow:0 1px 0 rgba(0,0,0,.06)}.promo-content a{background:#001a34;color:#fff;border-radius:12px;padding:10px 16px;text-decoration:none;font-weight:700;font-size:18px}.promo-bag{position:absolute;left:10%;font-size:82px;transform:rotate(-8deg);z-index:1}.promo-clothes{position:absolute;right:17%;display:flex;align-items:center;gap:4px;z-index:1}.shirt{font-size:84px;display:inline-block;transform:rotate(8deg)}.cap{font-size:62px}.catalog-panel{display:none}.catalog-panel div{display:flex;flex-direction:column;gap:12px}.catalog-panel strong{margin-bottom:6px}.catalog-panel a{color:#33475b;text-decoration:none}.page-content{max-width:1500px;margin:35px auto;padding:0 24px}.hero-placeholder{min-height:340px;border-radius:28px;background:linear-gradient(135deg,#f4f7ff,#eef7ff);padding:54px}.hero-placeholder h2{font-size:42px;margin:8px 0}.hero-placeholder p{color:#60758a;font-size:19px}@media(max-width:1450px){.site-header{width:calc(100% - 24px);padding-left:20px;padding-right:20px}.top-row{grid-template-columns:198px 150px minmax(420px,1fr) 300px;gap:16px}.logo svg{width:150px}.catalog-btn{font-size:16px}.quick-actions .action{width:68px}.action span:last-child{font-size:12px}.promo{margin-left:-20px;margin-right:-20px}.main-menu{gap:14px}.main-menu a,.address{font-size:15px}.promo h1{font-size:24px}}@media(max-width:1050px){.site-header{width:calc(100% - 16px);padding:10px 14px 0}.top-row{grid-template-columns:130px 58px 1fr 190px;gap:10px}.catalog-btn{width:58px;padding:0}.catalog-btn>span:last-child{display:none}.quick-actions .action{width:42px}.action span:last-child{display:none}.badge{right:-2px}.menu-row{overflow:hidden}.address{display:none}.promo{margin-left:-14px;margin-right:-14px}.promo-bag{left:2%}.promo-clothes{right:3%}.promo h1{font-size:20px}.promo-content{gap:16px}}@media(max-width:760px){.site-header{width:100%;border-radius:0 0 24px 24px}.top-row{grid-template-columns:100px 50px 1fr}.logo svg{width:100px}.quick-actions{display:none}.catalog-btn{height:50px}.search{height:50px;border-width:3px}.scope,.camera{display:none}.search input{font-size:16px}.search-btn{width:54px}.menu-row{margin-top:10px}.main-menu{gap:16px;overflow-x:auto;scrollbar-width:none}.main-menu::-webkit-scrollbar{display:none}.main-menu a{font-size:14px}.promo{height:86px}.promo-bag,.promo-clothes{opacity:.6}.promo-content{padding:0 14px}.promo h1{font-size:17px;max-width:420px}.promo-content a{font-size:14px;padding:8px 10px}.catalog-panel{display:none}.hero-placeholder{padding:28px}.hero-placeholder h2{font-size:30px}}
/* Product grid added below the banner */
.products-section{margin:0 0 24px}.products-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;background:#f4f5f7;padding:0}.product-card{min-width:0;overflow:hidden;border-radius:16px;background:#fff;display:flex;flex-direction:column}.product-picture{position:relative;aspect-ratio:1/1.25;overflow:hidden;background:#fff}.product-picture img{display:block;width:100%;height:100%;object-fit:cover}.favorite-btn{position:absolute;right:10px;top:8px;width:34px;height:34px;border:0;background:transparent;color:#07111c;font-size:34px;line-height:1;cursor:pointer;text-shadow:0 1px 1px #fff}.favorite-btn.is-active{color:#f1117e}.product-label{position:absolute;left:10px;bottom:8px;padding:4px 9px;border-radius:8px;background:#10c95b;color:#fff;font-size:13px;font-weight:700;line-height:1}.product-info{padding:10px 11px 12px}.product-prices{display:flex;align-items:baseline;gap:6px;white-space:nowrap;overflow:hidden}.product-prices strong{color:#f1117e;font-size:20px;line-height:24px}.product-prices del{color:#98a4b0;font-size:14px;font-weight:700}.product-prices span{color:#f1117e;font-size:14px;font-weight:700}.product-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:44px;margin-top:4px;overflow:hidden;color:#fff;text-decoration:none;font-size:16px;line-height:22px}.product-title:hover{color:#000000}.product-rating{display:flex;align-items:center;gap:4px;margin-top:4px;color:#73879a;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden}.product-rating b{color:#001a34}.star{color:#f6a800;font-size:16px}.review-dot{width:11px;height:11px;border-radius:50%;background:#aeb8c2}@media(max-width:1100px){.products-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:850px){.products-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:620px){.products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.product-prices strong{font-size:17px}.product-title{font-size:14px;line-height:19px;min-height:38px}}@media(max-width:390px){.products-grid{grid-template-columns:1fr 1fr}.product-info{padding:8px}.product-prices{gap:3px}.product-prices del,.product-prices span{font-size:11px}}
/* Footer added from the provided reference */
.site-footer{margin-top:48px;background:#f2f4f7;padding:40px max(24px,calc((100% - 1416px)/2 + 24px));color:#6f8195}.footer-top,.footer-bottom{width:100%;max-width:1392px;margin:0 auto;display:flex}.footer-top{align-items:flex-start;justify-content:space-between;gap:48px}.footer-app{min-width:430px}.footer-app img{display:block;width:82px;height:82px;object-fit:cover;border-radius:8px}.footer-app p{margin:8px 0 0;color:#98a7b8;font-size:16px;line-height:22px}.footer-column{display:flex;flex-direction:column;gap:22px;min-width:200px}.footer-column a{color:#65788e;text-decoration:none;font-size:16px;line-height:22px}.footer-column a:hover{color:#000000}.footer-bottom{align-items:flex-end;justify-content:space-between;gap:24px;margin-top:42px}.footer-legal{max-width:920px}.footer-legal p{margin:0 0 6px;color:#98a7b8;font-size:15px;line-height:22px}.footer-legal a{color:#000000;text-decoration:none}.footer-actions{display:flex;align-items:center;gap:16px}.social-button{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:14px;background:#e3e8f0;color:#7f90a3;text-decoration:none;font-size:14px;font-weight:800}.social-button.telegram{font-size:24px}.accessibility-button{height:54px;padding:0 22px;border:0;border-radius:14px;background:#000000;color:#fff;display:flex;align-items:center;gap:12px;font-size:17px;font-weight:700;white-space:nowrap;cursor:pointer}.accessibility-button:hover{background:#004fe0}.glasses-icon{font-size:22px}@media(max-width:1100px){.footer-top{flex-wrap:wrap}.footer-app{min-width:100%;}.footer-bottom{align-items:flex-start;flex-direction:column}.footer-actions{align-self:flex-end}}@media(max-width:760px){.site-footer{padding:30px 16px}.footer-top{display:grid;grid-template-columns:1fr 1fr;gap:28px}.footer-app{grid-column:1/-1}.footer-column{min-width:0}.footer-bottom{margin-top:32px}.footer-actions{align-self:stretch;flex-wrap:wrap}.accessibility-button{flex:1;justify-content:center}.social-button{width:48px;height:48px}}@media(max-width:480px){.footer-top{grid-template-columns:1fr}.footer-app{grid-column:auto}.footer-actions{gap:10px}.accessibility-button{width:100%;flex-basis:100%}}
article a{text-decoration: none;}
/* Full catalog mega menu */
.catalog-mega{position:fixed;left:0;right:0;top:108px;bottom:0;z-index:1000;background:#fff;overflow:auto;border-top:1px solid #eef1f5}
.catalog-mega[hidden]{display:none}
.catalog-mega-inner{width:100%;max-width:1416px;min-width:1180px;margin:0 auto;padding:14px 18px 24px;display:flex;gap:24px}
.catalog-sidebar{width:270px;flex:0 0 270px}
.catalog-all{width:100%;min-height:88px;padding:12px 16px;border:1px solid #d7deea;border-radius:16px;background:#fff;display:flex;align-items:center;gap:14px;color:#111;font-size:18px;cursor:pointer}
.catalog-all:hover{background:#f5f7fa}
.ozon-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:10px;background:#111;color:#fff;font-weight:900;font-size:12px;line-height:10px;letter-spacing:2px}
.catalog-chevron{margin-left:auto;color:#8e9baa;font-size:24px}
.catalog-categories{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.catalog-categories a{min-height:48px;padding:8px 12px;border-radius:14px;display:flex;align-items:center;gap:12px;color:#111;text-decoration:none;font-size:17px}
.catalog-categories a span{width:24px;text-align:center;color:#c6ccd5;font-size:20px}
.catalog-categories a:hover,.catalog-categories a.active{background:#f4f6f9;color:#000000}
.catalog-categories a:hover span,.catalog-categories a.active span{color:#000000}
.catalog-divider{width:1px;background:#eef1f5}
.catalog-content{flex:1;padding:0 10px 40px}
.catalog-content h2{margin:4px 0 30px;font-size:42px;line-height:1.05;color:#001a34}
.catalog-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:54px}
.catalog-column{display:flex;flex-direction:column;gap:34px}
.catalog-group{display:flex;flex-direction:column;gap:10px}
.catalog-group h3{margin:0 0 6px;font-size:20px;line-height:1.35;color:#111}
.catalog-group a{color:#6a7c90;text-decoration:none;font-size:18px;line-height:1.42}
.catalog-group a:hover{color:#000000}
.more-link{align-self:flex-start;padding:0;border:0;background:transparent;color:#000000;font-size:18px;cursor:pointer}
body.catalog-open{overflow:hidden}
.mobile-transformation{display:none}
@media(max-width:1180px){
.catalog-mega{top:94px}
.catalog-mega-inner{min-width:0;padding:14px}
.catalog-sidebar{width:235px;flex-basis:235px}
.catalog-columns{gap:28px}
.catalog-group a{font-size:16px}
}
/* =========================================================
ПАГИНАЦИЯ КАТАЛОГА
========================================================= */
.catalog-results-wrap {
width: 100%;
min-width: 0;
}
.catalog-pagination {
clear: both;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
max-width: 920px;
margin: 34px auto 0;
padding: 10px;
border: 1px solid #e7e9ee;
border-radius: 18px;
background: #fff;
box-shadow: 0 8px 28px rgba(0, 26, 52, .07);
}
.catalog-pagination a,
.catalog-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 13px;
box-sizing: border-box;
border: 1px solid transparent;
border-radius: 12px;
background: #f3f5f8;
color: #001a34;
font-size: 15px;
font-weight: 700;
line-height: 1;
text-decoration: none;
transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.catalog-pagination a:hover {
border-color: #d71920;
background: #fff5f5;
color: #d71920;
transform: translateY(-1px);
}
.catalog-pagination .active {
border-color: #d71920;
background: #d71920;
color: #fff;
box-shadow: 0 6px 16px rgba(215, 25, 32, .25);
}
.catalog-pagination .catalog-pagination-arrow {
min-width: 112px;
background: #001a34;
color: #fff;
}
.catalog-pagination .catalog-pagination-arrow:hover {
border-color: #001a34;
background: #183550;
color: #fff;
}
.catalog-pagination .catalog-pagination-dots {
min-width: 24px;
padding: 0 3px;
background: transparent;
color: #8090a0;
}
.catalog-pagination .disabled {
background: #f3f5f8;
color: #a6b0ba;
cursor: default;
box-shadow: none;
}
.catalog-pagination-scroll {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 36px;
margin: 12px auto 0;
color: #718398;
font-size: 13px;
text-align: center;
}
.catalog-pagination-spinner {
display: none;
width: 18px;
height: 18px;
box-sizing: border-box;
border: 2px solid #e2e6eb;
border-top-color: #d71920;
border-radius: 50%;
}
.catalog-pagination-scroll.is-loading .catalog-pagination-spinner {
display: inline-block;
animation: catalog-pagination-spin .75s linear infinite;
}
.catalog-pagination-scroll.is-finished {
color: #14804a;
font-weight: 700;
}
.catalog-pagination-scroll.is-error {
color: #c5232a;
}
.catalog-pagination-sentinel {
width: 100%;
height: 2px;
}
@keyframes catalog-pagination-spin {
to { transform: rotate(360deg); }
}
@media (max-width: 600px) {
.catalog-pagination {
gap: 5px;
margin-top: 24px;
padding: 7px;
border-radius: 15px;
}
.catalog-pagination a,
.catalog-pagination span {
min-width: 38px;
height: 38px;
padding: 0 10px;
border-radius: 10px;
font-size: 14px;
}
.catalog-pagination .catalog-pagination-arrow {
min-width: 88px;
font-size: 0;
}
.catalog-pagination .catalog-pagination-arrow:first-child::after {
content: "‹ Назад";
font-size: 13px;
}
.catalog-pagination .catalog-pagination-arrow:last-child::after {
content: "Вперёд ›";
font-size: 13px;
}
.catalog-pagination .disabled {
display: none;
}
.catalog-pagination-scroll {
padding: 0 12px;
font-size: 12px;
}
}
/* Карточка доставки и всплывающие таблицы услуг */
.product-services{overflow:hidden}
.product-services h2{margin-bottom:18px}
.product-services__section{padding-bottom:16px;border-bottom:1px solid #e7ebf0}
.product-services__heading{display:flex;align-items:flex-start;gap:12px}
.product-services__heading>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.product-services__heading b{color:#001a34;font-size:15px;line-height:1.3}
.product-services__heading small{color:#718398;font-size:12px;line-height:1.4}
.product-services__icon,.product-service-button__icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:#eef4ff;color:#005bff;font-style:normal;font-size:20px;font-weight:700}
.delivery-city-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.delivery-city-list a{display:inline-flex;align-items:center;min-height:32px;padding:7px 11px;border:1px solid #dfe5ec;border-radius:999px;background:#f6f8fa;color:#33475b;text-decoration:none;font-size:12px;font-weight:700;line-height:1.2;transition:.18s ease}
.delivery-city-list a:hover{border-color:#005bff;background:#eef5ff;color:#005bff}
.product-stock-status{display:flex;align-items:center;gap:11px;margin:14px 0 3px;padding:12px 13px;border:1px solid #cfead8;border-radius:13px;background:#f0faf3}
.product-stock-status__icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#19a856;color:#fff;font-size:17px;font-weight:800}
.product-stock-status>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 7px;min-width:0}
.product-stock-status b{color:#167843;font-size:14px}
.product-stock-status small{color:#e02b5b;font-size:12px;font-weight:700}
.product-service-buttons{display:grid;gap:8px;padding-top:10px}
.product-service-button{display:grid;grid-template-columns:38px minmax(0,1fr) 20px;align-items:center;gap:12px;width:100%;min-height:64px;padding:9px 4px;border:0;border-bottom:1px solid #e7ebf0;background:#fff;color:#001a34;text-align:left;cursor:pointer}
.product-service-button:last-child{border-bottom:0}
.product-service-button>span:nth-child(2){display:flex;flex-direction:column;gap:3px;min-width:0}
.product-service-button b{font-size:15px;line-height:1.25}
.product-service-button small{color:#718398;font-size:12px;line-height:1.35}
.product-service-button i{color:#8a98a7;font-size:27px;font-style:normal;line-height:1;transition:transform .18s ease}
.product-service-button:hover{color:#005bff}
.product-service-button:hover i{transform:translateX(3px);color:#005bff}
.product-service-button:nth-child(2) .product-service-button__icon{background:#eef9f1;color:#159447}
.product-services__note{display:flex;align-items:flex-start;gap:9px;margin:10px -20px -20px;padding:14px 20px;border-radius:0 0 18px 18px;background:#f3f7f5;color:#476254;font-size:12px;line-height:1.45}
.product-services__note>span:first-child{display:grid;place-items:center;flex:0 0 21px;width:21px;height:21px;border-radius:50%;background:#dff3e6;color:#159447;font-weight:800}
body.service-modal-open{overflow:hidden}
.service-modal[hidden]{display:none}
.service-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:24px}
.service-modal__backdrop{position:absolute;inset:0;background:rgba(0,20,40,.58);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.service-modal__dialog{position:relative;display:flex;flex-direction:column;width:min(1040px,100%);max-height:calc(100vh - 48px);overflow:hidden;border-radius:24px;background:#fff;box-shadow:0 30px 90px rgba(0,20,40,.32);animation:serviceModalIn .2s ease}
.service-modal__dialog--assembly{width:min(850px,100%)}
.service-modal__header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:23px 26px 18px;border-bottom:1px solid #e7ebf0}
.service-modal__header h2{margin:3px 0 0;color:#001a34;font-size:25px;line-height:1.2}
.service-modal__eyebrow{color:#718398;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.service-modal__close{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;padding:0;border:0;border-radius:13px;background:#f1f4f7;color:#001a34;font-size:29px;line-height:1;cursor:pointer}
.service-modal__close:hover{background:#e5eaf0}
.service-modal__body{min-height:0;padding:22px 26px 26px;overflow-y:auto;overscroll-behavior:contain}
.service-modal__body h3{margin:0 0 14px;font-size:19px}
.service-table-scroll{width:100%;overflow-x:auto;border:1px solid #dfe5ec;border-radius:16px;-webkit-overflow-scrolling:touch}
.service-table{width:100%;border-collapse:separate;border-spacing:0;color:#001a34;font-size:14px;line-height:1.4}
.service-table--delivery{min-width:760px}
.service-table th,.service-table td{padding:14px 16px;border-right:1px solid #e5e9ee;border-bottom:1px solid #e5e9ee;text-align:left;vertical-align:middle}
.service-table th:last-child,.service-table td:last-child{border-right:0}
.service-table tbody tr:last-child td{border-bottom:0}
.service-table th{background:#f3f6f9;color:#53677b;font-size:12px;text-transform:uppercase;letter-spacing:.025em}
.service-table td:not(:first-child){white-space:nowrap;font-weight:700}
.service-table tbody tr:nth-child(even) td{background:#fafbfc}
.service-table--assembly td:last-child,.service-table--assembly th:last-child{width:145px;text-align:center;white-space:nowrap;font-weight:800}
.service-alert{margin-top:18px;padding:16px 18px;border:1px solid #ffe0a3;border-radius:14px;background:#fff8e9;color:#664a13}
.service-alert b{display:block;margin-bottom:5px;color:#5a400d}
.service-alert p{margin:0;font-size:13px;line-height:1.55}
.service-subtitle,.city-extra-services h3{margin-top:24px!important}
.service-table--city{min-width:620px}
.service-table--city td[rowspan]{white-space:normal;vertical-align:middle;line-height:1.5}
.city-delivery-conditions{margin-top:20px;padding:18px 20px;border-radius:16px;background:#f5f7fa;color:#33475b}
.city-delivery-conditions h3{margin:0 0 10px}
.city-delivery-conditions ul{margin:0;padding-left:20px}
.city-delivery-conditions li{margin:7px 0;font-size:13px;line-height:1.5}
.city-delivery-contract{display:inline-flex;align-items:center;min-height:38px;margin-top:12px;padding:8px 13px;border-radius:10px;background:#e8f1ff;color:#005bff;text-decoration:none;font-size:13px;font-weight:700}
.city-delivery-contract:hover{background:#dceaff}
.city-price-missing{padding:20px;border:1px solid #dce5f0;border-radius:16px;background:#f7faff}
.city-price-missing b{display:block;color:#001a34;font-size:18px}
.city-price-missing p{margin:8px 0 14px;color:#53677b;font-size:14px;line-height:1.55}
.city-price-missing a{display:inline-flex;align-items:center;min-height:42px;padding:9px 14px;border-radius:11px;background:#005bff;color:#fff;text-decoration:none;font-size:14px;font-weight:700}
@keyframes serviceModalIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:850px){
.service-modal{align-items:end;padding:0}
.service-modal__dialog,.service-modal__dialog--assembly{width:100%;max-height:calc(100dvh - 12px);border-radius:22px 22px 0 0;animation:serviceModalMobileIn .22s ease}
.service-modal__header{padding:17px 16px 14px}
.service-modal__header h2{font-size:21px}
.service-modal__close{width:40px;height:40px;flex-basis:40px}
.service-modal__body{padding:16px 14px calc(22px + env(safe-area-inset-bottom))}
.service-table th,.service-table td{padding:12px 13px}
.service-table--assembly{font-size:13px}
.service-table--assembly td:first-child{white-space:normal}
.service-table--assembly td:last-child,.service-table--assembly th:last-child{width:92px}
.service-alert{padding:14px}
.service-table--city{min-width:600px}
.city-delivery-conditions{padding:15px}
.city-delivery-conditions li{font-size:12px}
.city-price-missing{padding:16px}
}
@media(max-width:430px){
.delivery-city-list{gap:6px}
.delivery-city-list a{padding:7px 9px;font-size:11px}
.product-service-button{grid-template-columns:36px minmax(0,1fr) 16px;gap:10px}
.product-services__icon,.product-service-button__icon{width:36px;height:36px;flex-basis:36px}
}
@keyframes serviceModalMobileIn{from{transform:translateY(100%)}to{transform:none}}
@media(max-width:900px){
.catalog-mega{top:80px}
.catalog-mega-inner{min-width:760px}
.catalog-content h2{font-size:34px}
}
/* Mobile adaptation for the catalog menu: desktop remains unchanged */
@media (max-width:900px){
.catalog-mega{
top:70px;
padding:0;
overflow-y:auto;
overflow-x:hidden;
}
.catalog-mega-inner{
width:100%;
min-width:0;
margin:0;
padding:12px 14px 28px;
display:block;
}
.catalog-sidebar{
width:100%;
max-width:none;
flex-basis:auto;
}
.catalog-all{
min-height:64px;
border-radius:14px;
padding:8px 12px;
font-size:17px;
}
.ozon-mark{
width:42px;
height:42px;
font-size:10px;
line-height:8px;
}
.catalog-categories{
margin-top:12px;
gap:4px;
}
.catalog-categories a{
min-height:50px;
padding:10px 12px;
border-radius:12px;
font-size:17px;
}
.catalog-categories a span{
width:26px;
font-size:20px;
}
.catalog-divider,
.catalog-content{
display:none;
}
.mobile-transformation{
display:block;
margin-top:18px;
padding-top:18px;
border-top:1px solid #e8edf2;
}
.mobile-transformation__title{
margin:0 12px 8px;
color:#001a34;
font-size:19px;
line-height:1.3;
font-weight:700;
}
.mobile-transformation__links{
display:flex;
flex-direction:column;
gap:4px;
}
.mobile-transformation__links a{
display:flex;
align-items:center;
min-height:46px;
padding:10px 12px;
border-radius:12px;
color:#33475b;
text-decoration:none;
font-size:16px;
line-height:1.35;
}
.mobile-transformation__links a:active{
background:#f1f4f8;
color:#000;
}
}
@media (max-width:480px){
.catalog-mega{
top:68px;
}
.catalog-mega-inner{
padding:10px 10px 24px;
}
.catalog-all{
min-height:58px;
font-size:16px;
}
.catalog-categories a{
min-height:48px;
font-size:16px;
}
}
.quick-actions{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
width:100%;
}
.contact-info{
display:flex;
flex-direction:column;
justify-content:center;
line-height:1.35;
}
.contact-info a{
text-decoration:none;
}
.contact-info .phone{
font-size:22px;
font-weight:700;
color:#001a34;
}
.contact-info .phone:hover{
color:#000000;
}
.contact-info .email{
margin-top:4px;
font-size:16px;
color:#7d8b99;
}
.contact-info .email:hover{
color:#000000;
}
.action.cart{
width:90px;
flex-shrink:0;
}
@media (max-width:1450px){
.contact-info .phone{
font-size:18px;
}
.contact-info .email{
font-size:14px;
}
}
/* Мобильная шапка */
.mobile-header {
display: none;
}
.mobile-delivery-cities {
display: none;
}
@media (max-width: 760px) {
.site-header {
width: 100%;
padding: 0;
border-radius: 0;
}
/* Скрываем обычную шапку */
.top-row,
.menu-row {
display: none;
}
.mobile-header {
position: relative;
z-index: 1100;
display: grid;
grid-template-columns: 48px minmax(0, 1fr) 48px;
align-items: center;
width: 100%;
height: 64px;
padding: 0 12px;
background: #fff;
border-bottom: 1px solid #edf0f3;
}
.mobile-delivery-cities {
display: block;
width: 100%;
min-width: 0;
padding: 8px 12px 10px;
background: #fff;
border-bottom: 1px solid #edf0f3;
}
.mobile-delivery-cities__label {
display: block;
margin-bottom: 7px;
color: #001a34;
font-size: 13px;
line-height: 18px;
font-weight: 700;
}
.mobile-delivery-cities__list {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.mobile-delivery-cities__list a {
flex: 0 0 auto;
min-height: 30px;
padding: 7px 11px;
border: 1px solid #e2e7ed;
border-radius: 999px;
background: #f5f7f9;
color: #33475b;
text-decoration: none;
font-size: 13px;
line-height: 14px;
font-weight: 600;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.mobile-delivery-cities__list a:active {
border-color: #001a34;
background: #001a34;
color: #fff;
}
.mobile-back,
.mobile-phone-btn {
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 14px;
background: transparent;
display: grid;
place-items: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mobile-back:active,
.mobile-phone-btn:active {
background: #f1f4f8;
transform: scale(0.96);
}
.mobile-back svg {
width: 29px;
height: 29px;
fill: #001a34;
}
.mobile-phone-btn svg {
width: 25px;
height: 25px;
fill: #000000;
}
.mobile-phone-btn.is-active {
background: #eaf2ff;
}
.mobile-logo {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
height: 48px;
}
.mobile-logo img {
display: block;
width: auto;
height: auto;
max-width: 145px;
max-height: 42px;
object-fit: contain;
}
.mobile-contacts {
position: relative;
display: flex;
justify-content: flex-end;
}
.mobile-contacts-menu {
position: absolute;
top: 54px;
right: 0;
width: min(340px, calc(100vw - 24px));
padding: 8px;
border: 1px solid #e5e9ef;
border-radius: 20px;
background: #fff;
box-shadow:
0 18px 45px rgba(0, 26, 52, 0.18),
0 4px 12px rgba(0, 26, 52, 0.08);
transform-origin: top right;
animation: mobileContactsOpen 0.18s ease;
}
.mobile-contacts-menu[hidden] {
display: none;
}
.mobile-contact-item,
.mobile-work-time {
display: flex;
align-items: center;
gap: 13px;
width: 100%;
min-height: 66px;
padding: 10px 12px;
border-radius: 14px;
color: #001a34;
text-decoration: none;
}
.mobile-contact-item:hover,
.mobile-contact-item:active {
background: #f3f6fa;
}
.mobile-contact-item + .mobile-contact-item,
.mobile-work-time {
border-top: 1px solid #edf0f3;
}
.mobile-contact-icon {
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 13px;
background: #edf3ff;
color: #000000;
display: grid;
place-items: center;
font-size: 21px;
font-weight: 800;
}
.mobile-contact-icon svg {
width: 22px;
height: 22px;
fill: currentColor;
}
.telegram-icon {
background: #e7f6ff;
color: #229ed9;
}
.max-icon {
background: #f0edff;
color: #7657ff;
}
.mobile-contact-item > span:last-child,
.mobile-work-time > span:last-child {
display: flex;
flex-direction: column;
min-width: 0;
gap: 3px;
}
.mobile-contact-item strong,
.mobile-work-time strong {
color: #001a34;
font-size: 16px;
line-height: 1.25;
}
.mobile-contact-item small,
.mobile-work-time small {
color: #7c8b99;
font-size: 13px;
line-height: 1.35;
}
.mobile-work-time {
margin-top: 1px;
}
.mobile-work-time .mobile-contact-icon {
background: #eef9ef;
color: #27a443;
}
/* Баннер начинается после мобильной шапки */
.promo {
height: 86px;
margin: 0;
border-radius: 0 0 24px 24px;
}
/* Каталог открывается ниже новой шапки */
.catalog-mega {
top: 174px;
}
}
@keyframes mobileContactsOpen {
from {
opacity: 0;
transform: translateY(-8px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 360px) {
.catalog-mega {
top: 211px;
}
}
/* Нижнее мобильное меню */
.mobile-bottom-nav {
display: none;
}
@media (max-width: 760px) {
html {
scroll-padding-bottom: 90px;
}
body {
/* Контент не будет перекрываться нижним меню */
padding-bottom: calc(78px + env(safe-area-inset-bottom));
}
.mobile-bottom-nav {
position: fixed;
right: 8px;
bottom: 8px;
left: 8px;
z-index: 2000;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: end;
min-height: 68px;
padding:
6px
5px
calc(6px + env(safe-area-inset-bottom));
border: 1px solid rgba(0, 26, 52, 0.08);
border-radius: 22px;
background: rgba(255, 255, 255, 0.96);
box-shadow:
0 -2px 12px rgba(0, 26, 52, 0.05),
0 10px 35px rgba(0, 26, 52, 0.2);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.mobile-nav-item {
position: relative;
min-width: 0;
height: 58px;
padding: 4px 2px;
border: 0;
border-radius: 16px;
background: transparent;
color: #8391a0;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
font-family: inherit;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.mobile-nav-item:active {
background: #f1f5fa;
transform: scale(0.95);
}
.mobile-nav-icon {
position: relative;
width: 30px;
height: 30px;
display: grid;
place-items: center;
}
.mobile-nav-icon svg {
width: 25px;
height: 25px;
fill: currentColor;
}
.mobile-nav-label {
max-width: 100%;
overflow: hidden;
font-size: 10px;
font-weight: 600;
line-height: 1.1;
white-space: nowrap;
text-overflow: ellipsis;
}
.mobile-nav-item:hover,
.mobile-nav-item.active,
.mobile-nav-item.is-active {
color: #000000;
}
.mobile-nav-item.active::before,
.mobile-nav-item.is-active::before {
content: "";
position: absolute;
top: 1px;
left: 50%;
width: 26px;
height: 3px;
border-radius: 0 0 5px 5px;
background: #000000;
transform: translateX(-50%);
}
/*
* Центральная кнопка поиска
*/
.mobile-search-item {
overflow: visible;
}
.mobile-search-circle {
width: 48px;
height: 48px;
margin-top: -22px;
border: 5px solid #fff;
border-radius: 50%;
background: #000000;
color: #fff;
box-shadow:
0 8px 18px rgba(0, 91, 255, 0.32),
0 2px 5px rgba(0, 91, 255, 0.15);
}
.mobile-search-circle svg {
width: 24px;
height: 24px;
}
.mobile-search-item:active .mobile-search-circle {
transform: scale(0.93);
}
/*
* Счётчик корзины
*/
.mobile-cart-count {
position: absolute;
top: -5px;
right: -8px;
z-index: 2;
min-width: 19px;
height: 19px;
padding: 0 5px;
border: 2px solid #fff;
border-radius: 20px;
background: #f20b7a;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 800;
line-height: 1;
}
/*
* Открытое меню контактов размещаем над нижней панелью
*/
.mobile-contacts-menu.opened-from-bottom {
position: fixed;
top: auto;
right: 12px;
bottom: calc(87px + env(safe-area-inset-bottom));
left: 12px;
width: auto;
max-height: calc(100vh - 170px);
overflow-y: auto;
z-index: 2100;
transform-origin: bottom center;
animation: mobileBottomMenuOpen 0.2s ease;
}
}
@keyframes mobileBottomMenuOpen {
from {
opacity: 0;
transform: translateY(14px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 760px) {
/*
* Каталог расположен поверх содержимого сайта,
* но заканчивается над нижней навигацией.
*/
.catalog-mega {
position: fixed;
z-index: 1450;
top: 64px;
right: 0;
bottom: calc(68px + env(safe-area-inset-bottom));
left: 0;
width: 100%;
height: auto;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
border: 0;
border-radius: 24px 24px 0 0;
background: #fff;
box-shadow:
0 -2px 20px rgba(0, 26, 52, 0.08),
0 12px 40px rgba(0, 26, 52, 0.18);
animation: mobilePanelOpen 0.22s ease;
}
.catalog-mega[hidden] {
display: none;
}
.catalog-mega-inner {
display: block;
width: 100%;
min-width: 0;
min-height: 100%;
margin: 0;
padding: 14px 12px 30px;
background: #fff;
}
.catalog-sidebar {
width: 100%;
max-width: none;
min-width: 0;
flex: none;
}
.catalog-all {
position: sticky;
z-index: 2;
top: 0;
width: 100%;
min-height: 62px;
padding: 9px 12px;
border: 1px solid #e2e7ee;
border-radius: 17px;
background: rgba(255, 255, 255, 0.96);
font-size: 17px;
box-shadow: 0 5px 16px rgba(0, 26, 52, 0.06);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
.ozon-mark {
width: 43px;
height: 43px;
border-radius: 13px;
}
.catalog-categories {
display: flex;
flex-direction: column;
gap: 5px;
margin-top: 12px;
}
.catalog-categories a {
min-height: 54px;
padding: 10px 13px;
border: 1px solid transparent;
border-radius: 15px;
background: #fff;
color: #001a34;
font-size: 16px;
font-weight: 500;
transition:
background 0.16s ease,
color 0.16s ease,
transform 0.12s ease;
}
.catalog-categories a:active {
transform: scale(0.985);
}
.catalog-categories a:hover,
.catalog-categories a.active {
border-color: #dce8ff;
background: #edf4ff;
color: #000000;
}
.catalog-categories a span {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 11px;
background: #f1f4f8;
color: #8b98a5;
font-size: 18px;
}
.catalog-categories a:hover span,
.catalog-categories a.active span {
background: #fff;
color: #000000;
}
.catalog-divider,
.catalog-content {
display: none;
}
}
.mobile-search-overlay {
display: none;
}
@media (max-width: 760px) {
.mobile-search-overlay {
position: fixed;
z-index: 1700;
inset: 0;
display: block;
}
.mobile-search-overlay[hidden] {
display: none;
}
.mobile-search-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 26, 52, 0.38);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
animation: mobileBackdropOpen 0.2s ease;
}
/*
* Поиск открывается как аккуратная нижняя панель.
* Панель находится поверх нижней навигации.
*/
.mobile-search-panel {
position: absolute;
right: 0;
bottom: 0;
left: 0;
max-height: calc(100dvh - 54px);
padding:
8px 14px
calc(24px + env(safe-area-inset-bottom));
border-radius: 26px 26px 0 0;
background: #fff;
box-shadow: 0 -14px 50px rgba(0, 26, 52, 0.22);
animation: mobileSearchPanelOpen 0.24s ease;
}
.mobile-search-handle {
width: 42px;
height: 5px;
margin: 0 auto 14px;
border-radius: 999px;
background: #d8dee6;
}
.mobile-search-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
margin-bottom: 17px;
}
.mobile-search-heading > div {
display: flex;
flex-direction: column;
gap: 3px;
}
.mobile-search-heading strong {
color: #001a34;
font-size: 23px;
line-height: 1.15;
}
.mobile-search-heading span {
color: #8493a2;
font-size: 14px;
}
.mobile-search-close {
flex: 0 0 42px;
width: 42px;
height: 42px;
padding: 0;
border: 0;
border-radius: 14px;
background: #f1f4f8;
display: grid;
place-items: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mobile-search-close:active {
transform: scale(0.94);
background: #e7ecf2;
}
.mobile-search-close svg {
width: 23px;
height: 23px;
fill: #526476;
}
.mobile-search-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 9px;
}
.mobile-search-field {
position: relative;
display: flex;
align-items: center;
min-width: 0;
height: 54px;
padding: 0 10px 0 15px;
border: 2px solid #dce4ee;
border-radius: 17px;
background: #f7f9fc;
transition:
border-color 0.17s ease,
background 0.17s ease,
box-shadow 0.17s ease;
}
.mobile-search-field:focus-within {
border-color: #000000;
background: #fff;
box-shadow: 0 0 0 4px rgba(0, 91, 255, 0.11);
}
.mobile-search-field-icon {
flex: 0 0 24px;
display: grid;
place-items: center;
width: 24px;
height: 24px;
}
.mobile-search-field-icon svg {
width: 22px;
height: 22px;
fill: #8795a4;
}
.mobile-search-field input {
flex: 1;
min-width: 0;
height: 100%;
padding: 0 9px;
border: 0;
outline: 0;
background: transparent;
color: #001a34;
font-size: 16px;
}
.mobile-search-field input::placeholder {
color: #9ba7b3;
}
.mobile-search-field input::-webkit-search-cancel-button {
display: none;
appearance: none;
}
.mobile-search-clear {
flex: 0 0 31px;
width: 31px;
height: 31px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
display: grid;
place-items: center;
cursor: pointer;
}
.mobile-search-clear[hidden] {
display: none;
}
.mobile-search-clear svg {
width: 20px;
height: 20px;
fill: #9aa6b2;
}
.mobile-search-submit {
min-width: 76px;
height: 54px;
padding: 0 17px;
border: 0;
border-radius: 17px;
background: #000000;
color: #fff;
font-size: 15px;
font-weight: 750;
box-shadow: 0 7px 18px rgba(0, 91, 255, 0.25);
cursor: pointer;
transition:
background 0.17s ease,
transform 0.12s ease;
-webkit-tap-highlight-color: transparent;
}
.mobile-search-submit:active {
transform: scale(0.96);
background: #004fe0;
}
.mobile-search-suggestions {
margin-top: 20px;
}
.mobile-search-caption {
display: block;
margin-bottom: 11px;
color: #718194;
font-size: 13px;
font-weight: 650;
}
.mobile-search-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.mobile-search-chips button {
min-height: 38px;
padding: 8px 14px;
border: 1px solid #e1e7ef;
border-radius: 999px;
background: #f5f7fa;
color: #45596d;
font-size: 14px;
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mobile-search-chips button:active {
border-color: #cdddff;
background: #eaf2ff;
color: #000000;
transform: scale(0.97);
}
}
@keyframes mobilePanelOpen {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes mobileBackdropOpen {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes mobileSearchPanelOpen {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 760px) {
body.mobile-overlay-open {
overflow: hidden;
touch-action: none;
}
body.mobile-overlay-open .catalog-mega,
body.mobile-overlay-open .mobile-search-panel {
touch-action: pan-y;
}
}
.catalog-mega {
z-index: 1450;
}
.mobile-bottom-nav {
z-index: 1500;
}
.mobile-search-overlay {
z-index: 1700;
}
/* Подсказки поиска по названию дивана */
.search {
position: relative;
overflow: visible;
}
.search-suggestions {
position: absolute;
z-index: 2200;
top: calc(100% + 8px);
right: 0;
left: 0;
max-height: 430px;
overflow-y: auto;
border: 1px solid #e0e6ed;
border-radius: 16px;
background: #fff;
box-shadow: 0 16px 42px rgba(0, 26, 52, .18);
}
.search-suggestions[hidden] {
display: none;
}
.search-suggestion {
display: flex;
align-items: center;
gap: 12px;
min-height: 68px;
padding: 8px 12px;
border-bottom: 1px solid #edf0f3;
color: #001a34;
text-decoration: none;
}
.search-suggestion:last-child {
border-bottom: 0;
}
.search-suggestion:hover,
.search-suggestion.is-active {
background: #f2f5f8;
}
.search-suggestion img,
.search-suggestion__no-image {
flex: 0 0 70px;
width: 70px;
height: 52px;
border-radius: 9px;
background: #f2f4f6;
object-fit: contain;
}
.search-suggestion__text {
display: flex;
flex: 1;
min-width: 0;
flex-direction: column;
gap: 4px;
}
.search-suggestion__text strong {
overflow: hidden;
color: #001a34;
font-size: 15px;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.search-suggestion__text small {
color: #001a34;
font-size: 14px;
font-weight: 700;
}
.search-suggestions__empty {
padding: 20px;
color: #6f7f8f;
text-align: center;
}
@media (max-width: 760px) {
.search-suggestions {
position: fixed;
top: 132px;
right: 12px;
left: 12px;
max-height: calc(100vh - 220px);
}
}
/*! CSS Used from: https://test.vashdivan77.ru/styles.css */
*{box-sizing:border-box;}
button,input{font:inherit;}
/*! CSS Used from: https://test.vashdivan77.ru/catalog.css */
.catalog-page{width:calc(100% - 32px);max-width:1416px;margin:24px auto 48px;}
.catalog-toolbar{display:flex;align-items:center;justify-content:flex-end;margin-bottom:12px;}
.catalog-toolbar select{width:230px;height:44px;border:1px solid #d9e0e9;border-radius:10px;background:#fff;padding:0 14px;color:#001a34;}
.mobile-filter-button{display:none;}
.catalog-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start;}
.catalog-filter{font-size:13px;color:#001a34;}
.filter-block{display:flex;flex-direction:column;gap:9px;margin-bottom:22px;}
.filter-block h3{margin:0 0 4px;font-size:14px;}
.filter-block a{color:#001a34;text-decoration:none;padding:3px 0;}
.filter-block a.selected{padding:8px;border-radius:8px;background:#f2f4f7;}
.filter-block label{display:flex;align-items:center;gap:8px;line-height:1.25;}
.filter-block input[type=checkbox],.filter-block input[type=radio]{accent-color:#000000;}
.filter-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px;}
.switch input{display:none;}
.switch span{display:block;width:38px;height:24px;border-radius:99px;background:#dde5ef;position:relative;}
.switch span:after{content:"";position:absolute;width:20px;height:20px;left:2px;top:2px;border-radius:50%;background:#fff;transition:.2s;}
.switch input:checked+span{background:#000000;}
.switch input:checked+span:after{transform:translateX(14px);}
.price-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.price-inputs input{min-width:0;width:100%;height:36px;border:1px solid #d9e0e9;border-radius:8px;padding:0 8px;}
.filter-more{align-self:flex-start;border:0;background:none;padding:0;color:#000000;cursor:pointer;}
.range{width:100%;accent-color:#000000;}
.catalog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.catalog-product{min-width:0;overflow:hidden;border-radius:16px;background:#fff;display:flex;flex-direction:column;}
.catalog-product-image{position:relative;aspect-ratio:181/241;overflow:hidden;background:#f5f5f5;}
.catalog-product-image img{width:100%;height:100%;display:block;object-fit:cover;}
.catalog-heart{position:absolute;right:8px;top:6px;border:0;background:rgba(255,255,255,.85);border-radius:50%;font-size:26px;line-height:30px;width:32px;height:32px;cursor:pointer;}
.catalog-sale{position:absolute;left:7px;bottom:7px;padding:4px 8px;border-radius:7px;background:#f1117e;color:#fff;font-size:12px;font-weight:700;}
.catalog-product-body{display:flex;flex-direction:column;flex:1;padding:8px;}
.catalog-product-price{display:flex;align-items:baseline;gap:5px;white-space:nowrap;overflow:hidden;}
.catalog-product-price strong{font-size:18px;color:#f1117e;}
.catalog-product-price del{font-size:12px;color:#9aa7b4;}
.catalog-product-price span{font-size:12px;color:#f1117e;font-weight:700;}
.catalog-stock{font-size:11px;color:#f1117e;margin-top:2px;}
.catalog-product-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px;margin-top:5px;color:#001a34;text-decoration:none;font-size:13px;line-height:19px;}
.catalog-original{font-size:11px;color:#079447;margin-top:4px;}
.catalog-rating{display:flex;gap:8px;font-size:11px;margin:5px 0 9px;}
.catalog-rating b{color:#001a34;}
.catalog-rating span{color:#7c8da0;}
.catalog-delivery{margin-top:auto;height:36px;border:0;border-radius:9px;background:#000000;color:#fff;font-size:12px;font-weight:700;cursor:pointer;}
.catalog-delivery:hover{background:#004fe0;}
@media (max-width:1150px){
.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:850px){
.catalog-page{width:calc(100% - 20px);margin-top:16px;}
.catalog-layout{display:block;}
.catalog-filter{display:none;position:fixed;z-index:1200;left:0;top:0;bottom:0;width:min(320px,88vw);overflow:auto;background:#fff;padding:24px;box-shadow:16px 0 40px rgba(0,26,52,.22);}
.catalog-toolbar{justify-content:space-between;}
.mobile-filter-button{display:block;height:44px;padding:0 18px;border:0;border-radius:10px;background:#000000;color:#fff;font-weight:700;}
.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:620px){
.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.catalog-toolbar select{width:170px;}
}
.catalog-product{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;will-change:transform;}
.catalog-product:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(0,26,52,.14);}
.catalog-product:hover .catalog-product-image img{transform:scale(1.025);}
.catalog-product-image img{transition:transform .25s ease;}
.catalog-product-price strong{font-size:20px;}
.catalog-product-price del,.catalog-product-price span{font-size:13px;}
.catalog-stock{font-size:12px;}
.catalog-product-title{font-size:15px;line-height:21px;min-height:42px;}
.catalog-original,.catalog-rating{font-size:12px;}
.catalog-delivery{font-size:13px;}
.catalog-filter{font-size:14px;}
.filter-block h3{font-size:15px;}
.product-page{width:calc(100% - 32px);max-width:1416px;margin:24px auto 48px;color:#001a34}.product-breadcrumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;color:#65788e;font-size:14px;font-weight:600}.product-breadcrumbs a{color:#65788e;text-decoration:none}.product-breadcrumbs a:hover{color:#005bff}.product-top{display:grid;grid-template-columns:minmax(520px,1.35fr) minmax(390px,.95fr) 390px;gap:24px;align-items:start}.product-gallery{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px}.product-thumbs{display:flex;flex-direction:column;gap:10px}.thumb{width:62px;height:78px;padding:0;border:2px solid transparent;border-radius:6px;background:#fff;overflow:hidden;cursor:pointer}.thumb img{width:100%;height:100%;object-fit:cover}.thumb:hover,.thumb.active{border-color:#005bff}.video-thumb{display:grid;place-items:center;background:#edf2f8;font-size:24px}.more-video{text-align:center;font-size:12px;color:#005bff;text-decoration:none}.product-main-image{position:relative;overflow:hidden;border-radius:22px;background:#f4f5f7;min-height:650px}.product-main-image img{width:100%;height:100%;min-height:650px;display:block;object-fit:cover}.similar-label{position:absolute;z-index:2;left:16px;top:16px;padding:8px 14px;border-radius:12px;background:#fff;color:#6f8195;font-weight:700}.product-details{min-width:0}.product-meta-actions{display:flex;justify-content:flex-end;gap:16px;color:#718398;font-size:13px;font-weight:600}.product-meta-actions button{border:0;background:none;color:#718398;font-weight:600;cursor:pointer}.product-details h1{margin:20px 0 14px;font-size:29px;line-height:1.22}.product-review-line{display:flex;gap:8px;align-items:center;color:#6b7e92;font-size:17px}.rating-star{color:#f5a400;font-size:22px}.option-group{margin-top:22px}.option-group p{margin:0 0 10px;color:#718398}.option-group p strong{color:#001a34}.option-buttons{display:flex;flex-wrap:wrap;gap:10px}.option{min-width: 84px;
height: 48px;
padding: 0 16px;
border: 1px solid #e1e6ed;
border-radius: 8px;
background: #fff;
color: #001a34;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
text-decoration: none;}.option:hover,.option.active{border:2px solid #005bff}.option.muted{background:#f3f5f8;color:#718398}.color-options{display:flex;gap:10px}.color-card{width:64px;height:64px;padding:5px;border:1px solid #e1e6ed;border-radius:8px;background:#fff;cursor:pointer}.color-card img{width:100%;height:100%;object-fit:cover;border-radius:4px}.color-card.active,.color-card:hover{border:2px solid #ff0000}.about-product{margin-top:28px}.about-heading{display:flex;align-items:center;justify-content:space-between}.about-heading h2{font-size:22px}.about-heading a{padding:5px 10px;border-radius:8px;background:#f3f5f8;color:#001a34;text-decoration:none;font-weight:600}.about-product dl{margin:10px 0 0}.about-product dl div{display:grid;grid-template-columns:1.2fr 1fr;padding:13px 0;border-bottom:1px solid #e8edf3}.about-product dt{color:#718398}.about-product dd{margin:0}.purchase-column{position:sticky;top:14px}.sale-strip,.purchase-card,.delivery-card{border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(0,26,52,.08)}.sale-strip{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;margin-bottom:16px}.sale-strip div{display:flex;flex-direction:column}.sale-strip strong{font-size:16px}.sale-strip small{color:#f1117e}.sale-strip>span{padding:7px 12px;border-radius:12px;background:#f5f6f8;font-size:12px;font-weight:700}.purchase-card{padding:20px}.bank-price{display:flex;align-items:center;gap:10px}.bank-price strong{padding:6px 12px;border-radius:10px;background:#08bd59;color:#fff;font-size:30px}.regular-price{display:flex;gap:8px;align-items:baseline;margin-top:8px;color:#718398}.regular-price strong{font-size:21px}.pay-later{display:flex;align-items:center;gap:8px;margin:16px 0;padding:14px;border-radius:10px;background:#f2f3f7}.pay-later b{padding:7px 8px;border-radius:7px;background:#6550dc;color:#fff}.buy-row{display:grid;/*grid-template-columns:1fr 56px*/;gap:10px}.cart-button{height:64px;border:0;border-radius:14px;background:#005bff;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:16px;cursor:pointer}.cart-button b{font-size:20px}.wish-button{border:0;border-radius:14px;background:#edf7ff;color:#005bff;font-size:31px;cursor:pointer}.wish-button.active{color:#f1117e}.buy-now{width:100%;height:62px;margin:20px 0 28px;border:0;border-radius:16px;background:#e7f4ff;color:#005bff;font-size:18px;font-weight:700;cursor:pointer}.delivery-card{padding:20px}.delivery-card h2{margin:0 0 16px;font-size:20px}.delivery-item{display:grid;grid-template-columns:28px 1fr 18px;gap:10px;padding:10px 0;border-bottom:1px solid #e4e9ef}.delivery-item small,.delivery-method small{display:block;color:#718398}.delivery-item em{color:#f1117e;font-style:normal}.delivery-method{padding:12px 0 0 38px}.return-row{margin:16px -20px -20px;padding:14px 20px;border-radius:0 0 18px 18px;background:#f3f5f8;display:flex;justify-content:space-between}.product-description{margin-top:36px;padding:28px;border-radius:20px;background:#f6f8fb}.product-description p{max-width:950px;line-height:1.65;color:#51677e}@media(max-width:1200px){.product-top{grid-template-columns:minmax(480px,1.2fr) minmax(340px,1fr)}.purchase-column{position:static;grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:16px}.sale-strip{grid-column:1/-1}.buy-now{margin:0}.delivery-card{grid-column:2;grid-row:2/4}.product-main-image,.product-main-image img{min-height:590px}}@media(max-width:850px){.product-page{width:calc(100% - 20px)}.product-top{display:block}.product-gallery{grid-template-columns:1fr}.product-thumbs{order:2;flex-direction:row;overflow-x:auto;margin-top:10px}.product-main-image,.product-main-image img{min-height:auto;aspect-ratio:4/5}.product-details{margin-top:22px}.product-meta-actions{justify-content:flex-start;flex-wrap:wrap}.purchase-column{display:block;margin-top:24px}.sale-strip,.purchase-card,.buy-now,.delivery-card{margin-bottom:16px}.product-details h1{font-size:20px}}@media(max-width:520px){.product-thumbs .thumb{width:54px;height:66px;flex:0 0 auto}.product-review-line{flex-wrap:wrap;font-size:14px}.option{min-width:70px;height:44px;padding:0 12px}.about-product dl div{grid-template-columns:1fr;gap:5px}.bank-price strong{font-size:25px}.product-meta-actions{font-size:12px}}
/* Верхняя информационная полоса */
.top-info-bar {
position: relative;
z-index: 1200;
width: 100%;
min-height: 38px;
color: #526476;
font-size: 13px;
}
.top-info-bar__inner {
min-height: 38px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
/* Левое меню */
.top-info-nav {
flex: 0 1 auto;
min-width: 0;
}
.menu_top {
display: flex;
align-items: center;
gap: 25px;
margin: 0;
padding: 0;
list-style: none;
}
.menu_top li {
margin: 0;
padding: 0;
}
.menu_top a {
position: relative;
display: inline-flex;
align-items: center;
min-height: 38px;
color: #526476;
text-decoration: none;
white-space: nowrap;
transition: color 0.18s ease;
}
.menu_top a::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
border-radius: 2px 2px 0 0;
background: #000;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.18s ease;
}
.menu_top a:hover {
color: #000;
}
.menu_top a:hover::after {
transform: scaleX(1);
}
/* Правая часть */
.top-info-contacts {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 24px;
min-width: 0;
}
.top-info-contact,
.top-info-worktime {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
color: #526476;
font-size: 13px;
line-height: 1;
white-space: nowrap;
}
.top-info-contact {
text-decoration: none;
transition:
color 0.18s ease,
transform 0.12s ease;
}
.top-info-contact:hover {
color: #005bff;
}
.top-info-contact:active {
transform: scale(0.97);
}
.top-info-contact svg,
.top-info-worktime svg {
flex: 0 0 18px;
width: 18px;
height: 18px;
fill: currentColor;
}
.top-info-contact--vk svg {
color: #0077ff;
}
.top-info-contact--email svg {
color: #526476;
}
.top-info-worktime {
color: #526476;
}
/* Убираем лишние старые элементы */
.top-info-bar .clear {
display: none;
}
@media (max-width: 760px) {
.mob_n {
display: none !important;
}
}
@media (max-width: 1100px) and (min-width: 761px) {
.top-info-bar__inner {
gap: 15px;
}
.menu_top {
gap: 15px;
}
.top-info-contacts {
gap: 14px;
}
.top-info-contact,
.top-info-worktime,
.menu_top a {
font-size: 12px;
}
}
.wrapper {
width: min(100% - 32px, 1440px);
margin-inline: auto;
}
/* ==================================================
Телефон и корзина — только компьютерная версия
================================================== */
@media (min-width: 761px) {
.quick-actions {
display: flex;
align-items: center;
justify-content: flex-end;
width: auto;
min-width: 0;
gap: 14px;
}
/*
* Старый блок contact-info больше не используется.
* Правило оставлено на случай, если он сохранился
* на другой странице.
*/
.quick-actions .contact-info {
display: none;
}
.desktop-phone {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 9px;
min-width: 0;
color: #001a34;
text-decoration: none;
white-space: nowrap;
transition:
color 0.18s ease,
transform 0.12s ease;
}
.desktop-phone:hover {
color: #e33121;
}
.desktop-phone:active {
transform: scale(0.98);
}
.desktop-phone-icon {
flex: 0 0 39px;
display: grid;
place-items: center;
width: 39px;
height: 39px;
border-radius: 13px;
background: #f2f4f7;
color: #111;
}
.desktop-phone:hover .desktop-phone-icon {
background: #fff0ee;
color: #e33121;
}
.desktop-phone-icon svg {
width: 30px;
height: 30px;
fill: currentColor;
}
.desktop-phone-number {
font-size: 19px;
line-height: 1;
font-weight: 750;
letter-spacing: -0.25px;
}
.quick-actions .action.cart {
flex: 0 0 70px;
width: 70px;
margin: 0;
}
.quick-actions .action.cart svg {
width: 27px;
height: 27px;
}
.quick-actions .action.cart .badge {
top: -9px;
right: 2px;
}
}
/* ==================================================
Строка городов и мессенджеров — ПК
================================================== */
@media (min-width: 761px) {
.desktop-info-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
width: 100%;
height: 43px;
margin-top: 4px;
}
.delivery-cities,
.desktop-messengers {
display: flex;
align-items: center;
min-width: 0;
}
.delivery-cities {
flex: 1 1 auto;
gap: 10px;
overflow: hidden;
}
.menu-row-label {
flex: 0 0 auto;
color: #001a34;
font-size: 14px;
line-height: 1;
font-weight: 750;
white-space: nowrap;
}
.desktop-info-row .main-menu {
display: flex;
align-items: center;
gap: 0;
min-width: 0;
overflow: hidden;
white-space: nowrap;
}
.desktop-info-row .main-menu a {
position: relative;
padding: 6px 10px;
border-radius: 9px;
color: #60758a;
text-decoration: none;
font-size: 14px;
line-height: 1;
font-weight: 500;
transition:
color 0.16s ease,
background 0.16s ease;
}
.desktop-info-row .main-menu a:not(:last-child)::after {
content: "•";
position: absolute;
top: 50%;
right: -2px;
color: #c2cad3;
font-size: 10px;
transform: translateY(-50%);
}
.desktop-info-row .main-menu a:hover {
background: #f2f4f7;
color: #111;
}
.desktop-messengers {
flex: 0 0 auto;
gap: 8px;
}
.desktop-messenger {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 31px;
padding: 5px 10px;
border: 1px solid #e3e7ec;
border-radius: 10px;
background: #fff;
color: #34495e;
text-decoration: none;
font-size: 13px;
line-height: 1;
font-weight: 650;
white-space: nowrap;
transition:
border-color 0.16s ease,
background 0.16s ease,
color 0.16s ease,
transform 0.12s ease;
}
.desktop-messenger svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.desktop-messenger--telegram {
color: #229ed9;
}
.desktop-messenger--telegram:hover {
border-color: #bde6fa;
background: #edf9ff;
}
.desktop-messenger--max {
color: #7657ff;
}
.desktop-messenger--max:hover {
border-color: #d8d0ff;
background: #f4f1ff;
}
.desktop-max-icon {
display: grid;
place-items: center;
width: 18px;
height: 18px;
border-radius: 6px;
background: #7657ff;
color: #fff;
font-size: 11px;
font-weight: 900;
}
.desktop-messenger:active {
transform: scale(0.96);
}
}
@media (min-width: 1451px) {
.top-row {
grid-template-columns:
198px
150px
minmax(500px, 1fr)
285px;
gap: 20px;
}
}
@media (min-width: 1051px) and (max-width: 1450px) {
.top-row {
grid-template-columns:
180px
140px
minmax(360px, 1fr)
328px;
gap: 14px;
}
.desktop-phone-number {
font-size: 22px;
}
.desktop-phone-icon {
flex-basis: 50px;
width: 50px;
height: 50px;
}
.desktop-info-row .main-menu a {
padding-inline: 7px;
font-size: 14px;
}
.menu-row-label {
font-size: 14px;
}
.desktop-messenger {
padding-inline: 7px;
font-size: 12px;
}
}
/* =========================================================
РАЗДЕЛЫ КАТАЛОГА НА ГЛАВНОЙ
========================================================= */
.block1.loa {
width: 100%;
margin: 20px 0 0;
padding: 0;
}
/*
* Не задаём фиксированную ширину общей .wrapper,
* потому что она используется и в других блоках сайта.
*/
.promo-section {
width: 100%;
padding: 0 16px;
}
.promo-section > .wrapper {
width: 100%;
max-width: 1416px;
margin: 0 auto;
padding: 0;
position: relative;
}
/* Основная сетка */
.promo-grid {
display: grid;
grid-template-columns: minmax(0, 1.34fr) minmax(360px, 1fr);
gap: 16px;
width: 100%;
margin: 0;
}
.promo-section .pol1,
.promo-section .pol2 {
float: none;
width: auto;
min-width: 0;
margin: 0;
}
/* Левая колонка */
.promo-section .pol1 {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Правая колонка */
.promo-section .pol2 {
display: grid;
grid-template-rows: repeat(3, minmax(0, 1fr));
gap: 16px;
}
/* Два нижних баннера */
.promo-bottom {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
width: 100%;
margin: 0;
}
/* Общие карточки */
.promo-card,
.product-card {
position: relative;
display: block;
width: 100%;
min-width: 0;
overflow: hidden;
border-radius: 18px;
background: #e8e8e8;
color: #fff;
text-decoration: none;
isolation: isolate;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 8px 24px rgba(0, 0, 0, 0.06);
transition:
transform 0.22s ease,
box-shadow 0.22s ease;
}
/* Высоты карточек */
.promo-card-main {
min-height: 470px;
}
.promo-card-small {
min-height: 340px;
}
.product-card {
min-height: 252px;
color: #222;
}
/* Изображения */
.promo-card img,
.product-card img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.45s ease;
}
/* Затемнение */
.promo-card::after,
.product-card::after {
content: "";
position: absolute;
z-index: 1;
inset: 0;
pointer-events: none;
}
.promo-card-main::after {
background:
linear-gradient(
90deg,
rgba(0, 0, 0, 0.72) 0%,
rgba(0, 0, 0, 0.42) 42%,
rgba(0, 0, 0, 0.08) 74%,
rgba(0, 0, 0, 0) 100%
);
}
.promo-card-small::after {
background:
linear-gradient(
0deg,
rgba(0, 0, 0, 0.82) 0%,
rgba(0, 0, 0, 0.42) 46%,
rgba(0, 0, 0, 0.05) 82%
);
}
.product-card::after {
background:
linear-gradient(
90deg,
rgba(255, 255, 255, 0.97) 0%,
rgba(255, 255, 255, 0.87) 36%,
rgba(255, 255, 255, 0.34) 62%,
rgba(255, 255, 255, 0) 100%
);
}
/* Текст поверх картинок */
.promo-content,
.product-content {
position: absolute;
z-index: 2;
}
.promo-content {
top: 52px;
right: 40px;
left: 42px;
max-width: 520px;
}
.promo-content.bottom {
top: auto;
right: 24px;
bottom: 28px;
left: 24px;
max-width: none;
}
.product-content {
top: 50%;
left: 34px;
width: 48%;
max-width: 310px;
transform: translateY(-50%);
}
/* Заголовки */
.promo-title,
.product-title {
margin: 0;
font-size: clamp(24px, 2.1vw, 34px);
line-height: 1.05;
font-weight: 800;
letter-spacing: -0.025em;
text-transform: uppercase;
overflow-wrap: anywhere;
}
.promo-card-small .promo-title {
font-size: clamp(22px, 1.7vw, 30px);
}
.product-title {
font-size: clamp(21px, 1.75vw, 31px);
}
/* Подзаголовки */
.promo-subtitle,
.product-subtitle {
margin-top: 12px;
font-size: clamp(15px, 1.15vw, 19px);
line-height: 1.35;
font-weight: 400;
}
.product-subtitle {
font-size: clamp(15px, 1.18vw, 20px);
color: #344454;
}
/* Кнопки */
.promo-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
margin-top: 24px;
padding: 10px 18px;
border-radius: 999px;
color: #fff;
font-size: 13px;
line-height: 1;
font-weight: 800;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.14);
transition:
transform 0.18s ease,
filter 0.18s ease;
}
.promo-btn::after {
content: "→";
margin-left: 14px;
font-size: 20px;
line-height: 1;
font-weight: 400;
transition: transform 0.18s ease;
}
.promo-btn.green {
background: #8c9d00;
}
.promo-btn.red {
background: #c90018;
}
.promo-btn.blue {
background: #1e3f68;
}
.promo-btn.brown {
background: #8f5f3e;
}
.promo-btn.light {
background: #fff;
color: #1b252f;
}
/* Наведение только для устройств с мышью */
@media (hover: hover) and (pointer: fine) {
.promo-card:hover,
.product-card:hover {
transform: translateY(-3px);
box-shadow:
0 2px 5px rgba(0, 0, 0, 0.06),
0 16px 36px rgba(0, 0, 0, 0.12);
}
.promo-card:hover img,
.product-card:hover img {
transform: scale(1.045);
}
.promo-card:hover .promo-btn,
.product-card:hover .promo-btn {
filter: brightness(1.07);
}
.promo-card:hover .promo-btn::after,
.product-card:hover .promo-btn::after {
transform: translateX(4px);
}
}
/* Фокус с клавиатуры */
.promo-card:focus-visible,
.product-card:focus-visible {
outline: 3px solid rgba(0, 91, 255, 0.45);
outline-offset: 3px;
}
/* =========================================================
ЭКРАНЫ ДО 1200 PX
========================================================= */
@media (max-width: 1200px) {
.promo-section {
padding: 0 12px;
}
.promo-grid {
grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.9fr);
gap: 12px;
}
.promo-section .pol1,
.promo-section .pol2,
.promo-bottom {
gap: 12px;
}
.promo-card-main {
min-height: 430px;
}
.promo-card-small {
min-height: 310px;
}
.product-card {
min-height: 235px;
}
.promo-content {
top: 38px;
right: 30px;
left: 32px;
}
.product-content {
left: 26px;
width: 52%;
}
.promo-btn {
min-height: 40px;
margin-top: 18px;
padding: 9px 15px;
font-size: 12px;
}
}
/* =========================================================
ПЛАНШЕТЫ
========================================================= */
@media (max-width: 980px) {
.promo-grid {
grid-template-columns: 1fr;
}
.promo-section .pol2 {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: none;
}
.promo-card-main {
min-height: 390px;
}
.promo-card-small {
min-height: 290px;
}
.product-card {
min-height: 280px;
}
.product-card::after {
background:
linear-gradient(
0deg,
rgba(0, 0, 0, 0.78) 0%,
rgba(0, 0, 0, 0.25) 54%,
rgba(0, 0, 0, 0.03) 82%
);
}
.product-card {
color: #fff;
}
.product-content {
top: auto;
right: 20px;
bottom: 22px;
left: 20px;
width: auto;
max-width: none;
transform: none;
}
.product-subtitle {
color: rgba(255, 255, 255, 0.9);
}
}
/* =========================================================
УЗКИЕ ПЛАНШЕТЫ И БОЛЬШИЕ ТЕЛЕФОНЫ
========================================================= */
@media (max-width: 760px) {
.block1.loa {
margin-top: 12px;
}
.promo-section {
padding: 0 8px;
}
.promo-grid,
.promo-section .pol1,
.promo-section .pol2,
.promo-bottom {
gap: 8px;
}
.promo-section .pol2 {
grid-template-columns: 1fr;
}
.promo-bottom {
grid-template-columns: 1fr 1fr;
}
.promo-card,
.product-card {
border-radius: 14px;
}
.promo-card-main {
min-height: 330px;
}
.promo-card-small {
min-height: 260px;
}
.product-card {
min-height: 260px;
}
.promo-card-main::after,
.promo-card-small::after,
.product-card::after {
background:
linear-gradient(
0deg,
rgba(0, 0, 0, 0.84) 0%,
rgba(0, 0, 0, 0.42) 47%,
rgba(0, 0, 0, 0.04) 82%
);
}
.promo-content,
.promo-content.bottom,
.product-content {
top: auto;
right: 18px;
bottom: 20px;
left: 18px;
width: auto;
max-width: none;
transform: none;
}
.product-card {
color: #fff;
}
.product-subtitle {
color: rgba(255, 255, 255, 0.9);
}
.promo-title,
.product-title {
font-size: 25px;
}
.promo-card-small .promo-title {
font-size: 23px;
}
.promo-subtitle,
.product-subtitle {
margin-top: 7px;
font-size: 15px;
line-height: 1.3;
}
.promo-btn {
min-height: 38px;
margin-top: 15px;
padding: 8px 14px;
font-size: 11px;
}
.promo-btn::after {
margin-left: 10px;
font-size: 17px;
}
}
/* =========================================================
МОБИЛЬНЫЕ ДО 560 PX
========================================================= */
@media (max-width: 560px) {
.promo-bottom {
grid-template-columns: 1fr;
}
.promo-card-main {
min-height: 295px;
}
.promo-card-small,
.product-card {
min-height: 245px;
}
.promo-content,
.promo-content.bottom,
.product-content {
right: 16px;
bottom: 17px;
left: 16px;
}
.promo-title,
.product-title,
.promo-card-small .promo-title {
font-size: 22px;
}
.promo-subtitle,
.product-subtitle {
font-size: 14px;
}
.promo-btn {
min-height: 36px;
margin-top: 13px;
padding: 8px 13px;
font-size: 10px;
}
}
/* =========================================================
МАЛЕНЬКИЕ ТЕЛЕФОНЫ
========================================================= */
@media (max-width: 380px) {
.promo-section {
padding: 0 6px;
}
.promo-card-main {
min-height: 270px;
}
.promo-card-small,
.product-card {
min-height: 225px;
}
.promo-content,
.promo-content.bottom,
.product-content {
right: 14px;
bottom: 15px;
left: 14px;
}
.promo-title,
.product-title,
.promo-card-small .promo-title {
font-size: 20px;
}
.promo-subtitle,
.product-subtitle {
margin-top: 5px;
font-size: 13px;
}
.promo-btn {
min-height: 34px;
margin-top: 11px;
padding: 7px 11px;
white-space: normal;
text-align: center;
}
.promo-btn::after {
display: none;
}
}
/* =========================================================
ТЕКСТ И КНОПКИ В ЛЕВЫХ ПРОМО-КАРТОЧКАХ
========================================================= */
/*
* Контент главной большой карточки.
* Используем flex, чтобы заголовок, описание
* и кнопка всегда располагались последовательно.
*/
.promo-card-main .promo-content {
position: absolute;
z-index: 2;
top: 50%;
right: auto;
bottom: auto;
left: clamp(24px, 3.2vw, 48px);
display: flex;
flex-direction: column;
align-items: flex-start;
width: min(52%, 530px);
max-width: calc(100% - 48px);
transform: translateY(-50%);
}
/* Две нижние карточки */
.promo-card-small .promo-content.bottom {
position: absolute;
z-index: 2;
top: auto;
right: clamp(18px, 2vw, 28px);
bottom: clamp(20px, 2.4vw, 32px);
left: clamp(18px, 2vw, 28px);
display: flex;
flex-direction: column;
align-items: flex-start;
width: auto;
max-width: none;
transform: none;
}
/* Заголовки */
.promo-card-main .promo-title {
max-width: 100%;
margin: 0;
color: #fff;
font-size: clamp(30px, 3vw, 46px);
line-height: 0.98;
font-weight: 850;
letter-spacing: -0.035em;
text-transform: uppercase;
text-wrap: balance;
overflow-wrap: normal;
word-break: normal;
}
.promo-card-small .promo-title {
max-width: 100%;
margin: 0;
color: #fff;
font-size: clamp(23px, 2.15vw, 34px);
line-height: 1.02;
font-weight: 850;
letter-spacing: -0.025em;
text-transform: uppercase;
text-wrap: balance;
overflow-wrap: normal;
word-break: normal;
}
/* Описания */
.promo-card-main .promo-subtitle {
max-width: 430px;
margin: 14px 0 0;
color: rgba(255, 255, 255, 0.94);
font-size: clamp(16px, 1.35vw, 21px);
line-height: 1.3;
font-weight: 450;
text-wrap: balance;
}
.promo-card-small .promo-subtitle {
max-width: 92%;
margin: 9px 0 0;
color: rgba(255, 255, 255, 0.92);
font-size: clamp(14px, 1.15vw, 18px);
line-height: 1.3;
font-weight: 450;
text-wrap: balance;
}
/* Кнопки */
.promo-card-main .promo-btn,
.promo-card-small .promo-btn {
flex: 0 0 auto;
width: auto;
max-width: 100%;
min-height: 42px;
margin: 20px 0 0;
padding: 10px 18px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 1.1;
font-weight: 800;
letter-spacing: 0.01em;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 7px 20px rgba(0, 0, 0, 0.18);
}
.promo-card-small .promo-btn {
min-height: 39px;
margin-top: 15px;
padding: 9px 15px;
font-size: 11px;
}
/* Стрелка внутри кнопки */
.promo-card-main .promo-btn::after,
.promo-card-small .promo-btn::after {
flex: 0 0 auto;
margin-left: 13px;
font-size: 19px;
line-height: 1;
}
/* Затемнение под текстом */
.promo-card-main::after {
background:
linear-gradient(
90deg,
rgba(0, 0, 0, 0.76) 0%,
rgba(0, 0, 0, 0.55) 34%,
rgba(0, 0, 0, 0.2) 62%,
rgba(0, 0, 0, 0) 90%
);
}
.promo-card-small::after {
background:
linear-gradient(
0deg,
rgba(0, 0, 0, 0.86) 0%,
rgba(0, 0, 0, 0.58) 38%,
rgba(0, 0, 0, 0.12) 72%,
rgba(0, 0, 0, 0) 100%
);
}
/* =========================================================
НОУТБУКИ И НЕБОЛЬШИЕ ПК
========================================================= */
@media (max-width: 1200px) and (min-width: 981px) {
.promo-card-main .promo-content {
left: 30px;
width: 58%;
max-width: 450px;
}
.promo-card-main .promo-title {
font-size: clamp(28px, 3.1vw, 39px);
}
.promo-card-small .promo-content.bottom {
right: 18px;
bottom: 20px;
left: 18px;
}
.promo-card-small .promo-title {
font-size: clamp(21px, 2.25vw, 28px);
}
.promo-card-small .promo-subtitle {
max-width: 100%;
font-size: 14px;
}
.promo-card-small .promo-btn {
margin-top: 12px;
}
}
/* =========================================================
ПЛАНШЕТЫ
========================================================= */
@media (max-width: 980px) {
.promo-card-main .promo-content {
top: auto;
right: 26px;
bottom: 30px;
left: 26px;
width: auto;
max-width: 620px;
transform: none;
}
.promo-card-main .promo-title {
font-size: clamp(29px, 5vw, 42px);
line-height: 1;
}
.promo-card-main .promo-subtitle {
max-width: 520px;
}
.promo-card-main::after {
background:
linear-gradient(
0deg,
rgba(0, 0, 0, 0.84) 0%,
rgba(0, 0, 0, 0.5) 42%,
rgba(0, 0, 0, 0.07) 78%
);
}
.promo-card-small .promo-content.bottom {
right: 20px;
bottom: 22px;
left: 20px;
}
}
/* =========================================================
МОБИЛЬНЫЕ
========================================================= */
@media (max-width: 560px) {
.promo-card-main .promo-content,
.promo-card-small .promo-content.bottom {
top: auto;
right: 16px;
bottom: 17px;
left: 16px;
width: auto;
max-width: none;
transform: none;
}
.promo-card-main .promo-title,
.promo-card-small .promo-title {
max-width: 100%;
font-size: clamp(21px, 7vw, 29px);
line-height: 1.02;
letter-spacing: -0.025em;
}
.promo-card-main .promo-subtitle,
.promo-card-small .promo-subtitle {
max-width: 100%;
margin-top: 7px;
font-size: clamp(13px, 3.8vw, 16px);
line-height: 1.28;
}
.promo-card-main .promo-btn,
.promo-card-small .promo-btn {
min-height: 36px;
max-width: 100%;
margin-top: 13px;
padding: 8px 13px;
font-size: 10px;
line-height: 1.15;
white-space: normal;
}
.promo-card-main .promo-btn::after,
.promo-card-small .promo-btn::after {
margin-left: 9px;
font-size: 16px;
}
}
/* =========================================================
ОЧЕНЬ УЗКИЕ ЭКРАНЫ
========================================================= */
@media (max-width: 360px) {
.promo-card-main .promo-content,
.promo-card-small .promo-content.bottom {
right: 13px;
bottom: 14px;
left: 13px;
}
.promo-card-main .promo-title,
.promo-card-small .promo-title {
font-size: 20px;
}
.promo-card-main .promo-subtitle,
.promo-card-small .promo-subtitle {
font-size: 13px;
}
.promo-card-main .promo-btn,
.promo-card-small .promo-btn {
min-height: 34px;
margin-top: 10px;
padding: 7px 11px;
font-size: 9px;
}
}
/* =========================================================
PREMIUM-БАННЕР МАГАЗИНА МЯГКОЙ МЕБЕЛИ
Полная замена старого CSS
========================================================= */
.furniture-promo {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
width: auto;
min-height: 150px;
margin: 6px -24px 0;
padding: 24px 48px;
overflow: hidden;
border-radius: 0 0 34px 34px;
background:
radial-gradient(
circle at 86% 5%,
rgba(255, 64, 52, 0.46) 0,
rgba(255, 64, 52, 0.14) 24%,
transparent 48%
),
radial-gradient(
circle at 8% 140%,
rgba(190, 0, 20, 0.7) 0,
rgba(100, 0, 10, 0.23) 34%,
transparent 57%
),
linear-gradient(
112deg,
#030303 0%,
#0d0d0e 28%,
#1b1011 53%,
#510408 77%,
#b90015 100%
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
inset 0 -1px 0 rgba(255, 255, 255, 0.025),
0 15px 38px rgba(69, 0, 8, 0.23);
}
/* Световой луч */
.furniture-promo::before {
content: "";
position: absolute;
z-index: -2;
top: -180%;
left: 43%;
width: 55%;
height: 400%;
border: 0;
border-radius: 50%;
background:
linear-gradient(
90deg,
transparent,
rgba(255, 45, 35, 0.07) 30%,
rgba(255, 80, 59, 0.32) 50%,
rgba(255, 45, 35, 0.07) 70%,
transparent
);
filter: blur(18px);
transform: rotate(20deg);
pointer-events: none;
}
/* Текстура и диагональный блик */
.furniture-promo::after {
content: "";
position: absolute;
z-index: -1;
inset: 0;
border: 0;
border-radius: inherit;
background:
linear-gradient(
118deg,
transparent 0 48%,
rgba(255, 255, 255, 0.035) 48.2%,
transparent 49%
),
repeating-linear-gradient(
90deg,
rgba(255, 255, 255, 0.017) 0 1px,
transparent 1px 44px
);
pointer-events: none;
}
/* =========================================================
ДЕКОР
========================================================= */
.furniture-promo__decor {
position: absolute;
z-index: -1;
pointer-events: none;
}
.furniture-promo__decor--left {
left: -80px;
bottom: -125px;
width: 265px;
height: 265px;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 50%;
box-shadow:
0 0 0 34px rgba(255, 255, 255, 0.018),
0 0 0 68px rgba(255, 255, 255, 0.011),
0 0 55px rgba(190, 0, 18, 0.22);
}
/* Абстрактный силуэт дивана */
.furniture-promo__decor--right {
top: 50%;
right: 46px;
width: 286px;
height: 82px;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 26px 26px 15px 15px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.075),
rgba(255, 255, 255, 0.018)
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.07),
0 22px 44px rgba(0, 0, 0, 0.22);
opacity: 0.38;
transform: translateY(-37%);
}
.furniture-promo__decor--right::before {
content: "";
position: absolute;
top: -27px;
right: 22px;
left: 22px;
height: 53px;
border-radius: 23px 23px 11px 11px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.09),
rgba(255, 255, 255, 0.023)
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.furniture-promo__decor--right::after {
content: "";
position: absolute;
right: 31px;
bottom: -13px;
left: 31px;
height: 13px;
background:
linear-gradient(
90deg,
transparent 0 4%,
rgba(255, 255, 255, 0.14) 4% 8%,
transparent 8% 88%,
rgba(255, 255, 255, 0.14) 88% 92%,
transparent 92%
);
}
/* =========================================================
СОДЕРЖИМОЕ
========================================================= */
.furniture-promo__content {
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
gap: 38px;
width: 100%;
max-width: 1180px;
margin: 0 auto;
}
.furniture-promo__text {
min-width: 0;
max-width: 760px;
}
/* Верхняя плашка */
.furniture-promo__label {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
padding: 6px 12px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.04)
);
color: rgba(255, 255, 255, 0.83);
font-size: 10px;
line-height: 1;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 7px 18px rgba(0, 0, 0, 0.13);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.furniture-promo__label::before {
content: "";
flex: 0 0 7px;
width: 7px;
height: 7px;
border-radius: 50%;
background: #ff4036;
box-shadow: 0 0 13px rgba(255, 64, 54, 0.9);
}
/* Заголовок */
.furniture-promo h1 {
max-width: 760px;
margin: 0;
color: #fff;
font-size: clamp(27px, 2.5vw, 39px);
line-height: 1;
font-weight: 900;
letter-spacing: -0.042em;
text-transform: uppercase;
text-wrap: balance;
text-shadow:
0 3px 18px rgba(0, 0, 0, 0.34),
0 0 30px rgba(255, 45, 35, 0.08);
}
.furniture-promo h1::after {
content: "";
display: inline-block;
width: 50px;
height: 5px;
margin: 0 0 6px 11px;
border-radius: 999px;
background:
linear-gradient(90deg, #ff4439, #a70013);
box-shadow: 0 0 17px rgba(255, 56, 46, 0.5);
}
/* Описание */
.furniture-promo p {
max-width: 620px;
margin: 10px 0 0;
color: rgba(255, 255, 255, 0.72);
font-size: 15px;
line-height: 1.4;
font-weight: 400;
}
/* =========================================================
КНОПКА
========================================================= */
.furniture-promo__button {
position: relative;
isolation: isolate;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 13px;
min-height: 52px;
padding: 0 22px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 16px;
background:
linear-gradient(
135deg,
#ff4237 0%,
#d90b1e 50%,
#9c0012 100%
);
color: #fff;
text-decoration: none;
font-size: 14px;
line-height: 1;
font-weight: 850;
white-space: nowrap;
box-shadow:
0 13px 29px rgba(165, 0, 18, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.27),
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
transition:
transform 0.18s ease,
box-shadow 0.18s ease,
filter 0.18s ease;
}
.furniture-promo__button::before {
content: "";
position: absolute;
z-index: -1;
top: -35%;
left: -45%;
width: 38%;
height: 170%;
background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transform: skewX(-20deg);
transition: left 0.45s ease;
}
.furniture-promo__button svg {
flex: 0 0 20px;
width: 20px;
height: 20px;
fill: currentColor;
transition: transform 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
.furniture-promo__button:hover {
transform: translateY(-3px);
filter: brightness(1.08);
box-shadow:
0 18px 36px rgba(165, 0, 18, 0.48),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.furniture-promo__button:hover::before {
left: 125%;
}
.furniture-promo__button:hover svg {
transform: translateX(5px);
}
}
.furniture-promo__button:active {
transform: scale(0.97);
}
/* =========================================================
ПЛАНШЕТЫ И НЕБОЛЬШИЕ НОУТБУКИ
========================================================= */
@media (max-width: 1180px) and (min-width: 761px) {
.furniture-promo {
min-height: 138px;
margin-right: -14px;
margin-left: -14px;
padding: 22px 28px;
}
.furniture-promo__content {
gap: 24px;
}
.furniture-promo__text {
max-width: 650px;
}
.furniture-promo h1 {
font-size: clamp(25px, 3vw, 34px);
}
.furniture-promo p {
max-width: 520px;
font-size: 13px;
}
.furniture-promo__button {
min-height: 47px;
padding: 0 17px;
border-radius: 14px;
font-size: 12px;
}
.furniture-promo__decor--right {
right: 12px;
opacity: 0.22;
}
}
/* =========================================================
МОБИЛЬНАЯ ВЕРСИЯ
========================================================= */
@media (max-width: 760px) {
.furniture-promo {
/*
* Важно: height не задаём.
* Высота формируется содержимым.
*/
display: block;
width: 100%;
height: auto;
min-height: 0;
margin: 0;
padding:
max(24px, env(safe-area-inset-top))
18px
24px;
overflow: visible;
border-radius: 0 0 24px 24px;
background:
radial-gradient(
circle at 105% -5%,
rgba(255, 65, 53, 0.52) 0,
rgba(255, 65, 53, 0.12) 34%,
transparent 57%
),
radial-gradient(
circle at -8% 125%,
rgba(171, 0, 20, 0.64) 0,
transparent 51%
),
linear-gradient(
150deg,
#030303 0%,
#101011 51%,
#76000e 100%
);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.07),
0 12px 28px rgba(60, 0, 7, 0.22);
}
.furniture-promo::before {
top: -115%;
left: 42%;
width: 75%;
height: 320%;
opacity: 0.72;
}
.furniture-promo::after {
border-radius: 0 0 24px 24px;
}
.furniture-promo__content {
display: flex;
align-items: flex-start;
flex-direction: column;
justify-content: flex-start;
gap: 18px;
width: 100%;
max-width: none;
margin: 0;
}
.furniture-promo__text {
width: 100%;
max-width: none;
}
.furniture-promo__label {
max-width: 100%;
margin: 0 0 10px;
padding: 6px 10px;
font-size: 8px;
line-height: 1.2;
letter-spacing: 0.09em;
white-space: normal;
}
.furniture-promo h1 {
max-width: 100%;
margin: 0;
font-size: clamp(24px, 7.4vw, 32px);
line-height: 1.03;
letter-spacing: -0.035em;
overflow-wrap: break-word;
word-break: normal;
text-wrap: balance;
}
.furniture-promo h1::after {
width: 34px;
height: 4px;
margin: 0 0 5px 8px;
}
.furniture-promo p {
max-width: 100%;
margin: 10px 0 0;
font-size: 13px;
line-height: 1.4;
}
.furniture-promo__button {
align-self: flex-start;
width: auto;
max-width: 100%;
min-height: 44px;
padding: 11px 16px;
border-radius: 13px;
font-size: 11px;
line-height: 1.15;
white-space: normal;
text-align: center;
}
.furniture-promo__button span {
min-width: 0;
}
.furniture-promo__button svg {
flex: 0 0 17px;
width: 17px;
height: 17px;
}
.furniture-promo__decor--left {
display: none;
}
.furniture-promo__decor--right {
top: auto;
right: -112px;
bottom: 35px;
width: 270px;
height: 77px;
opacity: 0.16;
transform: none;
}
}
/* =========================================================
УЗКИЕ ТЕЛЕФОНЫ
========================================================= */
@media (max-width: 420px) {
.furniture-promo {
padding:
max(21px, env(safe-area-inset-top))
15px
21px;
}
.furniture-promo__content {
gap: 15px;
}
.furniture-promo__label {
margin-bottom: 8px;
padding: 5px 8px;
font-size: 7.5px;
}
.furniture-promo h1 {
font-size: clamp(22px, 7.2vw, 28px);
}
.furniture-promo p {
margin-top: 8px;
font-size: 12px;
}
.furniture-promo__button {
min-height: 41px;
padding: 9px 13px;
font-size: 10px;
}
}
/* =========================================================
ОЧЕНЬ МАЛЕНЬКИЕ ТЕЛЕФОНЫ
========================================================= */
@media (max-width: 350px) {
.furniture-promo {
padding-right: 12px;
padding-left: 12px;
}
.furniture-promo h1 {
font-size: 21px;
}
.furniture-promo h1::after {
display: none;
}
.furniture-promo__button {
width: 100%;
}
}
.index-catalog{
display: grid;
grid-template-columns: 220px minmax(0,1fr);
gap: 16px;
align-items: start;
}
/* =========================================================
ФИРМЕННЫЙ ПОДВАЛ «ВАШ ДИВАН 77»
========================================================= */
.site-footer {
position: relative;
isolation: isolate;
width: 100%;
margin-top: 56px;
padding: 58px 24px 24px;
overflow: hidden;
background:
radial-gradient(
circle at 0 100%,
rgba(217, 0, 22, 0.26) 0,
rgba(217, 0, 22, 0.05) 30%,
transparent 52%
),
radial-gradient(
circle at 100% 0,
rgba(255, 54, 45, 0.15) 0,
transparent 34%
),
linear-gradient(
135deg,
#050505 0%,
#0b0b0c 48%,
#140607 77%,
#2d0206 100%
);
color: #fff;
}
/* Красная линия сверху */
.site-footer::before {
content: "";
position: absolute;
z-index: 2;
top: 0;
right: 0;
left: 0;
height: 4px;
box-shadow: 0 0 24px rgba(255, 31, 37, 0.55);
}
/* Тонкая сетка */
.site-footer::after {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background-image:
linear-gradient(
rgba(255, 255, 255, 0.018) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.018) 1px,
transparent 1px
);
background-size: 42px 42px;
-webkit-mask-image:
linear-gradient(
90deg,
transparent,
#000 28%,
#000 72%,
transparent
);
mask-image:
linear-gradient(
90deg,
transparent,
#000 28%,
#000 72%,
transparent
);
pointer-events: none;
}
.footer-glow {
position: absolute;
z-index: -1;
border-radius: 50%;
pointer-events: none;
}
.footer-glow--left {
bottom: -240px;
left: -170px;
width: 470px;
height: 470px;
border: 1px solid rgba(255, 38, 42, 0.1);
box-shadow:
0 0 0 55px rgba(255, 30, 35, 0.018),
0 0 0 110px rgba(255, 30, 35, 0.012),
0 0 120px rgba(190, 0, 20, 0.16);
}
.footer-glow--right {
top: -220px;
right: -140px;
width: 430px;
height: 430px;
background:
radial-gradient(
circle,
rgba(255, 52, 43, 0.15),
transparent 68%
);
filter: blur(10px);
}
.footer-container {
position: relative;
z-index: 1;
width: 100%;
max-width: 1416px;
margin: 0 auto;
}
/* =========================================================
ОСНОВНАЯ СЕТКА
========================================================= */
.footer-main {
display: grid;
grid-template-columns:
minmax(290px, 1.35fr)
minmax(155px, 0.72fr)
minmax(175px, 0.82fr)
minmax(185px, 0.8fr);
align-items: start;
gap: 48px;
}
/* =========================================================
ЛОГОТИП И ОПИСАНИЕ
========================================================= */
.footer-brand {
min-width: 0;
max-width: 410px;
}
.footer-logo {
display: inline-flex;
align-items: center;
width: min(100%, 276px);
min-height: 76px;
padding: 11px 17px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 18px;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.98),
rgba(255, 255, 255, 0.91)
);
box-shadow:
0 14px 34px rgba(0, 0, 0, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
text-decoration: none;
transition:
transform 0.18s ease,
box-shadow 0.18s ease;
}
.footer-logo img {
display: block;
width: 100%;
height: auto;
max-height: 58px;
object-fit: contain;
object-position: left center;
}
.footer-logo:hover {
transform: translateY(-2px);
box-shadow:
0 18px 40px rgba(0, 0, 0, 0.3),
0 0 28px rgba(225, 0, 22, 0.12);
}
.footer-description {
max-width: 390px;
margin: 20px 0 0;
color: rgba(255, 255, 255, 0.57);
font-size: 15px;
line-height: 1.55;
}
/* =========================================================
КОНТАКТЫ
========================================================= */
.footer-contacts {
display: grid;
gap: 9px;
margin-top: 22px;
}
.footer-phone,
.footer-email {
display: flex;
align-items: center;
gap: 12px;
width: fit-content;
max-width: 100%;
color: #fff;
text-decoration: none;
transition:
color 0.16s ease,
transform 0.16s ease;
}
.footer-phone:hover,
.footer-email:hover {
color: #ff4238;
transform: translateX(3px);
}
.footer-contact-icon {
flex: 0 0 39px;
display: grid;
place-items: center;
width: 39px;
height: 39px;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 13px;
background: rgba(255, 255, 255, 0.055);
color: #ff3d34;
}
.footer-contact-icon svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.footer-phone > span:last-child,
.footer-email > span:last-child {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.footer-phone small,
.footer-email small,
.footer-worktime small {
color: rgba(255, 255, 255, 0.43);
font-size: 11px;
line-height: 1;
font-weight: 600;
}
.footer-phone strong,
.footer-email strong {
overflow: hidden;
font-size: 14px;
line-height: 1.2;
font-weight: 750;
white-space: nowrap;
text-overflow: ellipsis;
}
/* =========================================================
КОЛОНКИ ССЫЛОК
========================================================= */
.footer-column {
display: flex;
align-items: flex-start;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.footer-column h3 {
position: relative;
margin: 5px 0 13px;
padding-bottom: 12px;
color: #fff;
font-size: 16px;
line-height: 1.15;
font-weight: 800;
}
.footer-column h3::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 32px;
height: 3px;
border-radius: 999px;
background:
linear-gradient(90deg, #ff4339, #b40015);
box-shadow: 0 0 12px rgba(255, 47, 43, 0.4);
}
.footer-column > a {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 100%;
color: rgba(255, 255, 255, 0.58);
text-decoration: none;
font-size: 14px;
line-height: 1.4;
font-weight: 500;
transition:
color 0.16s ease,
transform 0.16s ease;
}
.footer-column > a::before {
content: "";
flex: 0 0 5px;
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
transition:
background 0.16s ease,
box-shadow 0.16s ease;
}
.footer-column > a:hover {
color: #fff;
transform: translateX(4px);
}
.footer-column > a:hover::before {
background: #ff3d34;
box-shadow: 0 0 8px rgba(255, 61, 52, 0.7);
}
.footer-link-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 25px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: #d7001b;
color: #fff;
font-size: 10px;
line-height: 1;
font-weight: 800;
}
/* Режим работы */
.footer-worktime {
display: flex;
align-items: center;
gap: 10px;
margin-top: 13px;
padding-top: 17px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.footer-worktime-icon {
flex: 0 0 34px;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 11px;
background: rgba(255, 255, 255, 0.055);
color: #ff3d34;
}
.footer-worktime-icon svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.footer-worktime > span:last-child {
display: flex;
flex-direction: column;
gap: 4px;
}
.footer-worktime strong {
color: rgba(255, 255, 255, 0.82);
font-size: 12px;
line-height: 1.2;
}
/* =========================================================
НИЖНЯЯ ЧАСТЬ
========================================================= */
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
margin-top: 48px;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-legal {
min-width: 0;
}
.footer-legal p {
margin: 0;
color: rgba(255, 255, 255, 0.38);
font-size: 12px;
line-height: 1.45;
}
.footer-legal-links {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin-top: 7px;
}
.footer-legal-links a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
font-size: 11px;
line-height: 1.4;
}
.footer-legal-links a:hover {
color: #fff;
}
/* =========================================================
СОЦИАЛЬНЫЕ СЕТИ
========================================================= */
.footer-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex: 0 0 auto;
}
.footer-actions-title {
margin-right: 4px;
color: rgba(255, 255, 255, 0.42);
font-size: 11px;
line-height: 1;
font-weight: 650;
white-space: nowrap;
}
.footer-social {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 39px;
padding: 7px 11px;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.72);
text-decoration: none;
font-size: 11px;
line-height: 1;
font-weight: 700;
transition:
transform 0.16s ease,
border-color 0.16s ease,
background 0.16s ease,
color 0.16s ease;
}
.footer-social svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.footer-social:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.09);
color: #fff;
}
.footer-social--vk:hover {
color: #4ca0ff;
}
.footer-social--telegram:hover {
color: #38baf5;
}
.footer-social--max:hover {
color: #a88cff;
}
.footer-max-icon {
display: grid;
place-items: center;
width: 18px;
height: 18px;
border-radius: 6px;
background:
linear-gradient(135deg, #9478ff, #6544e8);
color: #fff;
font-size: 10px;
font-weight: 900;
}
/* =========================================================
НОУТБУКИ И ПЛАНШЕТЫ
========================================================= */
@media (max-width: 1100px) {
.footer-main {
grid-template-columns:
minmax(280px, 1.2fr)
repeat(3, minmax(145px, 0.7fr));
gap: 30px;
}
.footer-logo {
width: min(100%, 300px);
}
.footer-description {
font-size: 14px;
}
.footer-column > a {
font-size: 13px;
}
.footer-bottom {
align-items: flex-start;
flex-direction: column;
}
.footer-actions {
justify-content: flex-start;
}
}
/* =========================================================
МОБИЛЬНАЯ ВЕРСИЯ
========================================================= */
@media (max-width: 760px) {
.site-footer {
margin-top: 34px;
/*
* Дополнительный нижний отступ нужен,
* поскольку на сайте есть фиксированное мобильное меню.
*/
padding:
39px
15px
calc(102px + env(safe-area-inset-bottom));
}
.site-footer::before {
height: 3px;
}
.footer-main {
grid-template-columns: 1fr 1fr;
gap: 34px 20px;
}
.footer-brand {
grid-column: 1 / -1;
max-width: none;
}
.footer-logo {
width: min(100%, 310px);
min-height: 68px;
padding: 9px 14px;
border-radius: 16px;
}
.footer-logo img {
max-height: 52px;
}
.footer-description {
max-width: 440px;
margin-top: 17px;
font-size: 13px;
}
.footer-contacts {
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 19px;
}
.footer-phone,
.footer-email {
width: 100%;
padding: 10px;
border: 1px solid rgba(255, 255, 255, 0.075);
border-radius: 14px;
background: rgba(255, 255, 255, 0.035);
}
.footer-contact-icon {
flex-basis: 35px;
width: 35px;
height: 35px;
border-radius: 11px;
}
.footer-phone strong,
.footer-email strong {
font-size: 12px;
}
.footer-column:last-child {
grid-column: 1 / -1;
}
.footer-column h3 {
margin-bottom: 8px;
font-size: 15px;
}
.footer-column > a {
font-size: 13px;
}
.footer-worktime {
width: 100%;
margin-top: 10px;
}
.footer-bottom {
gap: 19px;
margin-top: 35px;
padding-top: 20px;
}
.footer-actions {
flex-wrap: wrap;
width: 100%;
}
.footer-actions-title {
flex: 0 0 100%;
margin: 0 0 3px;
}
.footer-social {
flex: 1 1 auto;
}
.footer-glow--left {
bottom: -290px;
left: -220px;
}
}
/* =========================================================
УЗКИЕ ТЕЛЕФОНЫ
========================================================= */
@media (max-width: 520px) {
.footer-main {
grid-template-columns: 1fr;
gap: 30px;
}
.footer-brand,
.footer-column:last-child {
grid-column: auto;
}
.footer-contacts {
grid-template-columns: 1fr;
}
.footer-logo {
width: 100%;
}
.footer-description {
line-height: 1.5;
}
.footer-column {
padding-bottom: 25px;
border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}
.footer-column:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.footer-actions {
display: grid;
grid-template-columns: 1fr 1fr;
}
.footer-actions-title {
grid-column: 1 / -1;
}
.footer-social {
width: 100%;
}
.footer-social:last-child {
grid-column: 1 / -1;
}
}
/* =========================================================
ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ
========================================================= */
@media (max-width: 360px) {
.site-footer {
padding-right: 12px;
padding-left: 12px;
}
.footer-logo {
padding: 8px 11px;
}
.footer-phone,
.footer-email {
padding: 9px;
}
.footer-actions {
grid-template-columns: 1fr;
}
.footer-actions-title,
.footer-social:last-child {
grid-column: auto;
}
}
b.badgeoz {
background: #005bff;
color: #fff;
text-decoration: none;
}
b.badgewb {
background: #a73afd;
color: #fff;
text-decoration: none;
}
.pay-later a{
text-decoration: none;
}
.color-options {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.color-card {
width: 64px;
height: 64px;
min-width: 64px;
min-height: 64px;
flex: 0 0 64px;
padding: 5px;
box-sizing: border-box;
border: 1px solid #e1e6ed;
border-radius: 8px;
cursor: pointer;
}
/* МОБИЛЬНАЯ ВЕРСИЯ */
@media (max-width: 768px) {
.color-options {
gap: 8px;
}
.color-card {
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
flex: 0 0 48px;
padding: 3px;
border-radius: 7px;
}
}
.product-gallery {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.product-main-image {
position: relative;
overflow: hidden;
border-radius: 22px;
background: #f4f5f7;
height: 650px;
display: flex;
align-items: center;
justify-content: center;
}
.product-main-image img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
object-position: center;
}
.product-thumbs {
height: 650px;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: 10px;
scrollbar-width: thin;
}
.thumb {
width: 64px;
height: 64px;
min-height: 64px;
flex: 0 0 64px;
padding: 0;
overflow: hidden;
border-radius: 8px;
cursor: pointer;
}
.thumb img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.product-thumbs {
scrollbar-width: none;
}
.product-thumbs::-webkit-scrollbar {
display: none;
}
@media (max-width: 768px) {
html,
body {
max-width: 100%;
overflow-x: hidden;
}
.product-gallery {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden;
box-sizing: border-box;
}
.product-main-image {
order: 1;
width: 100%;
max-width: 100%;
min-width: 0;
height: 500px;
min-height: 0;
position: relative;
overflow: hidden;
border-radius: 14px;
background: #f4f5f7;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
/* разрешаем вертикальный скролл страницы,
но обрабатываем горизонтальный свайп */
touch-action: pan-y;
}
.product-main-image img {
width: 100%;
max-width: 100%;
height: 100%;
display: block;
object-fit: contain;
object-position: center;
user-select: none;
-webkit-user-drag: none;
}
.product-thumbs {
order: 2;
display: flex;
flex-direction: row;
gap: 8px;
width: 100%;
max-width: 100%;
min-width: 0;
height: auto;
overflow-x: auto;
overflow-y: hidden;
box-sizing: border-box;
padding: 2px 0 6px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
.product-thumbs::-webkit-scrollbar {
display: none;
}
.thumb {
flex: 0 0 58px;
width: 58px;
min-width: 58px;
height: 58px;
min-height: 58px;
padding: 0;
margin: 0;
overflow: hidden;
border-radius: 8px;
box-sizing: border-box;
}
.thumb img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
}
.catalog-product-image {
position: relative;
aspect-ratio: 181 / 241;
overflow: hidden;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.catalog-product-image img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
object-position: center;
transition: transform .25s ease;
}
/* =========================================================
ОБЩИЙ ВИД ТАБЛИЦЫ
========================================================= */
table.inf {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: #ffffff;
border: 1px solid #dfe6ee;
border-radius: 12px;
font-size: 15px;
line-height: 1.45;
color: #243447;
overflow: hidden;
}
/* =========================================================
ЗАГОЛОВКИ
========================================================= */
table.inf th.inf {
padding: 13px 16px;
text-align: left;
font-size: 14px;
font-weight: 600;
color: #344054;
background: #edf3f8;
border: 0;
border-right: 1px solid #dce5ed;
border-bottom: 1px solid #d7e0e9;
}
table.inf th.inf:last-child {
border-right: 0;
}
/* =========================================================
ЯЧЕЙКИ
========================================================= */
table.inf td.inf {
padding: 12px 16px;
text-align: left;
vertical-align: middle;
color: #2f4053;
background: #ffffff;
border: 0;
border-right: 1px solid #e5ebf0;
border-bottom: 1px solid #e5ebf0;
}
/* Последний столбец */
table.inf td.inf:last-child {
border-right: 0;
}
/* Последняя строка */
table.inf tr:last-child td.inf {
border-bottom: 0;
}
/* =========================================================
ЧЕРЕДОВАНИЕ СТРОК
========================================================= */
table.inf tr:nth-child(even) td.inf {
background: #f9fbfc;
}
/* =========================================================
HOVER
========================================================= */
table.inf tr:hover td.inf {
background: #f1f6fa;
}
/* =========================================================
ПЕРВЫЙ СТОЛБЕЦ
========================================================= */
table.inf td.inf:first-child {
color: #6b7c8f;
font-weight: 500;
}
/* =========================================================
ОСТАЛЬНЫЕ СТОЛБЦЫ
========================================================= */
table.inf td.inf:not(:first-child) {
color: #203040;
font-weight: 600;
}
/* =========================================================
ВЫДЕЛЕННАЯ СТРОКА
========================================================= */
table.inf tr.ser td {
background: #fff9e8;
border-color: #f3df9a;
}
table.inf tr.ser td:first-child {
box-shadow: inset 4px 0 0 #e9c74f;
}
table.inf tr.ser:hover td {
background: #fff4cc;
}
/* =========================================================
ТЕКСТ В ТАБЛИЦЕ
========================================================= */
table.inf p {
margin: 0;
line-height: 1.45;
color: inherit;
}
table.inf strong,
table.inf b {
color: #1f2d3d;
font-weight: 600;
}
/* =========================================================
ССЫЛКИ
========================================================= */
table.inf a {
color: #3367d6;
text-decoration: none;
font-weight: 500;
}
table.inf a:hover {
text-decoration: underline;
}
/* =========================================================
МОБИЛЬНАЯ ВЕРСИЯ
========================================================= */
@media (max-width: 768px) {
/* Чтобы таблица не раздвигала весь сайт */
table.inf {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
font-size: 14px;
border-radius: 10px;
}
/* Сохраняем структуру таблицы */
table.inf tbody {
display: table;
width: 100%;
min-width: 620px;
}
table.inf th.inf {
padding: 10px 12px;
font-size: 13px;
white-space: nowrap;
}
table.inf td.inf {
padding: 10px 12px;
font-size: 14px;
line-height: 1.35;
white-space: normal;
}
table.inf td.inf:first-child {
min-width: 150px;
}
/* Аккуратный scrollbar */
table.inf::-webkit-scrollbar {
height: 5px;
}
table.inf::-webkit-scrollbar-track {
background: #f1f4f7;
}
table.inf::-webkit-scrollbar-thumb {
background: #cbd5df;
border-radius: 10px;
}
}
/* =========================================================
СОВСЕМ МАЛЕНЬКИЕ ЭКРАНЫ
========================================================= */
@media (max-width: 480px) {
table.inf {
font-size: 13px;
}
table.inf tbody {
min-width: 560px;
}
table.inf th.inf {
padding: 9px 10px;
}
table.inf td.inf {
padding: 9px 10px;
font-size: 13px;
}
}
/* =========================================================
КАРТОЧКИ КОНТАКТОВ
========================================================= */
.bl_cont {
position: relative;
float: left;
width: calc(33.333% - 14px);
min-height: 185px;
margin-right: 21px;
margin-bottom: 25px;
padding: 22px 24px;
box-sizing: border-box;
background: #f8fafc;
border: 1px solid #e2e8ef;
border-radius: 14px;
color: #243447;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}
/* последняя карточка */
.bl_cont:nth-of-type(3n) {
margin-right: 0;
}
/* лёгкий эффект при наведении */
.bl_cont:hover {
background: #ffffff;
border-color: #d4dee8;
box-shadow:
0 5px 18px rgba(0, 26, 52, 0.07);
transform: translateY(-2px);
}
/* =========================================================
ЗАГОЛОВОК В КАРТОЧКЕ
========================================================= */
.bl_cont .pod {
position: relative;
margin-bottom: 17px;
padding-bottom: 12px;
font-size: 15px;
line-height: 1.3;
font-weight: 600;
color: #6b7c8f;
}
/* маленькая линия под заголовком */
.bl_cont .pod::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 36px;
height: 3px;
background: #d9e3ec;
border-radius: 10px;
}
/* =========================================================
ТЕЛЕФОНЫ
========================================================= */
.phone {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.phone a {
display: inline-block;
font-size: 19px;
line-height: 1.3;
font-weight: 600;
color: #001a34;
text-decoration: none;
transition: color 0.2s ease;
}
.phone a:hover {
color: #005bff;
}
/* =========================================================
РЕЖИМ РАБОТЫ
========================================================= */
.vrem {
margin-bottom: 10px;
font-size: 25px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.3px;
color: #001a34;
}
/* пояснение */
.podp {
max-width: 320px;
font-size: 13px;
line-height: 1.5;
color: #7b8998;
}
/* =========================================================
АДРЕС
========================================================= */
.con3 p {
margin: 0;
font-size: 18px;
line-height: 1.5;
font-weight: 600;
color: #001a34;
}
/* =========================================================
CLEAR
========================================================= */
.clear {
clear: both;
}
/* =========================================================
ПЛАНШЕТ
========================================================= */
@media (max-width: 900px) {
.bl_cont {
width: calc(50% - 8px);
margin-right: 16px;
}
.bl_cont:nth-of-type(3n) {
margin-right: 16px;
}
.bl_cont:nth-of-type(2n) {
margin-right: 0;
}
}
/* =========================================================
МОБИЛЬНАЯ ВЕРСИЯ
========================================================= */
@media (max-width: 600px) {
.wrapper {
padding-left: 14px;
padding-right: 14px;
}
.bread {
margin-top: 10px;
margin-bottom: 10px;
font-size: 12px;
}
.zag {
margin-bottom: 18px;
font-size: 11px;
}
/* Карточки друг под другом */
.bl_cont,
.bl_cont:nth-of-type(2n),
.bl_cont:nth-of-type(3n) {
float: none;
width: 100%;
min-height: 0;
margin-right: 0;
margin-bottom: 12px;
padding: 18px;
border-radius: 12px;
}
/* На телефоне hover не нужен */
.bl_cont:hover {
transform: none;
box-shadow: none;
}
.bl_cont .pod {
margin-bottom: 14px;
padding-bottom: 10px;
font-size: 14px;
}
/* Телефоны крупные — удобно нажимать */
.phone {
gap: 5px;
}
.phone a {
display: block;
width: 100%;
padding: 4px 0;
font-size: 18px;
}
.vrem {
margin-bottom: 9px;
font-size: 22px;
}
.podp {
font-size: 13px;
line-height: 1.45;
}
.con3 p {
font-size: 17px;
}
}