/*
Theme Name: X-FORM
Theme URI: https://xform-massage.ru/
Author: студия X-FORM
Description: Тема сайта студии аппаратной коррекции фигуры X-FORM. Тексты, цены, контакты и фотографии редактируются в разделе «Внешний вид → Настроить». Заявки с формы записи сохраняются в админке в разделе «Заявки».
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: xform
*/

/* ==========================================================================
   X-FORM — студия аппаратной коррекции фигуры, Санкт-Петербург
   ========================================================================== */

/* ---------- шрифты (self-hosted: Google Fonts из РФ отдаётся нестабильно) --- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200;font-display:swap;
  src:url('assets/fonts/manrope-cyrillic-200-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200;font-display:swap;
  src:url('assets/fonts/manrope-latin-200-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;
  src:url('assets/fonts/manrope-cyrillic-300-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;
  src:url('assets/fonts/manrope-latin-300-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/manrope-cyrillic-400-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/manrope-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/manrope-cyrillic-600-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/manrope-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026;}

/* ---------- токены ---------- */
:root{
  --bg:#070707;
  --surface:#0f0f0f;
  --surface-2:#141414;
  --line:rgba(255,255,255,0.09);
  --line-soft:rgba(255,255,255,0.055);
  --text:#f4f3f0;          /* 18.1:1 */
  --dim:#a6a49e;           /*  8.1:1 */
  --mute:#8d8b8b;          /*  6.0:1 — минимум по ГОСТ 4.5:1 */
  --accent:#c98ffb;        /*  8.4:1 */
  --accent-deep:#9b5cff;
  --wrap:1200px;
  --gut:clamp(20px, 5vw, 48px);
  --r:10px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
/* атрибут height у <img> — презентационная подсказка; без этого логотип
   растягивается, когда ширину задаёт CSS (например, hero на телефоне) */
.logo img,.hero-logo,.footer-brand img,.tile-logo img{ height:auto; }
/* picture по умолчанию инлайновый — без этого width/height:100% у img не работает */
picture{ display:block; width:100%; height:100%; }
/* у figure браузерный margin 1em 40px — снимаем, иначе плитки уже своей колонки */
figure,figcaption{ margin:0; }
a{ color:inherit; }

:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- типографика ---------- */
h1,h2,h3,h4{ font-weight:200; letter-spacing:0.005em; margin:0; text-wrap:balance; }
h2{ font-size:clamp(28px,4.2vw,44px); line-height:1.18; }
h3{ font-size:clamp(19px,2.2vw,23px); line-height:1.3; font-weight:300; }
h4{ font-size:17px; font-weight:400; }
p{ margin:0; }

.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--mute);
}

.section{ padding:clamp(64px,9vw,120px) 0; }
.section-head{ max-width:640px; margin-bottom:clamp(36px,5vw,60px); }
.section-head .eyebrow{ display:block; margin-bottom:16px; }
.section-head p{ color:var(--dim); margin-top:16px; font-size:clamp(15px,1.6vw,17px); }

/* ---------- кнопки: подчёркивание при наведении ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:0 0 8px; border:0; background:none; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; text-decoration:none;
  white-space:nowrap; transition:color .25s ease;
}
.btn::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.65,0,.35,1);
}
.btn:hover::after,.btn:focus-visible::after{ transform:scaleX(1); }
.btn-primary{ color:var(--accent); }
.btn-ghost{ color:var(--dim); }
.btn-primary:hover,.btn-ghost:hover,
.btn-primary:focus-visible,.btn-ghost:focus-visible{ color:#fff; }

.btn-solid{
  padding:15px 30px; border-radius:var(--r);
  background:var(--accent); color:#14061f;
  font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  border:0; cursor:pointer; text-decoration:none; display:inline-block;
  transition:background .2s ease, transform .2s ease;
}
.btn-solid::after{ display:none; }
.btn-solid:hover,.btn-solid:focus-visible{ background:#dcaeff; }
.btn-solid:active{ transform:translateY(1px); }

/* ---------- шапка ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(7,7,7,0.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:background .3s ease;
}
.site-header .wrap{ display:flex; align-items:center; gap:24px; height:70px; }
.logo{ display:flex; align-items:center; flex:none; }
.logo img{ width:132px; height:auto; }

.nav{ margin-left:auto; display:flex; align-items:center; gap:30px; }
.nav a{
  font-size:13px; font-weight:400; letter-spacing:0.03em;
  color:var(--dim); text-decoration:none; transition:color .2s ease;
}
.nav a:hover,.nav a:focus-visible{ color:var(--text); }
.header-cta{ flex:none; }
.nav-book{ display:none; }   /* дублирующая кнопка — только для мобильного меню */

.burger{
  display:none; margin-left:auto; width:42px; height:42px;
  background:none; border:1px solid var(--line); border-radius:8px;
  cursor:pointer; padding:0; position:relative;
}
.burger span{
  position:absolute; left:11px; width:20px; height:1px; background:var(--text);
  transition:transform .28s ease, opacity .2s ease;
}
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:21px; }
.burger span:nth-child(3){ top:27px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- первый экран ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding-bottom:clamp(56px,9vw,110px); padding-top:120px; overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img,
.hero-media video{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,7,7,.75) 0%, rgba(7,7,7,.35) 40%, rgba(7,7,7,.95) 100%);
}
.hero-content{ position:relative; z-index:1; }
.hero-logo{ width:min(420px,72vw); margin-bottom:clamp(20px,3vw,30px); }
.hero-sub{
  max-width:520px; color:var(--text);
  font-size:clamp(16px,2.1vw,20px); font-weight:300; line-height:1.55;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:28px; align-items:center; margin-top:clamp(28px,4vw,40px); }

/* ---------- лента преимуществ ---------- */
.value-strip{ background:var(--surface); border-block:1px solid var(--line-soft); }
.value-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-soft);
}
.value-item{ background:var(--surface); padding:clamp(28px,3.4vw,40px) clamp(20px,2.4vw,30px); }
.value-item .num{
  font-size:11px; font-weight:600; letter-spacing:0.2em; color:var(--accent); margin-bottom:14px;
}
.value-item h4{ margin-bottom:10px; }
.value-item p{ color:var(--dim); font-size:14px; line-height:1.6; }

/* ---------- услуги ---------- */
.services-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.service-card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:clamp(24px,2.6vw,32px); min-height:230px;
  display:flex; flex-direction:column; justify-content:space-between; gap:22px;
  transition:border-color .25s ease, transform .25s ease;
}
.service-card:hover{ border-color:rgba(201,143,251,0.4); transform:translateY(-2px); }
.service-card .idx{ font-size:11px; font-weight:600; letter-spacing:0.2em; color:var(--accent); }
.service-card h3{ margin:18px 0 10px; }
.service-card p{ color:var(--dim); font-size:14.5px; }
.service-card .price-from{ color:var(--mute); font-size:13px; margin-top:12px; }

/* ---------- оборудование ---------- */
.device{ background:var(--surface); border-block:1px solid var(--line-soft); }
.device-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.device-media img{
  width:100%; border-radius:var(--r);
  aspect-ratio:3/4; max-height:600px; object-fit:cover;
}
.device-list{ list-style:none; padding:0; margin:28px 0 0; display:grid; gap:14px; }
.device-list li{ position:relative; padding-left:22px; color:var(--dim); font-size:15px; }
.device-list li::before{
  content:""; position:absolute; left:0; top:11px; width:8px; height:1px; background:var(--accent);
}
.device-text p{ color:var(--dim); margin-top:18px; font-size:16px; }

/* ---------- галерея студии ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gallery-item{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/5; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; }
.gallery-item .cap{
  position:absolute; left:0; right:0; bottom:0; padding:26px 20px 16px;
  background:linear-gradient(180deg, rgba(7,7,7,0) 0%, rgba(7,7,7,.9) 100%);
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text);
}
.gallery-item.tile-logo{ background:#050505; display:grid; place-items:center; }
.gallery-item.tile-logo img{ width:58%; height:auto; object-fit:contain; }
/* Плитка с логотипом идёт последней, а фотографий может быть сколько угодно.
   Если она осталась в ряду одна или вдвоём — растягиваем её на свободную
   ширину, иначе в конце галереи болтается одинокий квадрат. */
@media (min-width:641px){
  .gallery-item.tile-logo:last-child:nth-child(3n+1){ grid-column:1 / -1; aspect-ratio:7/1; }
  .gallery-item.tile-logo:last-child:nth-child(3n+1) img{ width:min(300px,26%); }
  .gallery-item.tile-logo:last-child:nth-child(3n+2){ grid-column:span 2; aspect-ratio:auto; }
  .gallery-item.tile-logo:last-child:nth-child(3n+2) img{ width:38%; }
}

/* ---------- цены ---------- */
.pricing-tabs{
  display:flex; flex-wrap:wrap; gap:26px; margin-bottom:34px;
  border-bottom:1px solid var(--line-soft); padding-bottom:0;
}
.ptab{
  position:relative; background:none; border:0; padding:0 0 14px; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--dim); transition:color .2s ease;
}
.ptab::after{
  content:""; position:absolute; left:0; bottom:-1px; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .35s cubic-bezier(.65,0,.35,1);
}
.ptab:hover{ color:#fff; }
.ptab:hover::after{ transform:scaleX(1); }
.ptab[aria-selected="true"]{ color:var(--accent); }
.ptab[aria-selected="true"]::after{ transform:scaleX(1); }

.price-table{ width:100%; border-collapse:collapse; }
.price-table th{
  text-align:left; padding:0 0 14px; font-size:11px; font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--mute);
  border-bottom:1px solid var(--line-soft);
}
.price-table th:last-child,.price-table td:last-child{ text-align:right; }
.price-table td{
  padding:18px 0; border-bottom:1px solid var(--line-soft);
  font-size:16px; color:var(--text); font-variant-numeric:tabular-nums;
}
.price-table td:last-child{ font-weight:400; }
.price-table tr:last-child td{ border-bottom:0; }
.price-note{ color:var(--mute); font-size:13px; margin-top:18px; }

/* ---------- доверие ---------- */
.stats-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin-bottom:clamp(32px,4vw,48px);
}
.stat{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:26px 22px;
}
.stat .n{ font-size:clamp(26px,3.4vw,34px); font-weight:200; color:var(--accent); }
.stat .l{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--mute); margin-top:6px; }

.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.review-card{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:clamp(24px,2.6vw,30px);
}
.review-card .stars{ color:var(--accent); letter-spacing:3px; font-size:13px; }
.review-card p{ margin:16px 0 18px; color:var(--dim); font-size:15px; }
.review-card .who{ font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--mute); }

/* ---------- запись ---------- */
.booking{ background:var(--surface); border-block:1px solid var(--line-soft); }
.booking-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:start; }
.booking-aside p{ color:var(--dim); margin-top:18px; }
.contact-list{ list-style:none; padding:0; margin:30px 0 0; display:grid; gap:18px; }
.contact-list li{ display:grid; gap:4px; }
.contact-list .k{ font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--mute); }
.contact-list a{ color:var(--text); text-decoration:none; font-size:17px; }
.contact-list a:hover{ color:var(--accent); }

.form-row{ display:grid; gap:8px; margin-bottom:18px; }
.form-row label{ font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--mute); }
.form-row input,.form-row select,.form-row textarea{
  width:100%; padding:14px 16px; border-radius:8px;
  background:var(--surface-2); color:var(--text);
  border:1px solid var(--line); font-family:inherit; font-size:15px; font-weight:300;
  transition:border-color .2s ease;
}
.form-row input::placeholder,.form-row textarea::placeholder{ color:#6f6d68; }
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  border-color:var(--accent); outline:none;
}
.form-row textarea{ min-height:96px; resize:vertical; }

.consent{ display:flex; gap:12px; align-items:flex-start; margin:22px 0 26px; }
.consent input{ margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--accent-deep); }
.consent label{ font-size:13px; color:var(--dim); line-height:1.55; }
.consent a{ color:var(--accent); }

.hp{ position:absolute; left:-9999px; opacity:0; height:0; }

.form-msg{ margin-top:16px; font-size:14px; }
.form-msg.ok{ color:var(--accent); }
.form-msg.err{ color:#ff8a8a; }

/* ---------- баннер ---------- */
.cta-banner{ text-align:center; }
.cta-banner .actions{ display:flex; gap:28px; justify-content:center; flex-wrap:wrap; margin-top:30px; }

/* ---------- подвал ---------- */
.site-footer{ background:var(--surface); border-top:1px solid var(--line-soft); padding:clamp(52px,6vw,72px) 0 30px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:clamp(28px,4vw,48px); }
.footer-brand img{ width:150px; margin-bottom:18px; }
.footer-brand p{ color:var(--dim); font-size:14px; max-width:300px; }
.site-footer h5{
  font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--mute); margin:0 0 16px;
}
.site-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.site-footer li a,.site-footer li span{ color:var(--dim); text-decoration:none; font-size:14px; }
.site-footer li a:hover{ color:var(--text); }

.biz-strip{
  margin-top:clamp(38px,5vw,56px); padding:22px 0; border-block:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px;
}
.biz-strip .label{ font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); }
.biz-strip a{ color:var(--dim); text-decoration:none; font-size:14px; }
.biz-strip a:hover{ color:var(--text); }

.legal{ margin-top:26px; display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between; }
.legal p,.legal a{ color:var(--mute); font-size:12.5px; text-decoration:none; margin:0; }
.legal a:hover{ color:var(--dim); }

/* ---------- страница политики ---------- */
.doc{ padding:130px 0 90px; }
.doc .wrap{ max-width:820px; }
.doc h1{ font-size:clamp(26px,4vw,38px); margin-bottom:10px; }
.doc .updated{ color:var(--mute); font-size:13px; margin-bottom:40px; }
.doc h2{ font-size:clamp(19px,2.4vw,23px); font-weight:300; margin:38px 0 14px; }
.doc p,.doc li{ color:var(--dim); font-size:15.5px; line-height:1.75; }
.doc p+p{ margin-top:12px; }
.doc ul{ margin:12px 0; padding-left:20px; display:grid; gap:8px; }
.doc a{ color:var(--accent); }

/* ---------- адаптив ---------- */
@media (max-width:1000px){
  .nav,.header-cta{ display:none; }
  .burger{ display:block; }
  .site-header.open .nav{
    display:flex; position:absolute; top:70px; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line); padding:8px var(--gut) 22px;
  }
  .site-header.open .nav a{ padding:13px 0; width:100%; border-bottom:1px solid var(--line-soft); font-size:15px; }
  .site-header.open .nav .nav-book{
    display:block; border-bottom:0; margin-top:14px; padding:14px 0;
    color:var(--accent); font-size:12px; font-weight:600;
    letter-spacing:0.16em; text-transform:uppercase;
  }
  .value-grid{ grid-template-columns:repeat(2,1fr); }
  .services-grid,.reviews-grid{ grid-template-columns:repeat(2,1fr); }
  .device-grid,.booking-grid{ grid-template-columns:1fr; }
  .device-media img{ aspect-ratio:16/10; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .value-grid{ grid-template-columns:1fr; }
  .services-grid,.reviews-grid,.gallery-grid{ grid-template-columns:1fr; }
  .stats-row{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; }
  /* Галерея на телефоне — лента с пролистыванием вбок, а не столбик в экран
     высотой: фотографии остаются крупными, кадр тот же, что на десктопе.
     Соседняя плитка выглядывает справа — это и есть подсказка, что лента листается. */
  .gallery-grid{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:76%;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gut);
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);
    scrollbar-width:none;
  }
  .gallery-grid::-webkit-scrollbar{ display:none; }
  .gallery-item{ aspect-ratio:4/5; scroll-snap-align:start; }
  .gallery-item.tile-logo{ aspect-ratio:4/5; }
  .hero{ min-height:88svh; }
  .price-table td{ font-size:15px; padding:15px 0; }
  .legal{ flex-direction:column; }
}