@import url("fonts.css");

.analytics-consent{position:fixed;z-index:500;left:22px;right:22px;bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1040px;margin:auto;padding:18px 20px;border:1px solid rgba(10,33,48,.12);border-radius:22px;background:rgba(247,252,255,.97);box-shadow:0 24px 70px rgba(10,33,48,.2);backdrop-filter:blur(18px)}.analytics-consent[hidden]{display:none}.analytics-consent strong{display:block;font-size:1rem}.analytics-consent p{max-width:690px;margin:4px 0 0;color:#4d6879;font-size:.75rem;line-height:1.5}.analytics-consent a{color:#176286}.analytics-consent>div:last-child{display:flex;flex:0 0 auto;gap:8px}.analytics-consent button{white-space:nowrap}
@media(max-width:700px){.analytics-consent{left:10px;right:10px;bottom:10px;align-items:stretch;flex-direction:column;gap:12px;padding:16px}.analytics-consent>div:last-child{display:grid;grid-template-columns:1fr}.analytics-consent button{width:100%}}

:root {
  --sky: #9bdcf8;
  --sky-soft: #eefaff;
  --ink: #0a2130;
  --muted: #4d6879;
  --orange: #ff6633;
  --navy: #0c2b3d;
  --glass: rgba(255, 255, 255, .7);
  --glass-strong: rgba(255, 255, 255, .9);
  --shadow: 0 22px 56px rgba(24, 83, 112, .14);
  --container: 1320px;
}

html { scroll-padding-top: 96px; }
body {
  overflow-x: hidden;
  font-family: "Unbounded", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  background: #dff5ff;
}
button, input, textarea, select { font-family: inherit; }
.site { background: transparent; }
.sky { display: block; opacity: 1; }
.cloud { position: fixed; }
.cloud-a { left: -90px; top: 20%; }
.cloud-b { right: -65px; top: 10%; }
.cloud-c { left: 30%; top: -28px; }
.cloud-d { right: 12%; top: 72%; }
.cloud-e { left: 6%; top: 78%; --cloud-scale: .62; opacity: .42 !important; }
.cloud-f { right: 32%; top: 40%; --cloud-scale: .48; opacity: .28 !important; }

.header {
  background: rgba(226, 247, 255, .82);
  border-bottom-color: rgba(255, 255, 255, .75);
}
.header-inner { height: 88px; }
.nav a, .nav-article-btn { font-weight: 700; letter-spacing: -.01em; }
.hero {
  min-height: 760px;
  background: linear-gradient(180deg, rgba(143, 215, 248, .38), rgba(223, 246, 255, .34));
}
.hero h1,
.section-head h2,
.tradein-copy h2,
.wheel-copy h2,
.contacts-shell h2 {
  font-weight: 800;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.hero h1 { line-height: .92; }
.hero-copy { color: #38596c; font-size: 1.08rem; }
.hero-visual-column { min-height: 640px; }
.hero-stage { height: 520px; isolation: isolate; }
.hero-phone-wrap {
  width: min(500px, 86%);
  height: 510px;
  background: transparent !important;
  mix-blend-mode: normal !important;
  filter: none;
}
.hero-phone-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .42);
  filter: blur(48px);
}
.hero-phone {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  background: transparent !important;
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 34px 30px rgba(12, 43, 61, .25)) !important;
}
.hero-config {
  background: rgba(250, 253, 255, .82);
  border-color: rgba(255, 255, 255, .92);
}
.hero-config-title h2 { font-size: 1.42rem; }
.hero-config .chip { min-height: 36px; font-size: .78rem; }

.catalog-section,
.tradein-section,
.delivery-section,
.contacts-section,
.wheel-section {
  background: rgba(239, 250, 255, .63);
  backdrop-filter: blur(2px);
}
.catalog-section { border-block: 1px solid rgba(255, 255, 255, .58); }
.section-head { margin-bottom: 30px; }
.section-head > div { width: 100%; }
.catalog-toolbar { align-items: flex-end; }
.catalog-toolbar > div { display: grid; gap: 3px; }
#catalogSyncStatus { color: var(--muted); font-size: .77rem; font-weight: 600; }
.category-tabs { scroll-snap-type: x proximity; }
.category-tab { scroll-snap-align: start; background: rgba(255, 255, 255, .72); }
.product-grid { gap: 20px; }
.product-card {
  background: rgba(255, 255, 255, .76);
  border-color: rgba(255, 255, 255, .95);
}
.product-image {
  height: 255px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .92), rgba(218, 242, 253, .7));
}
.product-image img {
  width: 86%;
  height: 86%;
  mix-blend-mode: normal;
}
.product-image.image-failed::after {
  inset: 16px;
  border: 1px solid rgba(12, 43, 61, .08);
  border-radius: 16px;
  color: rgba(12, 43, 61, .5);
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .9), transparent 36%),
    linear-gradient(145deg, rgba(171, 225, 249, .72), rgba(238, 249, 255, .88));
}
.product-body h3 { min-height: 58px; font-size: 1.02rem; line-height: 1.45; }
.product-variant-count {
  margin: -4px 0 10px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 650;
}
.product-price-label {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.product-price { margin-bottom: 0; font-size: 1.42rem; font-variant-numeric: tabular-nums; }
.product-trade-price,
.hero-trade-price,
.product-config-price-stack > span {
  display: block;
  margin-top: 3px;
  color: #287799;
  font-size: .76rem;
  font-weight: 700;
}
.product-trade-price { min-height: 20px; margin-bottom: 16px; }
.product-card [data-config] { grid-column: auto; }
.product-config-price-stack { display: grid; gap: 2px; }
.product-config-price-stack > small:last-child { margin-top: 7px; color: var(--muted); }
.product-config-price-stack b { color: var(--ink); font-size: inherit; }
.options .chip:disabled {
  cursor: not-allowed;
  opacity: .38;
  text-decoration: line-through;
}
.trade-result p {
  grid-column: 1 / -1;
  max-width: 360px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.45;
}
.catalog-more {
  min-width: 220px;
  margin: 28px auto 0;
}
.catalog-more[hidden] { display: none; }

.wheel-section { color: var(--ink); }
.eyebrow.dark {
  color: var(--muted);
  background: rgba(255, 255, 255, .66);
  border-color: rgba(255, 255, 255, .9);
}
.wheel-copy p { color: var(--muted); }
.wheel-prize-preview span {
  color: var(--ink);
  background: rgba(255, 255, 255, .7);
  border-color: rgba(12, 43, 61, .1);
}
.wheel-copy .btn.light { color: #fff; background: var(--orange); }
.wheel-result { color: #176286; }
.wheel-shell {
  background: rgba(255, 255, 255, .5) !important;
  border-color: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 38px 88px rgba(36, 101, 132, .2), inset 0 0 0 8px rgba(255, 255, 255, .38) !important;
}
.wheel-pointer { border-top-color: var(--orange) !important; }
.wheel-wallet {
  color: var(--ink);
  background: rgba(255, 255, 255, .76);
  border-color: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow);
}
.wheel-wallet > small,
#activeReward span,
.wheel-wallet p { color: var(--muted); }
#activeReward strong { color: #176286; }

.account-modal { background: rgba(247, 253, 255, .98); }
.account-hero {
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 20%, rgba(255, 255, 255, .98), transparent 28%),
    linear-gradient(135deg, #d9f3ff, #f8fdff);
  border: 1px solid rgba(30, 100, 132, .09);
  box-shadow: 0 18px 42px rgba(29, 92, 121, .1);
}
.account-hero small { color: #207097; }
.account-hero span { color: var(--muted); }
.profile-avatar {
  color: #fff;
  background: linear-gradient(145deg, #ff7b4d, #ff5f2d);
  border-color: rgba(255, 255, 255, .9);
}
.consent-check {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 10px;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.45;
}
.consent-check input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--orange);
}
.consent-check a { color: #176286; text-decoration: underline; text-underline-offset: 2px; }
.checkout-summary .consent-check { margin: 14px 0; }
.installment-terms {
  margin: 14px 0 0;
  padding: 14px;
  border: 1px solid rgba(12, 43, 61, .12);
  border-radius: 18px;
  background: rgba(218, 243, 254, .46);
}
.installment-terms[hidden] { display: none; }
.installment-terms legend { padding: 0 6px; font-weight: 800; color: var(--navy); }
.installment-term-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.installment-term {
  min-height: 74px;
  padding: 11px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(12, 43, 61, .14);
  border-radius: 14px;
  background: rgba(255,255,255,.86);
  cursor: pointer;
}
.installment-term input { position: absolute; opacity: 0; pointer-events: none; }
.installment-term strong { font-size: 14px; }
.installment-term span { font-size: 12px; color: var(--muted); }
.installment-term.active { color: #fff; border-color: var(--navy); background: var(--navy); }
.installment-term.active span { color: rgba(255,255,255,.78); }
.installment-terms > p { margin: 10px 2px 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.order-turnstile { min-height: 65px; margin: 12px 0; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, .08); }

.contacts-section { padding-top: 80px; }
.contacts-shell {
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 10%, rgba(255, 255, 255, .98), transparent 30%),
    linear-gradient(135deg, rgba(218, 243, 254, .94), rgba(250, 254, 255, .94));
  border: 1px solid rgba(255, 255, 255, .92);
  box-shadow: var(--shadow);
}
.contacts-details > div:not(.contacts-actions) { color: var(--muted); }
.contacts-details strong,
.contacts-details a[href^="tel:"] { color: var(--ink); }
.contacts-details svg { color: #2179a1; }
.store-map-card {
  border-color: rgba(12, 43, 61, .1);
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 18px 46px rgba(24, 78, 104, .13);
}
.store-map-card figcaption { color: var(--muted); border-top-color: rgba(12, 43, 61, .08); }
.store-map-card figcaption strong { color: var(--ink); }
.contacts-actions .btn.light { color: #fff; background: var(--orange); }
.contacts-actions .btn-outline-light {
  color: var(--ink);
  background: rgba(255, 255, 255, .74);
  border-color: rgba(12, 43, 61, .13);
}

.footer {
  color: var(--muted);
  background: rgba(244, 252, 255, .93);
  border-top: 1px solid rgba(12, 43, 61, .08);
}
.footer .logo-copy { color: var(--ink); }
.footer .logo-copy small { color: var(--muted); }
.footer-links { display: flex; align-items: center; gap: 22px; }
.footer-links a { color: #176286; font-weight: 700; }
.footer-links a:hover { text-decoration: underline; }
.footer-company { display: grid; gap: 2px; font-size: .72rem; line-height: 1.45; }
.footer-company strong { color: var(--ink); font-size: .8rem; }
.footer-company a { color: #176286; }


.legal-toc { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 8px; }
.legal-toc a { display:inline-flex; align-items:center; min-height:38px; padding:8px 13px; border:1px solid rgba(12,43,61,.12); border-radius:999px; background:rgba(255,255,255,.72); color:#176286; font-size:.78rem; font-weight:800; text-decoration:none; }
.legal-toc a:hover { background:#fff; transform:translateY(-1px); }
.legal-card h3 { margin:22px 0 8px; color:var(--ink); font-size:1.05rem; }
.about-legal-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.footer-inner { gap:26px; }
.footer-links { flex-wrap:wrap; justify-content:flex-end; row-gap:8px; }
@media(max-width:1100px){ .footer-inner{align-items:flex-start;} .footer-links{justify-content:flex-start;} }
.legal-page {
  min-height: 100vh;
  position: relative;
  z-index: 2;
  padding: 42px 0 80px;
}
.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}
.legal-card {
  padding: clamp(24px, 5vw, 64px);
  border: 1px solid rgba(255, 255, 255, .94);
  border-radius: 30px;
  background: rgba(250, 254, 255, .88);
  box-shadow: var(--shadow);
}
.legal-card h1 { max-width: 900px; margin: 12px 0 18px; font-size: clamp(2.4rem, 6vw, 5rem); line-height: .98; letter-spacing: -.06em; }
.legal-card h2 { margin: 36px 0 10px; font-size: 1.4rem; letter-spacing: -.03em; }
.legal-card p, .legal-card li { color: #38576a; }
.legal-card ul { padding-left: 22px; }
.legal-card .legal-note { padding: 16px 18px; border-left: 3px solid var(--orange); border-radius: 0 14px 14px 0; background: #eef9fe; }
.legal-meta { color: var(--muted); font-size: .82rem; }
.legal-requisites { display: grid; gap: 8px; margin: 18px 0 0; }
.legal-requisites > div { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr); gap: 16px; padding: 13px 15px; border: 1px solid rgba(12, 43, 61, .1); border-radius: 14px; background: rgba(238, 249, 254, .72); }
.legal-requisites dt { color: var(--muted); font-weight: 650; }
.legal-requisites dd { margin: 0; color: var(--ink); font-weight: 750; overflow-wrap: anywhere; }
.legal-requisites a { color: #176286; }

@media (max-width: 900px) {
  .hero-phone-wrap { width: min(470px, 82vw); }
  .wheel-layout { gap: 10px; }
  .wheel-wallet { margin-top: 10px; }
  .footer-links { align-items: flex-start; flex-direction: column; gap: 6px; }
}

@media (max-width: 640px) {
  .installment-term-grid { grid-template-columns: 1fr; }
  html { scroll-padding-top: 74px; }
  .topline-inner > :last-child { display: none; }
  .header-inner { gap: 8px; }
  .header-actions .icon-btn:first-child { display: none; }
  .hero { padding-top: 42px; }
  .hero h1 { font-size: clamp(3rem, 15vw, 4.35rem); }
  .hero-copy { font-size: 1rem; line-height: 1.62; }
  .hero-visual-column { min-height: 590px; }
  .hero-stage { height: 410px; }
  .hero-phone-wrap { width: min(350px, 88vw); height: 390px; }
  .hero-config { padding: 17px; }
  .hero-config-title h2 { font-size: 1.12rem; }
  .config-line { align-items: start; grid-template-columns: 52px 1fr; }
  .hero-config .chip { min-height: 34px; padding-inline: 10px; }
  .price-row { gap: 8px; }
  .price-row strong { font-size: 1.35rem; }
  .section { padding: 66px 0; }
  .section-head h2, .tradein-copy h2, .wheel-copy h2, .contacts-shell h2 {
    font-size: clamp(2.25rem, 12vw, 3.25rem);
  }
  .category-tab { min-width: 142px; }
  .catalog-toolbar { align-items: flex-start; gap: 14px; }
  .catalog-toolbar h3 { font-size: 1.35rem; }
  .catalog-toolbar > span { padding-top: 5px; white-space: nowrap; }
  .product-image { height: 250px; }
  .product-body h3 { min-height: auto; }
  .product-actions .btn, .product-actions .btn-secondary { min-height: 50px; }
  .wheel-stage { min-height: 390px; }
  .contacts-section { padding-top: 50px; }
  .contacts-shell { padding: 24px; }
  .contacts-right { gap: 14px; }
  .store-map-card img { height: 220px; }
  .modal-card { width: 100%; }
  .account-hero { align-items: flex-start; }
  .account-hero strong { font-size: 2.3rem; }
  .checkout-summary { padding: 18px; }
  .footer-inner { min-height: 190px; }
  .footer-company { font-size: .68rem; }
  .legal-page { padding: 18px 0 48px; }
  .legal-header { align-items: flex-start; flex-direction: column; }
  .legal-card { border-radius: 22px; }
  .legal-requisites > div { grid-template-columns: 1fr; gap: 3px; }
}

/* V12: original product renders, full-height composition and brand system */
.sky {
  background:
    linear-gradient(180deg, rgba(222, 247, 255, .78), rgba(188, 231, 250, .7)),
    url("../images/cloudscape-background-v1.png") center top / cover fixed;
}
.site-logo-image {
  display: block;
  width: 216px;
  height: 56px;
  object-fit: contain;
  object-position: left center;
}
.footer .site-logo-image { width: 190px; height: 50px; }
.product-image {
  height: 315px;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .98) 0 15%, rgba(229, 247, 255, .9) 58%, rgba(210, 239, 252, .78) 100%);
}
.product-image > .product-cutout {
  z-index: 1;
  width: 94%;
  height: 94%;
  padding: 22px 10px 8px;
  object-fit: contain;
  object-position: center;
  background: transparent;
  mix-blend-mode: normal;
  filter: drop-shadow(0 22px 22px rgba(20, 65, 92, .16));
}
.product-card:hover .product-image > .product-cutout { transform: scale(1.025); }
.product-logo-stack,
.hero-logo-stack {
  position: absolute;
  z-index: 5;
  top: 13px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 12px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 8px 22px rgba(22, 70, 96, .1);
  backdrop-filter: blur(10px);
}
.product-logo-stack img,
.hero-logo-stack img {
  display: block;
  width: auto;
  height: 21px;
  object-fit: contain;
  mix-blend-mode: normal;
}
.product-logo-stack .oblako-card-logo,
.hero-logo-stack img:first-child { width: 78px; height: 22px; }
.product-logo-stack .manufacturer-logo,
.hero-logo-stack img:last-child {
  width: 54px;
  height: 20px;
  padding-left: 6px;
  border-left: 1px solid rgba(12, 43, 61, .12);
}
.hero-logo-stack { top: 6px; right: 0; }
.hero-phone-wrap { overflow: visible; }

.product-logo-stack-oblako-only {
  padding: 6px 10px;
}
.product-logo-stack-oblako-only .oblako-card-logo {
  width: 92px;
  height: 26px;
}

.hero-phone { mix-blend-mode: normal !important; }
.product-config-visual { position: relative; }
.product-config-visual > #productConfigLogos .product-logo-stack { top: 16px; right: 16px; }
.product-config-visual > img {
  width: 96%;
  height: 410px;
  padding: 32px 12px 8px;
  object-fit: contain;
  mix-blend-mode: normal;
}

@media (max-width: 900px) {
  .site-logo-image { width: 174px; height: 48px; }
  .product-image { height: 300px; }
}

@media (max-width: 640px) {
  .site-logo-image { width: 145px; height: 42px; }
  .product-image { height: min(78vw, 330px); }
  .product-image > .product-cutout { width: 96%; height: 96%; padding-top: 28px; }
  .product-logo-stack { top: 10px; right: 10px; padding: 5px 7px; }
  .product-logo-stack .oblako-card-logo { width: 68px; }
  .product-logo-stack .manufacturer-logo { width: 46px; }
  .hero-logo-stack { top: 0; right: 2px; transform: scale(.88); transform-origin: top right; }
  .product-config-visual > img { height: 300px; padding-top: 40px; }
}

/* =========================================================
   OBLAKO V14 — product gallery and precision UI fixes
   ========================================================= */

/* The home cover intentionally has no co-brand badge. */
.hero-phone-wrap .hero-logo-stack { display: none !important; }
.hero-phone {
  transform: translateZ(24px) scale(var(--asset-scale, 1));
  transform-origin: center bottom;
  transition: transform .35s ease, opacity .2s ease;
}

/* Perfectly concentric colour selector. */
.color-dot {
  box-sizing: border-box;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 5px;
  display: grid;
  place-items: center;
  border: 3px solid transparent;
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  line-height: 0;
}
.color-dot i {
  box-sizing: border-box;
  display: block;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 50%;
}
.color-dot.active {
  padding: 5px;
  border-color: var(--navy);
  background: #fff;
}

/* Every counter stays inside its own category tab. */
.category-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: stretch;
  gap: 10px;
  padding: 4px 2px 10px;
  overflow-x: auto;
  scroll-padding-inline: 2px;
}
.category-tab {
  box-sizing: border-box;
  width: max-content;
  min-width: 164px;
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(92px, auto) 32px;
  align-items: center;
  justify-content: initial;
  gap: 14px;
  padding: 0 14px 0 18px;
  flex: none;
}
.category-tab span {
  min-width: 0;
  line-height: 1.12;
  text-align: left;
}
.category-tab small {
  box-sizing: border-box;
  width: 32px;
  min-width: 32px;
  height: 32px;
  margin: 0;
  place-self: center end;
}

/* Multi-angle gallery for every colour and every product. */
.product-config-modal { width: min(1080px, 100%); }
.product-config-grid {
  grid-template-columns: minmax(340px, .95fr) minmax(420px, 1.2fr);
  align-items: stretch;
}
.product-config-visual {
  position: relative;
  min-height: 520px;
  display: grid;
  grid-template-rows: minmax(390px, 1fr) auto;
  gap: 12px;
  padding: 18px;
  background:
    radial-gradient(circle at 52% 40%, color-mix(in srgb, var(--variant-accent, #d9e3e8) 22%, white) 0 12%, rgba(255,255,255,.97) 38%, rgba(218,242,253,.82) 100%);
}
.product-config-visual > #productConfigLogos .product-logo-stack {
  top: 18px;
  right: 18px;
}
.product-gallery-stage {
  position: relative;
  min-width: 0;
  min-height: 390px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  perspective: 1100px;
}
.product-gallery-stage img,
.product-config-visual > .product-gallery-stage > img {
  display: block;
  width: 94%;
  height: 390px;
  padding: 26px 14px 4px;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: normal;
  filter: drop-shadow(0 26px 28px rgba(20,65,92,.18));
  transform: scale(var(--asset-scale, 1));
  transform-origin: var(--focus-x, 50%) 52%;
  transition: transform .38s ease, filter .3s ease, opacity .2s ease;
}
.product-config-visual[data-gallery-mode="selected"] .product-gallery-stage img {
  transform: scale(var(--asset-scale, 1)) scale(1.18);
  transform-origin: var(--focus-x, 50%) 52%;
}
.product-config-visual[data-gallery-mode="detail"] .product-gallery-stage img {
  transform: scale(var(--asset-scale, 1)) scale(1.48);
  transform-origin: var(--focus-x, 50%) 43%;
}
.product-config-visual[data-gallery-mode="alternate"] .product-gallery-stage img {
  transform: scale(var(--asset-scale, 1)) scale(1.58) rotateY(-11deg) rotateZ(.7deg);
  transform-origin: var(--focus-x, 50%) 68%;
}
.gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 8;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(12,43,61,.1);
  border-radius: 50%;
  color: var(--navy);
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 24px rgba(20,65,92,.14);
  backdrop-filter: blur(10px);
  transform: translateY(-50%);
  cursor: pointer;
}
.gallery-arrow svg { width: 18px; height: 18px; }
.gallery-arrow-prev { left: 8px; }
.gallery-arrow-prev svg { transform: rotate(180deg); }
.gallery-arrow-next { right: 8px; }
.product-gallery-nav {
  position: relative;
  z-index: 9;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.gallery-dot {
  min-width: 0;
  min-height: 47px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid rgba(12,43,61,.1);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(255,255,255,.72);
  text-align: left;
  cursor: pointer;
}
.gallery-dot span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(12,43,61,.07);
  font-size: .66rem;
  font-weight: 900;
}
.gallery-dot small {
  overflow: hidden;
  font-size: .6rem;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
}
.gallery-dot.active {
  color: #fff;
  border-color: var(--navy);
  background: var(--navy);
}
.gallery-dot.active span { background: rgba(255,255,255,.16); }
.product-config-info { align-content: start; gap: 12px; }
.product-specs-title {
  margin: 0;
  font-size: .9rem;
  letter-spacing: -.01em;
}
.product-config-specs { gap: 7px; }
.product-config-specs div { min-height: 58px; display: grid; align-content: center; }
.product-config-specs strong { line-height: 1.25; }

@media (max-width: 900px) {
  .product-config-grid { grid-template-columns: minmax(280px, .9fr) minmax(360px, 1.1fr); }
  .product-config-visual { min-height: 470px; grid-template-rows: minmax(340px, 1fr) auto; }
  .product-gallery-stage { min-height: 340px; }
  .product-gallery-stage img,
  .product-config-visual > .product-gallery-stage > img { height: 340px; }
}

@media (max-width: 760px) {
  .category-tab { min-width: 150px; min-height: 60px; }
  .product-config-grid { grid-template-columns: 1fr; }
  .product-config-visual { min-height: 390px; grid-template-rows: minmax(270px, 1fr) auto; padding: 12px; }
  .product-gallery-stage { min-height: 270px; }
  .product-gallery-stage img,
  .product-config-visual > .product-gallery-stage > img { height: 270px; padding-top: 34px; }
  .gallery-arrow { width: 38px; height: 38px; }
  .gallery-dot { grid-template-columns: 22px 1fr; padding: 5px 6px; }
  .gallery-dot span { width: 22px; height: 22px; }
}

@media (max-width: 480px) {
  .category-tab { min-width: 142px; }
  .product-config-specs { grid-template-columns: 1fr 1fr; }
  .product-config-specs div { min-height: 54px; padding: 9px; }
  .gallery-dot { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .gallery-dot small { display: none; }
}

/* =========================================================
   OBLAKO V14 — живое небо и компактная фотогалерея
   ========================================================= */

@property --cloud-auto-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --cloud-auto-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.cloud {
  --cloud-auto-x: 0px;
  --cloud-auto-y: 0px;
  transform:
    translate3d(
      calc(var(--cloud-x, 0px) + var(--cloud-auto-x)),
      calc(var(--cloud-y, 0px) + var(--cloud-auto-y)),
      0
    )
    scale(var(--cloud-scale, 1));
  animation:
    cloudLight 6.5s ease-in-out infinite alternate,
    cloudDrift 18s ease-in-out infinite alternate;
}
.cloud-b { animation-duration: 7.4s, 24s; animation-delay: -2s, -9s; }
.cloud-c { animation-duration: 8.2s, 29s; animation-delay: -4s, -15s; }
.cloud-d { animation-duration: 7s, 22s; animation-delay: -1s, -6s; }
.cloud-e { animation-duration: 8.8s, 31s; animation-delay: -5s, -18s; }
.cloud-f { animation-duration: 7.8s, 26s; animation-delay: -3s, -12s; }
@keyframes cloudDrift {
  0% { --cloud-auto-x: -18px; --cloud-auto-y: -7px; }
  48% { --cloud-auto-x: 9px; --cloud-auto-y: 8px; }
  100% { --cloud-auto-x: 30px; --cloud-auto-y: -3px; }
}

.product-config-modal {
  width: min(1040px, 100%);
  max-height: min(760px, calc(100vh - 28px));
  padding: 24px;
  overflow: auto;
}
.product-config-modal .modal-head { margin-bottom: 18px; }
.product-config-grid {
  grid-template-columns: minmax(350px, .86fr) minmax(430px, 1.14fr);
  align-items: start;
  gap: 24px;
}
.product-config-visual {
  min-height: 442px;
  grid-template-rows: 404px 14px;
  gap: 10px;
  padding: 14px;
  border-radius: 22px;
}
.product-gallery-stage {
  min-height: 404px;
  border-radius: 18px;
  background: rgba(238, 249, 254, .74);
}
.product-gallery-stage img,
.product-config-visual > .product-gallery-stage > img {
  width: 100%;
  height: 404px;
  padding: 10px 32px;
  object-fit: contain;
  object-position: center;
  transform: none !important;
  filter: none;
}
.product-config-visual > #productConfigLogos .product-logo-stack {
  top: 25px;
  right: 25px;
}
.product-gallery-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 14px;
}
.gallery-dot,
.gallery-dot span,
.gallery-dot small {
  all: unset;
}
.gallery-dot {
  box-sizing: border-box;
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: rgba(12, 43, 61, .22);
  cursor: pointer;
  transition: width .2s ease, background .2s ease, box-shadow .2s ease;
}
.gallery-dot.active {
  width: 27px;
  flex-basis: 27px;
  border-radius: 999px;
  background: var(--navy);
  box-shadow: 0 0 0 3px rgba(12, 43, 61, .08);
}
.product-config-info {
  gap: 10px;
  align-content: start;
}
.product-specs-title { margin-bottom: 1px; }
.product-config-specs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.product-config-specs div {
  min-height: 52px;
  padding: 10px 12px;
}
.product-config-info .config-line { margin: 0; padding: 10px 0; }
.product-config-info .config-line > span { min-width: 92px; }
.product-config-price { margin-top: 0; padding-top: 13px; }
.product-config-actions { flex: 0 0 auto; }

@media (max-width: 900px) {
  .product-config-modal { max-height: calc(100vh - 20px); }
  .product-config-grid { grid-template-columns: minmax(300px, .9fr) minmax(350px, 1.1fr); gap: 16px; }
  .product-config-visual { min-height: 382px; grid-template-rows: 344px 14px; }
  .product-gallery-stage { min-height: 344px; }
  .product-gallery-stage img,
  .product-config-visual > .product-gallery-stage > img { height: 344px; padding-inline: 24px; }
}

@media (max-width: 760px) {
  .product-config-modal { width: 100%; padding: 18px; }
  .product-config-grid { grid-template-columns: 1fr; }
  .product-config-visual { min-height: 340px; grid-template-rows: 302px 14px; padding: 11px; }
  .product-gallery-stage { min-height: 302px; }
  .product-gallery-stage img,
  .product-config-visual > .product-gallery-stage > img { height: 302px; padding: 8px 26px; }
  .product-config-visual > #productConfigLogos .product-logo-stack { top: 18px; right: 18px; }
}

@media (max-width: 480px) {
  .product-config-modal .modal-head h2 { font-size: 1.35rem; }
  .product-config-visual { min-height: 304px; grid-template-rows: 266px 14px; }
  .product-gallery-stage { min-height: 266px; }
  .product-gallery-stage img,
  .product-config-visual > .product-gallery-stage > img { height: 266px; padding: 10px 22px; }
  .product-config-info .config-line { grid-template-columns: 1fr; gap: 7px; }
  .product-config-info .config-line > span { min-width: 0; }
  .product-config-price { align-items: stretch; flex-direction: column; }
  .product-config-actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cloud { animation: none; }
}

/* =========================================================
   OBLAKO V15 — прозрачная обложка и модальное окно без скролла
   ========================================================= */

/* Главный экран всегда использует прозрачный парный рендер цвета. */
.hero-phone-wrap[data-gallery-mode="hero"] {
  background: transparent !important;
  isolation: isolate !important;
  mix-blend-mode: normal !important;
}
.hero-phone-wrap[data-gallery-mode="hero"] .hero-phone {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
  object-position: center bottom;
  background: transparent !important;
  mix-blend-mode: normal !important;
}

/* На первом слайде товара показывается цельная пара «вид сзади + экран». */
.product-config-visual[data-gallery-mode="overview"] .product-gallery-stage {
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 255, 255, .98), rgba(225, 245, 255, .72) 68%, rgba(213, 239, 252, .55));
}
.product-config-visual[data-gallery-mode="overview"] .product-gallery-stage img {
  background: transparent !important;
  mix-blend-mode: normal !important;
}

@media (min-width: 761px) {
  .product-config-modal {
    width: min(1000px, calc(100vw - 32px));
    max-height: calc(100dvh - 24px);
    padding: 20px 22px;
    overflow: hidden;
  }
  .product-config-modal .modal-head {
    align-items: center;
    margin-bottom: 13px;
  }
  .product-config-modal .modal-head h2 {
    margin-top: 1px;
    font-size: 1.42rem;
    line-height: 1.08;
  }
  .product-config-modal .modal-head small { font-size: .56rem; }
  .product-config-modal .close {
    width: 42px;
    height: 42px;
  }
  .product-config-grid {
    grid-template-columns: minmax(300px, .88fr) minmax(0, 1.12fr);
    align-items: stretch;
    gap: 20px;
  }
  .product-config-visual {
    min-height: 430px;
    grid-template-rows: 396px 12px;
    gap: 8px;
    padding: 11px;
    border-radius: 21px;
  }
  .product-gallery-stage { min-height: 396px; }
  .product-gallery-stage img,
  .product-config-visual > .product-gallery-stage > img {
    width: 100%;
    height: 396px;
    padding: 16px 28px 5px;
    object-position: center;
  }
  .product-config-visual[data-gallery-mode="overview"] .product-gallery-stage img {
    padding: 20px 30px 7px;
  }
  .product-config-visual > #productConfigLogos .product-logo-stack {
    top: 22px;
    right: 22px;
    transform: scale(.82);
    transform-origin: top right;
  }
  .gallery-arrow {
    width: 38px;
    height: 38px;
  }
  .product-gallery-nav {
    min-height: 12px;
    gap: 7px;
  }
  .gallery-dot {
    width: 8px;
    height: 8px;
    flex-basis: 8px;
  }
  .gallery-dot.active {
    width: 24px;
    flex-basis: 24px;
  }
  .product-config-info {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
  }
  .product-specs-title {
    margin: 0;
    font-size: .78rem;
    line-height: 1.2;
  }
  .product-config-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .product-config-specs div {
    min-height: 42px;
    padding: 6px 9px;
    border-radius: 11px;
  }
  .product-config-specs small {
    margin-bottom: 1px;
    font-size: .49rem;
    line-height: 1.1;
  }
  .product-config-specs strong {
    font-size: .66rem;
    line-height: 1.18;
  }
  .product-config-info .config-line {
    min-height: 38px;
    padding: 5px 0;
  }
  .product-config-info .config-line > span {
    min-width: 82px;
    font-size: .66rem;
  }
  .product-config-info .chip {
    min-height: 32px;
    padding: 0 11px;
    border-radius: 10px;
    font-size: .65rem;
  }
  .product-config-price {
    gap: 10px;
    margin-top: 0;
    padding-top: 9px;
  }
  .product-config-price strong {
    font-size: 1.48rem;
    line-height: 1.05;
  }
  .product-config-price-stack > span,
  .product-config-price-stack > small:last-child {
    font-size: .62rem;
    line-height: 1.25;
  }
  .product-config-price-stack > small:last-child { margin-top: 4px; }
  .product-config-actions { gap: 7px; }
  .product-config-actions .btn,
  .product-config-actions .btn-secondary {
    min-height: 43px;
    padding-inline: 15px;
    font-size: .72rem;
  }
}

@media (min-width: 761px) and (max-height: 590px) {
  .product-config-modal {
    max-height: calc(100dvh - 12px);
    padding: 15px 18px;
    overflow: auto;
  }
  .product-config-modal .modal-head { margin-bottom: 9px; }
  .product-config-visual {
    min-height: 368px;
    grid-template-rows: 334px 12px;
  }
  .product-gallery-stage { min-height: 334px; }
  .product-gallery-stage img,
  .product-config-visual > .product-gallery-stage > img { height: 334px; }
  .product-config-specs div { min-height: 38px; padding-block: 4px; }
  .product-config-info .config-line { padding-block: 3px; }
}

@media (max-width: 760px) {
  .product-config-modal { overflow: auto; }
  .product-config-visual[data-gallery-mode="overview"] .product-gallery-stage img {
    padding: 18px 32px 6px;
  }
}

/* =========================================================
   OBLAKO V16 — галерея начинается от верхнего края карточки
   ========================================================= */

/* Логотип — декоративный слой, он не должен занимать строку CSS Grid. */
.product-config-visual > #productConfigLogos {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.product-config-visual {
  place-items: stretch;
  align-content: start;
}
.product-config-visual > .product-gallery-stage {
  width: 100%;
  align-self: start;
}
.product-config-visual > .product-gallery-nav {
  width: auto;
  justify-self: center;
}

/* =========================================================
   OBLAKO V18 — точные цвета, статьи и заметные живые облака
   ========================================================= */

.cloud-a { opacity: .78 !important; }
.cloud-b { opacity: .68 !important; }
.cloud-c { opacity: .58 !important; }
.cloud-d { opacity: .64 !important; }
.cloud-e { opacity: .56 !important; }
.cloud-f { opacity: .46 !important; }

.hero-buy-actions { flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.hero-buy-actions .btn,
.hero-buy-actions .btn-secondary,
.hero-buy-actions .btn-link { min-height: 44px; padding-inline: 17px; white-space: nowrap; }

.product-config-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  min-width: 250px;
}
.product-article-link {
  grid-column: 1 / -1;
  min-height: 32px;
  padding: 0 8px;
  color: #176f96;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .69rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}
.product-article-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.review-modal-card { width: min(560px, calc(100vw - 24px)); }
.review-form { display: grid; gap: 15px; }
.review-form > label { display: grid; gap: 7px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.review-form fieldset { margin: 0; padding: 0; border: 0; }
.review-form legend { margin-bottom: 8px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.review-stars { display: flex; flex-wrap: wrap; gap: 7px; }
.review-stars input { position: absolute; opacity: 0; pointer-events: none; }
.review-stars span { display: block; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.review-stars input:checked + span { color: #fff; border-color: var(--navy); background: var(--navy); }
.review-form p { margin: 0; color: var(--muted); font-size: .7rem; }

.product-article-modal {
  width: min(780px, 100%);
  max-height: min(760px, calc(100dvh - 24px));
  overflow: auto;
  background: rgba(248, 253, 255, .98);
}
.product-article-content { display: grid; gap: 13px; color: #38576a; line-height: 1.62; }
.product-article-content h3 { margin: 9px 0 0; color: var(--ink); font-size: 1.05rem; }
.product-article-content p { margin: 0; }
.product-article-lead { padding: 16px 18px; border-left: 3px solid var(--orange); border-radius: 0 14px 14px 0; background: #eaf8fe; }
.product-article-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; list-style: none; }
.product-article-specs li { display: grid; gap: 2px; padding: 11px 13px; border: 1px solid rgba(12, 43, 61, .09); border-radius: 13px; background: rgba(238, 249, 254, .72); }
.product-article-specs strong { color: var(--ink); font-size: .74rem; }
.product-article-specs span { color: var(--muted); font-size: .73rem; }

@media (max-width: 760px) {
  .hero-buy-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .hero-buy-actions .btn-link { display: block; grid-column: 1 / -1; order: 3; }
  .product-config-actions { width: 100%; min-width: 0; }
  .product-article-specs { grid-template-columns: 1fr; }
}

.product-config-visual[data-product-kind="controller"] .product-gallery-stage img{object-fit:contain;object-position:center!important;transform:none!important;padding:0!important;max-width:100%}.product-config-visual[data-product-kind="controller"] .product-gallery-stage{background:#fff}.installment-term-grid{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:640px){.installment-term-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* V23.4.12 — bottom explanations */
.aftercare-section {
  padding-top: 28px;
  padding-bottom: 34px;
}
.aftercare-shell {
  padding: 42px;
  border: 1px solid rgba(37, 116, 152, .12);
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(239,249,255,.88));
  box-shadow: 0 28px 70px rgba(31, 93, 125, .10);
}
.aftercare-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 28px;
}
.aftercare-head h2 {
  margin: 10px 0 0;
  max-width: 680px;
}
.aftercare-head > p {
  max-width: 430px;
  margin: 0;
  text-align: right;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}
.aftercare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.aftercare-card {
  min-height: 330px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  border-radius: 26px;
  border: 1px solid rgba(32, 109, 146, .12);
  background: rgba(255,255,255,.86);
  box-shadow: 0 18px 40px rgba(38, 103, 134, .08);
}
.aftercare-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.aftercare-card-top span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #ff6333;
  color: #fff;
  font-weight: 900;
  font-size: .78rem;
  letter-spacing: .06em;
}
.aftercare-card-top strong {
  color: #176286;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .74rem;
}
.aftercare-card h3 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.2;
}
.aftercare-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
  font-size: .91rem;
}
.aftercare-card p strong { color: var(--ink); }
.aftercare-note {
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px solid rgba(32, 109, 146, .10);
}
.aftercare-link {
  margin-top: auto;
  padding-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #176286;
  font-weight: 800;
  text-decoration: none;
}
.aftercare-link span { transition: transform .2s ease; }
.aftercare-link:hover span { transform: translateX(3px); }
.aftercare-actions {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}
.aftercare-actions .aftercare-link { margin-top: 0; padding-top: 0; }
.aftercare-mini-link {
  color: var(--ink);
  font-weight: 750;
  font-size: .83rem;
  text-decoration: none;
  border-bottom: 1px dashed rgba(16,38,52,.28);
}
.aftercare-mini-link:hover { color: #176286; }
@media (max-width: 980px) {
  .aftercare-grid { grid-template-columns: 1fr; }
  .aftercare-card { min-height: 0; }
  .aftercare-head { align-items: flex-start; flex-direction: column; }
  .aftercare-head > p { text-align: left; }
}
@media (max-width: 640px) {
  .aftercare-shell { padding: 24px 18px; border-radius: 26px; }
  .aftercare-card { padding: 22px 18px; border-radius: 22px; }
}

.footer-link-button { appearance:none; border:0; padding:0; background:transparent; color:#176286; font:inherit; font-weight:700; cursor:pointer; }
.footer-link-button:hover { text-decoration:underline; }
.how-works-modal-card { width:min(1180px, calc(100vw - 28px)); max-height:min(880px, calc(100vh - 28px)); overflow:hidden; }
.how-works-modal-content { padding:0 24px 24px; overflow:auto; max-height:calc(100vh - 120px); }
.how-works-intro { margin:0 0 18px; color:var(--muted); line-height:1.65; }
.how-works-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
.how-works-legal-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; padding-top:18px; border-top:1px solid rgba(12,43,61,.1); }
.how-works-legal-links a { display:inline-flex; align-items:center; min-height:38px; padding:8px 13px; border:1px solid rgba(12,43,61,.12); border-radius:999px; background:rgba(255,255,255,.8); color:#176286; font-size:.78rem; font-weight:800; text-decoration:none; }
.product-logo-stack-oblako-only { min-width:152px; justify-content:center; padding:8px 12px; background:#fff; border-radius:15px; }
.product-logo-stack-oblako-only .oblako-card-logo { width:104px; height:28px; }
@media(max-width:760px){ .how-works-grid{grid-template-columns:1fr;} .how-works-modal-content{padding:0 14px 18px;} .product-logo-stack-oblako-only{min-width:118px; padding:6px 9px;} .product-logo-stack-oblako-only .oblako-card-logo{width:88px;height:24px;} }


/* V23.4.16 — compact old OBLAKO badge, exact main header on AI page, Duo hero sizing */
.product-config-visual > #productConfigImage {
  width: 88% !important;
  height: 88% !important;
  max-width: 88% !important;
  max-height: 88% !important;
  object-fit: contain !important;
  object-position: center center !important;
  mix-blend-mode: normal !important;
  padding: 10px !important;
}
.product-config-visual > #productConfigLogos img {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
}
.product-config-visual > #productConfigLogos .product-logo-stack {
  top: 18px !important;
  right: 18px !important;
  min-width: 0 !important;
  padding: 8px 12px !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 8px 20px rgba(22,70,96,.10) !important;
}
.product-config-visual > #productConfigLogos .product-logo-stack-oblako-only .oblako-card-logo {
  width: 104px !important;
  height: 27px !important;
}
.ai-main-header {
  position: relative !important;
  z-index: 20;
  margin: 0 0 26px;
}
.ai-shell-with-main-header { padding-top: 0 !important; }
.ai-main-header .header-inner { min-height: 92px; }
.ai-main-header .ai-back { white-space: nowrap; }
#heroPhoneWrap {
  width: min(600px, 95%) !important;
  height: 500px !important;
}
#heroPhoneWrap .hero-phone {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: translateZ(24px) scale(1.08) !important;
}
@media (max-width: 900px){
  .ai-main-header .nav { display:none; }
  .ai-main-header .header-inner { min-height:78px; }
  #heroPhoneWrap { width:min(520px,94vw) !important; height:420px !important; }
}


/* V23.4.16 final tuning — compact co-brand logo, storefront AI header, balanced Duo hero */
.product-config-visual > #productConfigLogos .product-logo-stack {
  top: 16px !important;
  right: 16px !important;
  min-width: 0 !important;
  gap: 6px !important;
  padding: 5px 7px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 7px 18px rgba(22,70,96,.10) !important;
  transform: none !important;
}
.product-config-visual > #productConfigLogos .product-logo-stack .oblako-card-logo {
  width: 72px !important;
  height: 20px !important;
  max-width: 72px !important;
  max-height: 20px !important;
}
.product-config-visual > #productConfigLogos .product-logo-stack .manufacturer-logo {
  width: 43px !important;
  height: 18px !important;
  max-width: 43px !important;
  max-height: 18px !important;
  padding-left: 6px !important;
  border-left: 1px solid rgba(12,43,61,.13) !important;
}
.product-config-visual > #productConfigLogos .product-logo-stack-oblako-only {
  min-width: 110px !important;
  padding: 6px 9px !important;
}
.product-config-visual > #productConfigLogos .product-logo-stack-oblako-only .oblako-card-logo {
  width: 86px !important;
  height: 23px !important;
  max-width: 86px !important;
  max-height: 23px !important;
}

/* Use the exact homepage Duo pair at a natural size. */
#heroPhoneWrap {
  width: min(555px, 92%) !important;
  height: 475px !important;
}
#heroPhoneWrap .hero-phone {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center 50% !important;
  transform: translateZ(24px) scale(.98) !important;
  filter: drop-shadow(0 28px 24px rgba(12,43,61,.19)) !important;
}

/* AI page header is the storefront header, not the old isolated AI bar. */
.ai-main-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  margin: 0 !important;
}
.ai-main-header .header-inner { min-height: 92px !important; }
.ai-main-header .site-logo-image { object-fit: contain !important; }
.ai-main-header .ai-back {
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  white-space: nowrap !important;
}
.ai-shell-with-main-header { padding-top: 18px !important; }
@media (max-width: 900px) {
  #heroPhoneWrap { width:min(455px,94vw) !important; height:400px !important; }
  .ai-main-header .nav { display:none !important; }
  .ai-main-header .header-inner { min-height:78px !important; }
}

/* V23.4.27 FIXED — the configurator stays scrollable through recommendations. */
.product-config-modal{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
@media(max-width:760px){
  .modal{align-items:start;overflow-y:auto;padding:8px}
  .product-config-modal{width:100%;max-height:calc(100dvh - 16px);padding:16px}
  .iphone-extras-grid{grid-template-columns:1fr!important}
}

/* V23.4.47 — catalog OBLAKO badge uses the exact header wordmark proportions */
.product-logo-stack-oblako-only .oblako-card-logo,
.product-image .product-logo-stack-oblako-only .oblako-card-logo,
.product-config-visual > #productConfigLogos .product-logo-stack-oblako-only .oblako-card-logo {
  width: 92px !important;
  height: auto !important;
  max-width: 92px !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}
.product-config-visual > #productConfigLogos .product-logo-stack-oblako-only {
  min-width: 112px !important;
}
.product-photo-note { display:none !important; }