@import url("ds/styles.css");

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-main);font-size:var(--fs-body);line-height:var(--lh-body);
 letter-spacing:var(--ls-body);color:var(--c-black);background:var(--c-white);
 -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
@media(max-width:1023px){.container{padding:0 var(--container-pad-mobile)}}

h1,h2,h3{font-weight:var(--fw-bold)}
.display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
h3{font-size:var(--fs-body);line-height:var(--lh-tight);letter-spacing:var(--ls-body)}
.small{font-size:var(--fs-small);letter-spacing:var(--ls-small)}
.micro{font-size:var(--fs-micro);letter-spacing:var(--ls-micro)}
.muted{color:var(--c-grey-400)}

/* ── info strip: одно из трёх мест, где цвет живёт в покое ── */
.strip{background:var(--c-accent-soft);font-size:var(--fs-micro);
 letter-spacing:var(--ls-micro);padding:7px 0}
.strip .container{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ── header: 59px, sticky ── */
header{position:sticky;top:0;z-index:50;background:var(--c-white);
 border-bottom:var(--border) var(--c-grey-200)}
.hbar{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:22px;width:auto}
.logo span{font-size:var(--fs-micro);letter-spacing:var(--ls-micro);color:var(--c-grey-400)}
nav.main{display:flex;gap:24px;align-items:center}
nav.main a{font-size:var(--fs-small);letter-spacing:var(--ls-small);
 font-weight:var(--fw-medium);transition:color var(--dur,.3s) ease;position:relative}
nav.main a:hover{color:var(--c-grey-400)}
nav.main a.on::before{content:"";position:absolute;left:50%;top:-9px;width:3px;height:3px;
 border-radius:var(--radius-round);background:var(--c-black);transform:translateX(-50%)}
.hcta{font-size:var(--fs-small);letter-spacing:var(--ls-small);white-space:nowrap}
.hcta b{font-weight:var(--fw-bold)}
@media(max-width:1023px){nav.main{display:none}}

/* ── buttons: чёрная → фиолетовая на hover ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
 min-width:var(--btn-min-w);padding:var(--btn-pad);border-radius:var(--radius);
 font-size:var(--fs-body);line-height:var(--lh-tight);letter-spacing:var(--ls-body);
 font-weight:var(--fw-medium);cursor:pointer;border:var(--border) transparent;
 transition:background .3s ease,color .3s ease,border-color .3s ease}
.btn-primary{background:var(--c-black);color:var(--c-white)}
.btn-primary:hover{background:var(--c-accent)}
.btn-secondary{background:var(--c-accent);color:var(--c-white)}
.btn-secondary:hover{background:var(--c-black)}
.btn-ghost{background:transparent;color:var(--c-black);border-color:var(--c-black)}
.btn-ghost:hover{border-color:var(--c-grey-400);color:var(--c-grey-400)}
.btn-white{background:var(--c-white);color:var(--c-black)}
.btn-white:hover{background:var(--c-accent);color:var(--c-white)}
@media(max-width:600px){.btn{min-width:0;width:100%}}

/* ── hero: полноэкранное фото, текст защищён градиентом ── */
.hero{position:relative;height:calc(100svh - var(--header-h) - 30px);min-height:520px;
 display:flex;align-items:flex-end;overflow:hidden;background:var(--c-black)}
.hero-ph{position:absolute;inset:0}
.hero-ph img{width:100%;height:100%;object-fit:cover}
.hero-ph::after{content:"";position:absolute;inset:0;
 background:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,.15) 30%,rgba(0,0,0,.75) 100%)}
.hero .container{position:relative;z-index:2;padding-bottom:var(--space-64);color:var(--c-white)}
.hero .display{max-width:16ch;margin-bottom:var(--space-24)}
.hero p{max-width:52ch;margin-bottom:var(--space-32);color:rgba(255,255,255,.92)}
.hero-actions{display:flex;gap:var(--space-8);flex-wrap:wrap}

/* ── tabs категорий по нижней кромке, как на maytoni.ru ── */
.tabs{border-top:var(--border) var(--c-grey-200);background:var(--c-white)}
.tabs .container{display:flex;gap:0;overflow-x:auto}
.tabs a{flex:1;min-width:150px;padding:var(--space-18) var(--space-16);
 border-right:var(--border) var(--c-grey-200);font-size:var(--fs-small);
 letter-spacing:var(--ls-small);transition:background .3s ease,color .3s ease}
.tabs a:first-child{border-left:var(--border) var(--c-grey-200)}
.tabs a:hover{background:var(--c-black);color:var(--c-white)}
.tabs b{display:block;font-weight:var(--fw-medium);margin-bottom:2px}
.tabs span{color:var(--c-grey-400);font-size:var(--fs-micro)}
.tabs a:hover span{color:rgba(255,255,255,.6)}

section{padding:var(--space-110) 0}
section.tight{padding:var(--space-64) 0}
.shead{margin-bottom:var(--space-40);max-width:62ch}
.shead h2{margin-bottom:var(--space-12)}
.shead p{color:var(--c-grey-400)}

/* ── карточка товара: фото 1:1 contain, без рамки и тени ── */
.grid{display:grid;grid-template-columns:repeat(4,calc(25% - 6px));gap:var(--grid-gap)}
@media(max-width:1200px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}}
.pcard{display:flex;flex-direction:column;padding-bottom:var(--space-16)}
.pcard-ph{aspect-ratio:var(--card-photo-ratio);overflow:hidden;background:var(--c-white);
 display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-16)}
.pcard-ph img{width:100%;height:100%;object-fit:contain;
 transition:transform 1s ease}
.pcard:hover .pcard-ph img{transform:scale(1.1)}
.pcard .ser{font-size:var(--fs-micro);letter-spacing:var(--ls-micro);
 color:var(--c-grey-400);margin-bottom:var(--space-4);text-transform:none}
.pcard h3{margin-bottom:var(--space-8);line-height:var(--lh-tight)}
.pcard .price{font-weight:var(--fw-bold);line-height:var(--lh-tight)}
.pcard .art{font-size:var(--fs-micro);letter-spacing:var(--ls-micro);
 color:var(--c-grey-400);margin-top:var(--space-4)}

/* ── категории: широкие плитки с фото ── */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap)}
@media(max-width:820px){.cats{grid-template-columns:1fr}}
.cat{position:relative;aspect-ratio:16/9;overflow:hidden;display:flex;align-items:flex-end;
 background:var(--c-grey-100)}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 transition:transform 1s ease}
.cat:hover img{transform:scale(1.025)}
.cat::after{content:"";position:absolute;inset:0;background:var(--grad-photo-bottom);
 opacity:.3;transition:opacity 1s ease}
.cat:hover::after{opacity:.2}
.cat-t{position:relative;z-index:2;padding:var(--space-24);color:var(--c-white)}
.cat-t b{display:block;font-size:var(--fs-h2);line-height:var(--lh-h2);
 letter-spacing:var(--ls-h2);font-weight:var(--fw-bold);margin-bottom:var(--space-4)}
.cat-t span{font-size:var(--fs-small);letter-spacing:var(--ls-small);opacity:.86}

/* ── числа: разделены линиями, без панелей ── */
.figs{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--border) var(--c-grey-200)}
@media(max-width:820px){.figs{grid-template-columns:repeat(2,1fr)}}
.fig{padding:var(--space-32) var(--space-16) var(--space-24) 0;
 border-bottom:var(--border) var(--c-grey-200)}
.fig b{display:block;font-size:var(--fs-h1);line-height:var(--lh-h1);
 letter-spacing:var(--ls-h1);font-weight:var(--fw-bold);margin-bottom:var(--space-8)}
.fig span{color:var(--c-grey-400);font-size:var(--fs-small);letter-spacing:var(--ls-small)}

/* ── split-блок с фото ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-64);align-items:center}
@media(max-width:1023px){.split{grid-template-columns:1fr;gap:var(--space-32)}}
.split-ph{aspect-ratio:4/3;overflow:hidden;background:var(--c-grey-100)}
.split-ph img{width:100%;height:100%;object-fit:cover}

/* ── строки серий ── */
.series{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.series a{border:var(--border) var(--c-grey-200);padding:10px var(--space-16);
 font-size:var(--fs-small);letter-spacing:var(--ls-small);
 transition:border-color .3s ease,color .3s ease}
.series a:hover{border-color:var(--c-black)}

/* ── PDP ── */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-64);
 padding-top:var(--space-40)}
@media(max-width:1023px){.pdp{grid-template-columns:1fr;gap:var(--space-32)}}
.pdp-main{aspect-ratio:1;background:var(--c-white);display:flex;align-items:center;
 justify-content:center;border:var(--border) var(--c-grey-200)}
.pdp-main img{width:100%;height:100%;object-fit:contain}
.thumbs{display:flex;gap:var(--space-8);margin-top:var(--space-8)}
.thumbs img{width:var(--card-sm);height:var(--card-sm);object-fit:contain;
 border:var(--border) var(--c-grey-200);cursor:pointer;transition:border-color .3s ease}
.thumbs img:hover{border-color:var(--c-black)}
.pdp .price-big{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);
 font-weight:var(--fw-bold);margin:var(--space-16) 0}
.spec{width:100%;border-collapse:collapse;margin:var(--space-24) 0}
.spec tr{border-bottom:var(--border) var(--c-grey-200)}
.spec th,.spec td{text-align:left;padding:var(--space-12) 0;font-weight:var(--fw-regular);
 font-size:var(--fs-small);letter-spacing:var(--ls-small);vertical-align:top}
.spec th{color:var(--c-grey-400);width:46%}
.pdp-actions{display:flex;gap:var(--space-8);flex-wrap:wrap;margin-top:var(--space-24)}

.crumbs{font-size:var(--fs-micro);letter-spacing:var(--ls-micro);color:var(--c-grey-400);
 padding:var(--space-24) 0 0}
.crumbs a:hover{color:var(--c-black)}

/* ── форма ── */
.lead-block{background:var(--c-black);color:var(--c-white);padding:var(--space-110) 0}
.lead-block h2{color:var(--c-white)}
.lead-g{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-64);align-items:start}
@media(max-width:1023px){.lead-g{grid-template-columns:1fr;gap:var(--space-32)}}
.lead-g ul{list-style:none;margin-top:var(--space-24)}
.lead-g li{padding:var(--space-12) 0;border-bottom:1px solid rgba(255,255,255,.18);
 font-size:var(--fs-small);letter-spacing:var(--ls-small)}
form label{display:block;font-size:var(--fs-micro);letter-spacing:var(--ls-micro);
 color:var(--c-grey-400);margin-bottom:6px}
form input,form select{width:100%;background:transparent;color:var(--c-white);
 border:none;border-bottom:1px solid rgba(255,255,255,.3);border-radius:var(--radius);
 padding:var(--space-12) 0;margin-bottom:var(--space-24);font-family:inherit;
 font-size:var(--fs-body);letter-spacing:var(--ls-body);transition:border-color .3s ease}
form input:focus,form select:focus{outline:none;border-bottom-color:var(--c-accent)}
form select option{background:var(--c-black)}
form .btn{width:100%}
form .note{font-size:var(--fs-micro);letter-spacing:var(--ls-micro);
 color:var(--c-grey-400);margin-top:var(--space-12)}
.contacts-row{display:flex;gap:var(--space-32);flex-wrap:wrap;margin-top:var(--space-32);
 padding-top:var(--space-24);border-top:1px solid rgba(255,255,255,.18);
 font-size:var(--fs-small);letter-spacing:var(--ls-small)}
.contacts-row a:hover{color:var(--c-accent)}

footer{padding:var(--space-64) 0 var(--space-32);border-top:var(--border) var(--c-grey-200);
 margin-top:var(--space-126)}
.fgrid{display:flex;justify-content:space-between;gap:var(--space-32);flex-wrap:wrap;
 padding-bottom:var(--space-24);border-bottom:var(--border) var(--c-grey-200)}
footer .small{color:var(--c-grey-400)}
footer a:hover{color:var(--c-accent)}
.fbot{display:flex;justify-content:space-between;gap:var(--space-16);flex-wrap:wrap;
 margin-top:var(--space-24);font-size:var(--fs-micro);letter-spacing:var(--ls-micro);
 color:var(--c-grey-400)}