*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Noto Sans',sans-serif;color:#111}
.container{max-width:1000px;margin:0 auto;padding:0 16px}
.header{border-bottom:1px solid #eee;background:#fafafa;position:sticky;top:0;z-index:10}
.header__inner{display:flex;align-items:center;gap:16px;justify-content:space-between;min-height:56px}
.logo{font-weight:800;color:#111;text-decoration:none}
.nav a{margin:0 8px;color:#333;text-decoration:none}
.top-right{display:flex;align-items:center;gap:16px}
.phone{font-weight:700;color:#111;text-decoration:none;white-space:nowrap}
.city{display:flex;align-items:center;gap:8px}
.hero{padding:28px 0 12px}
h1{font-size:28px;margin:0 0 8px}
h2{font-size:22px;margin:16px 0}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;background:#0b57d0;color:#fff;text-decoration:none;border:0;cursor:pointer}
.btn-sm{padding:8px 12px;font-size:14px}
.models .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:12px}
.card{border:1px solid #eee;border-radius:16px;padding:12px;background:#fff;display:flex;flex-direction:column;gap:10px}
.card img{width:100%;height:160px;object-fit:cover;border-radius:12px;background:#f2f2f2;cursor:pointer}
.card h3{margin:0 0 4px;font-size:18px;cursor:pointer}
.price{display:flex;align-items:baseline;gap:8px}
.price-amount{font-size:20px;font-weight:800}
.price-note{font-size:13px;color:#666}
.card .actions{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:6px}
.muted{color:#777;font-size:14px;margin:8px 0 0}
.footer{border-top:1px solid #eee;padding:16px 0;margin-top:24px;color:#555}
.small-note{font-size:12px;color:#777}
.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:1000}
.modal.hidden{display:none}
.modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px)}
.modal__dialog{position:relative;background:#fff;border-radius:16px;max-width:960px;width:92vw;max-height:90vh;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.modal__close{position:absolute;top:8px;right:10px;font-size:28px;line-height:1;border:0;background:transparent;cursor:pointer;padding:6px 8px}
.modal__content{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;padding:16px}
.modal__gallery{position:relative;background:#f5f5f5;border-radius:12px;display:grid;place-items:center;min-height:320px}
.modal__gallery img{max-width:100%;max-height:70vh;border-radius:10px}
.gallery__nav{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(255,255,255,.75);backdrop-filter:blur(1.5px);width:40px;height:40px;border-radius:999px;cursor:pointer;font-size:28px;line-height:38px;text-align:center}
.gallery__nav:hover{background:rgba(255,255,255,.95)}
.gallery__nav.prev{left:8px}.gallery__nav.next{right:8px}
.gallery__counter{position:absolute;bottom:8px;right:12px;background:rgba(0,0,0,.55);color:#fff;padding:4px 8px;border-radius:999px;font-size:12px}
.modal__info h3{margin:0 0 8px}
.specs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.specs li{display:flex;gap:8px}.specs li b{min-width:120px}
.modal__actions{margin-top:12px}
.contacts__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.branch{padding:10px;border:1px solid #eee;border-radius:12px;background:#fff}
.map{width:100%;height:400px;border-radius:12px;border:1px solid #eee;overflow:hidden}
@media (max-width: 820px){.modal__content{grid-template-columns:1fr}.modal__gallery{min-height:240px}.specs{grid-template-columns:1fr}.contacts__grid{grid-template-columns:1fr}}

/* Booking form improvements */
.modal__content.booking{grid-template-columns:1fr; max-width:800px}
.booking__head h3{margin:0 0 6px}
.booking__form{display:grid; gap:14px; margin-top:6px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width: 720px){ .form-row{grid-template-columns:1fr} }
.booking__form label{display:flex; flex-direction:column; gap:6px; font-weight:600}
.booking__form input,
.booking__form select{appearance:none; width:100%; padding:12px 14px; border:1px solid #dadada; border-radius:12px; font:inherit; font-size:16px; background:#fff}
.booking__form input:focus,
.booking__form select:focus{outline:2px solid #0b57d0; outline-offset:1px; border-color:#0b57d0}
.booking__form button.btn{justify-self:start; padding:12px 18px; border-radius:12px; font-weight:700}
.form-status{min-height:20px; color:#0b57d0; font-size:14px}

/* Pretty city select in header */
.city label{font-weight:600;color:#666}
#citySelect{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding:10px 36px 10px 12px;
  border:1px solid #dadada;
  border-radius:12px;
  background:#fff;
  font:inherit;
  font-weight:700;
  line-height:1.2;
  color:#111;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' fill='none' stroke='%23333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:16px;
  cursor:pointer;
}
#citySelect:focus{
  outline:2px solid #0b57d0;
  outline-offset:1px;
  border-color:#0b57d0;
}
#citySelect:hover{border-color:#c8c8c8}
.header .top-right{gap:12px}


/* FAQ styled like the city select */
.faq{margin:28px 0}
.faq__list{display:grid;gap:12px}
.faq__item{border:none;background:transparent}
.faq__item summary{
  list-style:none;
  cursor:pointer;
  position:relative;
  padding:12px 44px 12px 14px;
  font-weight:700;
  color:#111;
  border:1px solid #dadada;
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{border-color:#c8c8c8}
.faq__item[open] summary{border-color:#0b57d0; box-shadow:0 0 0 3px rgba(11,87,208,.12);}

.faq__item summary:after{
  content:"";
  position:absolute;
  right:12px; top:50%; transform:translateY(-50%);
  width:20px;height:20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' fill='none' stroke='%23333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:18px;background-position:center;
  transition: transform .2s ease;
}
.faq__item[open] summary:after{ transform:translateY(-50%) rotate(180deg); }

.faq__answer{
  padding:12px 14px;
  margin-top:8px;
  margin-left:2px; margin-right:2px;
  border-left:1px solid #eaeaea; border-right:1px solid #eaeaea; border-bottom:1px solid #eaeaea;
  border-radius:0 0 12px 12px;
  background:#fff;
  color:#333;
}


/* TG link tweak */
.tg-link{white-space:nowrap}


/* Telegram icon button */
.tg-icon{
  display:inline-grid;
  place-items:center;
  width:40px; height:40px;
  border:1px solid #dadada;
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  text-decoration:none;
}
.tg-icon:hover{ border-color:#c8c8c8; }
.tg-icon svg{ display:block; }
.tg-icon svg path{ fill:#2AABEE; } /* Telegram brand color */
@media (max-width: 480px){
  .tg-icon{ width:36px; height:36px; border-radius:10px; }
}


/* Telegram circular icon to the right of main booking button */
.tg-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  margin-left:12px;
  border:1px solid #dadada;
  border-radius:9999px; /* circle */
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  text-decoration:none !important;
  line-height:1;
}
.tg-icon:hover{ border-color:#c8c8c8; }
.tg-icon svg{ display:block; }
.tg-icon svg path{ fill:#2AABEE; } /* Telegram brand */
@media (max-width: 480px){
  .tg-icon{ width:36px; height:36px; margin-left:8px; }
}


/* --- Mobile header overflow fix --- */
html, body{ max-width:100%; overflow-x:hidden; }

.header .container{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  min-width:0;
}

.header .logo{ white-space:nowrap; }

.header .nav{ display:flex; gap:12px; }
@media (max-width: 640px){
  .header .nav{ display:none; } /* скрываем меню при нехватке места */
}

.header .top-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}

.header .city{ display:flex; align-items:center; gap:8px; min-width:0; }

#citySelect{
  max-width: 52vw; /* чтобы не раздвигал шапку */
  min-width: 0;
  flex: 1 1 auto;
}

#openBookingTop{
  white-space:nowrap;
}

.tg-icon{
  flex: 0 0 auto;
}

/* компактнее на мобильных */
@media (max-width: 480px){
  #openBookingTop{ padding:10px 14px; font-size:14px; }
  .tg-icon{ width:32px; height:32px; margin-left:8px; }
  .phone{ font-size:14px; white-space:nowrap; }
}



/* Specs list tidy for modal */
.specs__item b{display:block; font-weight:700; color:#111; margin-bottom:4px;}
.specs__item span{color:#111;}


/* LK button spacing, keep same visual as .btn .btn-sm */
.lk-btn{ margin-left: 8px; }
@media (max-width: 480px){ .lk-btn{ margin-left: 6px; } }


/* --- Header layout fix after LK button --- */
.header__inner{display:flex;align-items:center;gap:16px}
.header .top-right{order:2;margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0}
.header .nav{order:3;margin-left:16px;flex:0 0 auto}
.header .phone{white-space:nowrap}
#citySelect{max-width:360px;flex:0 1 auto}
@media (max-width: 1024px){
  .header .nav{margin-left:12px}
  #citySelect{max-width:300px}
}
@media (max-width: 768px){
  .header__inner{flex-wrap:wrap}
  .header .top-right{order:3;margin-left:0;width:100%}
  .header .nav{order:2;margin-left:auto}
}


/* after removing header nav, tighten right group a bit */
.header .top-right{ gap:10px; }


/* ==== Mobile header layout improvements ==== */
@media (max-width: 640px){
  .header__inner{ display:flex; flex-wrap:wrap; gap:8px }
  .header .phone{ order:1; width:100%; font-size:14px; line-height:1.3 }
  .header .city{ order:2; width:100%; display:flex; align-items:center; gap:8px }
  #citySelect{ width:100%; max-width:none; flex:1 1 auto }
  .header .top-right{ order:3; width:100%; display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:center }
  #openBookingTop, #openLKTop{ width:100%; white-space:nowrap }
  .tg-icon{ width:40px; height:40px; justify-self:end }
}
@media (max-width: 400px){
  .header .top-right{ grid-template-columns:1fr; grid-auto-flow:row }
  .tg-icon{ justify-self:start }
}



/* ==== Ensure city selector text is visible on mobile ==== */
@media (max-width: 640px){
  .header .city{
    width:100%;
    display:grid;
    grid-template-columns: auto 1fr; /* "Город:" + selector */
    align-items:center;
    gap:8px;
  }
  #citySelect{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:visible;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  /* in case custom pill container is used */
  .city .select, .city .pill, .city select{
    width:100%;
    max-width:100%;
    min-width:0;
  }
}



/* ==== Mobile: make city selector fully visible and stacked ==== */
@media (max-width: 640px){
  .header__inner{ flex-wrap:wrap; gap:10px }
  .header .phone{ width:100%; order:1 }
  .header .city{
    order:2;
    width:100%;
    display:block;
  }
  .header .city label{ display:block; margin:0 0 6px 0; font-size:16px; }
  #citySelect, .city select, .city .pill{
    display:block;
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .city .pill{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px }
  .city .text, .city .value, .city .current{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    max-width:100%;
  }

  .header .top-right{
    order:3;
    width:100%;
    display:grid;
    grid-template-columns: 1fr 1fr; /* stack buttons in two columns */
    gap:10px;
  }
  #openBookingTop, #openLKTop{ width:100%; }
  .tg-icon{ display:none; } /* hide tg to save space on small screens */
}

@media (max-width: 380px){
  .header .top-right{ grid-template-columns: 1fr; } /* buttons one per row on very narrow */
}



/* ==== Mobile: place CITY on the very top (above phone) ==== */
@media (max-width: 640px){
  .header__inner{ display:flex; flex-wrap:wrap; gap:10px }
  .header .city{ order:1; width:100%; }
  .header .phone{ order:2; width:100%; }
  .header .top-right{ order:3; width:100%; }
  .header .city label{ display:block; margin:0 0 6px 0; font-size:16px; }
  #citySelect, .city select, .city .pill{ width:100%; max-width:100%; min-width:0; }
}



/* ==== Mobile hard fix: city pill full width with visible text ==== */
@media (max-width: 640px){
  .header__inner{ flex-wrap:wrap; gap:10px }
  .header .city{ order:1; width:100%; display:flex; flex-direction:column; align-items:stretch; }
  .header .city label{ display:block; margin:0 0 6px 0; font-size:16px; }
  /* force width and height */
  #citySelect,
  .header .city select,
  .header .city .select,
  .header .city .pill{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:48px;
    line-height:48px;
  }
  /* make inner text visible and ellipsized */
  .header .city .pill *{
    font-size:16px !important;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .header .city .pill .value,
  .header .city .pill .current,
  .header .city .pill .text{ display:inline !important; }
  /* place chevron to the right if exists */
  .header .city .pill .caret,
  .header .city .pill .arrow{ margin-left:auto; }
  /* buttons below */
  .header .top-right{ order:2; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  #openBookingTop, #openLKTop{ width:100%; }
  .tg-icon{ display:none; }
}
@media (max-width: 380px){
  .header .top-right{ grid-template-columns:1fr; }
}



/* ==== MOBILE HEADER LAYOUT — SPEC (title -> city row -> phone -> LK) ==== */
@media (max-width: 640px){
  /* stack overall */
  .header__inner{ display:flex; flex-wrap:wrap; gap:12px }

  /* City row in ONE line: "Город:" + selector */
  .header .city{
    order:2;
    width:100%;
    display:grid;
    grid-template-columns: auto 1fr;
    align-items:center;
    column-gap:10px;
  }
  .header .city label{ margin:0; font-size:18px; line-height:1; }
  /* Make selector/pill readable and full-width */
  #citySelect,
  .header .city select,
  .header .city .select,
  .header .city .pill{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:44px;              /* iOS-friendly */
    line-height:44px;
    display:block;
  }
  .header .city .pill *{
    font-size:16px !important;
    line-height:1.1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Phone goes BELOW city row */
  .header .phone{ order:3; width:100%; font-size:16px; }

  /* Top-right becomes just LK button (booking hidden) */
  .header .top-right{
    order:4;
    width:100%;
    display:block;
  }
  #openBookingTop{ display:none !important; }
  #openLKTop{
    display:block;
    width:100%;
    margin:0;
  }
  .tg-icon{ display:none; }
}



/* ==== Mobile refinements: visible city text + Telegram back ==== */
@media (max-width: 640px){
  /* City select: avoid clipping text on iOS/Android */
  #citySelect,
  .header .city select{
    height:auto !important;
    min-height:44px !important;
    line-height:normal !important;
    padding:10px 14px !important;
    font-size:16px !important;
  }
  .header .city .pill{
    height:auto !important;
    min-height:44px !important;
    line-height:normal !important;
    padding:10px 14px !important;
  }
  .header .city .pill *{
    line-height:1.2 !important;
    font-size:16px !important;
  }

  /* Top-right: show LK + Telegram side-by-side */
  .header .top-right{
    display:grid;
    grid-template-columns: 1fr 44px;
    gap:10px;
  }
  #openLKTop{ width:100%; }
  .tg-icon{
    display:inline-flex !important;
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    border-radius:999px;
  }
}



/* ==== Mobile layout: phone to the right of brand, city below ==== */
@media (max-width: 640px){
  .header__inner{
    display:grid;
    grid-template-columns: 1fr auto;          /* brand | phone */
    grid-template-areas:
      "brand phone"
      "city  city"
      "actions actions";
    align-items:center;
    gap:12px;
  }
  .header .brand{ grid-area: brand; }
  .header .phone{ grid-area: phone; justify-self:end; white-space:nowrap; font-size:18px; }
  .header .city{ grid-area: city; display:grid; grid-template-columns: auto 1fr; column-gap:10px; align-items:center; }
  .header .top-right{ grid-area: actions; display:grid; grid-template-columns: 1fr 44px; gap:10px; }
  #openBookingTop{ display:none !important; }
  #openLKTop{ width:100%; }
}



/* ==== Mobile strict grid order: brand | phone / city / actions ==== */
@media (max-width: 640px){
  .header__inner{
    display:grid !important;
    grid-template-columns: 1fr auto !important;
    grid-auto-rows: min-content;
    align-items:center;
    gap:12px;
  }
  .header .brand{ grid-column:1 / 2 !important; grid-row:1 !important; }
  .header .phone{ grid-column:2 / 3 !important; grid-row:1 !important; justify-self:end; white-space:nowrap; }
  .header .city{
    grid-column:1 / 3 !important; grid-row:2 !important;
    display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:10px;
  }
  .header .top-right{
    grid-column:1 / 3 !important; grid-row:3 !important;
    display:grid; grid-template-columns:1fr 44px; gap:10px;
  }
  #openBookingTop{ display:none !important; }
  #openLKTop{ width:100%; }
}



/* ===== MOBILE: keep phone visible, clamp width, shrink font if needed ===== */
@media (max-width: 640px){
  .header .phone{
    justify-self:end;
    max-width:48vw;              /* не вылезает за край */
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:16px;              /* компактнее */
    line-height:1.1;
  }
}


/* ===== Extra-narrow phones: stack phone under brand so full number is visible ===== */
@media (max-width: 420px){
  .header__inner{
    grid-template-columns: 1fr !important;
    grid-auto-rows: min-content;
  }
  .header .brand{ grid-column:1 !important; grid-row:1 !important; }
  .header .phone{
    grid-column:1 !important; grid-row:2 !important;
    justify-self:end;
    max-width:100% !important;
    overflow:visible !important;
    text-overflow:unset !important;
    white-space:nowrap;
    font-size:18px;
  }
  .header .city{ grid-column:1 !important; grid-row:3 !important; }
  .header .top-right{ grid-column:1 !important; grid-row:4 !important; }
}



/* ==== Medium phones: move phone under brand and align left (no overflow) ==== */
@media (min-width:421px) and (max-width:640px){
  .header__inner{
    grid-template-columns: 1fr auto !important;
    grid-auto-rows: min-content;
  }
  .header .brand{ grid-column:1 !important; grid-row:1 !important; }
  .header .phone{
    grid-column:1 !important; grid-row:2 !important;
    justify-self:start !important;
    max-width:100% !important;
    overflow:visible !important;
    text-overflow:unset !important;
    white-space:nowrap;
  }
  .header .city{ grid-column:1 / 3 !important; grid-row:3 !important; }
  .header .top-right{ grid-column:1 / 3 !important; grid-row:4 !important; }
}



/* ===== Compact spacing for very small phones ===== */
@media (max-width: 420px){
  .header__inner{
    row-gap: 6px !important;
  }
  .header .brand{
    margin-bottom: 2px !important;
  }
  .header .phone{
    margin-top: 0 !important;
    line-height: 1.15 !important;
  }
}



/* ===== Tighten header spacing for small and medium phones ===== */

/* Small phones */
@media (max-width: 420px){
  .header__inner{ row-gap: 2px !important; }
  .header .brand{ margin-bottom: 0 !important; }
  .header .phone{ margin-top: 0 !important; line-height: 1.1 !important; }
  .header .city{ margin-top: 6px !important; }
}

/* Medium phones */
@media (min-width: 421px) and (max-width: 640px){
  .header__inner{ row-gap: 4px !important; }
  .header .brand{ margin-bottom: 0 !important; }
  .header .phone{ margin-top: 0 !important; }
}



/* ==== Mobile-friendly bike modal layout ==== */
@media (max-width: 640px){
  /* make modal full-height and stack sections */
  .modal, .bike-modal{ padding: 0 !important; }
  .modal-dialog, .modal__dialog{ width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; }
  .modal-content, .modal__content{ height: 100% !important; display: flex !important; flex-direction: column !important; border-radius: 16px 16px 0 0 !important; }
  .modal-header, .modal__header{ flex: 0 0 auto; }
  .modal-body, .modal__body{ flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; padding-bottom: 12px !important; }
  .modal-footer, .modal__footer{ position: sticky; bottom: 0; left: 0; right: 0; background: #fff; padding: 12px 16px !important; box-shadow: 0 -10px 25px rgba(0,0,0,.08); z-index: 2; }
  /* media (gallery) takes top slice */
  .modal-media, .modal__media, .bike-modal__media, .gallery, .modal-gallery{ height: 42vh; min-height: 240px; border-radius: 12px; overflow: hidden; }
  .modal-media img, .modal__media img, .gallery img{ width: 100%; height: 100%; object-fit: cover; object-position: center; display:block; }
  /* specs grid becomes single column with bigger line-height */
  .specs, .specs-grid, .modal-specs{ display: grid; grid-template-columns: 1fr !important; gap: 8px 16px; font-size: 16px; }
  .specs dt, .specs dd{ margin: 0; }
  /* make CTA wide and visible */
  .btn, .btn-primary, .modal-cta, .modal__cta button{ width: 100%; height: 52px; font-weight: 700; }
}

/* === SEGMENTED CONTROL (IOS STYLE) === */
.segmented {
  --h: 40px;
  --r: 999px;
  --gap: 0px;
  --bg: #f3f4f6;
  --bd: #e5e7eb;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--count), 1fr);
  align-items: center;
  gap: var(--gap);
  padding: 4px;
  height: var(--h);
  border-radius: var(--r);
  background: var(--bg);
  border: 1px solid var(--bd);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
  overflow: hidden;
  isolation: isolate;
}

/* Кнопки переключения тарифов */
.segmented__btn {
  appearance: none;
  border: 0;
  background: transparent;
  height: calc(var(--h) - 8px);
  padding: 0 10px;
  border-radius: var(--r);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 2;
  transition: color 0.2s ease;
}

.segmented__btn[aria-selected="true"] {
  color: #111827;
  font-weight: 600;
}

/* Бегунок слайдера */
.segmented__slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: calc((100% - 8px) / var(--count));
  left: calc(4px + var(--i) * ((100% - 8px) / var(--count)));
  border-radius: var(--r);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  transition: left 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
  pointer-events: none;
}

.card .segmented {
  margin: 10px 0 16px;
}

/* Картинка в карточке товара */
.card img {
  height: 200px;
  width: 100%;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
}

/* === HOW BLOCK (Кружочки) === */
.how .how__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.how .how__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 9999px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
  font-size: 14px;
  line-height: 1.3;
}
.how .how__list li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid #ddd;
  font-weight: 600;
  background: #f9f9f9;
  flex-shrink: 0;
  color: #f97316;
}
@media (max-width: 900px){
  .how .how__list{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .how .how__list{ grid-template-columns: 1fr; }
}

/* === REVIEWS SECTION === */
.reviews { padding: 56px 0; }
.reviews h2 { margin-bottom: 16px; }
.reviews__summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 24px;
}
.reviews__rating { font-weight: 600; }
.reviews__link { text-decoration: underline; text-decoration-style: dotted; color: inherit; }
.reviews__link:hover { text-decoration: none; }

/* === СБРОС КОНФЛИКТУЮЩИХ СТИЛЕЙ МОДАЛКИ === */

/* Перезапись стилей модального окна */
@media (min-width: 768px) {
  .modal__dialog {
    max-width: 1000px !important;
    width: 95% !important;
  }

  .modal__content {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 20px !important; /* Отступ поменьше */
    padding: 20px 20px 30px !important; /* Паддинг поменьше */
    grid-template-columns: none !important; /* Убиваем старый грид */
  }

  /* Левая колонка (Картинка) */
  .modal__gallery {
    flex: 0 0 35% !important; /* Чуть меньше для картинки, больше для текста */
    width: 35% !important;
    max-width: 35% !important;
    margin-bottom: 0 !important;
    min-height: auto !important;
  }

  /* Правая колонка (Текст) */
  .modal__info {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
}

/* --- ВАЖНО: Исправление списка характеристик/текста --- */
/* Сбрасываем grid 1fr 1fr, который делал текст узким */
.specs {
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
}

.specs li {
  width: 100% !important;
  margin-bottom: 8px !important;
}

/* Стили для текста описания (компактнее) */
.specs__item.description-block {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  font-size: 14px !important; /* Шрифт меньше */
  line-height: 1.4 !important; /* Интерлиньяж меньше */
  color: #374151 !important;
  white-space: normal !important;
}

/* Картинка внутри модалки */
.modal__gallery img {
  max-height: 500px !important;
  width: 100% !important;
  object-fit: contain !important;
  background: #f9fafb !important;
}

/* Скрываем крестик только в модальном окне успеха */
#successModal .modal__close {
  display: none !important;
}

/* --- HERO SECTION STYLES --- */
.hero { padding: 40px 0; overflow: hidden; }
.hero__grid { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.hero__content { flex: 1; max-width: 600px; }
.hero h1 { font-size: 3rem; line-height: 1.1; margin-bottom: 16px; color: #111827; }
.hero__subtitle { font-size: 1.15rem; color: #4b5563; margin-bottom: 32px; line-height: 1.5; }
.btn-lg { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; font-size: 18px; font-weight: 600; border-radius: 12px; background: #f97316; color: #fff; text-decoration: none; transition: transform 0.2s, background 0.2s, box-shadow 0.2s; box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4); }
.btn-lg:hover { background: #ea580c; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5); }
.hero__features { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.hero__feat { font-size: 14px; background: #fff; border: 1px solid #e5e7eb; padding: 6px 12px; border-radius: 20px; color: #374151; font-weight: 500; box-shadow: 0 2px 5px rgba(0,0,0,0.03); }
.hero__image { flex: 1; display: flex; justify-content: center; position: relative; }
.hero__image img { max-width: 100%; height: auto; max-height: 450px; object-fit: contain; animation: floatBike 3s ease-in-out infinite; }
@keyframes floatBike { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 900px) {
  .hero__grid {
    flex-direction: column-reverse;
    text-align: center;
    gap: 20px;
  }

  .hero__content {
    max-width: 100%;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  .hero__features {
    justify-content: center;
  }
  
  .hero__image img {
    max-height: 300px;
  }
}