/* === ДИЗАЙН-ТОКЕНЫ ТДА РУФТЕХ === */
:root{
  --red:#C1272D;
  --red-deep:#7E1116;
  --black:#131313;
  --gray:#8C8F94;
  --surface:#F2F2F0;
  --white:#FFFFFF;
  --line:#E2E2DF;
  --maxw:1180px;
}

/* === БАЗА === */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.5;font-weight:400;
  color:var(--black);background:var(--surface);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:15px}

/* === ТИПОГРАФИКА === */
.display{font-weight:900;text-transform:uppercase;letter-spacing:.12em;line-height:1.04}
.heading{font-weight:800;letter-spacing:.01em;line-height:1.15}
.eyebrow{font-weight:800;text-transform:uppercase;letter-spacing:.22em;font-size:12px;color:var(--gray)}
.muted{color:var(--gray)}

/* === ЛЭЙАУТ === */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
section{padding:72px 0}
.sec-dark{background:var(--black);color:var(--white)}
.sec-surface{background:var(--surface)}
.sec-white{background:var(--white)}
.sec-head{margin-bottom:40px}
.sec-head h2{font-size:30px}

/* === КНОПКИ === */
.btn{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  background:var(--red);color:#fff;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;font-size:13px;padding:15px 26px;border-radius:2px;
  transition:background .18s ease;text-decoration:none;
}
.btn:hover{background:var(--red-deep)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  background:transparent;border:2px solid currentColor;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;font-size:13px;padding:13px 24px;
  border-radius:2px;transition:background .18s ease,color .18s ease;text-decoration:none;
}
.btn-ghost:hover{background:#fff;color:var(--black)}
.sec-white .btn-ghost,.sec-surface .btn-ghost{color:var(--black)}
.sec-white .btn-ghost:hover,.sec-surface .btn-ghost:hover{background:var(--black);color:#fff}
.btn-dark{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  background:var(--black);color:#fff;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;font-size:13px;padding:15px 26px;border-radius:2px;
  transition:opacity .18s ease;text-decoration:none;
}
.btn-dark:hover{opacity:.85}
.btn-block{width:100%}
.ic{width:16px;height:16px;flex:0 0 auto}

/* === ХЕДЕР === */
.site-header{background:var(--black);color:#fff;border-bottom:2px solid var(--red)}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0}
.logo{display:flex;flex-direction:column;align-items:flex-start;text-align:left;text-decoration:none;color:#fff}
.logo-mark{font-weight:900;font-size:24px;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.logo-mark .r{color:var(--red)}
.logo-sub{font-size:11px;color:var(--gray);letter-spacing:.16em;text-transform:uppercase;margin-top:6px}
.header-contacts{display:flex;align-items:center;gap:22px}
.phone{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.phone a{color:#fff;text-decoration:none}
.phone .num{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;letter-spacing:.02em}
.phone .cities{font-size:11px;color:var(--gray);letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.site-nav{display:flex;gap:4px;flex-wrap:wrap;border-top:1px solid #2a2a2a;padding:10px 0}
.nav-link{
  color:#cfcfcf;font-size:13px;font-weight:600;letter-spacing:.04em;
  padding:8px 12px;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
  text-decoration:none;
}
.nav-link:hover{color:#fff;border-bottom-color:var(--gray)}
.nav-link.active{color:#fff;border-bottom-color:var(--red)}

/* Burger (mobile) */
.burger{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer;background:none;border:none}
.burger span{display:block;width:24px;height:2px;background:#fff;transition:transform .2s,opacity .2s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none;flex-direction:column;gap:0;background:var(--black);border-top:1px solid #2a2a2a;padding:12px 0}
.mobile-nav.open{display:flex}
.mobile-nav .nav-link{padding:12px 0;font-size:14px}

/* === HERO === */
.hero{background:var(--black);color:#fff;padding:64px 0 0}
.hero-grid{display:grid;grid-template-columns:1.4fr .9fr;gap:48px;align-items:start}
.hero h1{font-size:clamp(38px,5vw,64px);margin:18px 0 22px}
.hero h1 .r{color:var(--red)}
.hero-lead{font-size:18px;max-width:620px;color:#d7d7d7;line-height:1.55}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-form{background:var(--red);color:#fff;padding:28px;border-radius:3px}
.hero-form h3{font-size:19px;font-weight:800;line-height:1.25;margin-bottom:18px}
.hero-form .fld input{background:#fff;color:var(--black)}
.hero-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #2a2a2a;margin-top:56px}
.hero-strip .cell{padding:26px 22px;border-right:1px solid #2a2a2a}
.hero-strip .cell:last-child{border-right:none}
.hero-strip .num{font-weight:900;font-size:22px;color:var(--red);letter-spacing:.02em}
.hero-strip .lbl{font-size:13px;color:#bdbdbd;margin-top:8px;line-height:1.4}

/* === ТРИ ОПОРЫ === */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line)}
.pillar{padding:34px 30px;border-right:1px solid var(--line)}
.pillar:last-child{border-right:none}
.pillar .pnum{font-weight:900;font-size:46px;color:var(--red);letter-spacing:.02em;line-height:1}
.pillar h3{font-size:21px;font-weight:800;margin:16px 0 10px}
.pillar p{color:var(--gray)}

/* === КАТАЛОГ-КАТЕГОРИИ === */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat-card{
  background:var(--black);color:#fff;text-align:left;position:relative;
  padding:24px 22px 26px 26px;border-left:4px solid var(--red);min-height:128px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .15s ease;text-decoration:none;
}
.cat-card:hover{transform:translateY(-3px)}
.cat-card .ct{font-weight:800;font-size:17px;letter-spacing:.01em}
.cat-card .cs{font-size:12px;color:var(--gray);margin-top:10px;letter-spacing:.04em}

/* === ОБЪЕКТЫ === */
.obj-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.obj{position:relative;overflow:hidden;border-radius:2px;min-height:170px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:22px;
  background:linear-gradient(135deg,#1d1d1d 0%,#2c2c2c 55%,#3a3a3a 100%);color:#fff}
.obj.big{grid-row:span 2;min-height:356px}
.obj img.obj-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.obj .obj-cap{position:relative;z-index:2}
.obj .obj-name{font-weight:800;font-size:17px}
.obj .obj-meta{font-size:12px;color:#cdcdcd;margin-top:6px;letter-spacing:.04em}

/* === ЦИТАТА-ПОЛОСА === */
.quote{background:var(--red);color:#fff;text-align:center;padding:54px 0}
.quote q{display:block;font-weight:900;text-transform:uppercase;letter-spacing:.08em;
  font-size:clamp(20px,3vw,32px);line-height:1.2;quotes:none}
.quote .qby{margin-top:16px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#ffd9da}

/* === ФОРМЫ === */
.fld{margin-bottom:16px}
.fld label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:7px;color:inherit}
.fld input,.fld select,.fld textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:2px;
  background:#fff;color:var(--black);outline:none;transition:border-color .15s;
}
.fld textarea{resize:vertical;min-height:96px}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--black)}
.fld .err{display:none;color:#ffdada;font-size:12px;margin-top:6px;font-weight:600}
.sec-white .fld .err,.sec-surface .fld .err{color:var(--red)}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:var(--red);box-shadow:0 0 0 2px rgba(193,39,45,.18)}
.fld.bad .err{display:block}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.form-grid .full{grid-column:1 / -1}
.form-success{display:none;background:#0f7a3d;color:#fff;padding:18px 20px;border-radius:2px;
  margin-bottom:18px;font-weight:700}
.form-success.show{display:block}
.kp-form-wrap{max-width:760px;background:var(--white);border:1px solid var(--line);padding:34px;border-radius:3px}

/* === ХЛЕБНЫЕ КРОШКИ === */
.breadcrumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:18px 0;font-size:13px}
.breadcrumbs a{color:var(--gray);font-weight:600;text-decoration:none}
.breadcrumbs a:hover{color:var(--black)}
.sec-dark .breadcrumbs a{color:#bdbdbd}
.sec-dark .breadcrumbs a:hover{color:#fff}
.breadcrumbs .sep{color:var(--line)}
.breadcrumbs .cur{color:var(--black);font-weight:700}
.sec-dark .breadcrumbs .cur{color:#fff}
.sec-dark .breadcrumbs .sep{color:#555}

/* === TOOLBAR / ЧИПЫ === */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;padding:22px 0;border-bottom:1px solid var(--line)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;padding:9px 16px;border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:.03em;transition:all .15s;text-decoration:none;color:var(--black)}
.chip:hover{border-color:var(--gray)}
.chip.active{background:var(--red);border-color:var(--red);color:#fff}

/* === КАРТОЧКИ ТОВАРА === */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:36px 0 0}
.prod-card{background:#fff;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease;text-decoration:none;color:var(--black)}
.prod-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(19,19,19,.08)}
.prod-thumb{aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;
  flex-direction:column;background:var(--surface);overflow:hidden}
.prod-thumb img{width:100%;height:100%;object-fit:cover}
.prod-body{padding:18px;display:flex;flex-direction:column;gap:12px;flex:1}
.prod-body .pt{font-weight:800;font-size:15px;line-height:1.3}
.price-label{font-size:11px;color:var(--gray);letter-spacing:.14em;text-transform:uppercase}
.price-val{font-weight:900;font-size:24px;color:var(--black);letter-spacing:.01em}
.price-val .unit{font-size:13px;font-weight:700;color:var(--gray);margin-left:6px}
.more-link{color:var(--red);font-weight:800;text-decoration:underline;text-underline-offset:3px;
  font-size:13px;letter-spacing:.04em;text-transform:uppercase;align-self:flex-start;margin-top:auto}

/* === КАРТОЧКА ТОВАРА (страница) === */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:14px 0 0;align-items:start}
.gallery-main{aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;
  background:var(--surface);border-radius:3px;overflow:hidden}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.thumb{aspect-ratio:1/1;border:2px solid transparent;border-radius:2px;cursor:pointer;
  position:relative;overflow:hidden;background:var(--surface)}
.thumb.active{border-color:var(--red)}
.thumb img{width:100%;height:100%;object-fit:cover}
.pdp-sku{font-size:12px;color:var(--gray);letter-spacing:.16em;text-transform:uppercase}
.pdp h1{font-size:clamp(26px,3.4vw,38px);font-weight:900;text-transform:uppercase;
  letter-spacing:.04em;line-height:1.08;margin:12px 0 22px}
.price-block{background:var(--surface);border-left:4px solid var(--red);padding:22px 24px;border-radius:2px;margin-bottom:18px}
.price-block .price-big{font-weight:900;font-size:34px;letter-spacing:.01em}
.price-block .price-big .unit{font-size:16px;font-weight:700;color:var(--gray);margin-left:8px}
.pdp-note{color:var(--gray);margin-bottom:24px;max-width:520px}
.pdp-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.specs{border-top:1px solid var(--line);padding-top:24px;margin-bottom:30px}
.specs h3,.descr h3{font-size:18px;font-weight:800;margin-bottom:16px}
.specs dl{display:grid;grid-template-columns:1fr 1fr;gap:0}
.specs .row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.specs dt{color:var(--gray);font-size:13px}
.specs dd{font-weight:700;font-size:13px;text-align:right}
.descr p{color:#3a3a3a;max-width:560px}

/* === ПРАЙС === */
.price-hero{background:var(--black);color:#fff}
.price-hero h1{font-size:clamp(34px,4.6vw,56px)}
.price-hero h1 .r{color:var(--red)}
.price-hero .lead{color:#d6d6d6;font-size:18px;max-width:620px;margin:20px 0 30px}
.price-list{display:flex;flex-direction:column;border:1px solid var(--line);background:#fff;border-radius:3px;overflow:hidden}
.price-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;align-items:center;
  padding:18px 22px;border-bottom:1px solid var(--line)}
.price-row:last-child{border-bottom:none}
.price-row .pr-cat{font-weight:800}
.price-row .pr-sku{color:var(--gray);font-size:13px;letter-spacing:.06em}
.price-row .pr-from{text-align:right;font-weight:900;color:var(--black)}

/* === ФУТЕР === */
.site-footer{background:var(--black);color:#cfcfcf}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:56px 0 40px}
.footer-cols h4{color:#fff;font-size:13px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:18px}
.footer-cols .f-logo{font-weight:900;font-size:20px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.footer-cols .f-logo .r{color:var(--red)}
.footer-cols p{font-size:13px;line-height:1.7;color:#9a9a9a}
.footer-link{display:block;text-align:left;color:#bdbdbd;font-size:13px;padding:6px 0;
  border-bottom:1px solid transparent;width:fit-content;transition:color .15s,border-color .15s;text-decoration:none}
.footer-link:hover{color:#fff;border-bottom-color:var(--red)}
.footer-bottom{border-top:1px solid #2a2a2a;padding:20px 0;font-size:12px;color:#7a7a7a;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* === TOAST === */
#toast{position:fixed;left:50%;bottom:96px;
  transform:translateX(-50%) translateY(24px);
  background:var(--black);color:#fff;border-left:4px solid var(--red);
  padding:16px 22px 16px 20px;border-radius:2px;font-weight:700;font-size:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.35);opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;z-index:120;max-width:90vw}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* === МОДАЛКА === */
#modal{position:fixed;inset:0;background:rgba(10,10,10,.62);display:none;
  align-items:center;justify-content:center;padding:24px;z-index:140}
#modal.show{display:flex}
.modal-box{background:#fff;width:420px;max-width:100%;border-radius:4px;padding:30px;
  border-top:4px solid var(--red);position:relative}
.modal-box h3{font-size:22px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.modal-box p{color:var(--gray);margin-bottom:22px;font-size:14px}
.modal-box .x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:2px;
  display:flex;align-items:center;justify-content:center;color:var(--gray);font-size:22px;line-height:1}
.modal-box .x:hover{background:var(--surface);color:var(--black)}

/* === CONSENT === */
.consent{font-size:11px;color:var(--gray);margin-top:12px;line-height:1.5}
.consent a{color:var(--red);text-decoration:underline}

/* === АДАПТИВ === */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .pillar{border-right:none;border-bottom:1px solid var(--line)}
  .pillar:last-child{border-bottom:none}
  .cat-grid{grid-template-columns:1fr 1fr}
  .obj-grid{grid-template-columns:1fr 1fr}
  .obj.big{grid-row:auto;min-height:200px}
  .prod-grid{grid-template-columns:1fr 1fr}
  .pdp{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr 1fr}
  .hero-strip{grid-template-columns:1fr 1fr}
  .hero-strip .cell:nth-child(2n){border-right:none}
  .site-nav{display:none}
  .burger{display:flex}
  .header-contacts .btn{display:none}
}
@media(max-width:560px){
  .cat-grid,.prod-grid,.obj-grid,.footer-cols,.form-grid{grid-template-columns:1fr}
  .header-top{flex-direction:column;align-items:flex-start;gap:14px}
  .header-contacts{width:100%;justify-content:space-between}
  .price-row{grid-template-columns:1fr;gap:6px;text-align:left}
  .price-row .pr-from{text-align:left}
  .specs dl{grid-template-columns:1fr}
}
/* === PD CONSENT CHECKBOX (152-ФЗ) === */
.pd-consent{
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;line-height:1.5;color:var(--gray);
  cursor:pointer;margin-top:16px;margin-bottom:16px;
  user-select:none;
}
.pd-consent input[type="checkbox"]{
  accent-color:var(--red);width:18px;height:18px;flex-shrink:0;
  margin-top:1px;cursor:pointer;
}
.pd-consent a{color:var(--red);text-decoration:underline}
.pd-consent a:hover{color:var(--red-deep)}
.hero-form .pd-consent{color:rgba(255,255,255,.65)}
.hero-form .pd-consent a{color:rgba(255,255,255,.85)}
.modal-box .pd-consent{margin-bottom:20px}

/* === PRODUCT PAGE ENHANCEMENTS === */
.product-sku{font-size:13px;color:var(--gray);margin-bottom:16px;letter-spacing:.03em}
.product-delivery-hint{
  display:flex;flex-wrap:wrap;gap:20px;
  padding-top:24px;margin-top:24px;border-top:1px solid var(--line);
}
.hint-item{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--gray)}
.ic-sm{width:18px;height:18px;flex-shrink:0}
.no-image-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:60px 20px;text-align:center;
  color:var(--gray);font-size:14px;line-height:1.5;
}
.product-no-image{background:var(--surface);border:1px dashed var(--line);border-radius:12px}
.product-cta .btn,.product-cta .btn-outline{
  height:48px;padding:0 28px;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;white-space:nowrap;
}
.product-cta .btn-outline{
  background:transparent;border:2px solid var(--red);color:var(--red);
}
.product-cta .btn-outline:hover{background:var(--red);color:#fff}

/* === FOOTER PD LINK === */
.footer-pd-link{font-size:12px;color:var(--gray);text-decoration:underline;opacity:.7}
.footer-pd-link:hover{opacity:1;color:var(--red)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}

/* === KP MODAL (dialog) === */
dialog.modal{
  border:none;border-radius:16px;padding:32px;
  background:var(--white);color:var(--black);
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
dialog.modal::backdrop{background:rgba(0,0,0,.5)}
.modal-title{font-size:22px;font-weight:800;margin-bottom:8px}
.modal-x{position:absolute;top:14px;right:14px;width:34px;height:34px;
  border-radius:2px;display:flex;align-items:center;justify-content:center;
  color:var(--gray);font-size:22px;line-height:1;background:none;border:none;cursor:pointer}
.modal-x:hover{background:var(--surface);color:var(--black)}

/* === OBJECTS WITH IMAGES === */
.obj{background-size:cover;background-position:center;background-repeat:no-repeat}
