/* mobilius-shop.ru — надстройка над общим style.css (его не правим: он общий с mobilius.ae).
   Правило: чехол в кадре не режется. Лента и карусель — рамка по пропорциям кадра;
   карточки коллекций 4:5 (просьба владельца 18.09) — кадры подобраны с запасом по краям. */

.nav-logo img { height: 34px; }
footer .foot > img { height: 30px; }
.paper { background: var(--paper); }
.note-line { margin-top: 28px; color: var(--gray); font-size: 14.5px; }

/* hero: кадр 2:3 */
.hero-photo figure { aspect-ratio: 2 / 3; }
.hero-photo img { object-fit: contain; }
.hero-stats .row { grid-template-columns: repeat(5, 1fr); }

/* статусы */
.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  background: var(--light); color: var(--gray);
}
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.on { background: #E6F4EA; color: #1E7A3C; }
.status.own { background: var(--orange-soft); color: var(--orange-text); }
.dark .status.on { background: rgba(46,160,90,.18); color: #6FD494; }
.dark .status.own { background: rgba(235,100,32,.18); color: var(--orange-2); }

/* коллекции: 4 в ряд, фото 4:5 */
.col-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 50px; }
.col-card {
  background: var(--paper); border: 1px solid rgba(78,86,90,.12);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .35s, box-shadow .35s;
}
.col-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.col-card figure { aspect-ratio: 4 / 5; background: var(--light); }
.col-card figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.col-body { padding: 18px 20px 22px; display: grid; gap: 8px; justify-items: start; }
.col-body h3 { font-size: 18px; }
.col-body p { color: var(--gray); font-size: 14px; line-height: 1.5; }
.col-more { margin-top: 36px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.col-more .fr-chip.txt { background: var(--light); height: auto; padding: 12px 18px; white-space: normal; text-align: center; }

/* лента фото: высота фиксирована, ширина — по кадру */
.strip-track figure { aspect-ratio: auto; width: auto; }
.strip-track img { width: auto; object-fit: contain; }
.strip-label { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-top: 56px; margin-bottom: 18px; }
.strip-note { color: var(--gray); font-size: 13.5px; }

/* лицензии */
.lic-head { margin-top: 44px; display: grid; gap: 12px; justify-items: start; }
.lic-sub { color: #A6ACB0; font-size: 14.5px; max-width: 720px; }
.lic-grid { grid-template-columns: repeat(4, 1fr); margin-top: 18px; }
.lic-grid .brand-card { min-height: 170px; padding: 26px 18px 18px; }
.lic-grid .brand-card img { max-height: 76px; }
.lic-grid.partners .brand-card { background: #F4F4F4; }
.license-note { margin-top: 28px; font-size: 12.5px; line-height: 1.6; color: #7d858a; }

/* опт / POD / Kaspi — карточки условий, полки, шаги */
.terms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 50px; }
.term {
  background: #fff; border: 1px solid rgba(78,86,90,.12);
  border-radius: var(--radius); padding: 30px 28px; position: relative;
}
#wholesale .term { background: var(--paper); }
.term .num {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .22em; color: var(--orange-text); margin-bottom: 14px;
}
.term h3 { font-size: 22px; margin-bottom: 10px; }
.term p { color: var(--gray); font-size: 14.5px; line-height: 1.55; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 22px; }
.tiers.four { grid-template-columns: repeat(4, 1fr); margin-top: 40px; }
.tier {
  background: var(--black); color: #fff; border-radius: var(--radius); padding: 30px 28px;
  display: grid; gap: 12px; align-content: start; justify-items: start;
}
.tier h3 { font-size: 19px; }
.tier ul { list-style: none; display: grid; gap: 8px; color: #A6ACB0; font-size: 14.5px; }
.tier li::before { content: '■'; color: var(--orange-2); font-size: 9px; margin-right: 10px; vertical-align: 2px; }
.range { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.range-col {
  background: var(--paper); border: 1px solid rgba(78,86,90,.12); border-radius: var(--radius);
  padding: 30px 28px; display: grid; gap: 12px; justify-items: start; align-content: start;
}
.range-col h3 { font-size: 22px; }
.range-col p { color: var(--gray); font-size: 14.5px; line-height: 1.55; }
.range-col .fr-chip.txt { background: var(--light); height: auto; padding: 10px 16px; white-space: normal; }
.ws-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.ws-steps.six { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
.ws-steps > div { display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; color: var(--gray); line-height: 1.45; }
.ws-steps b {
  flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--grad); color: #fff;
  display: grid; place-items: center; font-size: 14px;
}
.ws-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; }

/* международная группа */
.intl { background: var(--paper); }
.intl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 50px; }
.intl-grid.four { grid-template-columns: repeat(4, 1fr); }
.intl-card { background: #fff; border: 1px solid rgba(78,86,90,.12); border-radius: var(--radius); padding: 30px 28px; }
.intl-card small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--orange-text); margin-bottom: 12px; }
.intl-card h3 { font-size: 20px; margin-bottom: 10px; }
.intl-card p { color: var(--gray); font-size: 14.5px; line-height: 1.55; }

/* мерч: 3D-рендеры */
.merch .merch-visual img { width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.brand-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 60px; }
.bc { background: var(--paper); border: 1px solid rgba(78,86,90,.12); border-radius: var(--radius); padding: 22px; }
.bc-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.bc-imgs img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #fff; border-radius: 14px; }
.bc b { display: block; font-size: 17px; margin-bottom: 6px; }
.bc p { color: var(--gray); font-size: 14.5px; line-height: 1.5; }
.frost { display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px; align-items: center; margin-top: 22px;
  background: var(--black); color: #fff; border-radius: var(--radius); padding: 30px; }
.frost-text { display: grid; gap: 12px; justify-items: start; }
.frost-text h3 { font-size: 24px; }
.frost-text p { color: #A6ACB0; font-size: 14.5px; line-height: 1.55; }
.frost-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.frost-row img { height: clamp(170px, 17vw, 250px); width: auto; border-radius: 14px; }

/* карусель: высота фиксирована, ширина по кадру */
.slide, .slide.wide { flex-basis: auto; width: auto; aspect-ratio: auto; height: clamp(320px, 42vw, 560px); }
.slide img { width: auto; height: 100%; object-fit: contain; display: block; }
.slide:hover img { transform: none; }
.car-head .lead a { color: var(--orange-text); text-decoration: underline; }

/* контакты без формы (20.09): почта + телефон */
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.cta-note { color: #A6ACB0; font-size: 13.5px; line-height: 1.5; margin-top: 18px; max-width: 560px; }
.cta-note a { color: #fff; text-decoration: underline; }

/* форма (поля и payload — как на uv-master.ru) — снята 20.09, разметка в form.partial.html */
.cta .in { align-items: start; }
.lead-form {
  background: #161719; border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius); padding: 34px 32px; display: grid; gap: 16px;
}
.lf-head b { display: block; font-size: 22px; }
.lf-head span { color: #7d858a; font-size: 13.5px; }
.lf-tags { display: grid; gap: 10px; }
.lf-tag {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 12px 14px;
  transition: border-color .25s, background .25s;
}
.lf-tag:has(input:checked) { border-color: var(--orange); background: rgba(235,100,32,.1); }
.lf-tag input { margin-top: 3px; accent-color: var(--orange); }
.lf-tag strong { display: block; font-size: 15px; }
.lf-tag small { color: #A6ACB0; font-size: 13px; }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lf-field { display: grid; gap: 6px; font-size: 13px; color: #A6ACB0; }
.lf-field em { font-style: normal; color: #7d858a; font-size: 12px; margin-left: 6px; }
.lead-form input[type="text"], .lead-form input[type="tel"], .lead-form input[type="email"], .lead-form textarea {
  font: inherit; font-size: 15px; color: #fff;
  background: #0C0C0D; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 12px 14px;
  outline: none; transition: border-color .25s; width: 100%;
}
.lead-form input:focus, .lead-form textarea:focus { border-color: var(--orange); }
.lead-form .is-invalid { border-color: #E5484D !important; }
.lf-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: #A6ACB0; }
.lf-consent input { margin-top: 3px; accent-color: var(--orange); }
.lf-consent a { color: #fff; text-decoration: underline; }
.lf-foot { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.lf-msg { font-size: 13.5px; color: #A6ACB0; }
.lf-msg.err { color: #FF7B7B; }
.lf-msg.ok { color: #6FD494; }
.lead-form.sent .lf-tags, .lead-form.sent .lf-row, .lead-form.sent > label, .lead-form.sent button { display: none; }

@media (max-width: 1020px) {
  .hero-stats .row { grid-template-columns: repeat(3, 1fr); }
  .col-grid, .terms-grid, .tiers, .tiers.four, .intl-grid, .intl-grid.four, .ws-steps.six { grid-template-columns: repeat(2, 1fr); }
  .lic-grid { grid-template-columns: repeat(3, 1fr); }
  .ws-steps { grid-template-columns: repeat(2, 1fr); }
  .brand-cases, .frost, .range { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero-badge { display: none; }   /* на телефоне плашка «ООО … международной группы» убрана (владелец, 20.09) */
  .hero-stats .row { grid-template-columns: repeat(2, 1fr); }
  .terms-grid, .tiers, .tiers.four, .intl-grid, .intl-grid.four, .ws-steps, .ws-steps.six, .lf-row { grid-template-columns: 1fr; }
  .lic-grid { grid-template-columns: repeat(2, 1fr); }
  .slide, .slide.wide { height: clamp(260px, 70vw, 420px); }
  .frost-row img { height: clamp(150px, 40vw, 220px); }
  .lead-form { padding: 26px 20px; }
}
@media (max-width: 560px) {
  .col-grid { grid-template-columns: 1fr; }
}
