

/* Start:/bitrix/templates/about/styles.css?1791996849548*/
img {border:0 none;}

h1, h2, h3, h4, h5, h6
{
	font-family: Arial, Helvetica,sans-serif; 
	margin:1.3em 0 1em;
	font-weight:normal;
	line-height:1.2;
}

h1 { font-size:200%; margin:0 0 1em; }
h2 { font-size:160%; }
h3 { font-size:140%; }
h4 { font-size:140%; }
h5 { font-size:120%; }
h6 { font-size:100%; }

hr, .hr 
{
	border-top:1px solid;
	display:block;
	font-size:1px;
	height:1px;
	line-height:1px;
	margin:12px 0;
	overflow:hidden;
	padding:0;
}

#workarea ol li, #workarea ul li { margin: 0.6em 0; }
#workarea ul { list-style-type: disc; }
/* End */


/* Start:/bitrix/templates/about/template_styles.css?17925942358950*/
.container{display: grid;
    gap: clamp(24px, 5vw, 64px);
    align-items: center;
   max-width: var(--w);
    margin: 0 auto;
    padding: 0 var(--pad);}

/* ===== ТОКЕНЫ. Сезонная тема: <body data-theme="bf"> или "ny" ===== */
:root{
  --bg:#0a0a0a; --panel:#141414; --line:#2b2b2b;
  --text:#f2efe9; --muted:#9a968e;
  --red:#c4001a; --accent:var(--red);
  --w:1240px; --pad:clamp(16px,4vw,40px);
  --sans:'Montserrat',Arial,sans-serif; 
}
body[data-theme="bf"]{--accent:#e6e1d6}   /* Чёрная пятница: белый/серебро на чёрном */
body[data-theme="ny"]{--accent:#c9a45c}   /* Новый год: латунь/золото */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:400 16px/1.5 var(--sans);min-width:360px;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}

/* Заглушка под картинку: заменить на <img> */
.ph{position:relative;display:grid;place-items:center;text-align:center;padding:12px;
  background:repeating-linear-gradient(45deg,#161616 0 12px,#1b1b1b 12px 24px);
  border:1px dashed #555;color:var(--muted);font-size:12px;line-height:1.3}
.ph::before{content:attr(data-ph)}

/* ===== СЕЗОННАЯ ЛЕНТА (вкл/выкл атрибутом hidden) ===== */
.season{background:var(--accent);color:#0a0a0a;text-align:center;font:700 13px/1 var(--sans);padding:10px var(--pad);letter-spacing:.04em}
body:not([data-theme]) .season{display:none}

/* ===== ШАПКА ===== */
.head{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.94);border-bottom:1px solid var(--line)}
.head .wrap{display:flex;align-items:center;gap:clamp(12px,3vw,40px);height:72px}
.logo{font-size: 30px;letter-spacing:.02em;white-space:nowrap}
.logo img{height:40px}
.addr{font-size:13px;color:var(--muted);line-height:1.3;max-width:200px}
.nav{display:flex;gap:clamp(16px,2.4vw,36px);margin-left:auto;font-weight:500}
.nav a{padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s}
.nav a:hover{border-color:var(--accent)}
.burger{width:44px;height:44px;border:1px solid var(--line);background:none;color:inherit;cursor:pointer;display:grid;place-content:center;gap:5px;flex:none}
.burger i{display:block;width:22px;height:2px;background:currentColor;transition:.3s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Выезжающее меню */
.drawer{position:fixed;inset:0 0 0 auto;width:min(380px,100%);background:var(--panel);z-index:70;padding:88px 32px 32px;
  transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;gap:6px;border-left:1px solid var(--line);overflow-y:auto}
.drawer.open{transform:none}
.drawer a{font:500 22px/1.2 var(--serif);padding:14px 0;border-bottom:1px solid var(--line)}
.drawer a:hover{color:var(--accent)}
.drawer .meta{margin-top:auto;padding-top:24px;color:var(--muted);font-size:14px}
.drawer-x{position:absolute;top:14px;right:var(--pad);z-index:80}
.shade{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .4s;z-index:60}
.shade.open{opacity:1;pointer-events:auto}

/* ===== БЫСТРЫЕ ССЫЛКИ НА КАТАЛОГ (скрыты на мобильной) ===== */
.quick{border-bottom:1px solid var(--line)}
.quick .wrap{display:flex;justify-content:center;gap:clamp(20px,3vw,48px);padding-top:14px;padding-bottom:14px;font-size:14px;color:var(--muted)}
.quick a:hover{color:var(--text)}

/* ===== ГЕРОЙ / АКЦИЯ ===== */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;align-items:end;min-height:720px}
.brush{position:absolute;z-index:-1;width:46%;aspect-ratio:1.4;left:-6%;top:14%;}  /* кисть: красный мазок */
.brush.b2{left:auto;right:-4%;top:auto;bottom:4%;width:18%;aspect-ratio:1}
.promo-col{padding:56px 0 40px;display:flex;flex-direction:column;align-items:center;text-align:center}
.promo{position:relative;width:min(560px,100%);padding:clamp(40px,7vw,64px) clamp(28px,6vw,56px) clamp(56px,8vw,72px)}
/* Угловые элементы: по умолчанию нарисованы CSS. Чтобы подставить свои картинки — задать --c-tl/--c-tr/--c-bl/--c-br: url(/bitrix/templates/about/img/...) */
.corner{position:absolute;width:26%;aspect-ratio:1;background-size:contain;background-repeat:no-repeat}
.corner.tl{left:0;top:0;border-top:5px solid var(--accent);border-left:5px solid #fff;background-image:var(--c-tl,none)}
.corner.tr{right:0;top:0;border-top:5px solid var(--accent);border-right:5px solid var(--accent);background-image:var(--c-tr,none)}
.corner.bl{left:0;bottom:0;border-bottom:5px solid var(--accent);border-left:5px solid var(--accent);background-image:var(--c-bl,none)}
.corner.br{right:0;bottom:0;border-bottom:5px solid var(--accent);border-right:5px solid var(--accent);background-image:var(--c-br,none)}
.promo.custom-corners .corner{border:0}
.promo-text{transform:rotate(-4deg);font-weight:800;text-transform:uppercase;line-height:1}
.promo-text .kicker{display:block;font:italic 700 clamp(14px,2.4vw,20px)/1 var(--sans);color:var(--accent);margin-bottom:14px}
.promo-text .t1{display:block;font-size:clamp(34px,7.4vw,64px)}
.promo-text .t2{display:block;font-size:clamp(28px,6vw,52px);color:var(--accent)}
.promo-text .off{display:block;font:800 clamp(44px,10vw,84px)/1 'Montserrat',sans-serif;margin-top:10px}
.promo-sub{margin-top:18px;font-size:clamp(14px,2vw,17px)}
.btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.btn{display:inline-block;padding:14px 22px;border:1px solid #fff;border-radius:4px;font:700 13px/1 var(--sans);text-transform:uppercase;transition:.2s}
.btn:hover,.btn.solid{background:var(--accent);border-color:var(--accent);color:#fff}
body[data-theme="bf"] .btn:hover,body[data-theme="bf"] .btn.solid,
body[data-theme="ny"] .btn:hover,body[data-theme="ny"] .btn.solid{color:#0a0a0a}
.model{align-self:stretch;min-height:480px}
.model .ph{height:100%;min-height:480px}

/* ===== ТАЙМЕР ===== */
.timer{margin-top:28px}
.timer-cap{color:var(--accent);font-size:15px;margin-bottom:6px}
.cells{display:flex;align-items:flex-start;justify-content:center;gap:clamp(6px,1.6vw,18px)}
.cell{min-width:0}
.cell b{display:block;font:500 clamp(40px,8vw,76px)/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cell span{font-size:clamp(11px,1.6vw,15px)}
.sep{font:500 clamp(32px,6vw,60px)/1 var(--sans)}
.timer.done .cells{opacity:.35}

/* ===== АКЦИОННЫЕ ТОВАРЫ ===== */
.sec{padding:clamp(32px,5vw,56px) 0}
.sec + .sec{padding-top:0}
.hero + .sec{padding-top:clamp(24px,4vw,40px)}
.promo-col{padding:56px 0 16px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:28px;border-bottom:1px solid var(--line);padding-bottom:16px}
.sec-h h2{font:500 clamp(26px,4vw,40px)/1.1 var(--serif)}
.sec-h a{font-size:14px;color:var(--muted);white-space:nowrap}
.sec-h a:hover{color:var(--text)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
@media(min-width:600px){.grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}}
.card{display:block}
.card .ph{aspect-ratio:3/4;width:100%}
.card h3{font:500 18px/1.25 var(--serif);margin:12px 0 4px}
.price{display:flex;gap:10px;align-items:baseline;font-weight:700}
.price s{color:var(--muted);font-weight:400;font-size:14px}
.price em{font-style:normal;color:var(--accent)}
.tag{position:absolute;left:0;top:12px;background:var(--accent);color:#fff;font:700 12px/1 var(--sans);padding:6px 10px;z-index:2}
body[data-theme="bf"] .tag,body[data-theme="ny"] .tag{color:#0a0a0a}
.cardbox{position:relative}

.foot{border-top:1px solid var(--line);padding:32px 0;color:var(--muted);font-size:14px}

/* ===== АДАПТИВ: мобильная версия до 1050px ===== */
@media(max-width:1049px){
  .nav,.quick{display:none}
  .burger{margin-left:auto}
  .addr{max-width:none;flex:1;text-align:right;margin-left:auto}
  .hero .wrap{grid-template-columns:1fr;min-height:0}
  .model{order:-1;min-height:0;margin:0 calc(var(--pad)*-1)}
  .model .ph{min-height:300px;height:300px}
  .promo-col{padding-top:24px}
  .brush{width:80%;top:0}
}
@media(max-width:520px){
  .addr{display:none}
  .burger{margin-left:auto}
  .btns .btn{flex:1 1 100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.at-cta .btn {
    cursor: pointer;
}
/* End */
/* /bitrix/templates/about/styles.css?1791996849548 */
/* /bitrix/templates/about/template_styles.css?17925942358950 */
