/* ═══════════════════════════════════════════════════════════════════════
   ecom.vrati-bg.com — продуктов лендинг
   Дизайн токените са 1:1 с vrati-bg.com/assets/css/base.css.

   MOBILE-FIRST И БУКВАЛНО: първият екран на телефон (390×844) трябва да
   побере снимката, цената и бутона. Затова визуален header НЯМА, а
   заглавието и отстоянията тук са нарочно по-малки от desktop.
   ═══════════════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

:root{
  --bg:#F8F7F4;
  --white:#FFF;
  --warm-50:#F3F1ED;
  --warm-100:#E8E5DF;
  --warm-200:#D4D0C8;
  --dark:#1E1E1E;
  --mid:#6E6E6E;
  --light:#A3A3A3;
  --blue:#2C5F7C;
  --blue-light:#E9F0F5;
  --blue-dark:#234E66;
  --green:#15803D;
  --green-light:#E7F4EC;
  --red:#B91C1C;
  --red-light:#FCEBEB;
  --amber-light:#FDF5E6;
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --r:10px;
  --r-lg:16px;
  --wrap:1140px;
  --header-h:0px;       /* визуален header НЯМА — променливата остава,
                           за да е един ред връщането му при нужда */
}

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--dark);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;

  /* Футърът винаги долепен най-долу, дори на къса страница
     (thank-you без поръчка, правните страници).
     dvh, а не vh — иначе адресната лента на телефона мести дъното. */
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
main{flex:1 0 auto}

img{max-width:100%;height:auto;display:block}

/* Отместване на anchor-целите. Лепкав header няма, затова е малко. */
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

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

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--dark);color:#fff;padding:12px 20px;
  font-size:14px;font-weight:600;text-decoration:none;
}
.skip-link:focus{left:0}

.sr-only{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ─── Секции ──────────────────────────────────────────────────────────── */
.sec{padding:34px 0}
.sec+.sec{border-top:1px solid var(--warm-100)}
.sec-title{font-size:21px;font-weight:800;letter-spacing:-.5px;line-height:1.25}
.sec-intro{color:var(--mid);margin-top:8px;max-width:60ch;font-size:14px}
.sec-head{margin-bottom:20px}

/* ─── Бутони ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:13px 26px;
  border:1px solid transparent;border-radius:10px;
  font-family:inherit;font-size:16px;font-weight:700;
  text-decoration:none;cursor:pointer;
  transition:background .18s,transform .12s,border-color .18s;
}
.btn-primary{background:var(--dark);color:#fff}
.btn-primary:hover{background:var(--blue)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--dark);border-color:var(--warm-200);font-size:15px}
.btn-ghost:hover{background:var(--warm-50)}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn[disabled]:hover{background:var(--dark)}

/* ═══ 1. HERO ═════════════════════════════════════════════════════════ */
/* Ред на mobile: заглавие → carousel → цена → CTA → trust */
.hero{padding:12px 0 26px}
.hero-grid{display:grid;gap:14px}
.hero-title{
  font-size:21px;font-weight:800;letter-spacing:-.5px;line-height:1.2;
  order:1;
}
.hero-sub{
  font-size:14.5px;color:var(--mid);line-height:1.45;
  margin-top:6px;max-width:46ch;order:1;
}
.hero-car{order:2}
.hero-buy{order:3}

.hero-price-lbl{font-size:12.5px;color:var(--mid);font-weight:600;margin-top:2px}
.hero-price-amt{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1.05;margin-top:1px}
.hero-price-note{font-size:12px;color:var(--light);margin-top:3px}
.hero-cta{margin-top:12px}

/* ─── Carousel ─────────────────────────────────────────────────────────
   Слайдовете се наслагват в един grid клетка — така височината е фиксирана
   от съотношението и НЯМА layout shift при смяна. */
.car-stage{
  position:relative;display:grid;
  background:var(--white);border:1px solid var(--warm-100);
  border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/1;
}
.car-slide{
  grid-area:1/1;opacity:0;visibility:hidden;
  transition:opacity .28s ease;
}
.car-slide.is-active{opacity:1;visibility:visible}
/* contain, не cover: снимката се вижда цяла и не се реже отстрани.
   Фонът е бял, за да се слее с продуктовите кадри на бял фон. */
.car-slide img{width:100%;height:100%;object-fit:contain}

.car-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:38px;height:38px;border-radius:50%;border:0;
  background:rgba(255,255,255,.9);color:var(--dark);
  font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
}
.car-nav:hover{background:#fff}
.car-prev{left:8px}
.car-next{right:8px}
.car-caption{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:13.5px;font-weight:700;margin-top:9px;
  min-height:20px;                    /* пази височина, за да не подскача */
}
.swatch{
  width:14px;height:14px;flex:0 0 14px;border-radius:50%;
  border:1px solid rgba(0,0,0,.18);
}




/* ═══ 6. ОТЗИВИ ══════════════════════════════════════════════════════ */
.reviews{display:grid;gap:12px}
.review{
  background:var(--white);border:1px solid var(--warm-100);
  border-radius:var(--r);padding:17px;
}
.review-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.review-av{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  background:var(--warm-100);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:var(--mid);
}
.review-av img{width:100%;height:100%;object-fit:cover}
.review-name{font-size:14px;font-weight:700}
.review-meta{font-size:12px;color:var(--light)}
.stars{color:#D9A441;font-size:13px;letter-spacing:1px}
.review p{font-size:13.5px;color:var(--mid);line-height:1.55}
.verified-tag{
  display:inline-block;background:var(--green-light);color:var(--green);
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:5px;margin-top:10px;
}


/* ═══ Карусел със снимки (галерии) ═══════════════════════════════════ */
.photo-car{min-width:0}
.pc-stage{
  position:relative;display:grid;
  background:var(--warm-50);border:1px solid var(--warm-100);
  border-radius:var(--r-lg);overflow:hidden;
}
.pc-slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .25s ease}
.pc-slide.is-active{opacity:1;visibility:visible}
.pc-slide img{width:100%;height:100%;object-fit:cover}
/* Схемите се показват цели — изрязването им губи детайл. Фонът съвпада
   с този на самите схеми, за да не личи рамка около тях. */
.pc-contain .pc-stage{background:#FBFAF7}
.pc-contain .pc-slide img{object-fit:contain;padding:12px}
.pc-count{
  position:absolute;left:12px;bottom:12px;
  background:rgba(30,30,30,.72);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.4px;
  padding:5px 11px;border-radius:20px;pointer-events:none;
}
.pc-caption{position:relative;min-height:22px;margin-top:10px;text-align:center}
.pc-cap{
  position:absolute;left:0;right:0;top:0;
  font-size:13.5px;color:var(--mid);line-height:1.4;
  opacity:0;transition:opacity .2s;overflow-wrap:anywhere;
}
.pc-cap.is-active{opacity:1;position:static}

/* Отзив под снимката: звезди, име, коментар */
.pc-reviews{position:relative;margin-top:14px;text-align:center}
.pc-rev{
  position:absolute;left:0;right:0;top:0;
  display:none;flex-direction:column;align-items:center;gap:4px;
}
.pc-rev.is-active{display:flex;position:static}
.pc-rev .stars{color:#D9A441;font-size:16px;letter-spacing:2px;line-height:1}
.pc-rev-name{font-size:14px;font-weight:700;overflow-wrap:anywhere}
.pc-rev-text{
  font-size:13.5px;color:var(--mid);line-height:1.5;
  max-width:44ch;overflow-wrap:anywhere;
}

/* ═══ 8. CHECKOUT ════════════════════════════════════════════════════ */
.order-grid{display:grid;gap:18px}
.form-card,.summary-card{
  background:var(--white);border:1px solid var(--warm-100);
  border-radius:var(--r-lg);padding:18px 16px;
}
.step-head{display:flex;align-items:center;gap:10px;margin:20px 0 12px}
.step-head:first-of-type{margin-top:0}
.step-head .n{
  width:24px;height:24px;flex:0 0 24px;border-radius:50%;
  background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
}
.step-head h3{font-size:14.5px;font-weight:700}

/* ─── Карти за модел (2 колони на mobile) ─── */
.model-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  border:0;padding:0;margin:0 0 6px;min-width:0;
}
.model-card{
  position:relative;display:block;cursor:pointer;
  background:var(--white);border:2px solid var(--warm-100);
  border-radius:12px;overflow:hidden;min-width:0;
  transition:border-color .16s,box-shadow .16s;
}
.model-card:hover{border-color:var(--warm-200)}
.model-card.is-on,.model-card:has(input:checked){
  border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light);
}
.model-card:focus-within{outline:3px solid var(--blue);outline-offset:2px}
.model-img{display:block;aspect-ratio:1/1;background:var(--warm-50)}
.model-img img{width:100%;height:100%;object-fit:cover}
.model-meta{display:block;padding:10px 12px 11px;border-top:1px solid var(--warm-100)}
.model-meta .nm{
  display:flex;align-items:center;gap:7px;
  font-size:14.5px;font-weight:700;line-height:1.25;overflow-wrap:anywhere;
}
.model-meta .nm .swatch{width:14px;height:14px;flex:0 0 14px}
.model-card.is-out{opacity:.5;cursor:not-allowed}
.model-card .out-tag{
  position:absolute;top:0;left:0;right:0;bottom:56px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(248,247,244,.72);font-size:12px;font-weight:700;color:var(--mid);
}
.model-card .suggested{
  position:absolute;top:8px;left:8px;z-index:2;
  background:var(--dark);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.3px;
  padding:3px 8px;border-radius:20px;
}

/* Избраното НЕ се показва само с цвят — има и отметка */
.tick{
  position:absolute;top:8px;right:8px;z-index:3;
  width:22px;height:22px;border-radius:50%;
  background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;line-height:1;
  opacity:0;transform:scale(.7);transition:opacity .15s,transform .15s;
}
.model-card.is-on .tick,.model-card:has(input:checked) .tick,
.qty-pick.is-on .tick,.qty-pick:has(input:checked) .tick{opacity:1;transform:scale(1)}

/* ─── Количество ───
   На телефон РЕДОВЕ, не колони: „135,00 EUR" не се побира в 85px и се
   пренася на два реда. От 960px нагоре има място за четири колони. */
.qty-row{
  display:grid;grid-template-columns:1fr;gap:8px;
  border:0;padding:0;margin:0;min-width:0;
}
.qty-pick{
  position:relative;display:block;cursor:pointer;
  border:2px solid var(--warm-100);border-radius:11px;
  background:var(--white);padding:12px 14px;min-width:0;
  transition:border-color .16s,box-shadow .16s;
}
.qty-pick:hover{border-color:var(--warm-200)}
.qty-pick.is-on,.qty-pick:has(input:checked){
  border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light);
}
.qty-pick:focus-within{outline:3px solid var(--blue);outline-offset:2px}
.qty-pick .tick{top:50%;right:12px;margin-top:-11px}

.qp-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.qp-row.qp-sub{margin-top:3px}
.qp-qty{font-size:15px;font-weight:800;line-height:1.2;white-space:nowrap}
.qp-qty small{font-weight:600;font-size:12px;color:var(--mid)}
.qp-tot{
  font-size:18px;font-weight:800;letter-spacing:-.4px;line-height:1.2;
  white-space:nowrap;margin-right:26px;   /* място за отметката */
}
.qp-per{font-size:12px;color:var(--mid);white-space:nowrap}
.qp-save{
  font-size:12px;font-weight:800;color:var(--green);
  background:var(--green-light);border-radius:5px;padding:2px 8px;
  white-space:nowrap;margin-right:26px;
}
.qty-pick .rec{
  position:absolute;top:-9px;left:12px;
  background:var(--blue);color:#fff;font-size:9.5px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;padding:3px 8px;border-radius:20px;
  white-space:nowrap;
}

/* ─── Полета ─── */
.field{margin-bottom:14px}
.field label,.fld-lbl{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field .req{color:var(--red)}
.opt-lbl{color:var(--light);font-weight:500}
.field .hint,.hint{font-size:12px;color:var(--light);font-weight:400;margin-top:5px}
.field input[type=text],.field input[type=tel],.field input[type=email],
.field select,.field textarea{
  width:100%;min-height:48px;padding:12px 14px;
  font-family:inherit;font-size:16px;color:var(--dark);   /* 16px = iOS не зумва */
  background:var(--white);
  border:1.5px solid var(--warm-200);border-radius:9px;
  transition:border-color .15s;
}
.field textarea{min-height:84px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue)}
.field.has-error input,.field.has-error select,.field.has-error textarea{
  border-color:var(--red);background:var(--red-light);
}
.field-err{
  display:none;align-items:flex-start;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--red);margin-top:7px;
}
.field.has-error .field-err,.has-error>.field-err,.field-err.on{display:flex}

.opt-row{display:grid;gap:8px;margin-bottom:14px}
.opt-row.cols-2{grid-template-columns:1fr 1fr}
.opt{
  display:flex;align-items:flex-start;gap:10px;
  border:1.5px solid var(--warm-200);border-radius:9px;
  padding:12px;cursor:pointer;min-height:52px;
  transition:border-color .15s,background .15s;
}
.opt:hover{background:var(--warm-50)}
.opt input{width:20px;height:20px;flex:0 0 20px;margin-top:1px;accent-color:var(--blue)}
.opt.on{border-color:var(--blue);background:var(--blue-light)}
.opt .t{display:block;font-size:14px;font-weight:700;line-height:1.3}
.opt .d{display:block;font-size:12px;color:var(--mid);margin-top:2px;line-height:1.35}

/* ─── Плащане ───
   Единственият метод: показва се, не се избира. Затова е <div>, а не
   чекбокс — нищо за отмаркиране, нищо за сгрешаване. */
.pay-card{
  display:flex;align-items:center;gap:12px;
  border:1.5px solid var(--blue);border-radius:9px;
  background:var(--blue-light);
  padding:13px 14px;margin-bottom:16px;min-height:56px;
}
.pay-ico{
  width:34px;height:34px;flex:0 0 34px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--white);color:var(--blue);
}
.pay-nm{flex:1;min-width:0;font-size:14.5px;font-weight:700;overflow-wrap:anywhere}
.pay-box{
  width:22px;height:22px;flex:0 0 22px;border-radius:50%;
  background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
}

.check-row{
  display:flex;align-items:flex-start;gap:12px;
  margin-bottom:12px;font-size:13px;line-height:1.55;cursor:pointer;
  min-height:44px;padding:6px 0;
}
.check-row input{width:20px;height:20px;flex:0 0 20px;margin-top:2px;accent-color:var(--blue)}
.check-row a{color:var(--blue);font-weight:600}
.check-row.has-error{
  background:var(--red-light);border-radius:8px;
  padding:10px;margin-left:-10px;margin-right:-10px;
}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ─── Обобщение над бутона (mobile) ─── */
.sum-inline{
  background:var(--warm-50);border:1px solid var(--warm-100);
  border-radius:12px;padding:12px 13px;margin:6px 0 14px;
}
.sum-inline-top{display:flex;align-items:center;gap:11px}
.sum-inline-txt{flex:1;min-width:0}
.sum-inline-txt .nm{
  display:block;font-size:13.5px;font-weight:700;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sum-inline-txt .cl{display:block;font-size:12px;color:var(--mid);margin-top:1px}
.sum-inline-amt{font-size:19px;font-weight:800;letter-spacing:-.5px;flex:0 0 auto}
.sum-inline-rows{
  display:flex;justify-content:space-between;gap:12px;
  font-size:12px;color:var(--mid);margin-top:9px;
  border-top:1px solid var(--warm-100);padding-top:8px;
}
.sum-thumb{
  width:46px;height:46px;flex:0 0 46px;border-radius:9px;
  background:var(--warm-100);overflow:hidden;display:block;
}
.sum-thumb img{width:100%;height:100%;object-fit:cover}

/* ─── Обобщение вдясно (desktop) ─── */
.summary-card{display:none}
.summary-card h3{font-size:15px;font-weight:800;margin-bottom:14px}
.sum-hero{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sum-hero-txt{min-width:0}
.sum-hero-nm{display:block;font-size:14.5px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.sum-hero-cl{display:block;font-size:12.5px;color:var(--mid);margin-top:2px}
.sum-row{
  display:flex;justify-content:space-between;gap:14px;
  padding:9px 0;font-size:13.5px;border-bottom:1px solid var(--warm-100);
}
.sum-row .k{color:var(--mid)}
.sum-row .v{font-weight:700;text-align:right;overflow-wrap:anywhere}
.sum-free{color:var(--green)}
.sum-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-top:14px;margin-top:4px;
}
.sum-total .k{font-size:14px;font-weight:700}
.sum-total .v{font-size:25px;font-weight:800;letter-spacing:-.7px}

.form-alert{
  display:none;gap:11px;align-items:flex-start;
  background:var(--red-light);border:1px solid #F0C9C9;color:var(--red);
  border-radius:9px;padding:13px 15px;margin-bottom:15px;
  font-size:13.5px;font-weight:600;line-height:1.5;
}
.form-alert.on{display:flex}

.btn .spinner{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .7s linear infinite;display:none;
}
.btn.busy .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}


/* ═══ Лепкава лента (mobile) ═════════════════════════════════════════ */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--warm-100);
  padding:8px 14px calc(8px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:11px;
  transform:translateY(120%);transition:transform .22s ease;
}
.sticky-cta.on{transform:translateY(0)}
.sticky-thumb{
  width:42px;height:42px;flex:0 0 42px;border-radius:9px;
  background:var(--warm-100);overflow:hidden;display:block;
}
.sticky-thumb img{width:100%;height:100%;object-fit:cover}
.sticky-cta .info{min-width:0;flex:1}
.sticky-cta .lbl{
  font-size:11.5px;color:var(--mid);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sticky-cta .amt{font-size:16.5px;font-weight:800;letter-spacing:-.3px;line-height:1.25}
.sticky-cta .btn{flex:0 0 auto;min-height:44px;padding:10px 20px;font-size:14.5px}

/* ═══ Footer ════════════════════════════════════════════════════════ */
.lp-footer{
  background:var(--white);border-top:1px solid var(--warm-100);
  padding:22px 0 calc(22px + env(safe-area-inset-bottom));
  margin-top:auto;   /* избутва футъра до дъното при късо съдържание */
  flex-shrink:0;
}
/* Връзките са на един ред с точки между тях — вертикалният списък
   правеше футъра излишно висок на телефон. */
.f-links{
  display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;column-gap:2px;row-gap:2px;
}
.f-links a{
  color:var(--mid);text-decoration:none;font-size:13px;
  padding:7px 10px;border-radius:6px;
}
.f-links a:hover{color:var(--dark);background:var(--warm-50)}
/* Разделителят е в потока, не абсолютен — иначе би излетял извън реда */
.f-links a:not(:last-child){
  border-right:1px solid var(--warm-100);
}
.lp-copy{
  text-align:center;font-size:12px;color:var(--light);
  margin-top:10px;padding-top:12px;border-top:1px solid var(--warm-100);
}

/* ═══ Правни страници ════════════════════════════════════════════════ */
.doc{max-width:760px;margin:0 auto;padding:32px 18px 52px}
.doc h1{font-size:24px;font-weight:800;letter-spacing:-.6px;margin-bottom:8px}
.doc .doc-meta{font-size:13px;color:var(--light);margin-bottom:24px}
.doc h2{font-size:16px;font-weight:700;margin:24px 0 8px}
.doc p,.doc li{font-size:14.5px;color:var(--mid);line-height:1.7}
.doc ul,.doc ol{margin:10px 0 10px 22px;display:grid;gap:6px}
.doc a{color:var(--blue)}

/* ═══ Thank-you ══════════════════════════════════════════════════════ */
.ty{max-width:620px;margin:0 auto;padding:40px 18px 56px;text-align:center}
.ty-ico{
  width:60px;height:60px;margin:0 auto 16px;border-radius:50%;
  background:var(--green-light);color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:28px;
}
.ty h1{font-size:24px;font-weight:800;letter-spacing:-.6px}
.ty-num{
  display:inline-block;margin:15px 0 6px;
  background:var(--white);border:1.5px dashed var(--warm-200);
  border-radius:10px;padding:11px 20px;
  font-size:20px;font-weight:800;letter-spacing:1px;
}
.ty-num-lbl{font-size:12.5px;color:var(--light);text-transform:uppercase;letter-spacing:1.2px}
.ty-card{
  background:var(--white);border:1px solid var(--warm-100);
  border-radius:var(--r-lg);padding:18px 16px;margin-top:20px;text-align:left;
}
.ty-card h2{font-size:15px;font-weight:700;margin-bottom:12px}
.ty-steps{list-style:none;display:grid;gap:12px}
.ty-steps li{display:flex;gap:12px;font-size:13.5px;color:var(--mid);line-height:1.5}
.ty-steps .n{
  flex:0 0 24px;width:24px;height:24px;border-radius:50%;
  background:var(--blue-light);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
}

/* ═══ Таблет ═════════════════════════════════════════════════════════ */
@media (min-width:640px){
  body{font-size:15.5px}
  .wrap{padding:0 24px}
  .sec{padding:48px 0}
  .sec-title{font-size:26px}
  .hero{padding:26px 0 40px}
  .hero-title{font-size:30px}
  .reviews{grid-template-columns:repeat(2,1fr)}
  .form-card,.summary-card{padding:22px 20px}
}

/* ═══ Desktop ════════════════════════════════════════════════════════ */
@media (min-width:960px){
  .sec{padding:60px 0}
  .sec-title{font-size:29px}
  .hero{padding:44px 0 52px}
  /* Две колони: текст вляво, carousel вдясно */
  .hero-grid{
    grid-template-columns:1fr 1fr;
    gap:0 48px;
    grid-template-areas:'title car' 'sub car' 'buy car';
    align-content:center;
  }
  .hero-title{grid-area:title;font-size:40px;align-self:end}
  .hero-sub{grid-area:sub;margin:10px 0 22px;align-self:start}
  .hero-car{grid-area:car;align-self:center}
  .hero-buy{grid-area:buy;align-self:start}
  .hero-cta{width:auto;padding-left:44px;padding-right:44px}
  .hero-price-amt{font-size:36px}
  .reviews{grid-template-columns:repeat(3,1fr)}
  /* На широк екран каруселът заемаше 1140px, което при 4:3 значи над
     850px височина. Ограничаваме го до четима големина. */
  .photo-car{max-width:680px;margin-left:auto;margin-right:auto}
  .order-grid{grid-template-columns:1.4fr 1fr;align-items:start;gap:28px}
  /* Тук вече има място за четири колони едно до друго */
  .qty-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
  .qty-pick{padding:14px 10px 12px;text-align:center}
  .qty-pick .tick{top:6px;right:6px;margin-top:0;width:18px;height:18px;font-size:10px}
  .qty-pick .rec{left:50%;transform:translateX(-50%)}
  .qp-row{display:block}
  .qp-tot{font-size:17px;margin-right:0;display:block;margin-top:7px}
  .qp-save{margin-right:0;display:inline-block;margin-top:5px}
  .qp-per{display:block;margin-top:2px}
  .summary-card{display:block;position:sticky;top:calc(var(--header-h) + 20px)}
  .sum-inline{display:none}       /* на desktop има sticky панел вдясно */
  .sticky-cta{display:none}
  .car-nav{width:42px;height:42px}
}

/* Лепкавата лента се скрива, щом футърът се появи (виж landing.js),
   затова в края на страницата НЕ е нужен отстъп — само празнина беше. */

/* ═══ Само телефон: първият екран е СНИМКА → ЦЕНА → БУТОН ════════════
   Всичко останало е или дублирано по-долу в страницата, или не помага
   на решението за покупка на този размер екран. */
@media (max-width:639px){
  /* Заглавието НЕ се трие — скрива се визуално. Google и екранните
     четци продължават да го виждат; страница без h1 губи от търсенето. */
  .hero-title{
    position:absolute!important;width:1px;height:1px;
    padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  .hero-sub{display:none}          /* дълго за първия екран */
  .hero{padding:8px 0 22px}
  .hero-grid{gap:10px}
}

/* ─── Банер към vrati-bg.com (partials/cross-banner.php) ────────────────
   Само на страницата за успешна поръчка. Снимката е ЦЯЛ банер 1200×400 —
   текстът е в нея, затова цялата картинка е линкът. aspect-ratio държи
   мястото ѝ още преди да се зареди, за да не подскача страницата. */
.xbanner-wrap{padding:8px 0 40px}
.xbanner{
  display:block;overflow:hidden;
  border:1px solid var(--warm-100);border-radius:var(--r-lg);
  background:var(--warm-50);
  transition:box-shadow .15s ease,transform .1s ease;
}
a.xbanner:hover{box-shadow:0 6px 20px rgba(30,30,30,.10)}
a.xbanner:active{transform:translateY(1px)}
a.xbanner:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.xbanner img{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover}

/* Резервният текстов вариант, докато снимката я няма */
.xbanner-solo{background:#FBFAF7}
.xbanner-solo .xb-text{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:38px 24px;
}
.xb-title{font-size:28px;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--dark)}
.xb-sub{margin-top:10px;font-size:15px;line-height:1.6;color:var(--mid)}
.xb-btn{
  display:inline-block;margin-top:22px;padding:13px 26px;
  background:var(--blue);color:#fff;border-radius:var(--r);
  font-size:15px;font-weight:600;text-decoration:none;
  transition:background .15s ease;
}
.xb-btn:hover{background:var(--blue-dark)}

@media (max-width:719px){
  .xbanner-wrap{padding:4px 0 28px}
  .xbanner-solo .xb-text{padding:26px 20px}
  .xb-title{font-size:23px}
  .xb-btn{width:100%;text-align:center}
}