body{margin:0;padding:0}
body.rd-main-page #content{width:auto;max-width:none;margin:0;padding:0;text-align:left;margin: 0;}
:root{
--bg-top:#1B1E20;
--bg-main:#1F2224;
--bg-nav:#24282B;
--bg-panel:#24282B;
--bg-field:#2B3033;
--accent:#62BC58;
--accent-hover:#74CC6A;
--text:#E8E8E8;
--text-dim:#9AA0A5;
--line:rgba(255,255,255,.08);
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
--h-top:36px; --h-main:104px; --h-nav:44px;
--radius:4px;
--trans:180ms ease;
--container:1360px;
--font-text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
--font-cond:'Roboto Condensed','Arial Narrow',system-ui,sans-serif;
}
/* Сброс ограничен новыми контейнерами, чтобы не задеть остальные (ещё не редизайненные) страницы */
.site-header, .site-header *,
.rd-hero, .rd-hero *,
.cm-main, .cm-main *,
.site-footer, .site-footer *,
.drawer, .drawer *,
.cm-qv-overlay, .cm-qv-overlay *,
.fb-modal, .fb-modal *,
.cat-top, .cat-top *,
.cat-chips-wrap, .cat-chips-wrap *,
.cat-layout, .cat-layout *,
.cat-seo, .cat-seo *,
.back-to-top{
box-sizing:border-box;
margin:0;
padding:0;
}
.site-header, .rd-hero, .cm-main, .site-footer, .drawer, .cm-qv-overlay, .fb-modal, .cat-top, .cat-chips-wrap, .cat-layout, .cat-seo{
font-family:var(--font-text);
}
:where(.site-header, .rd-hero, .cm-main, .site-footer, .drawer, .cat-top, .cat-chips-wrap, .cat-layout) a{color:inherit;text-decoration:none}
:where(.site-header, .rd-hero, .cm-main, .site-footer, .drawer, .fb-modal, .cat-layout) button{
font:inherit;color:inherit;background:none;border:0;cursor:pointer;
}
.site-header svg, .rd-hero svg, .cm-main svg, .site-footer svg, .drawer svg, .cat-layout svg, .cat-top svg{display:block;flex:none}
.rd-container{max-width:var(--container);margin:0 auto;padding:0 var(--sp-5)}
/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:100;background:linear-gradient(to right, transparent 0%, var(--bg-main) 22%, var(--bg-main) 78%, transparent 100%), url("/images/fronted/header-bg.jpg") center/cover;color:var(--text);box-shadow:0 2px 12px rgba(0,0,0,.35);overflow-anchor:none}
.topbar{background:transparent;border-bottom:1px solid var(--line);overflow:hidden;max-height:var(--h-top);transition:max-height var(--trans),opacity var(--trans)}
.topbar .rd-container{height:var(--h-top);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);font-size:12.5px;color:var(--text-dim);flex-wrap:wrap}
.topbar-group{display:flex;align-items:center;gap:var(--sp-5);min-width:0}
.topbar-item{display:flex;align-items:center;gap:6px;white-space:nowrap}
.topbar-item svg{color:var(--text-dim)}
.topbar a.topbar-item,.topbar .topbar-item a{transition:color var(--trans)}
.topbar a.topbar-item:hover,.topbar .topbar-item:hover a,.topbar .topbar-item a:hover{color:var(--accent)}
.topbar-msgr{display:flex;align-items:center;gap:var(--sp-2)}
.msgr-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius);color:var(--text-dim);transition:color var(--trans),background var(--trans)}
.msgr-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.msgr-btn.max {
fill: #9AA0A5}
.msgr-btn:hover svg {
fill: #fff;
}
.topbar-auth{white-space:nowrap}
.topbar-auth a{color:var(--text-dim);transition:color var(--trans)}
.topbar-auth a:hover{color:var(--accent)}
.topbar-auth span{color:rgba(255,255,255,.25);margin:0 4px}
.topbar-auth ul{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.topbar-auth li{display:flex;align-items:center}
.topbar-auth li+li::before{content:"";display:inline-block;width:1px;height:12px;background:rgba(255,255,255,.2);margin-right:10px}
.mainbar .rd-container{height:var(--h-main);display:flex;align-items:center;gap:var(--sp-5)}
.rd-logo{display:flex;align-items:center;flex:none}
.rd-logo img{width:300px;max-width:40vw;height:auto;display:block}
.catalog-btn{display:flex;align-items:center;gap:10px;height:44px;padding:0 var(--sp-4);flex:none;
background:var(--accent);color:#fff;border-radius:var(--radius);
font-family:var(--font-cond);font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;
transition:background var(--trans)}
.catalog-btn:hover{background:var(--accent-hover)}
.catalog-btn .icon-close{display:none}
.catalog-btn[aria-expanded="true"] .icon-burger{display:none}
.catalog-btn[aria-expanded="true"] .icon-close{display:block}
.rd-search{flex:1 1 auto;min-width:0;max-width:380px;position:relative}
.rd-search #find{position:static !important;height:auto;max-width:none;width:100%}
.rd-search .site-search{position:static !important;left:auto !important;background:none !important}
.rd-search-box{display:flex;height:44px;background:var(--bg-field);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color var(--trans)}
.rd-search-box:focus-within{border-color:var(--accent)}
.rd-search-box input{flex:1;min-width:0;background:none;border:0;outline:0;padding:0 var(--sp-4);color:var(--text);font:inherit;font-size:14px}
.rd-search-box input::placeholder{color:var(--text-dim)}
.rd-search-submit{display:flex;align-items:center;justify-content:center;width:52px;color:var(--text-dim);transition:color var(--trans),background var(--trans)}
.rd-search-submit:hover{color:#fff;background:rgba(255,255,255,.06)}
/* ===== Живой поиск (quick-search dropdown) — /search/live/, fetch по debounce из header.tpl ===== */
.qs-results{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:150;display:none}
.qs-results.open{display:block}
.qs-drop{background:#fff;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.08);overflow:hidden;max-height:70vh;overflow-y:auto;color:#1B1E20;text-align:left}
.qs-section+.qs-section{border-top:1px solid rgba(0,0,0,.08)}
.qs-section-title{padding:12px 16px 4px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#6b7076}
.qs-item{display:flex;align-items:center;gap:12px;padding:8px 16px;color:#1B1E20;transition:background .12s}
.qs-item:hover,.qs-item:focus{background:#F4F7F5}
.qs-item-photo{flex:none;width:44px;height:44px;border-radius:6px;overflow:hidden;background:#F4F7F5;display:flex;align-items:center;justify-content:center}
.qs-item-photo img{width:100%;height:100%;object-fit:contain}
.qs-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.qs-item-name{font-size:13.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.qs-item-price{font-size:13px;font-weight:700;color:var(--accent)}
.qs-item-price-old{font-weight:400;color:#6b7076;text-decoration:line-through;margin-right:6px}
.qs-item-text{padding:8px 16px;font-size:13.5px;color:#1B1E20}
.qs-more{display:block;padding:12px 16px;font-size:13px;font-weight:600;color:var(--accent);border-top:1px solid rgba(0,0,0,.08);background:#F4F7F5}
.qs-more:hover{background:#EEF2EF}
.qs-empty{padding:20px 16px;font-size:13.5px;color:#6b7076;text-align:center}
@media (max-width:900px){
.qs-drop{max-height:60vh}
}
.mainbar-right{display:flex;align-items:center;gap:var(--sp-5);flex:none;margin-left:auto}
.rd-phone{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;transition:opacity var(--trans)}
.rd-phone a{font-family:var(--font-cond);font-weight:700;font-size:24px;letter-spacing:.02em;color:#fff;white-space:nowrap;transition:color var(--trans)}
.rd-phone a:hover{color:var(--accent)}
.rd-phone small{font-size:13px;color:var(--text-dim)}
.icon-link{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:56px;min-height:56px;border-radius:var(--radius);color:var(--text-dim);transition:color var(--trans)}
.icon-link:hover{color:#fff}
.icon-link .lbl{font-size:12.5px}
.icon-link>svg{width:28px;height:28px}
.badge{position:absolute;top:0;right:2px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;
background:var(--accent);color:#fff;font-size:12px;font-weight:600;line-height:19px;text-align:center}
.icon-link.cart .lbl{color:var(--text);font-weight:600}
.navbar{background:transparent;border-top:1px solid var(--line);overflow:hidden;max-height:var(--h-nav);transition:max-height var(--trans),opacity var(--trans)}
.navbar ul{height:var(--h-nav);display:flex;justify-content: space-evenly;align-items:stretch;gap:var(--sp-6);list-style:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.navbar ul::-webkit-scrollbar{display:none}
.navbar li{display:flex;flex:none}
.navbar a{position:relative;display:flex;align-items:center;white-space:nowrap;
font-family:var(--font-cond);font-size:13.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
color:var(--text-dim);transition:color var(--trans)}
.navbar a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transition:transform var(--trans)}
.navbar a:hover{color:#fff}
.navbar a:hover::after{transform:scaleX(1)}
.navbar a.sale{color:var(--accent);font-weight:700}
.navbar a.sale:hover{color:var(--accent-hover)}
.site-header.compact .topbar,
.site-header.compact .navbar{max-height:0;opacity:0;border-width:0}
.megamenu{position:absolute;left:0;right:0;top:100%;background:var(--bg-panel);border-top:1px solid var(--line);
box-shadow:0 24px 48px rgba(0,0,0,.5);
opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--trans),transform var(--trans),visibility var(--trans);max-height:70vh;overflow-y:auto}
.megamenu.open{opacity:1;visibility:visible;transform:translateY(0)}
.megamenu .rd-container{padding-top:var(--sp-6);padding-bottom:var(--sp-6)}
.megamenu-cols{padding-bottom: 10px;padding-top: 8px;columns:4;column-gap:var(--sp-6)}
.megamenu-cols>ul{list-style:none}
.megamenu-cols>ul>li{break-inside:avoid;margin-bottom:0}
.megamenu-cols>ul>li>a{display:block;padding:9px 10px;margin:0 -10px;border-radius:var(--radius);
font-size:14px;font-weight:400;color:var(--text);transition:color var(--trans),background var(--trans)}
.megamenu-cols>ul>li>a:hover{color:var(--accent);background:rgba(255,255,255,.04)}
.megamenu-cols a.active{color:var(--accent)}
.megamenu-cols a.sale{color:var(--accent);font-weight:600}
.megamenu-cols ul ul{display:none}
.burger-btn,.msearch-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius);color:var(--text);transition:background var(--trans)}
.burger-btn:hover,.msearch-btn:hover{background:rgba(255,255,255,.08)}
.mobile-search{display:none;padding:0 var(--sp-4) var(--sp-3);background:var(--bg-main)}
.mobile-search .rd-search{max-width:none}
.drawer{position:fixed;inset:0;z-index:200;visibility:hidden;transition:visibility var(--trans)}
.drawer.open{visibility:visible}
.drawer-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity var(--trans)}
.drawer.open .drawer-overlay{opacity:1}
.drawer-panel{position:absolute;top:0;bottom:0;left:0;width:min(320px,85vw);background:var(--bg-panel);color:var(--text);
overflow-y:auto;transform:translateX(-100%);transition:transform 200ms ease}
.drawer.open .drawer-panel{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line)}
.drawer-head b{font-family:var(--font-cond);letter-spacing:.06em;text-transform:uppercase;font-size:15px}
.drawer-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--text-dim)}
.drawer-close:hover{color:#fff}
.drawer h3{font-family:var(--font-cond);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);padding:var(--sp-4) var(--sp-4) var(--sp-2)}
.drawer ul{list-style:none}
.drawer li a{display:flex;align-items:center;min-height:44px;padding:0 var(--sp-4);font-size:14.5px;color:var(--text);transition:background var(--trans)}
.drawer li a:hover{background:rgba(255,255,255,.05)}
.drawer li a.sale{color:var(--accent);font-weight:600}
.drawer ul ul{padding-left:var(--sp-4)}
.drawer-contacts{padding:var(--sp-4);border-top:1px solid var(--line);font-size:13px;color:var(--text-dim);display:grid;gap:var(--sp-2)}
.drawer-contacts a{color:var(--text)}
.drawer-contacts a.acc{color:var(--accent);font-family:var(--font-cond);font-weight:700;font-size:17px}
@media (max-width:1199.98px){
.rd-logo img{width:150px}
.rd-search{min-width:160px}
.navbar{display:none}
.topbar-group .topbar-item.addr{display:none}
.rd-phone small{display:none}
.megamenu-cols{columns:3}
.fav{display:none}
}
@media (max-width:767.98px){
:root{--h-main:60px}
.topbar{display:none}
.mainbar .rd-container{gap:var(--sp-2);padding:0 var(--sp-2)}
.burger-btn,.msearch-btn{display:flex}
.catalog-btn,.rd-search,.rd-phone,.fav{display:none}
.rd-logo{margin-right:auto}
.rd-logo img{height:38px;width:auto}
.mobile-search.open{display:block}
.icon-link.cart .lbl{display:none}
}
/* ===== Hero: слайдер + магазины ===== */
.rd-hero{padding:40px 0;background:#F3F6F4}
.rd-hero-grid{display:grid;grid-template-columns:1fr 340px;gap:var(--sp-5);align-items:stretch}
.rd-slider{position:relative;min-height:300px;border-radius:8px;overflow:hidden;background:var(--bg-main)}
.rd-slides{display:flex;height:100%;transition:transform 200ms ease}
.rd-slide{flex:0 0 100%;min-width:100%}
.rd-slide img,.rd-slide a{width:100%;height:100%;object-fit:cover;display:block}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(27,30,32,.65);color:#fff;transition:background var(--trans)}
.slider-arrow:hover{background:var(--accent)}
.slider-arrow.prev{left:12px}
.slider-arrow.next{right:12px}
.slider-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px}
.slider-dots button{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.45);transition:background var(--trans),transform var(--trans);padding:0;border:0}
.slider-dots button[aria-current="true"]{background:var(--accent);transform:scale(1.2)}
.rd-stores{background:var(--bg-main);color:var(--text);border-radius:8px;padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}
.rd-stores h2{font-family:var(--font-cond);font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-align:center;text-shadow:0 0 14px rgba(255,255,255,.6);background:var(--accent);margin:calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) 0;padding:var(--sp-5);border-radius:8px 8px 0 0}
.rd-store{display:flex;flex-direction:column;gap:6px;padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.rd-store b{display:flex;align-items:center;gap:7px;font-family:var(--font-cond);font-size:15px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.rd-store b svg{color:var(--accent)}
.rd-store a.tel{font-family:var(--font-cond);font-size:20px;font-weight:700;color:#fff;white-space:nowrap;transition:color var(--trans)}
.rd-store a.tel:hover{color:var(--accent)}
.rd-store .hours{font-size:12px;color:var(--text-dim)}
.tour-links{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:auto}
.tour-links a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px;border-radius:6px;
font-family:var(--font-cond);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text);text-align:center;transition:background var(--trans),color var(--trans),border-color var(--trans)}
.tour-links a.tour-3d{border:none;background:var(--accent);color:#1B1E20;border-radius:10px}
.tour-links a.tour-3d svg{color:#1B1E20}
.tour-links a.tour-3d:hover{background:var(--accent-hover)}
.tour-links a.tour-rutube{border:1px solid var(--accent);background:transparent;color:var(--accent)}
.tour-links a.tour-rutube svg{color:var(--accent)}
.tour-links a.tour-rutube:hover{background:var(--accent);color:#1B1E20}
.tour-links a.tour-rutube:hover svg{color:#1B1E20}
@media (max-width:1199.98px){.rd-hero-grid{grid-template-columns:1fr 300px}}
@media (max-width:767.98px){.rd-hero-grid{grid-template-columns:1fr}.rd-slider{min-height:200px}}
/* ===== Контентная часть главной ===== */
.cm-main{max-width:var(--container);margin:0 auto;padding:0 var(--sp-5)}
.cm-section{position:relative;padding:40px 0}
.cm-section::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:0}
.cm-section:nth-of-type(odd)::before{background:#fff}
.cm-section:nth-of-type(even)::before{background:#F3F6F4}
.cm-section.bg-white::before{background:#fff}
.cm-section:not(:last-child)::after{content:"";position:absolute;bottom:0;left:50%;width:100vw;transform:translateX(-50%);height:1px;background:rgba(0,0,0,.08)}
.cm-section>*{position:relative;z-index:1}
.cm-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px;gap:16px}
.cm-title{font-family:var(--font-cond);font-size:22px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#1B1E20;margin:0}
.cm-title a{color:inherit;transition:color .18s}
.cm-title a:hover{color:var(--accent)}
.cm-title.accent{color:var(--accent)}
.cm-more{font-family:var(--font-cond);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6b7280;white-space:nowrap;transition:color .18s}
.cm-more:hover{color:var(--accent)}
.cm-cats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cm-cat-tile{position:relative;overflow:hidden;min-width:0;background:#EEF2EF;border:1px solid rgba(0,0,0,.08);border-radius:8px;padding:20px;display:flex;align-items:center;gap:16px;color:#1B1E20;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:transform .18s,box-shadow .18s}
.cm-cat-tile:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.1)}
.cm-cat-icon{position:relative;flex:none;width:56px;height:56px;border-radius:8px;background:#fff;border:1px solid rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center}
.cm-cat-icon img{max-width:36px;max-height:36px}
.cm-cat-icon svg{color:var(--accent)}
.cm-cat-text{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0}
.cm-cat-text b{font-family:var(--font-text);font-size:15px;font-weight:700;color:#1B1E20;overflow-wrap:break-word}
.cm-cat-text>span{font-family:var(--font-text);font-size:13px;color:#6b7280;overflow-wrap:break-word}
.cm-rail{position:relative}
.cm-rail-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:4px;scrollbar-width:none}
.cm-rail-track::-webkit-scrollbar{display:none}
.cm-card{flex:0 0 calc((100% - 4*24px)/5);min-width:0;scroll-snap-align:start;border:1px solid rgba(27,30,32,.12);border-radius:8px;overflow:visible;display:flex;flex-direction:column;color:#1B1E20;backface-visibility:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.cm-card:hover{transform:translateY(-3px);border-color:#d5d8db;box-shadow:0 10px 24px rgba(0,0,0,.12)}
.cm-card-inner{border-radius:7px;overflow:hidden;display:flex;flex-direction:column;flex:1;background:#fff}
.cm-card-photo{position:relative;aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;color:#b9b5ae;overflow:hidden;padding:14px;box-sizing:border-box}
.cm-card-dots{position:absolute;left:10px;right:10px;bottom:8px;display:flex;gap:3px;z-index:1;pointer-events:none}
.cm-card-dots span{flex:1;height:3px;border-radius:2px;background:rgba(27,30,32,.12);transition:background .1s}
.cm-card-dots span.active{background:var(--accent)}
.cm-card-photo img{width:100%;height:100%;object-fit:contain;display:block}
.cm-badges{position:absolute;top:8px;left:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px;z-index:1}
.cm-badge{font-family:var(--font-cond);font-size:13px;font-weight:700;letter-spacing:.03em;padding:4px 12px 4px 10px;clip-path:polygon(0 0,100% 0,78% 100%,0 100%)}
.cm-badge-sale{background:#C0392B;color:#fff;padding:4px 15px 4px 10px;clip-path:polygon(0 0,100% 0,82% 100%,0 100%)}
.cm-badge-new{background:var(--accent);color:#fff;padding:4px 16px 4px 10px;clip-path:polygon(0 0,100% 0,85% 100%,0 100%)}
.cm-badge-hit{background:#F2B705;color:#1B1E20}
.cm-badge-order{background:#6b7076;color:#fff;display:flex;align-items:center;gap:4px}
.cm-card-fav{position:absolute;top:8px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);border:0;color:#9AA0A5;display:flex;align-items:center;justify-content:center;z-index:2;cursor:pointer;transition:color .15s,background .15s}
.cm-card-fav:hover{color:#1B1E20}
.cm-card-fav{right:8px}
.cm-card-fav.active{color:#E14B3D}
.cm-card-body{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1;box-shadow:inset 0 1px 0 rgba(27,30,32,.1)}
.cm-card-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12.5px;color:#6b7076}
.cm-card-meta>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cm-card-meta>span:first-child a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.cm-card-meta .avail{display:flex;align-items:center;gap:4px;color:var(--accent);font-weight:600;flex:none;white-space:nowrap}
.cm-card-meta .avail.order{color:#E14B3D}
.cm-card-title{font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.cm-card-prices{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:2px;flex-wrap:wrap}
.cm-price-old{font-size:12.5px;color:#9AA0A5;text-decoration:line-through}
.cm-price{font-family:'Inter',sans-serif;font-size:22px;font-weight:700;color:#1B1E20;word-break:break-word}
.cm-timer{background:#E14B3D;border-radius:6px;padding:8px;text-align:center}
.cm-timer-label{font-size:10px;color:rgba(255,255,255,.85);letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}
.cm-timer-value{font-family:var(--font-cond);font-size:15px;font-weight:700;color:#fff;letter-spacing:.04em}
.cm-stock-label{font-size:11px;color:#6b7280}
.cm-card-actions{display:flex;margin-top:auto;padding-top:2px}
.cm-card-add{flex:1;background:linear-gradient(135deg,var(--accent),#4a9f42);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35);border:0;border-radius:6px;padding:13px 0;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:filter .16s;display:flex;align-items:center;justify-content:center;gap:8px}
.cm-card-add:hover{filter:brightness(1.08)}
.cm-card-add-muted{background:linear-gradient(135deg,#6b7278,#454b50)}
.cm-rail-arrow{position:absolute;top:38%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.1);color:#1B1E20;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;box-shadow:0 4px 12px rgba(0,0,0,.12);transition:background .18s,color .18s}
.cm-rail-arrow:hover{background:var(--accent);color:#fff}
.cm-rail-prev{left:-20px}
.cm-rail-next{right:-20px}
.cm-adv-strip{display:flex;justify-content:space-between;gap:12px;padding:28px 24px;border-top:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08)}
.cm-adv-item{flex:1;text-align:center;padding:0 8px;border-right:1px solid rgba(0,0,0,.08)}
.cm-adv-item:last-child{border-right:none}
.cm-adv-num{font-family:var(--font-cond);font-size:32px;font-weight:700;color:var(--accent);line-height:1}
.cm-adv-label{font-size:12.5px;color:#6b7280;margin-top:6px}
.cm-news-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.cm-news-col h3{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-cond);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1B1E20;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.08)}
.cm-news-col h3 a{font-size:11.5px;color:#6b7280;letter-spacing:.04em}
.cm-news-col h3 a:hover{color:var(--accent)}
.cm-news-item{display:block;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.cm-news-date{font-size:11.5px;color:#6b7280;margin-bottom:4px}
.cm-news-title{display:block;font-size:14.5px;font-weight:600;line-height:1.35;color:#1B1E20;margin-bottom:4px}
.cm-news-title:hover{color:var(--accent)}
.cm-news-excerpt{font-size:13px;color:#6b7280;line-height:1.4}
.cm-brands-row{display:grid;grid-template-rows:repeat(2,1fr);grid-auto-flow:column;grid-auto-columns:140px;gap:10px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;padding-bottom:2px}
.cm-brands-row::-webkit-scrollbar{display:none}
.cm-brands-row.dragging{cursor:grabbing;user-select:none}
.cm-brand-chip{flex:none;width:140px;padding:14px 18px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:8px;transition:border-color .15s,box-shadow .15s}
.cm-brand-chip img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .2s,opacity .2s}
.cm-brand-chip:hover img{filter:grayscale(0);opacity:1}
.cm-brand-chip:hover{border-color:var(--accent);box-shadow:0 6px 16px rgba(0,0,0,.08)}
@media (max-width:1199.98px){
.cm-cats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.cm-card{flex-basis:calc((100% - 2*24px)/3)}
.cm-news-grid{gap:24px}
}
@media (max-width:767.98px){
.cm-cats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.cm-card{flex-basis:78%}
.cm-adv-strip{flex-wrap:wrap}
.cm-adv-item{flex:1 1 40%;border-right:none;padding-bottom:12px;border-bottom:1px solid rgba(0,0,0,.08)}
.cm-news-grid{grid-template-columns:1fr}
.cm-rail-arrow{display:none}
}
@media (max-width:420px){
/* На самых узких телефонах (iPhone 12 mini и т.п.) иконка+паддинги в 2-колоночной
плитке категорий почти не оставляют места под текст — слова обрезаются. Урезаем
иконку/отступы, чтобы текст помещался в 2 строки без обрезки. */
.cm-cat-tile{padding:12px;gap:10px}
.cm-cat-icon{width:40px;height:40px;border-radius:6px}
.cm-cat-icon img{max-width:26px;max-height:26px}
.cm-cat-text b{font-size:13px;line-height:1.25}
.cm-cat-text>span{font-size:11.5px}
}
/* ===== SEO-текст ===== */
.cm-seo-wrap{max-width:900px;margin:0 auto;background:#fff;border-radius:10px;padding:40px 48px;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.cm-seo{position:relative;max-height:220px;overflow:hidden;transition:max-height .35s ease}
.cm-seo.expanded{max-height:4000px}
.cm-seo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none;transition:opacity .2s}
.cm-seo.expanded::after{opacity:0}
.cm-seo h1{font-family:var(--font-cond);font-size:26px;font-weight:700;letter-spacing:.02em;color:#1B1E20;margin:0 0 16px}
.cm-seo h2{font-family:var(--font-cond);font-size:17px;font-weight:700;letter-spacing:.02em;color:#1B1E20;margin:24px 0 10px;padding-left:14px;border-left:3px solid var(--accent)}
.cm-seo p{font-size:14px;line-height:1.7;color:#4b5259;margin:0 0 12px}
.cm-seo ul{margin:0 0 12px;padding-left:20px}
.cm-seo li{font-size:14px;line-height:1.7;color:#4b5259;margin-bottom:6px}
.cm-seo li b{color:#1B1E20}
.cm-seo-toggle{margin-top:12px;display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;color:var(--accent);font-family:var(--font-cond);font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.cm-seo-toggle svg{transition:transform .2s}
.cm-seo-toggle.expanded svg{transform:rotate(180deg)}
/* ===== Футер ===== */
.site-footer{background:#141618;color:#c7cbce;position:relative}
.site-footer::before{content:"";display:block;height:3px;background:var(--accent)}
.footer-main{max-width:var(--container);margin:0 auto;padding:48px var(--sp-5) 32px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:32px}
.footer-acc-head{all:unset;display:flex;align-items:center;justify-content:space-between;width:100%;box-sizing:border-box;cursor:default;font-family:var(--font-cond);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.footer-acc-chevron{display:none;flex:none;color:var(--text-dim);transition:transform .2s}
.rd-footer-logo{display:flex}
.rd-footer-logo img{width:300px;height:auto}
.footer-tagline{font-size:13px;color:var(--text-dim);margin:10px 0 18px;line-height:1.5}
.footer-social{display:flex;gap:10px}
.footer-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:#c7cbce;transition:border-color .15s,color .15s}
.footer-social a:hover{border-color:var(--accent);color:var(--accent)}
.footer-social a img{opacity:.85;transition:opacity .15s}
.footer-social a:hover img{opacity:1}
.footer-nav ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.footer-nav a{font-size:13.5px;color:#c7cbce;transition:color .15s}
.footer-nav a:hover{color:var(--accent)}
.footer-contact-phone{font-family:var(--font-cond);font-size:22px;font-weight:700;color:#fff;transition:color .15s}
.footer-contact-phone:hover{color:var(--accent)}
.footer-contact-phone+small{display:block;font-size:12px;color:var(--text-dim);margin-top:2px}
.footer-contact-item{font-size:13.5px;color:#c7cbce;margin-top:14px;line-height:1.5}
.footer-contact-item a{color:#c7cbce}
.footer-contact-item a:hover{color:var(--accent)}
.footer-cta{margin-top:18px;display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;background:var(--accent);color:#1B1E20;border-radius:6px;font-family:var(--font-cond);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;transition:background .15s;border:0;cursor:pointer}
.footer-cta:hover{background:var(--accent-hover)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08)}
.footer-bottom-inner{max-width:var(--container);margin:0 auto;padding:18px var(--sp-5);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--text-dim)}
.footer-pay{display:none;gap:8px}
@media (max-width:900px){.footer-pay{display:flex}}
.footer-pay span{width:38px;height:26px;border-radius:4px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;letter-spacing:.02em;color:var(--text-dim)}
@media (max-width:1199.98px){.footer-main{grid-template-columns:1fr 1fr}}
@media (max-width:767.98px){
.footer-main{grid-template-columns:1fr;gap:0;padding-top:8px}
.footer-col{border-bottom:1px solid rgba(255,255,255,.08);padding:14px 0}
.footer-col.contacts{border-bottom:0}
.footer-col.acc .footer-acc-head{cursor:pointer}
.footer-col.acc .footer-acc-chevron{display:block}
.footer-col.acc .footer-nav{max-height:0;overflow:hidden;transition:max-height .25s ease}
.footer-col.acc.open .footer-nav{max-height:600px}
.footer-col.acc.open .footer-acc-chevron{transform:rotate(180deg)}
.footer-cta,.footer-social a{min-height:44px}
}
/* ===== Quick view / Наверх / Обратная связь ===== */
.cm-qv-overlay{position:fixed;inset:0;background:rgba(20,22,23,.6);z-index:500;display:none;align-items:center;justify-content:center;padding:24px}
.cm-qv-overlay.open{display:flex}
.cm-qv{background:#fff;border-radius:10px;max-width:720px;width:100%;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;position:relative}
.cm-qv-photo{aspect-ratio:1/1;background:#EEF2EF;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cm-qv-photo img{width:100%;height:100%;object-fit:contain}
.cm-qv-body{padding:32px;display:flex;flex-direction:column;gap:14px}
.cm-qv-body h3{font-size:18px;line-height:1.35;margin:0}
.cm-qv-prices{display:flex;align-items:baseline;gap:10px}
.cm-qv-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(27,30,32,.06);border:0;color:#1B1E20;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.cm-qv-close:hover{background:rgba(27,30,32,.12)}
@media (max-width:640px){.cm-qv{grid-template-columns:1fr}}
.back-to-top{position:fixed;right:20px;bottom:20px;width:48px;height:48px;border:0;border-radius:50%;background:#1B1E20;color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,transform .2s,visibility .2s;z-index:150;box-shadow:0 4px 12px rgba(0,0,0,.25);cursor:pointer}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--accent);color:#1B1E20}
.fb-modal{position:fixed;inset:0;z-index:400;visibility:hidden}
.fb-modal.open{visibility:visible}
.fb-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .2s}
.fb-modal.open .fb-modal-overlay{opacity:1}
.fb-modal-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-46%);width:min(380px,90vw);background:#fff;border-radius:10px;padding:28px;opacity:0;transition:opacity .2s,transform .2s;box-sizing:border-box}
.fb-modal.open .fb-modal-panel{opacity:1;transform:translate(-50%,-50%)}
.fb-modal h3{font-family:var(--font-cond);font-size:19px;font-weight:700;color:#1B1E20;margin:0 0 6px}
.fb-modal p{font-size:13px;color:#6b7280;margin:0 0 18px}
.fb-close{position:absolute;top:14px;right:14px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#9AA0A5;background:none;border:0;cursor:pointer}
.fb-close:hover{color:#1B1E20}
/* ===== Cookie-баннер (визуальное переоформление старого cookie-accept.tpl только на редизайненной главной) ===== */
body.rd-main-page .cookie-consent-acform{
left:16px;right:16px;bottom:16px;top:auto;
background:#1B1E20;color:#fff;border-radius:8px;
padding:16px 20px;box-shadow:0 8px 24px rgba(0,0,0,.3);
max-width:640px;margin:0 auto;font-size:13px;font-family:var(--font-text);
text-align:left;
}
body.rd-main-page .cookie-consent-acform p{color:#c7cbce;font-size:13px;display:inline;margin-right:16px}
body.rd-main-page .cookie-consent-acform a{color:var(--accent);text-decoration:none}
body.rd-main-page .cookie-consent-acform .btn_cookie{
height:44px;padding:0 20px;background:var(--accent);color:#1B1E20;border:0;border-radius:6px;
font-family:var(--font-cond);font-weight:700;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
cursor:pointer;vertical-align:middle;margin-top:10px;
}
/* Старый виджет "наверх" (lib/top.js) дублирует новую кнопку .back-to-top — прячем на редизайненной главной */
body.rd-main-page .up_page_block{display:none !important}
body.rd-category-page{background:rgba(98,188,88,.08)}
body.rd-category-page .up_page_block{display:none !important}
/* ================= Страница категории (список товаров) ================= */
/* Старый сайдбар/обёртка страницы (#content-left/.content-row/#content-box) скрыты —
новый список товаров сам строит свой полноширинный layout (.rd-container>.cat-layout) */
body.rd-category-page #content{width:auto;max-width:none;margin:0;padding:0;text-align:left}
body.rd-category-page #content-left{display:none}
body.rd-category-page #content-box{float:none;width:auto}
body.rd-category-page .content-row{display:block}
.cat-top,.cat-chips-wrap{max-width:var(--container);margin:0 auto;padding:0 var(--sp-5)}
.cat-top{padding-top:28px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:#6b7076;margin-bottom:14px}
.crumbs a:hover{color:var(--accent)}
.crumbs span{font-size:0}
.crumbs span::before{content:"›";font-size:13px;color:#c3c7ca}
/* Последний span в цепочке — не разделитель "/", а название текущей страницы: его текст не должен прятаться */
.crumbs span:last-child{font-size:12.5px;color:#6b7076}
.crumbs span:last-child::before{content:none}
.cat-h1-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.cat-h1-row h1{font-family:var(--font-cond);font-size:30px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;margin:0}
.cat-h1-row .count{font-size:14px;color:#6b7076}
.cat-chips{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.cat-chips-list{display:flex;gap:10px;flex-wrap:wrap}
.cat-chip{padding:8px 16px;border-radius:20px;border:1px solid rgba(0,0,0,.12);font-size:13px;color:#4b5259;background:#fff;transition:border-color .15s,color .15s,background .15s}
.cat-chip:hover{border-color:var(--accent);color:var(--accent)}
.cat-chip.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
body.rd-category-page .rd-container{max-width:var(--container);margin:0 auto;padding:0 var(--sp-5)}
.cat-layout{padding-bottom:56px;display:grid;grid-template-columns:270px 1fr;column-gap:32px;row-gap:0;align-items:start;padding-top:24px}
/* .cat-sidebar и .cat-body — единственные 2 прямых grid-ребёнка .cat-layout, оба в одной
единственной строке (grid-row не задан ни одному — CSS-грид сам берёт под неё высоту max
из содержимого обоих). Раньше .cat-body не было: catalog.tpl отдавал 6 отдельных соседних
блоков (.cat-top/.cat-chips-wrap/.cat-text-top/.cat-filterbar/.cat-listing/.cat-seo-bottom)
каждый в СВОЮ пронумерованную grid-строку, а .cat-sidebar растягивался на все 6 (grid-row:1/7),
чтобы визуально быть высотой во весь контент. На страницах, где часть блоков отсутствует
(закладки, поиск, бренды без доп.текста) CSS Grid всё равно раздувает пустые строки, чтобы
уместить высокий сайдбар (spec: intrinsic-размерные треки — auto ИЛИ max-content — участвуют
в распределении места под растянутый на них элемент), и это создаёт пустой разрыв в контенте.
Фикс: только 2 прямых grid-элемента, весь контент внутри .cat-body — обычный document flow
(не грид), поэтому раздувать там просто нечего. */
.cat-layout>.cat-sidebar{grid-column:1;align-self:start;position:sticky;top:calc(var(--h-main) + 20px)}
.cat-layout>.cat-body{grid-column:2;min-width:0;border-radius:10px;overflow:hidden}
/* Простые "текстовые" страницы (профиль, мои заказы, смена пароля, статичные страницы page.tpl)
до сих пор отдают контент 3 отдельными соседними блоками (.breadcrumbs-block/h1/.text —
каждый в своей пронумерованной grid-строке 1/2/3), а не единым .cat-body. Раз у сайдбара
больше нет span на несколько строк (см. комментарий выше про catalog.tpl), эти 3 строки
остаются пустыми в его "полосе" и не растягиваются под его высоту — из-за этого сайдбар
утягивает в свою (первую) строку всю нужную ему высоту, а .breadcrumbs-block/h1/.text
съезжают вниз отдельными короткими строками, образуя пустой разрыв. Явно возвращаем сайдбару
span именно на эти 3 строки — но только на страницах с такой разметкой (:has), чтобы не
затронуть .cat-body-страницы (каталог/поиск/закладки) и однострочные (корзина/авторизация). */
.cat-layout:has(>.breadcrumbs-block)>.cat-sidebar{grid-row:1/4}
/* Рамка вокруг области контента — как у сайдбара (.cat-catalog-menu, border:1px solid rgba(0,0,0,.08)). */
.cat-layout>.cat-sidebar~*{border-left:1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08)}
.cat-layout>.cat-sidebar+*{border-top:1px solid rgba(0,0,0,.08)}
.cat-layout>*:last-child{border-bottom:1px solid rgba(0,0,0,.08)}
.cat-body>.cat-top,.cat-body>.cat-chips-wrap,.cat-body>.cat-text-top,.cat-body>.cat-filterbar,.cat-body>.cat-listing,.cat-body>.cat-seo-bottom{
margin:0;max-width:none;width:100%;box-sizing:border-box;
/* display:flow-root — .cat-body обычный block-контейнер (не grid) на любом брейкпоинте,
без BFC отступы последнего ребёнка (margin-bottom) "схлопываются" наружу, создавая
видимые зазоры между белыми блоками. flow-root даёт изолирующий BFC для каждого блока. */
display:flow-root;
background:#fff;padding-left:28px;padding-right:28px;
}
.cat-body>.cat-top{padding-top:28px}
.cat-body>.cat-text-top{font-size:14px;line-height:1.7;color:#4b5259;padding-top:4px;padding-bottom:4px}
.cat-body>.cat-filterbar{margin-bottom:0;padding-top:14px;padding-bottom:14px}
.cat-body>.cat-listing{padding-bottom:32px}
.cat-body>.cat-seo-bottom{font-size:14px;line-height:1.7;color:#4b5259;padding-top:24px;padding-bottom:32px}
.cat-body>.cat-seo-bottom h2,.cat-body>.cat-seo-bottom h3{font-family:var(--font-cond);font-size:19px;font-weight:700;color:#1B1E20;margin-bottom:12px}
.cat-body>.cat-seo-bottom p{margin-bottom:10px;max-width:900px}
/* ===== Текстовые страницы (page.tpl): хлебные крошки + h1 + WYSIWYG-текст ===== */
.cat-layout>.breadcrumbs-block{grid-column:2;grid-row:1;background:#fff;padding:24px 28px 0;margin:0;box-sizing:border-box;border-radius:10px 10px 0 0}
.cat-layout>.breadcrumbs-block ul{list-style:none;display:flex;flex-wrap:wrap;gap:2px;font-size:13px;color:#6b7076}
.cat-layout>.breadcrumbs-block li{display:flex;align-items:center;gap:6px}
.cat-layout>.breadcrumbs-block a{color:#6b7076;transition:color .15s}
.cat-layout>.breadcrumbs-block a:hover{color:var(--accent)}
.cat-layout>.breadcrumbs-block span{font-size:0}
.cat-layout>.breadcrumbs-block span::before{content:"›";font-size:13px;color:#c3c7ca}
.cat-layout>h1{grid-column:2;grid-row:2;background:#fff;padding:10px 28px 0;margin:0;box-sizing:border-box;font-family:var(--font-cond);font-size:26px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#1B1E20}
.cat-layout>.text{grid-column:2;grid-row:3;background:#fff;margin:0;padding:20px 28px 48px;box-sizing:border-box;border-radius:0 0 10px 10px;font-size:14px;line-height:1.7;color:#4b5259;min-height:0}
.cat-layout>.text h1,.cat-layout>.text h2,.cat-layout>.text h3{font-family:var(--font-cond);font-weight:700;color:#1B1E20;margin:28px 0 12px;text-transform:none}
.cat-layout>.text h1{font-size:22px}
.cat-layout>.text h2{font-size:19px}
.cat-layout>.text h3{font-size:16px}
.cat-layout>.text >:first-child,.cat-layout>.text section>:first-child,.cat-layout>.text .container>:first-child{margin-top:0}
.cat-layout>.text p{margin:0 0 12px}
.cat-layout>.text ul,.cat-layout>.text ol{padding-left:22px;margin:0 0 16px}
.cat-layout>.text li{margin-bottom:6px}
.cat-layout>.text a{color:var(--accent)}
/* ===== Новости/статьи (news.tpl, page_news.tpl) — список внутри текстовой страницы ===== */
.cat-layout>.text .products{display:grid!important;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1300px){.cat-layout>.text .products{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.cat-layout>.text .products{grid-template-columns:repeat(2,1fr)}}
.cat-layout>.text .page-news{padding-left:0!important;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:1100px){.cat-layout>.text .page-news{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cat-layout>.text .page-news{grid-template-columns:1fr}}
.cat-layout>.text .news-card{display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.08);border-radius:10px;overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s,border-color .2s}
.cat-layout>.text .news-card:hover{transform:translateY(-3px);border-color:#d5d8db;box-shadow:0 10px 24px rgba(0,0,0,.12)}
.cat-layout>.text .news-thumb{width:100%;aspect-ratio:16/10;background:#EEF2EF}
.cat-layout>.text .news-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cat-layout>.text .news-text{display:flex;flex-direction:column;flex:1;padding:18px 20px 16px}
.cat-layout>.text .news-text a.h3{display:block;font-family:var(--font-cond);font-size:17px;font-weight:700;color:#1B1E20;margin-bottom:8px}
.cat-layout>.text .news-text a.h3:hover{color:var(--accent)}
.cat-layout>.text .news-text .news-more{align-self:flex-start;font-size:13px;color:var(--accent);margin-top:6px}
.cat-layout>.text .news-text .font-data{font-size:12.5px;color:#6b7076;margin-top:auto;padding-top:14px}
.cat-layout>.text b,.cat-layout>.text strong{color:#1B1E20}
.cat-layout>.text table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:13.5px}
.cat-layout>.text th,.cat-layout>.text td{padding:10px 14px;border:1px solid rgba(0,0,0,.08);text-align:left}
.cat-layout>.text th{background:#EEF2EF;font-weight:700;color:#1B1E20}
.cat-layout>.text .workshop-prices__table-wrapper{overflow-x:auto}
.cat-layout>.text .service-page__cta{background:#EEF2EF;border-radius:10px;padding:20px 24px;margin-top:24px}
.cat-layout>.text .service-page__cta h2{margin-top:0}
.cat-layout>.text blockquote{background:#EEF2EF !important;border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:14px 20px !important;margin:16px 0 !important;font-style:normal}
/* ===== Подкатегории (getProductTimer.tpl "Успей купить" и т.п.) — тот же вид, что .cat-chip в каталоге ===== */
.cat-layout>.text .category-group{display:flex !important;flex-wrap:wrap;gap:10px;margin:20px 0;text-align:left !important;padding-top:0 !important}
.cat-layout>.text .category-list{margin:0 !important;border:0 !important;background:none !important}
.cat-layout>.text .category-list img{display:none}
.cat-layout>.text .category-list>a{display:inline-flex !important;align-items:center;height:auto !important;width:auto !important;padding:8px 16px;border-radius:20px;border:1px solid rgba(0,0,0,.12);background:#fff;color:#4b5259;text-decoration:none;transition:border-color .15s,color .15s}
.cat-layout>.text .category-list:hover>a{border-color:var(--accent);color:var(--accent);text-decoration:none}
.cat-layout>.text .category-list span{display:inline;font-family:var(--font-text);font-weight:400;font-size:13px;color:inherit;height:auto;width:auto;padding:0}
/* ===== Текстовые страницы, обёрнутые в один .cat-page-content (page.tpl/photogalereya.tpl) =====
В отличие от старой схемы .cat-layout>.breadcrumbs-block/h1/.text (3 прямых grid-ребёнка,
grid-row 1/2/3 + сайдбар с принудительным span :has(>.breadcrumbs-block){grid-row:1/4}),
здесь всё содержимое — ОДИН grid-элемент .cat-page-content, а сайдбар не растягивается на
несколько строк (см. комментарий про .cat-body выше) — поэтому пустых разрывов не возникает
независимо от того, сколько блоков (breadcrumbs/h1/.gallery×N/.text) внутри шаблона. */
.cat-layout>.cat-page-content{grid-column:2;min-width:0;background:#fff;border-radius:10px;overflow:hidden}
.cat-page-content>.breadcrumbs-block{background:#fff;padding:24px 28px 0;margin:0;box-sizing:border-box}
.cat-page-content>.breadcrumbs-block ul{list-style:none;display:flex;flex-wrap:wrap;gap:2px;font-size:13px;color:#6b7076}
.cat-page-content>.breadcrumbs-block li{display:flex;align-items:center;gap:6px}
.cat-page-content>.breadcrumbs-block a{color:#6b7076;transition:color .15s}
.cat-page-content>.breadcrumbs-block a:hover{color:var(--accent)}
.cat-page-content>.breadcrumbs-block span{font-size:0}
.cat-page-content>.breadcrumbs-block span::before{content:"›";font-size:13px;color:#c3c7ca}
.cat-page-content>h1{background:#fff;padding:10px 28px 0;margin:0;box-sizing:border-box;font-family:var(--font-cond);font-size:26px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#1B1E20}
.cat-page-content>.gallery{background:#fff;padding:16px 28px 0;box-sizing:border-box;display:flex;flex-wrap:wrap;gap:16px}
.cat-page-content>.gallery:empty{display:none}
.cat-page-content>.clear{background:#fff}
.cat-page-content .gallery-block{width:180px;text-align:center;padding:12px 12px 14px;border:1px solid rgba(0,0,0,.08);border-radius:10px;transition:border-color .15s,box-shadow .15s}
.cat-page-content .gallery-block:hover{border-color:var(--accent);box-shadow:0 6px 16px rgba(0,0,0,.08)}
.cat-page-content .gallery-block a.selected{display:block}
.cat-page-content .gallery-block img{display:block;margin:0 auto;max-width:100%;height:auto}
.cat-page-content .gallery-block-name{font-size:14px;font-weight:600;color:#1B1E20;margin-top:10px}
.cat-page-content .gallery-block-counter{margin-top:2px}
.cat-page-content .gallery-block-counter a{font-size:13px;color:#6b7076}
.cat-page-content .gallery-block-counter a:hover{color:var(--accent)}
.cat-page-content .gallery-img-prev{display:block;width:160px!important;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,.08)}
.cat-page-content .gallery-img-prev img{display:block;width:100%;height:120px;object-fit:cover}
.cat-page-content>.text{background:#fff;margin:0;padding:20px 28px 48px;box-sizing:border-box;font-size:14px;line-height:1.7;color:#4b5259;min-height:0}
.cat-page-content>.text h1,.cat-page-content>.text h2,.cat-page-content>.text h3{font-family:var(--font-cond);font-weight:700;color:#1B1E20;margin:28px 0 12px;text-transform:none}
.cat-page-content>.text h1{font-size:22px}
.cat-page-content>.text h2{font-size:19px}
.cat-page-content>.text h3{font-size:16px}
.cat-page-content>.text >:first-child,.cat-page-content>.text section>:first-child,.cat-page-content>.text .container>:first-child{margin-top:0}
.cat-page-content>.text p{margin:0 0 12px}
.cat-page-content>.text ul,.cat-page-content>.text ol{padding-left:22px;margin:0 0 16px}
.cat-page-content>.text li{margin-bottom:6px}
.cat-page-content>.text a{color:var(--accent)}
.cat-page-content>.text .products{display:grid!important;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1300px){.cat-page-content>.text .products{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.cat-page-content>.text .products{grid-template-columns:repeat(2,1fr)}}
.cat-page-content>.text .page-news{padding-left:0!important;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:1100px){.cat-page-content>.text .page-news{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cat-page-content>.text .page-news{grid-template-columns:1fr}}
.cat-page-content>.text .news-card{display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.08);border-radius:10px;overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s,border-color .2s}
.cat-page-content>.text .news-card:hover{transform:translateY(-3px);border-color:#d5d8db;box-shadow:0 10px 24px rgba(0,0,0,.12)}
.cat-page-content>.text .news-thumb{width:100%;aspect-ratio:16/10;background:#EEF2EF}
.cat-page-content>.text .news-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cat-page-content>.text .news-text{display:flex;flex-direction:column;flex:1;padding:18px 20px 16px}
.cat-page-content>.text .news-text a.h3{display:block;font-family:var(--font-cond);font-size:17px;font-weight:700;color:#1B1E20;margin-bottom:8px}
.cat-page-content>.text .news-text a.h3:hover{color:var(--accent)}
.cat-page-content>.text .news-text .news-more{align-self:flex-start;font-size:13px;color:var(--accent);margin-top:6px}
.cat-page-content>.text .news-text .font-data{font-size:12.5px;color:#6b7076;margin-top:auto;padding-top:14px}
.cat-page-content>.text b,.cat-page-content>.text strong{color:#1B1E20}
.cat-page-content>.text table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:13.5px}
.cat-page-content>.text th,.cat-page-content>.text td{padding:10px 14px;border:1px solid rgba(0,0,0,.08);text-align:left}
.cat-page-content>.text th{background:#EEF2EF;font-weight:700;color:#1B1E20}
.cat-page-content>.text .workshop-prices__table-wrapper{overflow-x:auto}
.cat-page-content>.text .service-page__cta{background:#EEF2EF;border-radius:10px;padding:20px 24px;margin-top:24px}
.cat-page-content>.text .service-page__cta h2{margin-top:0}
.cat-page-content>.text blockquote{background:#EEF2EF !important;border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:14px 20px !important;margin:16px 0 !important;font-style:normal}
.cat-page-content>.text .category-group{display:flex !important;flex-wrap:wrap;gap:10px;margin:20px 0;text-align:left !important;padding-top:0 !important}
.cat-page-content>.text .category-list{margin:0 !important;border:0 !important;background:none !important}
.cat-page-content>.text .category-list img{display:none}
.cat-page-content>.text .category-list>a{display:inline-flex !important;align-items:center;height:auto !important;width:auto !important;padding:8px 16px;border-radius:20px;border:1px solid rgba(0,0,0,.12);background:#fff;color:#4b5259;text-decoration:none;transition:border-color .15s,color .15s}
.cat-page-content>.text .category-list:hover>a{border-color:var(--accent);color:var(--accent);text-decoration:none}
.cat-page-content>.text .category-list span{display:inline;font-family:var(--font-text);font-weight:400;font-size:13px;color:inherit;height:auto;width:auto;padding:0}
/* ===== Страница товара (product.tpl) ===== */
.cat-layout>#left_box:not(.cat-listing){grid-column:2;grid-row:1;background:#fff;padding:24px 28px 40px;box-sizing:border-box;border-radius:10px;min-width:0}
#left_box .breadcrumbs-block{margin-bottom:14px}
#left_box .breadcrumbs-block ul{list-style:none;display:flex;flex-wrap:wrap;gap:2px;font-size:13px;color:#6b7076}
#left_box .breadcrumbs-block li{display:flex;align-items:center;gap:6px}
#left_box .breadcrumbs-block a{color:#6b7076;transition:color .15s}
#left_box .breadcrumbs-block a:hover{color:var(--accent)}
#left_box .breadcrumbs-block span{font-size:0}
#left_box .breadcrumbs-block span::before{content:"›";font-size:13px;color:#c3c7ca}
#left_box>#indicator_catalog>div>h1{font-family:var(--font-cond);font-size:26px;font-weight:700;letter-spacing:.01em;margin:0 0 20px;text-transform:none}
#left_box .hide{display:none}
#left_box .clear{height:0;line-height:0}
#left_box .about-product-info{display:grid;grid-template-columns:minmax(260px,450px) minmax(0,1fr);gap:32px;align-items:start;margin-bottom:32px}
@media (max-width:1100px){#left_box .about-product-info{grid-template-columns:minmax(0,1fr)}}
#left_box .about-product-info>.img-box{grid-column:1;grid-row:1}
#left_box .about-product-info>.about-product-info-box{grid-column:2;grid-row:1}
#left_box .about-product-info>.clear{display:none}
#left_box .about-product-info>#quick_pictogramm{grid-column:1/-1;grid-row:2}
#left_box .about-product-info>.desc_product{grid-column:1/-1;grid-row:3;margin-top:24px}
#left_box .about-product-info>.share{grid-column:1/-1;grid-row:4;margin-top:20px}
@media (max-width:1100px){#left_box .about-product-info>.about-product-info-box{grid-column:1;grid-row:auto}}
#left_box .img-box{display:flex;flex-direction:column;min-width:0}
#left_box .tovar-photos{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:6px;box-sizing:border-box;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
#left_box .big-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
#left_box .big-img #big_image_box{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
#left_box .big-img a{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
#left_box .big-img img{max-width:100%;max-height:100%;object-fit:contain;display:block}
#left_box #discount_product{top:8px!important;right:8px!important;background:#E14B3D;color:#fff;border-radius:6px;font-family:var(--font-cond);font-weight:700;font-size:13px}
#left_box #discount_product span{padding:5px 10px!important;display:block}
#left_box a#lupa{display:none}
/* Блок "Оценка покупателей: ★★★★★ N отзывов" — раньше отступы между надписью, звёздами
и счётчиком отзывов были рваными (зависели от переносов строк в самом шаблоне), теперь
ровный ряд на flex с одинаковым отступом между всеми тремя частями. */
#left_box .rating{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13.5px;color:#4b5259;margin-bottom:8px}
#left_box .rating-label{color:#4b5259}
#left_box .rating-stars{display:inline-flex;align-items:center;gap:2px;line-height:0}
#left_box .rating-stars img{width:16px;height:14px;display:block}
#left_box .rating-count{color:#6b7076}
#left_box .product-icon{position:absolute;top:8px;left:8px;z-index:2}
#left_box .sm-photos{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;justify-content:center}
#left_box .sm-photos a{width:64px;height:64px;flex:none;border:2px solid transparent;border-radius:8px;background:#fff;padding:5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;transition:border-color .15s}
#left_box .sm-photos a.active{border-color:var(--accent)}
#left_box .sm-photos a img{max-width:100%;max-height:100%;object-fit:contain}
#left_box .sm-photos-rail{padding:0 4px}
#left_box .sm-photos.cm-rail-track{flex-wrap:nowrap;gap:10px;justify-content:flex-start}
#left_box .sm-photos.cm-rail-track a{scroll-snap-align:start}
#left_box .about-product-info-box{display:flex;flex-direction:column;gap:14px}
#left_box .prod-brand-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#left_box .is_brand a{display:flex}
#left_box .is_brand img{max-height:32px;width:auto}
#left_box .product-price-box{display:flex;flex-direction:column;gap:10px}
#left_box .price-wrapper{display:flex;flex-direction:column;gap:6px}
#left_box .product-price .number{font-family:'Inter',sans-serif;font-size:34px;font-weight:700;color:#1B1E20}
#left_box .product-price .number b{font-weight:700}
#left_box .product-price sup{margin-left:10px;font-size:16px;color:#9AA0A5}
#left_box .product-price sup strike{font-size:16px!important}
#left_box .price-wrapper>div:last-child a{font-size:13px;color:#2E6B29}
#left_box a[rel="best-price"]{color:#2E6B29}
#left_box .price-wrapper>div:last-child a:hover{text-decoration:underline}
#left_box .prod-buy-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
#left_box .buy_button{order:2;flex:1;min-width:200px;margin-top:0;background:linear-gradient(135deg,var(--accent),#4a9f42);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35);border:0;border-radius:6px;height:54px;padding:0 28px;font-family:'Inter',sans-serif;font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:filter .15s}
#left_box .buy_button:hover{filter:brightness(1.08)}
/* ===== Кнопка "Оформить заказ" (basket_detailed.tpl) ===== */
#order_button{text-align:left;margin-top:24px}
#order_button button{background:linear-gradient(135deg,var(--accent),#4a9f42) !important;background-position:0 0 !important;width:auto !important;height:54px !important;padding:0 32px;border:0;border-radius:6px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35);font-family:'Inter',sans-serif;font-size:16px !important;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:filter .15s}
#order_button button:hover{filter:brightness(1.08);background-position:0 0 !important}
#left_box #tinkoff-btn-wrap{order:1;margin:0!important;text-align:left!important}
#left_box .warehouse-wrapper{font-size:13.5px;color:#4b5259;margin-top:8px;background:#EEF2EF;border-radius:10px;padding:16px 18px}
#left_box .warehouse-wrapper>b{display:block;color:#1B1E20;margin-bottom:10px}
#left_box .warehouse-wrapper ul{list-style:none;display:block}
/* Список сделан обычным блочным (не flex), потому что в Chrome абсолютно спозиционированный
потомок (всплывающая подсказка с адресом) flex-элемента иногда неверно считает top:% —
подсказка "прыгала" наверх поверх самой строки вместо появления под ней. */
#left_box .warehouse-wrapper li{position:relative;cursor:default;width:fit-content;display:block;margin-bottom:8px}
#left_box .warehouse-wrapper li:last-child{margin-bottom:0}
#left_box .warehouse-wrapper .notice{color:#2E6B29;font-weight:600}
#left_box .warehouse-wrapper .no_warehouse .notice,#left_box .warehouse-wrapper .notice.no_warehouse{color:#6b7076;font-weight:400}
#left_box .warehouse-wrapper li>div{display:none;position:absolute;left:0;top:calc(100% + 8px);background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:8px;box-shadow:0 12px 28px rgba(0,0,0,.14);padding:12px 14px;z-index:10;font-size:12.5px;line-height:1.5;color:#333;white-space:nowrap}
#left_box .warehouse-wrapper li:hover>div{display:block}
#left_box .warehouse-wrapper li>div table{border-collapse:collapse}
#left_box .warehouse-wrapper li>div td,#left_box .warehouse-wrapper li>div th{padding:2px 7px;text-align:center;font-size:12px}
#left_box #quick_pictogramm{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch;margin-top:16px}
#left_box #quick_pictogramm .pict-item{background:#EEF2EF;border-radius:10px;padding:18px 20px}
#left_box #quick_pictogramm .pict-item div{font-size:13px;line-height:1.5;color:#4b5259}
#left_box #quick_pictogramm .pict-item div b{display:block;font-size:13.5px;color:#1B1E20;margin-bottom:2px}
@media (max-width:900px){
#left_box #quick_pictogramm{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
#left_box #quick_pictogramm{grid-template-columns:1fr}
}
#left_box #basket_added{display:none;color:var(--accent);font-weight:600;font-size:13.5px;margin-top:6px}
#left_box #basket_added.show{display:block}
#left_box #result_notify{background:#EEF2EF;border-radius:8px;padding:14px 16px}
#left_box #result_notify input{height:38px;border:1px solid rgba(0,0,0,.15);border-radius:6px;padding:0 10px;font:inherit;font-size:13px}
#left_box #result_notify .send{height:38px;padding:0 16px;background:var(--accent);color:#fff;border-radius:6px;font-weight:600;font-size:13px;margin-left:8px}
#left_box .fav-products{font-size:13px;margin-top:4px}
#left_box .fav-products a{display:inline-flex;align-items:center;gap:6px;color:#4b5259}
#left_box .fav-products a:hover{color:var(--accent)}
#left_box #tabs-product{margin-top:8px}
/* Дисклеймер "Важно! Продажа...с 18 лет" под контентом вкладок товара — раньше голый
текст без оформления, теперь аккуратная предупреждающая плашка с иконкой. */
#left_box .product-legal-notice{display:flex;gap:12px;align-items:flex-start;margin:16px 0;padding:14px 16px;background:#FFF8E6;border:1px solid #F5E1A8;border-left:3px solid #D9A400;border-radius:10px;font-size:12.5px;line-height:1.55;color:#6b5c1f}
#left_box .product-legal-notice svg{flex:none;color:#D9A400;margin-top:1px}
#left_box .product-legal-notice-text b{display:block;color:#5c4d1a;margin-bottom:4px}
#left_box .tabs-main-arrow{display:none}
#left_box .tabs-header{display:flex;gap:4px;border-bottom:1px solid rgba(0,0,0,.1);margin-bottom:24px;flex-wrap:wrap}
#left_box .tabs-header>div{padding:14px 20px;font-family:var(--font-cond);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:#6b7076;border-bottom:2px solid transparent;cursor:pointer;transition:color .15s,border-color .15s}
#left_box .tabs-header>div:hover{color:#1B1E20}
#left_box .tabs-header>div.active{color:#1B1E20;border-color:var(--accent)}
#left_box .tabs-content>div{display:none;font-size:14.5px;line-height:1.75;color:#333}
/* Описание товара — произвольный HTML из админки; иногда содержит "сырые" картинки без
ограничения ширины (например 900px промо-баннер), которые на мобильном вызывали
горизонтальный скролл всей страницы. */
#left_box .tabs-content img{max-width:100%;height:auto}
#left_box .tabs-content>div.active{display:block}
#left_box .tabs-content input[type="text"],#left_box .tabs-content input[type="email"],#left_box .tabs-content textarea{border:1px solid rgba(0,0,0,.15);border-radius:6px;padding:9px 12px;font:inherit;font-size:13.5px;width:100%;max-width:400px;box-sizing:border-box;margin:4px 0 14px;display:block}
#left_box .tabs-content textarea{max-width:600px;min-height:100px}
#left_box .tabs-content button{height:42px;padding:0 22px;background:var(--accent);color:#fff;border-radius:6px;font-weight:600;font-size:13.5px}
#left_box .tabs-content button:hover{filter:brightness(1.08)}
#left_box .tabs-content [id^="comments_"]{max-width:760px}
#left_box .tabs-content [id^="comments_"]>h1{font-family:var(--font-cond);font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:#1B1E20;margin-bottom:18px}
#left_box .tabs-content [id^="comments_"]>h1 a{font-size:13px;font-weight:600;color:var(--accent);text-transform:none;letter-spacing:0}
#left_box .tabs-content [id^="comments_"]>h1 a:hover{text-decoration:underline}
#left_box .tabs-content [id^="comments_"] h2{font-family:var(--font-cond);font-size:17px;font-weight:700;color:#1B1E20;margin:28px 0 16px;text-transform:none}
#left_box .tabs-content [id^="comments_"]>div>span{display:block;margin-bottom:4px}
#left_box .tabs-content [id^="comments_"] p{font-size:13.5px;color:#4b5259;margin:2px 0 8px}
#left_box .tabs-content [id^="comments_"] p strong{color:#1B1E20}
#left_box .comments_form{background:#EEF2EF;border-radius:10px;padding:20px 24px;margin-top:6px}
#left_box .comments_form table,#left_box .comments_form tbody,#left_box .comments_form tr,#left_box .comments_form td{display:block;width:auto}
#left_box .comments_form p{margin:0 0 14px;font-size:13.5px}
#left_box .comments_form p strong{display:block;font-size:12.5px;font-weight:600;color:#4b5259;margin-bottom:6px}
#left_box .comments_form input,#left_box .comments_form textarea{max-width:420px!important}
#left_box .comments_form textarea{max-width:600px!important}
#left_box .comments_form td[align="right"]{text-align:left!important}
#left_box .tabs-content h1,#left_box .tabs-content h3{font-family:var(--font-cond);font-size:18px;font-weight:700;color:#1B1E20;margin:20px 0 10px}
#left_box .tabs-content p{margin-bottom:12px}
#left_box .tabs-content ul{padding-left:20px;margin-bottom:14px}
#left_box .chars-product{display:flex;flex-direction:column;max-width:760px}
#left_box .chars-product>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(0,0,0,.08);font-size:14px}
#left_box .chars-product>div>b{color:#6b7076;font-weight:400;flex:0 0 45%}
#left_box .chars-product>div>div{color:#1B1E20;font-weight:600;text-align:right}
#left_box .prod-related-wrap,#left_box .products-main{margin-top:32px}
#left_box .desc_product>.h1{margin-top:32px}
#left_box .prod-related-wrap h1,#left_box .products-main .h1,#left_box .desc_product>.h1{font-family:var(--font-cond);font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin-bottom:16px}
#left_box .prod-related-wrap .cm-rail{padding:0 4px}
#left_box .prod-related-wrap .cm-card{flex:0 0 220px}
/* ===== "Похожие товары" (like_product.tpl, слайдер slick) — карточка в стиле cm-card ===== */
#left_box .slider-wrap-like{position:relative;padding:0 4px}
#left_box .slider-like{overflow:hidden}
#left_box .slider-like ul{display:flex;gap:20px;list-style:none}
#left_box .slider-like li{flex:0 0 220px;min-width:0}
#left_box .slider-like:not(.slick-initialized) ul{overflow-x:auto;scrollbar-width:none}
#left_box .slider-like:not(.slick-initialized) ul::-webkit-scrollbar{display:none}
#left_box .products-main .product{position:relative;height:100%;display:flex;flex-direction:column;border:1px solid rgba(27,30,32,.12);border-radius:8px;overflow:hidden;background:#fff;color:#1B1E20;transition:transform .2s,border-color .2s,box-shadow .2s}
#left_box .products-main .product:hover{transform:translateY(-3px);border-color:#d5d8db;box-shadow:0 10px 24px rgba(0,0,0,.12)}
#left_box .products-main .product .img-box{position:relative;aspect-ratio:1/1;padding:14px;box-sizing:border-box;background:#fff;display:flex;align-items:center;justify-content:center}
#left_box .products-main .product .img-box img{max-width:100%;max-height:100%;object-fit:contain}
#left_box .products-main .product .img-box img.sale{position:absolute;top:8px;left:8px;width:auto;max-width:56px;height:auto;max-height:none;z-index:1}
#left_box .products-main .product .size_block{position:absolute;top:8px;right:8px;z-index:1;background:#E14B3D;color:#fff;font-size:12px;font-weight:700;padding:4px 9px;border-radius:5px}
#left_box .products-main .product .name{padding:12px 14px 0;font-size:14px;line-height:1.35;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#left_box .products-main .product .name a{color:#1B1E20}
#left_box .products-main .product .name a:hover{color:var(--accent)}
#left_box .products-main .product .price{padding:8px 14px 0;font-family:'Inter',sans-serif;font-size:20px;font-weight:700;color:#1B1E20}
#left_box .products-main .product .basket_added{display:none}
#left_box .products-main .product .buy,#left_box .products-main .product .detailed{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 14px 14px;height:44px;border-radius:6px;font-weight:600;font-size:13.5px;cursor:pointer}
#left_box .products-main .product .buy{background:linear-gradient(135deg,var(--accent),#4a9f42);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35);border:0}
#left_box .products-main .product .buy:hover{filter:brightness(1.08)}
#left_box .products-main .product .detailed{display:none}
#left_box .prev-like,#left_box .next-like{position:absolute;top:38%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 4px 12px rgba(0,0,0,.12);cursor:pointer;z-index:2;color:#1B1E20;transition:background .18s,color .18s}
#left_box .prev-like:hover,#left_box .next-like:hover{background:var(--accent);color:#fff}
#left_box .prev-like{left:-16px}
#left_box .next-like{right:-16px}
#left_box .prev-like::before{content:"‹";font-size:20px;line-height:1}
#left_box .next-like::before{content:"›";font-size:20px;line-height:1}
/* ===== "Вы недавно смотрели" (history_product.tpl) ===== */
#left_box .you_look{gap:20px}
#left_box .product-history-block{flex:0 0 240px;width:240px;margin:0;font-size:13px;border:1px solid rgba(27,30,32,.12);border-radius:8px;overflow:hidden;background:#fff;scroll-snap-align:start;transition:transform .2s,border-color .2s,box-shadow .2s}
#left_box .product-history-block:hover{transform:translateY(-3px);border-color:#d5d8db;box-shadow:0 10px 24px rgba(0,0,0,.12)}
#left_box .product-history-block .img-box{width:100%;aspect-ratio:1/1;padding:14px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
#left_box .product-history-block .img-box img{max-width:100%;max-height:100%;object-fit:contain}
#left_box .product-history-block .name{padding:0 14px 14px}
#left_box .product-history-block .name a{color:#1B1E20;font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#left_box .product-history-block .name a:hover{color:var(--accent)}
.cat-mobile-bar{display:none;gap:10px;margin-bottom:18px}
.cat-mobile-btn{flex:1;min-height:46px;border:1px solid rgba(0,0,0,.15);border-radius:8px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13.5px;font-weight:600}
.cat-mobile-btn svg{color:var(--accent)}
.cat-sidebar{display:flex;flex-direction:column;gap:16px}
.cat-catalog-menu{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:14px 4px}
/* Блок с полезными разделами (ТИР, оптовые поставки, аренда и т.п.) под каталожным меню
в левом сайдбаре каталога/карточки товара. */
.cat-side-info{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:6px 0;flex:none}
.cat-side-info-list{list-style:none;display:flex;flex-direction:column}
.cat-side-info-list a{display:block;padding:9px 16px;font-size:13.5px;color:#4b5259;transition:color .15s,background-color .15s}
.cat-side-info-list a:hover{color:var(--accent);background:#F3FAF2}
.cat-side-social{background:#EEF2EF;border-radius:10px;padding:16px;text-align:center;flex:none}
.cat-side-social-title{font-family:var(--font-cond);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:#1B1E20;margin-bottom:14px}
.cat-side-social-icons{display:flex;justify-content:center;gap:10px}
.cat-side-social-icons img{width:40px;height:40px;border-radius:10px;display:block}
.cat-side-rating{display:block;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:14px;text-align:center;color:inherit;flex:none}
.cat-side-rating-top{display:flex;align-items:center;justify-content:center;gap:6px;font-size:18px;font-weight:700;color:#1B1E20}
.cat-side-rating-top svg{color:#E14B3D;flex:none}
.cat-side-rating-stars{color:#F2B705;font-size:16px;letter-spacing:1px}
.cat-side-rating-caption{display:block;margin-top:6px;font-size:12px;color:#6b7076}
.cat-catalog-title{font-family:var(--font-cond);font-size:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#1B1E20;padding:2px 16px 12px}
.cat-catalog-list ul{list-style:none}
.cat-catalog-list>ul>li{display:flex;flex-direction:column}
.cat-catalog-list>ul>li>a{display:block;padding:10px 16px;font-size:13.5px;color:#333;border-radius:6px;transition:background .15s,color .15s}
.cat-catalog-list>ul>li>a:hover{background:#EEF2EF;color:var(--accent)}
.cat-catalog-list>ul>li>a.selected_menu,.cat-catalog-list>ul>li>a.active{color:var(--accent);font-weight:700;background:#EEF2EF}
.cat-catalog-list a.sale,.drawer a.sale{color:var(--accent);font-weight:700}
.cat-catalog-list ul ul{display:flex;flex-direction:column;padding:2px 0 8px 14px}
.cat-catalog-list ul ul a{display:block;padding:7px 16px;font-size:13px;color:#666;border-radius:6px;transition:background .15s,color .15s}
.cat-catalog-list ul ul a:hover{background:#EEF2EF;color:var(--accent)}
.cat-catalog-list ul ul a.active,.cat-catalog-list ul ul a.selected_menu{color:var(--accent);font-weight:700;background:#EEF2EF}
.cat-catalog-list ul ul ul{padding:2px 0 6px 14px}
.cat-catalog-list ul ul ul a{font-size:12px;color:#6b7076}
.cat-catalog-list ul ul ul a.active,.cat-catalog-list ul ul ul a.selected_menu{color:var(--accent);font-weight:700;background:#EEF2EF}
/* ===== Фильтры (podbor.tpl) — простой вариант: всегда видимые select/input в ряд, без попапов ===== */
.cat-filterbar{background:#fff;border-radius:10px;padding:14px 16px;margin-bottom:20px}
.cat-fltr-sheet-head,.cat-fltr-sheet-foot{display:none}
.cat-filterbar #podbor{font-size:13px}
.cat-filterbar form{display:block}
.cat-fltr-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px}
.cat-fltr{position:static;border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.cat-fltr-legend{display:none}
.cat-fltr-panel{position:static;width:auto;background:none;border:0;box-shadow:none;padding:0;z-index:auto;display:block}
.cat-fltr-reset{margin-left:auto;align-self:center;font-size:12.5px;font-weight:600;color:var(--accent);white-space:nowrap;background:none;border:0;padding:0}
.cat-fltr-reset:hover{text-decoration:underline}
.cat-price-inputs{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cat-price-inputs input{width:90px;min-width:0;height:38px;border:1px solid rgba(0,0,0,.15);border-radius:6px;padding:0 10px;font:inherit;font-size:13px}
.cat-price-inputs input:focus{outline:0;border-color:var(--accent)}
.cat-price-inputs span{color:#9ca3af;font-size:12px}
.cat-fltr-panel select{width:170px;height:38px;border:1px solid rgba(0,0,0,.15);border-radius:6px;padding:0 10px;font:inherit;font-size:13px;background:#fff}
#slider_ui_block{width:170px}
.cat-check-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:4px 18px}
.cat-check{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:13.5px;cursor:pointer;color:#333}
.cat-check input{width:17px;height:17px;accent-color:var(--accent);flex:none;margin:0}
.cat-check .cnt{color:#9ca3af;font-size:12px}
/* Служебная пустая кнопка-триггер формы podbor (её видимый дублёр — #count_podbor_result) — в оригинале пряталась старым CSS */
#podborSubmitBtn{display:none}
/* Служебные индикаторы podbor.tpl (старый попап числа найденных товаров) — раньше были position:absolute
через старый CSS, которого теперь нет на странице категории; без display:none они рендерились как
обычные блоки с и раздували отступ сверху блока фильтров */
#count_podbor_result,#mini-indicator{display:none}
/* Слайдер цены (jQuery UI) — старое оформление шло картинками-спрайтами из css/base/all.css,
которое мы отключили на странице категории; делаем плоский современный вид без старых PNG. */
#slider_ui_block{position:relative;height:20px;margin-top:4px}
.cat-filterbar .ui-slider{position:relative;height:4px;background:rgba(0,0,0,.12);border-radius:2px;top:8px}
.cat-filterbar .ui-widget-content{height:4px;background:none}
.cat-filterbar .ui-widget-header{background:var(--accent)}
.cat-filterbar .ui-slider .ui-slider-range{position:absolute;top:0;height:100%;border-radius:2px;z-index:1}
.cat-filterbar .ui-slider .ui-slider-handle{position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;margin-left:-8px;
background:#fff;border:3px solid var(--accent);border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer;outline:none;z-index:2}
@media (max-width:767.98px){
.cat-fltr-row{flex-direction:column;align-items:stretch;gap:2px}
.cat-fltr-btn{width:100%;justify-content:space-between;border:0;border-bottom:1px solid rgba(0,0,0,.06);border-radius:0;padding:14px 0}
.cat-fltr-panel{position:static;box-shadow:none;border:0;width:auto;padding:0 0 14px}
.cat-fltr-reset{margin:14px 0 0;align-self:flex-start}
}
.cat-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
/* ===== navigation.tpl (сортировка/кол-во/вид) — лёгкий рескин, разметка/AJAX не тронуты ===== */
.cat-listing .navigation{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px;font-size:13px;color:#4b5259}
.cat-listing .navigation>.clear{display:none}
.cat-listing .sorting{display:flex;align-items:center;gap:10px;flex-wrap:wrap;grid-column:1;justify-self:start}
.cat-listing .pages{display:contents}
.cat-listing .cat-nav-meta{display:none}
.cat-listing #sorting_pages{grid-column:3;justify-self:end}
.cat-listing .sorting_border{display:flex;align-items:center;gap:4px;border:0!important}
.cat-listing .sorting a{color:#4b5259;font-weight:600}
.cat-listing .sorting a.active{color:var(--accent)}
.cat-listing .pages .sorting_border a{height:32px;min-width:32px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;color:#4b5259}
.cat-listing .pages .sorting_border a.active{background:var(--accent);color:#fff}
.cat-listing #sorting_pages{display:flex;align-items:center;gap:6px}
.cat-listing #sorting_pages span{color:#6b7076}
.cat-listing #catalog_row,.cat-listing #catalog_list{display:inline-flex;width:32px;height:32px;border-radius:6px;background:#EEF2EF;cursor:pointer}
.cat-listing #catalog_row.active,.cat-listing #catalog_list.active{background:var(--accent)}
.cat-select{height:40px;border:1px solid rgba(0,0,0,.15);border-radius:6px;padding:0 30px 0 12px;font:inherit;font-size:13px;background:#fff url('data:image/svg+xml;utf8,') no-repeat right 8px center/16px;appearance:none;-webkit-appearance:none;cursor:pointer}
.cat-select:focus{outline:0;border-color:var(--accent)}
/* Новый прелоадер вместо старого ind_1.gif для ajax-подгрузки каталога (сортировка/пагинация/фильтры) */
.cat-listing{position:relative}
.cat-listing #ajax_loading_indicator{display:none}
.cat-listing #ajax_loading_indicator_box{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.6);border-radius:10px}
.cat-listing #ajax_loading_indicator_box::after{content:"";width:40px;height:40px;border-radius:50%;border:4px solid rgba(98,188,88,.2);border-top-color:var(--accent);animation:cat-spin .7s linear infinite}
@keyframes cat-spin{to{transform:rotate(360deg)}}
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cat-grid .cm-card{overflow:visible}
.cat-badge-order,.cm-badge-order{padding:4px 18px 4px 10px;clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}
.cat-empty{display:none;flex-direction:column;align-items:center;gap:14px;padding:64px 20px;text-align:center;color:#6b7280}
.cat-empty.show{display:flex}
.cat-empty svg{color:#c3c7ca}
.cat-loadmore-wrap{display:flex;flex-direction:column;align-items:center;gap:24px;margin-top:32px}
#sorting_pages ul{display:flex;gap:6px;list-style:none;flex-wrap:wrap;justify-content:center}
#sorting_pages ul li{}
#sorting_pages ul li a,#sorting_pages ul li.active{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;font-size:13px;font-weight:600;color:#4b5259}
#sorting_pages ul li a:hover{background:#EEF2EF}
#sorting_pages ul li.active{background:var(--accent);color:#fff}
#sorting_pages span{display:none}
/* Пагинация в mobile-сетке .navigation (1fr auto 1fr) сжималась в узкую grid-колонку
(~100px), из-за чего flex-wrap рвал номера страниц на кривые центрированные пары.
На мобильной отдаём сортировке и пагинации каждой отдельную полноширинную строку. */
@media (max-width:767.98px){
.cat-listing .navigation{grid-template-columns:1fr}
.cat-listing .sorting{display:none}
.cat-listing #sorting_pages{grid-column:1;justify-self:stretch;width:100%}
#sorting_pages ul{justify-content:flex-start}
}
/* Нижняя пагинация под сеткой товаров: отдельная служебная плашка "Страница N"
(индикатор для скрытой кнопки автоподгрузки) скрываем — пользователю она не нужна,
саму пагинацию центрируем с отступом сверху/снизу */
.page-number{display:none!important}
.cat-listing .cat-bottom-pagination{justify-content:center;margin:32px 0 8px}
.cat-bottom-pagination ul{justify-content:center}
.cat-seo{max-width:var(--container);margin:0 auto;padding:0 var(--sp-5) 56px}
.cat-sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.cat-sheet-overlay.open{opacity:1;visibility:visible}
@media (max-width:1199.98px){
.cat-layout{grid-template-columns:220px 1fr}
.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
.cat-layout{display:block}
.cat-sidebar{display:none}
.cat-mobile-bar{display:flex}
.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* На мобильном #left_box наследовал десктопные боковые отступы (28px), рассчитанные на
"плавающую карточку" рядом с сайдбаром — вместе с отступом .rd-container это съедало
почти треть ширины экрана, из-за чего карточки/карусели внутри выглядели зажатыми и
местами вылезали за пределы экрана (горизонтальный скролл). Сильно уменьшаем отступы. */
.cat-layout>#left_box:not(.cat-listing){padding:16px 12px 32px}
}
@media (max-width:480px){
/* Узкие телефоны: 1 товар в строке вместо 2 — карточка широкая, поэтому шрифты
оставляем обычного размера (без урезания, как было нужно для тесных 2 колонок) */
.cat-grid{grid-template-columns:minmax(0,1fr)}
}
/* ===== Корзина (basket_detailed.tpl) — полноценный редизайн, разметка/JS не тронуты =====
Фон страницы — фирменный зелёный тон (как у body.rd-category-page), поэтому у самого
#basket_detailed нет собственной белой заливки/бордюра — это просто контейнер, а
белыми "плавающими" карточками являются .basket-card, .basket-summary-card и #form_order */
.cat-layout>#basket_detailed{grid-column:2;grid-row:1;margin:0;max-width:none;width:100%;background:transparent;border:0;border-radius:0;padding:24px 0 56px;box-sizing:border-box}
/* В корзине левое меню каталога не нужно — отдаём всю ширину под товары и оформление заказа */
.cat-layout:has(#basket_detailed){grid-template-columns:1fr}
.cat-layout:has(#basket_detailed)>.cat-sidebar{display:none}
.cat-layout:has(#basket_detailed)>#basket_detailed{grid-column:1}
#basket_detailed{max-width:100%;border:0!important}
/* breadcrumbs-block/h1 тут — прямые дети #basket_detailed (не .cat-layout, как на остальных
страницах), а у #basket_detailed фон прозрачный — из-за этого просвечивал зеленоватый
фон страницы вместо белого, как у .cat-layout>.breadcrumbs-block/h1 везде ещё. Оформляем
их отдельной белой карточкой-шапкой над .basket-layout, со скруглением по всем углам. */
#basket_detailed .breadcrumbs-block{background:#fff;padding:24px 28px 0;margin:0;border-radius:10px 10px 0 0;box-sizing:border-box;display:flow-root}
#basket_detailed .breadcrumbs-block ul{margin-bottom:0}
#basket_detailed h1{background:#fff;padding:10px 28px 24px;box-sizing:border-box;border-radius:0 0 10px 10px;font-family:var(--font-cond);font-size:28px;font-weight:700;letter-spacing:.01em;margin:0 0 20px;text-transform:none}
#basket_detailed .table-basket{width:100%!important;border-collapse:collapse;border:0!important}
#basket_detailed .table-basket>tbody:first-child td{display:none}
#basket_detailed .basket-tbody{display:block}
#basket_detailed .basket-tbody tr{display:flex!important;align-items:center;gap:20px;padding:18px 4px}
#basket_detailed .basket-tbody+.basket-tbody tr{border-top:1px solid rgba(27,30,32,.08)}
#basket_detailed .basket-tbody td{display:block;border:0!important;padding:0!important;vertical-align:middle}
#basket_detailed .basket-tbody td:first-child{flex:none}
#basket_detailed .basket-tbody img{width:88px;height:88px;object-fit:contain;border-radius:10px;border:1px solid rgba(27,30,32,.08);padding:8px;background:#fff;box-sizing:border-box}
#basket_detailed .basket-tbody td:nth-child(2){flex:1;min-width:0;text-align:left!important}
#basket_detailed .basket-tbody td:nth-child(2)>a{font-size:15px;font-weight:600;line-height:1.35;color:#1B1E20!important;display:inline-block;margin-bottom:4px}
#basket_detailed .basket-tbody td:nth-child(2)>a:hover{color:var(--accent)}
#basket_detailed .notice{font-size:12.5px;margin-bottom:6px}
#basket_detailed .count{display:inline-flex;align-items:center;border:1px solid rgba(27,30,32,.14);border-radius:8px;overflow:hidden;vertical-align:middle;margin-top:4px}
#basket_detailed .count .less,#basket_detailed .count .more{width:30px;height:30px;font-size:0;background:#fff;color:#1B1E20;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;position:relative;transition:background-color .15s}
#basket_detailed .count .less:hover,#basket_detailed .count .more:hover{background:#EEF2EF}
#basket_detailed .count .less::before{content:"";width:10px;height:2px;background:#4b5259;display:block}
#basket_detailed .count .more::before{content:"";display:block;background:
linear-gradient(#4b5259,#4b5259) center/10px 2px no-repeat,
linear-gradient(#4b5259,#4b5259) center/2px 10px no-repeat;
width:10px;height:10px}
#basket_detailed .basket-text{width:40px!important;height:30px!important;border:0!important;border-left:1px solid rgba(27,30,32,.14)!important;border-right:1px solid rgba(27,30,32,.14)!important;text-align:center;font:600 14px/1 'Inter',sans-serif;background:#fff;color:#1B1E20}
#basket_detailed .basket-tbody td:nth-child(3){flex:none;width:90px;text-align:right!important}
#basket_detailed td{background:transparent!important}
#basket_detailed .basket-tbody td:nth-child(3) .price{font-size:13px;color:#9AA0A5;font-weight:400;text-decoration:line-through}
#basket_detailed .basket-tbody td:nth-child(4){flex:none;width:56px;text-align:right!important}
#basket_detailed .basket-tbody td:nth-child(4) b{display:inline-block;background:#EEF2EF;color:var(--accent);font-size:12px;font-weight:700;padding:3px 8px;border-radius:20px}
/* Если у товара нет реальной скидки (цена без скидки совпадает с текущей), незачем
показывать зачёркнутую "старую" цену и бейдж "0%" — колонки просто схлопываем в 0,
чтобы после них не оставалось пустого места перед итоговой ценой. */
#basket_detailed .basket-tbody td.td-basket-empty{width:0!important;padding:0!important;margin:0!important;overflow:hidden}
#basket_detailed .basket-tbody td:nth-child(5){flex:none;width:110px;text-align:right!important}
#basket_detailed .basket-tbody td:nth-child(5) .price{font-family:'Inter',sans-serif;font-size:19px;font-weight:700;color:#1B1E20}
#basket_detailed .basket-tbody td:nth-child(6){flex:none}
#basket_detailed .del-basket{width:32px;height:32px;border-radius:8px;border:0;background:#f5f6f7 url('data:image/svg+xml;utf8,') center/15px no-repeat!important;cursor:pointer;transition:background-color .15s}
#basket_detailed .del-basket:hover{background-color:#fdeceb!important}
#basket_detailed #result_sum_wrap{font-weight:400}
#basket_detailed #order_sum{font-family:var(--font-cond);font-size:30px;font-weight:700;color:#1B1E20}
#basket_detailed .bonus_out{font-size:12.5px;color:#6b7076;display:block}
#basket_detailed #add-pack{border:0!important;color:#6b7076;font-size:13px;text-align:right;margin-top:14px}
#basket_detailed #add-pack a{color:var(--accent);font-weight:600}
#basket_detailed .btn-ok{background:var(--accent)!important;border-radius:6px!important}
/* ===== Корзина: 2-колоночная разметка (товары + сводка заказа) =====
.basket-col-summary растягивается на всю высоту грида (grid-row:1/-1) и "прилипает"
при прокрутке точно так же, как левое меню каталога (.cat-layout>.cat-sidebar) —
т.е. остаётся закреплённой рядом и с таблицей товаров, и с формой оформления заказа ниже. */
#basket_detailed .basket-layout{display:grid;grid-template-columns:1fr 340px;column-gap:32px;row-gap:24px;align-items:start;margin-top:4px}
#basket_detailed .basket-layout>.basket-col-main{grid-column:1;min-width:0}
/* Левая часть (товары + форма оформления заказа) — единая белая карточка на всю высоту */
#basket_detailed .basket-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:24px;box-sizing:border-box}
#basket_detailed .basket-card #order_form{margin-top:32px;padding-top:32px;border-top:1px solid rgba(0,0,0,.08)}
#basket_detailed .basket-layout>.basket-col-summary{grid-column:2;grid-row:1/-1;position:sticky;top:calc(var(--h-main) + 20px)}
#basket_detailed .basket-summary-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:24px;box-sizing:border-box}
#basket_detailed .basket-summary-card h2{font-family:var(--font-cond);font-size:19px;font-weight:700;margin:0 0 18px;color:#1B1E20;letter-spacing:.01em}
#basket_detailed .basket-summary-row{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:#6b7278;padding:9px 0;border-bottom:1px solid rgba(0,0,0,.07)}
#basket_detailed .basket-summary-row span:last-child{font-weight:600;color:#1B1E20}
#basket_detailed .basket-summary-discount span:last-child{color:var(--accent)}
#basket_detailed .basket-summary-promo{display:flex;gap:8px;margin:16px 0 4px}
#basket_detailed .basket-summary-promo input{flex:1;min-width:0;border:1px solid rgba(0,0,0,.15);border-radius:6px;padding:0 12px;height:40px;font:14px/1 'Inter',sans-serif;box-sizing:border-box;background:#fff;color:#1B1E20}
#basket_detailed .basket-summary-promo input:focus{outline:0;border-color:var(--accent)}
#basket_detailed .basket-summary-promo .btn-ok{height:40px;padding:0 16px;border-radius:6px!important;white-space:nowrap;text-transform:none;font-size:13px;vertical-align:top}
#basket_detailed .basket-summary-bonus{font-size:13px;color:#4b5259;margin:14px 0 0}
#basket_detailed .basket-summary-bonus b{color:#1B1E20}
#basket_detailed .basket-summary-bonus-note{margin:6px 0 0;font-size:12px}
#basket_detailed .basket-summary-total{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 0 2px;margin-top:8px;border-top:1px solid rgba(0,0,0,.1)}
#basket_detailed .basket-summary-total>span:first-child{font-size:15px;color:#4b5259;font-weight:600;padding-top:4px}
#basket_detailed .basket_tsum{text-align:right}
#basket_detailed .basket-summary-card #order_button{margin-top:18px}
#basket_detailed .basket-summary-card #order_button button{width:100%!important}
#basket_detailed .basket-summary-card #min_order_price_block h2{font-size:14px;margin:12px 0 0}
@media (max-width:900px){
#basket_detailed .basket-layout{grid-template-columns:1fr}
#basket_detailed .basket-layout>.basket-col-main,#basket_detailed .basket-layout>.basket-col-summary{grid-column:1}
#basket_detailed .basket-layout>.basket-col-summary{grid-row:auto;position:static}
}
/* Строка товара в корзине (.basket-tbody tr) — на десктопе flex-ряд без переноса:
картинка + название (flex:1) + 4 колонки фиксированной ширины (старая цена/скидка%/
сумма/удаление, суммарно ~290px + отступы). На узких телефонах имя уже отнимает всю
оставшуюся после картинки ширину строки (flex:1), и для остальных 4 колонок совсем
не остаётся места — они вылезают за экран (не было flex-wrap вообще). Переносим их
на вторую строку и слегка ужимаем картинку/отступы, чтобы было комфортнее. */
@media (max-width:640px){
#basket_detailed .basket-tbody tr{flex-wrap:wrap;gap:8px 12px;padding:16px 4px}
#basket_detailed .basket-tbody img{width:64px;height:64px}
#basket_detailed .basket-tbody td:nth-child(3){width:auto;text-align:left!important}
#basket_detailed .basket-tbody td:nth-child(4){width:auto}
#basket_detailed .basket-tbody td:nth-child(5){width:auto;margin-left:auto;text-align:right!important}
}
/* ===== Форма оформления заказа (order/add_form.tpl) ===== */
#form_order{background:#fff;border-radius:10px;padding:0}
#form_order .order-block>tbody>tr>td,#form_order>table>tbody>tr>td{padding:0!important;border:0!important}
#form_order table.table_fields{width:100%!important}
/* Поля формы оформления заказа (add_form.tpl) заданы инлайновым style="width:270px" и т.п.
(плюс подпись в соседней
с align="right") — на десктопе нормально, на телефоне это
вылезает за экран (270-330px внутри ~340px доступной ширины, да ещё с колонкой подписи
рядом). Переносим подпись над полем и растягиваем сами поля на всю ширину. */
@media (max-width:640px){
/* table-layout:fixed — с auto (по умолчанию) width:100% на таблице не жёсткое
ограничение: если ячейкам (rowspan-текстареа с комментарием и т.п.) по контенту
нужно больше места, auto-таблица всё равно расширяется за пределы контейнера. */
#form_order table.table_fields{table-layout:fixed}
#form_order table.table_fields tr{display:block}
#form_order table.table_fields td{display:block;width:auto!important;text-align:left!important;padding:4px 0!important}
#form_order table.table_fields input[type="text"],
#form_order table.table_fields input[type="password"],
#form_order table.table_fields input[type="email"],
#form_order table.table_fields input[type="tel"],
#form_order table.table_fields textarea,
#form_order table.table_fields select{width:100%!important;max-width:100%;box-sizing:border-box}
}
#form_order h2{font-family:var(--font-cond);font-size:20px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:#1B1E20;margin:32px 0 18px;padding-top:28px;border-top:1px solid rgba(27,30,32,.08)}
#form_order tbody.order-block:first-child h2{margin-top:0;padding-top:0;border-top:0}
#form_order td{padding:8px 4px!important}
#form_order input[type="text"].text,#form_order textarea.text{width:100%!important;max-width:340px;height:46px;border:1px solid rgba(27,30,32,.15)!important;border-radius:8px;padding:0 16px!important;font:14px/1.4 'Inter',sans-serif!important;color:#1B1E20;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;background:#fff}
#form_order textarea.text{height:auto!important;padding:14px 16px!important;font-family:inherit!important}
#form_order input[type="text"].text:focus,#form_order textarea.text:focus{outline:0;border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(98,188,88,.15)}
#form_order .asterix{color:#E14B3D}
#form_order .notice{color:#6b7076;font-size:12.5px}
/* ===== Поля "Контактная информация" (add_form.tpl) — были обычной
(label в одной
, поле в соседней), теперь сетка 2 колонки с подписью НАД полем: Фамилия/Телефон,
Имя/E-mail, Отчество/Комментарий — как и остальные .text-поля формы, используют общий
стиль #form_order input.text/textarea.text выше, тут только раскладка сетки и подписи. */
.checkout-fields{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;row-gap:18px;margin:20px 0 4px}
.checkout-field{display:flex;flex-direction:column;gap:8px}
.checkout-field>label{font-size:13px;font-weight:600;color:#4b5259}
.checkout-field input.text,.checkout-field textarea.text{max-width:100%!important}
.checkout-field-comment{grid-column:1/-1}
.checkout-field-comment textarea{width:100%;box-sizing:border-box;min-height:110px;border:1px solid rgba(27,30,32,.15);border-radius:8px;padding:14px 16px;font:14px/1.4 'Inter',sans-serif;color:#1B1E20;background:#fff;resize:vertical;transition:border-color .15s,box-shadow .15s}
.checkout-field-comment textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(98,188,88,.15)}
.checkout-sms-note{margin:4px 0 0}
@media (max-width:640px){
.checkout-fields{grid-template-columns:1fr}
}
#order_button{text-align:left;margin-top:24px}
#form_order #order_button{text-align:center;margin-top:32px}
#form_order .fancy{color:var(--accent)}
#form_order label.check-style{display:flex!important;align-items:flex-start;gap:14px;padding:12px 16px;border:1px solid rgba(27,30,32,.1);border-radius:12px;margin-bottom:8px;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s,padding .15s;background:#fff}
/* Способы доставки в строку: верхнеуровневые варианты (label) выстраиваются рядом и
переносятся на новую строку по мере надобности, а дочерние варианты (пункты самовывоза/
ТК, которые технически тоже лежат прямо в #delivery_methods) всегда занимают всю ширину
и идут отдельной строкой под своим родителем. */
#delivery_methods{display:flex;flex-wrap:wrap;gap:10px}
#delivery_methods>label.check-style{flex:1 1 calc(50% - 5px);min-width:0;margin-bottom:0}
#delivery_methods>[id^="delivery_service_"]{flex:1 0 100%;order:2}
#delivery_methods>.delivery_child{flex:1 1 100px;min-width:0;margin:0;order:2}
#delivery_service_16{display:flex;flex-wrap:wrap;gap:10px}
#delivery_service_16>.delivery_child{flex:1 1 100px;min-width:0;margin:0}
#delivery_methods>[id^="delivery_service_"]:not(:has(*)){display:none}
/* Вариант "Ваш вариант" (свой комментарий по ТК) содержит textarea — ему нужна вся
ширина строки, иначе поле для ввода текста сжимается вместе с обычной карточкой. */
#delivery_methods>.delivery_child:has(textarea),#delivery_service_16>.delivery_child:has(textarea){flex:1 0 100%}
#form_order label.check-style:has(textarea){flex-wrap:wrap}
#form_order .delivery_my_text{flex:1 1 100%;min-width:200px;margin-top:8px;padding:8px 10px;border:1px solid rgba(27,30,32,.15);border-radius:8px;font:inherit;resize:vertical}
#form_order label.check-style:hover{border-color:rgba(27,30,32,.22)}
#form_order label.check-style:has(input:checked){border-color:var(--accent);background:#F3FAF2;box-shadow:0 0 0 1px var(--accent);padding:16px 18px}
#delivery_methods .delivery_icon,#delivery_methods span[class*="delivery_icon"]{display:none}
#form_order .delivery_desc{flex:1;min-width:0;font-size:13.5px;line-height:1.55;color:#4b5259}
#form_order .delivery_desc b,#form_order .delivery_desc strong,#form_order .delivery_desc>span:first-child{display:block;font-family:var(--font-cond);font-size:15px;font-weight:700;color:#1B1E20;margin-bottom:4px;text-transform:none}
#form_order .delivery_desc a{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:3px 10px;background:#EEF2EF;color:var(--accent)!important;font-size:12px;font-weight:600;border-radius:20px;text-decoration:none!important}
#form_order .delivery_desc a:hover{background:#e3ece1}
/* Свёрнутый режим по умолчанию: у невыбранного варианта описание полностью скрыто —
видно только иконку + название. Раньше "портянка" текста показывалась у КАЖДОЙ карточки
сразу; теперь описание (адрес/условия/текст со ссылкой на карту) появляется только когда
вариант выбран (:checked) — клик по строке одновременно и выбирает её, и разворачивает
описание снизу. Работает и для способов доставки, и для способов оплаты (.notice),
и для пунктов самовывоза/ТК — везде общая структура "название + текстовый блок". */
#form_order .delivery_desc>div,#form_order label.check-style .notice{
max-height:0;overflow:hidden;opacity:0;margin-top:0!important;transition:max-height .15s,opacity .15s;
}
#form_order label.check-style:has(input:checked) .notice{
max-height:400px;opacity:1;margin-top:4px!important;
}
/* Описание выбранного верхнеуровневого способа доставки показывается не внутри узкой
карточки в строке, а отдельным блоком под всем рядом вариантов — так карточки остаются
компактными (иконка + название) независимо от длины текста условий. */
.delivery-info-panel{display:none;margin-top:14px;padding:14px 18px;border:1px solid rgba(27,30,32,.08);border-left:3px solid var(--accent);border-radius:10px;background:#F7FAF7;font-size:13.5px;line-height:1.6;color:#4b5259}
.delivery-info-panel.active{display:block}
.delivery-info-panel b,.delivery-info-panel strong{color:#1B1E20}
.delivery-info-panel a{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:3px 10px;background:#EEF2EF;color:var(--accent)!important;font-size:12px;font-weight:600;border-radius:20px;text-decoration:none!important}
.delivery-info-panel a:hover{background:#e3ece1}
/* Дочерние варианты (пункты самовывоза / компании ТК) оформлены так же, как и
верхнеуровневые способы доставки — плоские компактные карточки в строке, без
отступа-"лесенки": описание выбранного варианта в любом случае уходит в общую
панель под всем блоком, поэтому визуально отличать вложенность больше не нужно. */
#form_order .delivery_child{margin:0}
#form_order .delivery_child label.check-style{padding:12px 16px;border-color:rgba(27,30,32,.1);background:#fff}
#form_order .delivery_child label.check-style:hover{border-color:rgba(27,30,32,.22)}
#form_order .delivery_child label.check-style:has(input:checked){border-color:var(--accent);background:#F3FAF2;box-shadow:0 0 0 1px var(--accent)}
#form_order #payment-block label.check-style{align-items:center}
/* ===== Кастомные radio-кружки взамен голых браузерных (везде внутри .check-style —
способы доставки, пункты выдачи, способы оплаты): у всех трёх вариантов разметки родной
сразу сопровождается пустым — либо напрямую (способ оплаты),
либо обёрнутым в .delivery_radio/.delivery_radio_child (доставка/пункты выдачи). Прячем
input, рисуем кружок на этом соседнем span (payment) или на самой обёртке (delivery). */
#form_order label.check-style input[type="radio"]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
#form_order label.check-style .delivery_radio,
#form_order label.check-style .delivery_radio_child,
#form_order label.check-style>input[type="radio"]+span{
position:relative;flex:none;width:20px;height:20px;margin-top:2px;box-sizing:border-box;
border:2px solid rgba(27,30,32,.22);border-radius:50%;background:#fff;transition:border-color .15s;
display:flex;align-items:center;justify-content:center;font-size:0;
}
#form_order label.check-style .delivery_radio:has(input:checked),
#form_order label.check-style .delivery_radio_child:has(input:checked),
#form_order label.check-style>input[type="radio"]:checked+span{border-color:var(--accent)}
#form_order label.check-style .delivery_radio:has(input:checked)::after,
#form_order label.check-style .delivery_radio_child:has(input:checked)::after,
#form_order label.check-style>input[type="radio"]:checked+span::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}
/* ===== Страницы "Войти" / "Регистрация" (modules/auth/templates/auth.tpl, register.tpl) ===== */
.cat-layout>#auth-page,.cat-layout>#register-page{grid-column:2;grid-row:1;margin:0;max-width:none;width:100%;background:#fff;border-radius:10px;padding:28px 32px 40px;box-sizing:border-box}
#auth-page h1,#register-page h1{font-family:var(--font-cond);font-size:28px;font-weight:700;letter-spacing:.01em;margin:0 0 24px;text-transform:none}
#auth-page h2,#register-page h2{font-family:var(--font-cond);font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:#1B1E20;margin:8px 0 18px;padding-top:24px;border-top:1px solid rgba(0,0,0,.08)}
.auth-form{max-width:420px}
.auth-field{display:block;margin-bottom:16px}
.auth-field>span{display:block;font-size:13px;font-weight:600;color:#4b5259;margin-bottom:6px}
.auth-field .text,.auth-field input[type="text"],.auth-field input[type="password"],.auth-field select,.auth-field textarea{width:100%;height:46px;border:1px solid rgba(0,0,0,.15);border-radius:8px;padding:0 14px;font:14px/1.4 'Inter',sans-serif;color:#1B1E20;box-sizing:border-box;background:#fff;transition:border-color .15s,box-shadow .15s}
.auth-field textarea{height:auto;min-height:90px;padding:12px 14px;font-family:inherit}
.auth-field input:focus,.auth-field select:focus,.auth-field textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(98,188,88,.15)}
.auth-req{color:#E14B3D;font-style:normal}
.auth-field-error{display:block;color:#E14B3D;font-size:12px;margin-top:4px;min-height:0}
.auth-field-row{display:flex;gap:12px}
.auth-field-row .auth-field{flex:1}
.auth-fieldset{margin-bottom:16px}
.auth-captcha-row{display:flex;align-items:center;gap:12px}
.auth-captcha-row img{border-radius:6px;cursor:pointer;flex:none}
.auth-captcha-row input{width:110px!important}
.auth-form-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:4px 0 20px;font-size:13px;flex-wrap:wrap}
.auth-link{color:var(--accent)}
.auth-link:hover{text-decoration:underline}
.auth_button,.register_button{background:linear-gradient(135deg,var(--accent),#4a9f42)!important;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35);border:0;border-radius:6px;width:auto;height:50px;padding:0 32px;font-family:'Inter',sans-serif;font-size:15px!important;font-weight:700;cursor:pointer;transition:filter .15s;background-position:0 0!important}
.auth_button:hover,.register_button:hover{filter:brightness(1.08)}
.auth_error,.register_error,#auth-page .message,#register-page .message{font-size:13.5px;border-radius:8px;padding:12px 16px;margin-bottom:16px;max-width:420px}
.auth_error,.register_error{color:#E14B3D;background:#fdeceb}
#auth-page .message,#register-page .message{color:var(--accent);background:#EEF2EF}
.auth-terms{max-width:420px;font-size:12.5px;color:#6b7076;margin-top:20px;line-height:1.5}
.auth-terms a{color:var(--accent)}
/* Кнопки "Сохранить" в личном кабинете (смена пароля/профиль) — раньше это были
пустые кнопки со спрайтом-фоном из старого mobile.css; текст добавили, но общий
сброс .cat-layout *{padding:0} (реальная специфичность) перебивал запасной
:where(.cat-layout) button{padding:10px 20px}, поэтому кнопка схлопывалась почти
до высоты текста. Стилизуем явно, с реальной специфичностью класса. */
.save,.change{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent),#4a9f42)!important;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35);border:0;border-radius:6px;height:46px;padding:0 28px;font-family:'Inter',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:filter .15s;text-decoration:none}
.save:hover,.change:hover{filter:brightness(1.08)}
/* ===== "Мои заказы" (modules/stat/templates/orders.tpl) — карточный список: один заказ =
одна карточка (шапка "Заказ №/дата/статус", список товаров, статусные уведомления,
ссылка на оплату, итог + отмена). Фото товаров в этих данных нет (getHistoryOrderProducts
не джойнит галерею), поэтому дизайн держится на типографике и цветовых акцентах. */
.myorders{display:flex;flex-direction:column;gap:16px}
.myorder-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:20px 24px;box-sizing:border-box}
.myorder-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid rgba(0,0,0,.08)}
.myorder-head-main{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.myorder-num{font-family:var(--font-cond);font-size:17px;font-weight:700;color:#1B1E20;letter-spacing:.01em}
.myorder-num:hover{color:var(--accent)}
.myorder-date{font-size:13px;color:#6b7076}
.myorder-status{flex:none;background:#EEF2EF;color:var(--accent);font-size:12.5px;font-weight:700;padding:5px 14px;border-radius:20px;white-space:nowrap}
.myorder-products{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.myorder-product{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:14px}
.myorder-product-name{flex:1;min-width:200px;color:#1B1E20}
.myorder-product-name:hover{color:var(--accent)}
.myorder-product-qty{flex:none;color:#6b7076;font-size:13px}
.myorder-product-price{flex:none;font-weight:700;color:#1B1E20;white-space:nowrap}
.myorder-notices{margin-top:12px}
.myorder-notice{background:#FFF6E5;border-left:3px solid #E8A63A;border-radius:0 8px 8px 0;padding:8px 14px;margin-bottom:8px;font-size:13px;color:#7a5a15;line-height:1.5}
.myorder-notice:last-child{margin-bottom:0}
.myorder-pay{margin-top:12px;font-size:13.5px;color:#4b5259}
.myorder-pay-link{color:var(--accent);font-weight:700}
.myorder-pay-link:hover{text-decoration:underline}
.myorder-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(0,0,0,.08)}
.myorder-total{font-size:14px;color:#4b5259}
.myorder-total b{font-family:var(--font-cond);font-size:18px;font-weight:700;color:#1B1E20}
.myorder-cancel{color:#E14B3D;font-size:13px;font-weight:600;text-decoration:none}
.myorder-cancel:hover{text-decoration:underline}
.myorders-empty{display:flex;flex-direction:column;align-items:center;gap:14px;padding:64px 20px;text-align:center;color:#6b7280;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px}
.myorders-empty svg{color:#c3c7ca}
.myorders-empty h2{font-family:var(--font-cond);font-size:19px;font-weight:700;color:#1B1E20;margin:0;text-transform:none}
.myorders-empty p{margin:0;font-size:14px;color:#6b7076}
@media (max-width:640px){
.myorder-card{padding:16px}
.myorder-product-name{min-width:100%}
}
/* ===== Базовая "страховка" для ещё не редизайненных разделов (личный кабинет /stat/, избранное и т.п.) —
старые CSS отключены по всему сайту, поэтому голые HTML-элементы (таблицы, кнопки, поля) должны
выглядеть хотя бы прилично, а не полностью сломанными. Специфичность низкая (голые теги/class="text"),
поэтому уже оформленные элементы (.cm-card-add, .buy_button и т.д.) не затрагиваются. */
/* :where() обнуляет вклад .cat-layout в специфичность — эти правила проигрывают любому
классовому селектору (.cat-fltr-reset, .cm-card-add и т.п.), но подстраховывают голые теги */
:where(.cat-layout) table{border-collapse:collapse}
:where(.cat-layout) table:not(.table_fields) td,:where(.cat-layout) table:not(.table_fields) th{padding:8px 12px;font-size:13.5px;text-align:left;border-bottom:1px solid rgba(0,0,0,.08)}
:where(.cat-layout) table:not(.table_fields) th{background:#EEF2EF;font-weight:700}
:where(.cat-layout) button{background:var(--accent);color:#fff;border:0;border-radius:6px;padding:10px 20px;font:600 14px/1.2 'Inter',sans-serif;cursor:pointer}
:where(.cat-layout) button:hover{filter:brightness(1.08)}
:where(.cat-layout) input[type="text"],:where(.cat-layout) input[type="password"],:where(.cat-layout) input[type="email"],:where(.cat-layout) input[type="tel"],:where(.cat-layout) input.text,:where(.cat-layout) textarea,:where(.cat-layout) textarea.text,:where(.cat-layout) select,:where(.cat-layout) select.text{border:1px solid rgba(0,0,0,.15);border-radius:6px;padding:8px 12px;font:14px/1.4 'Inter',sans-serif;box-sizing:border-box;background:#fff;color:#1B1E20}
:where(.cat-layout) input[type="text"]:focus,:where(.cat-layout) input[type="password"]:focus,:where(.cat-layout) textarea:focus,:where(.cat-layout) select:focus{outline:0;border-color:var(--accent)}
:where(.cat-layout) a{color:inherit}
:where(.cat-layout .text, .cat-layout #left_box, .cat-layout p, .cat-layout li) a{color:var(--accent)}
/* ===== Общий сброс для .breadcrumbs-block, если он не попадает под более специфичные правила
(#left_box .breadcrumbs-block, .cat-layout>.breadcrumbs-block) — например #basket_detailed .breadcrumbs-block */
.breadcrumbs-block ul{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0;margin:0 0 14px;font-size:13px}
.breadcrumbs-block li{display:flex;align-items:center;gap:6px;color:#6b7076}
.breadcrumbs-block a{color:#6b7076;text-decoration:none}
.breadcrumbs-block a:hover{color:var(--accent)}
.breadcrumbs-block span{font-size:0}
.breadcrumbs-block span::before{content:"›";font-size:13px;color:#c3c7ca}
/* ===== Табы способа доставки в оформлении заказа (order/add_form.tpl) ===== */
.delivery-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 20px}
.delivery-tab{padding:10px 18px;border:1px solid rgba(0,0,0,.15);border-radius:20px;background:#fff;color:#4b5259;font:600 13px/1 'Inter',sans-serif;cursor:pointer;transition:border-color .15s,color .15s,background-color .15s}
.delivery-tab:hover{border-color:var(--accent);color:var(--accent)}
.delivery-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.delivery-hidden{display:none!important}
#form_order label.check-style.delivery-hidden,#form_order .delivery-hidden{display:none!important}
/* ===== Модальные страницы (fancybox iframe): Пользовательское соглашение, Политика
конфиденциальности и т.п. — рендерятся через main.tpl в отдельный html#modal без
header/footer, поэтому нужен собственный базовый стиль вместо голого Times New Roman */
body#modal{background:#fff;margin:0;padding:0;font:15px/1.75 'Inter',sans-serif;color:#3a4046;-webkit-font-smoothing:antialiased}
body#modal .text,body#modal>.text{max-width:900px;margin:0 auto;padding:32px 40px 48px;box-sizing:border-box}
body#modal h1{font:700 26px/1.3 'Roboto Condensed',sans-serif;color:#1b1f23;margin:0 0 22px;padding:32px 40px 0;max-width:900px;box-sizing:border-box}
body#modal .text h1{padding:0;margin:0 0 22px}
body#modal h2,body#modal h3,body#modal h4{font-family:'Roboto Condensed',sans-serif;font-weight:700;color:#1b1f23;margin:26px 0 10px;line-height:1.35}
body#modal p{margin:0 0 14px}
body#modal ul,body#modal ol{margin:0 0 14px;padding-left:22px}
body#modal li{margin:0 0 6px}
body#modal a{color:var(--accent);text-decoration:underline}
body#modal a:hover{color:var(--accent-hover)}
body#modal table{border-collapse:collapse;margin:0 0 16px}
body#modal table td,body#modal table th{padding:8px 12px;border:1px solid rgba(0,0,0,.1);font-size:14px}
/* Старое дублирующее уведомление "Товар успешно добавлен в корзину!" (basketModal/
basketModalCatalog) — скрыто, обратную связь теперь даёт только .add-snack снекбар */
#basket_added,.basket_added{display:none!important}
/* ===== Снекбар "Добавлено в корзину" (по образцу snack.html) ===== */
.add-snack{position:fixed;left:50%;bottom:24px;transform:translate(-50%,160%);opacity:0;
display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100% - 32px);
background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;
padding:12px 14px 12px 16px;overflow:hidden;
box-shadow:0 18px 44px rgba(20,30,25,.18);
z-index:1000;pointer-events:none;
transition:transform .42s cubic-bezier(.2,.9,.3,1.08),opacity .3s}
.add-snack.is-in{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.add-snack__timer{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.08)}
.add-snack__timerfill{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left}
.add-snack.is-in .add-snack__timerfill{animation:addSnackCountdown 4200ms linear forwards}
@keyframes addSnackCountdown{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.add-snack__check{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:rgba(98,188,88,.14);color:var(--accent);display:flex;align-items:center;justify-content:center}
.add-snack__col{display:flex;flex-direction:column;gap:2px;min-width:0}
.add-snack__cap{font:700 11.5px/1.2 'Inter',sans-serif;color:var(--accent)}
.add-snack__name{font:600 13.5px/1.3 'Inter',sans-serif;color:#1B1E20;max-width:280px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.add-snack__btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;border:none;cursor:pointer;text-decoration:none;font:700 13px/1 'Inter',sans-serif;
padding:10px 14px;border-radius:8px;white-space:nowrap;background:var(--accent);color:#fff;transition:background-color .15s}
.add-snack__btn:hover{background:var(--accent-hover)}
.add-snack__x{flex:0 0 auto;width:26px;height:26px;border:none;background:transparent;color:#9AA0A5;cursor:pointer;
border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background-color .15s,color .15s}
.add-snack__x:hover{color:#1B1E20;background:#F5F6F7}
@media (max-width:560px){
.add-snack{left:12px;right:12px;bottom:12px;transform:translateY(160%);width:auto;max-width:none;
flex-wrap:wrap;gap:10px 12px;padding:14px 44px 16px 14px}
.add-snack.is-in{transform:translateY(0)}
.add-snack__col{flex:1 1 0;min-width:0}
.add-snack__name{max-width:none;white-space:normal;-webkit-line-clamp:2}
.add-snack__btn{order:3;flex:1 1 100%;justify-content:center;padding:11px 14px;font-size:14px}
.add-snack__x{position:absolute;top:8px;right:8px}
}
/* ===== Модалка "Написать нам" (call_back/send/?is_modal=1) ===== */
body#modal #question-box{max-width:520px;margin:0 auto;padding:32px 40px 40px;box-sizing:border-box}
body#modal #question-box h2{margin:0 0 16px;padding:0}
body#modal #question-box p{color:#4b5259}
body#modal #question-box .params{display:none}
body#modal #question-box>div{margin-bottom:14px}
body#modal #question-box input[type="text"],body#modal #question-box textarea{
width:100%;box-sizing:border-box;border:1px solid rgba(0,0,0,.15);border-radius:8px;
padding:12px 14px;font:14px/1.4 'Inter',sans-serif;color:#1B1E20;background:#fff;transition:border-color .15s}
body#modal #question-box input[type="text"]:focus,body#modal #question-box textarea:focus{outline:0;border-color:var(--accent)}
body#modal #question-box textarea{resize:vertical;min-height:120px}
body#modal #question-box button.send{background:linear-gradient(135deg,var(--accent),#4a9f42);color:#fff;border:0;border-radius:8px;
padding:12px 28px;font:700 14px/1 'Inter',sans-serif;cursor:pointer;transition:filter .15s}
body#modal #question-box button.send:hover{filter:brightness(1.08)}
/* ===== Страница "Информация о заказе" (order/add_info.tpl) — после оформления заказа =====
Разметка/условная логика (способы оплаты, платёжные виджеты, dataLayer) не тронуты,
переоформлены только презентационные обёртки (были голые