@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Oswald:wght@500;600&display=swap");

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: none; }
button, input, textarea { font: inherit; }
button { border: 0; cursor: pointer; }

.bubble-body {
  position: relative;
  overflow-x: auto;
  background: #F5F5F5;
}

/* Full-bleed white backdrops for header and footer (edge-to-edge, like home) */
.bubble-body::before,
.bubble-body::after {
  content: "";
  position: absolute;
  left: 0;
  z-index: 0;
  width: 100vw;
  background: #fff;
  pointer-events: none;
}

.bubble-body::before { top: 0; height: 70px; }
.bubble-body::after { top: 5167px; height: 293px; }

.bubble-page {
  position: relative;
  z-index: 1;
  --home-scale: 1;
  width: 1440px;
  height: 5460px;
  margin: 0 auto;
  overflow: hidden;
  background: #F5F5F5;
  color: #111746;
  font-family: Inter, Arial, sans-serif;
}

.bubble-hero {
  position: absolute;
  left: 0;
  top: 65px;
  width: 1440px;
  height: 945px;
  overflow: hidden;
  padding: 80px 52px;
  background: #fff;
}

.bubble-hero::before,
.bubble-hero::after {
  display: none;
}

.bubble-hero__label {
  position: absolute;
  left: 52px;
  top: 80px;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 36px;
  padding: 8px 16px 8px 40px;
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  color: #111746;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  backdrop-filter: blur(2px);
}

.bubble-hero__label img {
  position: absolute;
  left: 16px;
  top: 11px;
  width: 16px;
  height: 14px;
}

.bubble-hero h1 {
  position: absolute;
  left: 52px;
  top: 140px;
  z-index: 2;
  width: 772px;
  margin: 0;
  color: #111746;
  font-family: Oswald, Arial, sans-serif;
  font-size: 96px;
  font-weight: 500;
  line-height: 96px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.bubble-hero h1 span {
  color: #386EF2;
}

.bubble-hero p {
  position: absolute;
  left: 52px;
  top: 690px;
  z-index: 2;
  width: 414px;
  margin: 0;
  color: #111746;
  font-size: 18px;
  line-height: 29.25px;
}

.bubble-hero__actions {
  position: absolute;
  left: 52px;
  top: 773px;
  z-index: 2;
  display: flex;
  gap: 16px;
}

.bubble-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.bubble-btn--dark {
  width: 253px;
  gap: 8px;
  padding: 16px 32px;
  background: #3d342b;
  color: #fff;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}

.bubble-btn--dark i {
  width: 14px;
  height: 16px;
  position: relative;
}

.bubble-btn--dark i::before {
  content: "→";
  font-style: normal;
  line-height: 16px;
}

.bubble-btn--light {
  width: 222px;
  border: 2px solid rgba(61,52,43,.2);
  background: #fff;
  color: #111746;
}

.bubble-hero__image {
  position: absolute;
  z-index: 2;
  left: 744px;
  top: 173px;
  width: 644px;
  height: 600px;
  object-fit: cover;
}

.bubble-categories,
.bubble-payment,
.bubble-popular,
.bubble-contacts {
  position: absolute;
  left: 0;
  width: 1440px;
  background: #fff;
}

.bubble-categories {
  top: 1010px;
  height: 1044px;
  padding: 80px 52px;
}

.bubble-title-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  width: 1336px;
  height: 48px;
}

.bubble-title-row h2 {
  margin: 0;
  color: #111746;
  font-family: Oswald, Arial, sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 48px;
  text-transform: uppercase;
  white-space: nowrap;
}

.bubble-title-row i {
  display: block;
  flex: 1;
  height: 1px;
  margin-bottom: 8px;
  background: #e5e7eb;
}

.bubble-category-grid {
  position: absolute;
  left: 52px;
  top: 168px;
  display: grid;
  grid-template-columns: repeat(3, 429.33px);
  gap: 24px;
  width: 1336px;
}

.bubble-category-grid a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 322px;
  overflow: hidden;
  border-radius: 24px;
  padding: 34px;
  border: 1px solid rgba(229,231,235,.9);
  background: #f6f9fc;
  box-shadow: 0 18px 45px rgba(45,49,66,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.bubble-category-grid a:hover {
  transform: translateY(-4px);
  border-color: rgba(107,154,196,.38);
  box-shadow: 0 24px 60px rgba(45,49,66,.1);
}

.bubble-category-grid img {
  display: none;
}

.bubble-category-grid a::before {
  content: attr(data-note);
  position: absolute;
  z-index: 1;
  left: 34px;
  right: 72px;
  bottom: 34px;
  color: #111746;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
}

.bubble-category-grid a:nth-child(1) { background: #fff; }
.bubble-category-grid a:nth-child(2) { background: #fff; }
.bubble-category-grid a:nth-child(3) { background: #fff; }
.bubble-category-grid a:nth-child(4) { background: #fff; }
.bubble-category-grid a:nth-child(5) { background: #fff; }
.bubble-category-grid a:nth-child(6) { background: #fff; }

.bubble-category-grid a::after {
  position: absolute;
  z-index: 2;
  left: 34px;
  top: 34px;
  width: 310px;
  color: #111746;
  font-family: Oswald, Arial, sans-serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.bubble-category-grid a:nth-child(1)::after { content: "Джус боллы Китай"; }
.bubble-category-grid a:nth-child(2)::after { content: "Джус боллы Тайвань"; }
.bubble-category-grid a:nth-child(3)::after { content: "Тапиока"; }
.bubble-category-grid a:nth-child(4)::after { content: "Стаканы Баббл кап"; }
.bubble-category-grid a:nth-child(5)::after { content: "Смеси, кусочки кокоса, джем"; }
.bubble-category-grid a:nth-child(6)::after { content: "Рулоны для запайщиков"; }

.bubble-category-grid span {
  position: absolute;
  z-index: 2;
  right: 24px;
  top: 24px;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 0 0 1px rgba(229,231,235,.7);
  transition: transform .25s ease, background .25s ease;
}

.bubble-category-grid a:hover span {
  transform: translateX(3px);
  background: #fff;
}

.bubble-category-grid span::before {
  content: "→";
  color: #111746;
  font-size: 28px;
  line-height: 1;
}

.bubble-more {
  position: absolute;
  left: 541px;
  top: 884px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 358px;
  height: 64px;
  border: 2px solid #386EF2;
  border-radius: 999px;
  background: #fff;
  color: #386EF2;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: .4px;
  text-transform: uppercase;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}

.bubble-more i::before {
  content: "→";
  font-style: normal;
}

.bubble-payment {
  top: 2034px;
  height: 938px;
  padding: 80px 52px;
}

.bubble-payment__top {
  position: absolute;
  left: 52px;
  top: 168px;
  display: grid;
  grid-template-columns: repeat(2, 668px);
  gap: 32px;
}

.bubble-payment__top article {
  height: 258px;
  padding: 33px;
  border: 1px solid #f0f2f5;
  border-radius: 24px;
  background: #fff;
}

.ico {
  position: absolute;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 24px;
}

.ico img {
  max-width: 24px;
  max-height: 24px;
}

.bubble-payment__top .ico {
  left: 33px;
  top: 33px;
}

.bubble-payment__top article { position: relative; }
.ico-card { background: rgba(107,154,196,.1); }
.ico-truck { background: rgba(34,197,94,.1); }
.ico-sale { background: rgba(252,211,77,.18); }
.bubble-payment h3 {
  margin: 0 0 24px 72px;
  color: #111746;
  font-family: Oswald, Arial, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.bubble-payment article p {
  position: relative;
  margin: 0 0 16px;
  padding-left: 36px;
}

.bubble-payment article p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(107,154,196,.1);
}

.bubble-payment article p::after {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  background: #386EF2;
  -webkit-mask: var(--ico) center / 14px 14px no-repeat;
  mask: var(--ico) center / 14px 14px no-repeat;
}

.bubble-payment__top article:nth-child(2) p::before {
  background: #f0fdf4;
}

.bubble-payment__top article:nth-child(2) p::after {
  background: #22c55e;
}

.bubble-payment article p strong,
.bubble-payment article p span {
  display: block;
}

.bubble-payment article p strong {
  color: #111746;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.bubble-payment article p span {
  color: #111746;
  font-size: 14px;
  line-height: 20px;
}

.bubble-discount {
  position: absolute;
  left: 52px;
  top: 466px;
  width: 1368px;
  height: 346px;
  padding: 41px 33px 33px;
  border: 1px solid #f0f2f5;
  border-radius: 24px;
  background: #fff;
}

.bubble-discount__head {
  position: relative;
  height: 72px;
}

.bubble-discount__head .ico {
  left: 0;
  top: 0;
}

.bubble-discount__head h3 {
  margin-left: 72px;
  padding-top: 12px;
}

.bubble-discount__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.bubble-discount__cards div {
  height: 104px;
  padding: 22px 18px;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  text-align: center;
}

.bubble-discount__cards div:first-child {
  background: #fff;
}

.bubble-discount__cards div:nth-child(2) {
  background: #fff;
  border-color: #bfdbfe;
  color: #386EF2;
}

.bubble-discount__cards div:nth-child(3) {
  background: #fff;
  border-color: #bbf7d0;
  color: #4f8f61;
}

.bubble-discount__cards div:nth-child(4) {
  background: #fff;
  border-color: #fed7aa;
  color: #b66a12;
}

.bubble-discount__cards strong {
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 32px;
}

.bubble-discount__cards span {
  display: block;
  margin-top: 4px;
  color: #111746;
  font-size: 14px;
  line-height: 20px;
}

.bubble-discount > p {
  height: 54px;
  margin: 24px 0 0;
  padding: 17px 24px 17px 56px;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: #eff6ff;
  color: #111746;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
}

.bubble-popular {
  top: 2886px;
  height: 721px;
  padding: 80px 52px;
  background: #fff;
}

.bubble-product-grid {
  position: absolute;
  left: 52px;
  top: 168px;
  display: grid;
  grid-template-columns: repeat(4, 316px);
  gap: 24px;
}

.bubble-product {
  position: relative;
  width: 316px;
  height: 424px;
  padding: 17px;
  border: 1px solid #f0f2f5;
  border-radius: 24px;
  background: #f2f4f6;
}

.bubble-product .coffee-card__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 24px;
}

.bubble-product > img {
  width: 282px;
  height: 218px;
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  object-fit: contain;
}

.bubble-product > span {
  position: absolute;
  left: 29px;
  top: 29px;
  z-index: 3;
  display: grid;
  height: 23px;
  padding: 4px 8px;
  place-items: center;
  border-radius: 999px;
  background: #fcd34d;
  color: #111746;
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  text-transform: uppercase;
}

.bubble-product > span.is-green {
  background: #22c55e;
  color: #fff;
}

.bubble-product .product-favorite {
  position: absolute;
  right: 29px;
  top: 29px;
  z-index: 4;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: #d1d5db;
}

.bubble-product .product-favorite.is-active {
  color: #ef4444;
}

.bubble-product h3 {
  margin: 14px 0 0;
  width: 282px;
  overflow: hidden;
  color: #111746;
  font-family: Oswald, Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  text-transform: uppercase;
  white-space: nowrap;
}

.bubble-product p {
  margin: 4px 0 0;
  color: #9ca3af;
  font-size: 12px;
  line-height: 16px;
}

.bubble-product__prices {
  position: absolute;
  left: 17px;
  right: 58px;
  bottom: 17px;
}

.bubble-product__prices strong {
  display: block;
  color: #111746;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
}

.bubble-product__prices dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 5px 0 0;
}

.bubble-product__prices dl div {
  min-width: 0;
  padding: 4px 5px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}

.bubble-product__prices dt {
  margin: 0;
  color: #9ca3af;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.bubble-product__prices dd {
  margin: 1px 0 0;
  color: #111746;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.bubble-product .product-add {
  position: absolute;
  right: 17px;
  bottom: 21px;
  z-index: 4;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #fff;
  color: #111746;
  font-size: 22px;
  line-height: 28px;
}

.bubble-consultation {
  position: absolute;
  left: 0;
  top: 3558px;
  width: 1440px;
  height: 1111px;
  padding-top: 80px;
  background: #386EF2;
}

.bubble-consultation h2 {
  margin: 0 auto;
  width: 793px;
  color: #fff;
  font-family: Oswald, Arial, sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 48px;
  text-align: center;
  text-transform: uppercase;
}

.bubble-consultation > p {
  margin: 16px auto 0;
  width: 645px;
  color: rgba(255,255,255,.8);
  font-size: 18px;
  line-height: 28px;
  text-align: center;
}

.bubble-form {
  position: absolute;
  left: 352px;
  top: 220px;
  display: grid;
  grid-template-columns: repeat(2, 308px);
  gap: 24px;
  width: 736px;
  height: 805px;
  padding: 48px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
}

.bubble-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.bubble-form label span {
  color: #111746;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.bubble-form .is-wide {
  grid-column: 1 / -1;
}

.bubble-form input,
.bubble-form textarea,
.bubble-form select {
  width: 100%;
  height: 52px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px 17px;
  background: #fff;
  color: #111746;
  outline: none;
}

.bubble-form select {
  appearance: auto;
  cursor: pointer;
}

.bubble-form textarea {
  height: 124px;
  resize: vertical;
}

.bubble-agree {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 12px !important;
}

.bubble-agree input {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  padding: 0;
  border-radius: 3px;
  accent-color: #111746;
}

.bubble-agree span {
  width: 612px;
  color: #111746 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 16px !important;
}

.bubble-agree a {
  color: #386EF2;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bubble-form button {
  grid-column: 1 / -1;
  height: 56px;
  border-radius: 999px;
  background: #111746;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: .4px;
  text-transform: uppercase;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
}

.bubble-contacts {
  top: 4669px;
  height: 498px;
  padding: 80px 52px;
  background: #F5F5F5;
}

.bubble-footer {
  position: absolute;
  left: 0;
  top: 5167px;
  z-index: 2;
  width: 1440px;
  height: 293px;
  background: transparent;
}

.bubble-contacts h2 {
  margin: 0 auto;
  width: 398px;
  color: #111746;
  font-family: Oswald, Arial, sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 48px;
  text-align: center;
  text-transform: uppercase;
}

.bubble-contacts > p {
  margin: 16px auto 0;
  width: 330px;
  color: #111746;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
}

.bubble-contacts > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-top: 48px;
}

.bubble-contacts a {
  position: relative;
  height: 198px;
  border: 1px solid #f0f2f5;
  border-radius: 24px;
  background: #fff;
  text-align: center;
}

.ico-contact {
  position: absolute;
  left: 50%;
  top: 32px;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 999px;
  transform: translateX(-50%);
}

.ico-contact img {
  max-width: 24px;
  max-height: 24px;
}

.ico-telegram { background: rgba(0,136,204,.1); }
.ico-whatsapp { background: rgba(37,211,102,.1); }
.ico-max { background: rgba(45,49,66,.08); }
.ico-vk { background: rgba(0,119,255,.1); }
.ico-email { background: #f3f4f6; }

.bubble-contacts strong {
  display: block;
  margin-top: 112px;
  color: #111746;
  font-family: Oswald, Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  text-transform: uppercase;
}

.bubble-contacts span {
  display: block;
  width: calc(100% - 28px);
  margin: 8px auto 0;
  color: #111746;
  font-size: 12px;
  line-height: 16px;
  overflow-wrap: anywhere;
}

/* ================= MOBILE ================= */
@media (max-width: 760px) {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { overflow-x: hidden; }

  .bubble-body { overflow-x: hidden; }
  .bubble-body::before, .bubble-body::after { display: none; }

  .bubble-page {
    position: relative;
    width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    overflow: visible;
    transform: none !important;
  }

  /* Reflow every absolute section + nested children */
  .bubble-hero,
  .bubble-categories,
  .bubble-payment,
  .bubble-popular,
  .bubble-consultation,
  .bubble-contacts,
  .bubble-category-grid,
  .bubble-payment__top,
  .bubble-discount,
  .bubble-product-grid,
  .bubble-form,
  .bubble-contacts > div {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
  }

  /* ---------- Hero ---------- */
  .bubble-hero {
    overflow: visible;
    padding: 24px 14px 28px;
  }
  .bubble-hero::before, .bubble-hero::after { display: none; }

  .bubble-hero__label {
    position: static !important;
    left: auto !important;
    top: auto !important;
    display: inline-flex;
    height: auto;
    margin: 0 0 16px;
    padding: 8px 16px 8px 40px;
    background: rgba(252,211,77,.18);
    font-size: 13px;
  }
  .bubble-hero__label img { left: 16px; top: 50%; transform: translateY(-50%); }

  .bubble-hero h1 {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 0 14px;
    font-size: 30px;
    line-height: 1.1;
  }

  .bubble-hero p {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.5;
  }

  .bubble-hero__actions {
    position: static !important;
    left: auto !important;
    top: auto !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 24px;
  }
  .bubble-btn {
    width: 100% !important;
    height: 52px;
  }

  .bubble-hero__image {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }

  /* ---------- Section title rows ---------- */
  .bubble-title-row {
    width: 100%;
    height: auto;
    margin: 0 0 20px;
  }
  .bubble-title-row h2 { font-size: 26px; line-height: 1.1; }

  /* ---------- Categories (1 column) ---------- */
  .bubble-categories,
  .bubble-payment,
  .bubble-popular,
  .bubble-contacts {
    padding: 32px 14px;
  }

  .bubble-category-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .bubble-category-grid a {
    min-height: 172px;
    height: auto;
    padding: 22px;
  }
  .bubble-category-grid img {
    display: none;
  }
  .bubble-category-grid a::before {
    left: 22px;
    right: 72px;
    bottom: 22px;
    font-size: 14px;
    line-height: 1.4;
  }
  .bubble-category-grid a::after {
    left: 22px;
    top: 22px;
    width: 240px !important;
    font-size: 24px;
    line-height: 1.08;
  }
  .bubble-category-grid span { right: 18px; top: 18px; width: 46px; height: 46px; }

  .bubble-more {
    position: static !important;
    left: auto !important;
    top: auto !important;
    display: flex;
    width: 100% !important;
    height: 54px;
    margin: 20px 0 0;
  }

  /* ---------- Payment (cards stacked) ---------- */
  .bubble-payment__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0 0 16px;
  }
  .bubble-payment__top article {
    height: auto;
    padding: 24px 20px 8px;
  }
  .bubble-payment h3 {
    margin: 0 0 20px 72px;
    padding-top: 12px;
    font-size: 20px;
  }

  .bubble-discount {
    height: auto;
    padding: 24px 18px;
  }
  .bubble-discount__head { height: auto; margin-bottom: 16px; }
  .bubble-discount__head h3 { font-size: 20px; }
  .bubble-discount__cards {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 0;
  }
  .bubble-discount__cards div { height: auto; padding: 18px; }
  .bubble-discount__cards strong { font-size: 26px; }
  .bubble-discount > p {
    height: auto;
    margin-top: 16px;
    padding: 14px 18px;
    line-height: 1.4;
  }

  /* ---------- Popular products (2 columns) ---------- */
  .bubble-product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .bubble-product {
    width: 100% !important;
    height: auto;
    min-height: 388px;
    padding: 12px 12px 118px;
  }
  .bubble-product > img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 16px;
  }
  .bubble-product > span { left: 20px; top: 20px; }
  .bubble-product .product-favorite { right: 20px; top: 20px; }
  .bubble-product h3 { width: 100%; font-size: 16px; }
  .bubble-product__prices { left: 12px; right: 54px; bottom: 14px; }
  .bubble-product__prices strong { font-size: 16px; line-height: 22px; }
  .bubble-product__prices dt { font-size: 7px; }
  .bubble-product__prices dd { font-size: 9px; }
  .bubble-product .product-add { right: 12px; bottom: 16px; }

  /* ---------- Consultation (blue) + form ---------- */
  .bubble-consultation {
    padding: 36px 14px;
  }
  .bubble-consultation h2 {
    width: 100% !important;
    font-size: 26px;
    line-height: 1.1;
  }
  .bubble-consultation > p {
    width: 100% !important;
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.5;
  }

  .bubble-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 28px 0 0;
    padding: 24px 18px;
    box-shadow: 0 14px 30px -12px rgba(0,0,0,.25);
  }
  .bubble-form .is-wide { grid-column: 1 / -1; }
  .bubble-agree span { width: auto !important; }
  .bubble-form button { width: 100%; }

  /* ---------- Contacts (2 columns) ---------- */
  .bubble-contacts {
    background: #F5F5F5;
  }
  .bubble-contacts h2 {
    width: 100% !important;
    font-size: 26px;
    line-height: 1.1;
  }
  .bubble-contacts > p {
    width: 100% !important;
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.5;
  }
  .bubble-contacts > div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 28px;
  }
  .bubble-contacts a { height: 168px; }
  .ico-contact { left: 50%; top: 26px; }
  .bubble-contacts strong { margin-top: 100px; font-size: 16px; }
}

/* Bubble Tea hero: text-only UTP block, matching the main site's first-screen logic. */
@media (min-width: 761px) {
  .bubble-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    left: 52px !important;
    top: 107px !important;
    width: 1336px !important;
    height: 665px !important;
    min-height: 665px !important;
    padding: 70px 72px 78px !important;
    border-radius: 36px !important;
    text-align: center !important;
    background: #fff !important;
    box-shadow: 0 24px 70px rgba(45, 49, 66, .08) !important;
  }

  .bubble-hero::before,
  .bubble-hero::after,
  .bubble-hero__image {
    display: none !important;
  }

  .bubble-hero__label {
    position: static !important;
    left: auto !important;
    top: auto !important;
    height: 42px !important;
    margin: 0 0 22px !important;
    padding: 10px 18px 10px 44px !important;
    background: rgba(107,154,196,.12) !important;
    color: #386EF2 !important;
  }

  .bubble-hero__label img {
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .bubble-hero h1 {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: min(920px, 100%) !important;
    margin: 0 auto 22px !important;
    color: #111746 !important;
    font-size: 76px !important;
    line-height: 1.08 !important;
  }

  .bubble-hero p {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: min(680px, 100%) !important;
    margin: 0 auto 34px !important;
    color: #111746 !important;
    font-size: 20px !important;
    line-height: 1.45 !important;
  }

  .bubble-hero__actions {
    position: static !important;
    left: auto !important;
    top: auto !important;
    justify-content: center !important;
  }

  .bubble-btn--dark {
    background: #111746 !important;
  }

  .bubble-btn--light {
    border-color: #e5e7eb !important;
    color: #111746 !important;
  }
}

@media (max-width: 760px) {
  .bubble-hero {
    min-height: calc(100svh - 56px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 32px 14px 38px !important;
    text-align: left !important;
    background: #fff !important;
  }

  .bubble-hero__image {
    display: none !important;
  }

  .bubble-hero__label {
    background: rgba(107,154,196,.12) !important;
    color: #386EF2 !important;
  }

  .bubble-hero h1 {
    font-size: 40px !important;
    line-height: 1.04 !important;
  }

  .bubble-hero p {
    font-size: 17px !important;
  }
}

/* Плитки категорий с фото (18.10.2026) */
.bubble-category-grid a.has-photo { border-color: transparent; }
.bubble-category-grid a.has-photo img {
  position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; transition: transform .35s ease;
}
.bubble-category-grid a.has-photo:hover img { transform: scale(1.04); }
.bubble-cat-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,25,38,.55) 0%, rgba(20,25,38,.08) 40%, rgba(20,25,38,.1) 50%, rgba(20,25,38,.72) 100%);
}
.bubble-category-grid a.has-photo::before,
.bubble-category-grid a.has-photo::after { z-index: 2; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.bubble-category-grid a.has-photo::before { color: rgba(255,255,255,.92); }
.bubble-category-grid a.has-photo span { z-index: 3; }
@media (max-width: 760px) {
  .bubble-category-grid a.has-photo { min-height: 220px; }
  .bubble-category-grid a.has-photo img { display: block; }
}

/* Первый экран: шарики и синие кнопки (правки 18.10.2026) */
.bubble-hero__label { display: none !important; }
.bubble-floats { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; border-radius: inherit; }
.bubble-floats i {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 9%, rgba(214,224,255,.75) 20%, rgba(140,163,245,.72) 55%, rgba(98,124,232,.9) 100%);
  box-shadow: inset -6px -8px 14px rgba(70,95,210,.35), inset 4px 5px 10px rgba(255,255,255,.6), 0 10px 22px rgba(70,95,210,.18);
  animation: bubbleDrop 1.1s cubic-bezier(.28,.84,.42,1) var(--d) both, bubbleFloat 5s ease-in-out calc(var(--d) + 1.1s) infinite;
}
@keyframes bubbleDrop {
  0% { transform: translateY(-120px) scale(.6); opacity: 0; }
  45% { transform: translateY(0) scale(1.05, .92); opacity: 1; }
  65% { transform: translateY(-26px) scale(.98, 1.03); }
  82% { transform: translateY(0) scale(1.02, .97); }
  92% { transform: translateY(-6px); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes bubbleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .bubble-floats i { animation: none; } }
.bubble-hero h1 span { color: #386EF2 !important; }
.bubble-btn--dark { background: #386EF2 !important; box-shadow: 0 12px 26px rgba(56,110,242,.28) !important; }
.bubble-btn--light { border-color: #386EF2 !important; color: #386EF2 !important; }
@media (max-width: 760px) {
  .bubble-hero { position: relative !important; }
  .bubble-floats i { width: calc(var(--s) * .55); height: calc(var(--s) * .55); }
  .bubble-floats i:nth-child(4), .bubble-floats i:nth-child(n+6) { display: none; }
}

/* Доставка и оплата: без маленьких значков, текст по линии заголовка, синие значки */
.bubble-payment article p::before,
.bubble-payment article p::after { display: none !important; }
.bubble-payment__top article p { padding-left: 72px !important; }
.bubble-payment .ico { background: rgba(56,110,242,.12) !important; }
.bubble-payment .ico img { filter: brightness(0) saturate(100%) invert(45%) sepia(68%) saturate(2410%) hue-rotate(207deg) brightness(95%) contrast(91%); }
@media (max-width: 760px) {
  .bubble-payment__top article p { padding-left: 0 !important; }
}

/* Свяжитесь с нами: фото фоном, контакты справа (06.11.2026) */
@media (min-width: 761px) {
  .bubble-contacts {
    display: flex !important; flex-direction: column; justify-content: center;
    height: 720px !important;
    padding: 0 60px 90px 800px !important;
    background: #f2f0f7 url(/preview/assets/bubble/contacts-bg.jpg?v=2) center / cover no-repeat !important;
  }
  .bubble-contacts h2, .bubble-contacts > p { width: auto !important; margin-left: 0 !important; text-align: left !important; }
  .bubble-contacts > p { color: #111746 !important; }
  .bubble-contacts > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; margin-top: 28px !important; }
  .bubble-contacts a {
    display: grid !important; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center;
    height: auto !important; min-height: 64px; padding: 10px 16px !important; text-align: left !important;
    border-color: rgba(255,255,255,.7) !important; background: rgba(255,255,255,.82) !important;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .bubble-contacts a:last-child { grid-column: 1 / -1; }
  .bubble-contacts .ico-contact { position: static !important; grid-row: 1 / 3; width: 44px !important; height: 44px !important; transform: none !important; }
  .bubble-contacts strong { margin: 0 !important; font-size: 16px !important; line-height: 22px !important; }
  .bubble-contacts span { width: auto !important; margin: 0 !important; font-size: 13px !important; }
}

@media (min-width: 761px) {
  body.bubble-body { --chrome-footer-top: 5389px !important; }
  .bubble-body::after { top: 5389px !important; }
  .bubble-page { height: 5762px !important; }
}
@media (max-width: 760px) {
  .bubble-contacts { background: linear-gradient(rgba(242,240,247,.78), rgba(242,240,247,.9)), url(/preview/assets/bubble/contacts-bg.jpg?v=2) 20% center / cover no-repeat !important; }
}

/* ===== Правки заказчика 09.11.2026 (лист 3) ===== */
/* 14: без теней у шариков и кнопки «Смотреть каталог» */
.bubble-floats i { box-shadow: inset -6px -8px 14px rgba(70,95,210,.35), inset 4px 5px 10px rgba(255,255,255,.6) !important; }
.bubble-btn--dark { box-shadow: none !important; }

/* 18–19: доставка и оплата без значков, новый текст доставки */
.bubble-payment__top article p, .bubble-discount__head h3 { padding-left: 0 !important; }
.bubble-payment h3, .bubble-discount__head h3 { margin-left: 0 !important; }
.bubble-discount__head { padding-left: 0 !important; }
.bubble-ship { margin: 8px 0 0; padding-left: 18px; color: #111746; font-size: 14px; line-height: 22px; }
.bubble-ship li + li { margin-top: 2px; }
.bubble-ship__lead { margin-bottom: 0 !important; }
.bubble-ship__more { margin-top: 12px !important; color: #111746; font-size: 14px; line-height: 21px; }
.bubble-ship__more a { color: #386EF2; font-weight: 600; }

/* 15: консультация — белый блок как на странице контактов */
.cnt-consult {
  display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 48px; align-items: center;
  padding: 44px 48px; border-radius: 28px; background: #fff; border: 1px solid #eceef2; color: #111746; text-align: left;
}
.cnt-consult h2 { margin: 0 0 14px !important; width: auto !important; color: #111746 !important; font-family: Oswald, Arial, sans-serif; font-size: 32px !important; font-weight: 500; line-height: 40px !important; text-align: left !important; text-transform: uppercase; }
.cnt-consult__text p { margin: 0 !important; width: auto !important; color: #111746 !important; font-size: 17px !important; line-height: 28px !important; text-align: left !important; }
.cnt-consult__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cnt-chip { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border: 1.5px solid #386EF2; border-radius: 999px; background: #fff; color: #386EF2; font-size: 15px; font-weight: 600; }
.cnt-chip:hover { background: #386EF2; color: #fff; }
.cnt-form { display: grid; gap: 14px; width: auto !important; margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
.cnt-form label { display: block; }
.cnt-form label > span { display: block; margin-bottom: 6px; color: #111746; font-size: 13px; font-weight: 600; }
.cnt-form input[name="name"], .cnt-form input[name="phone"] { width: 100%; height: 50px; padding: 0 16px; border: 1px solid #d8dde6; border-radius: 14px; background: #f5f5f5; color: #111746; font: inherit; font-size: 15px; }
.cnt-form input:focus { outline: none; border-color: #386EF2; background: #fff; }
.cnt-form__agree { display: flex !important; gap: 10px; align-items: flex-start; }
.cnt-form__agree span { margin: 0 !important; color: #111746 !important; font-size: 12px !important; font-weight: 400 !important; line-height: 17px; }
.cnt-form__agree a { color: #386EF2; }
.cnt-form button { height: 52px; border: 0; border-radius: 14px; background: #386EF2; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
.cnt-form button:hover { background: #2A5BD6; }
.cnt-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* 19: «Свяжитесь с нами» — фото с оформлением как на странице контактов */
.bubble-contacts {
  display: flex !important; flex-direction: column; justify-content: space-between;
  overflow: hidden; color: #fff;
  background: linear-gradient(90deg, rgba(17,23,70,.78) 0%, rgba(17,23,70,.45) 55%, rgba(17,23,70,.15) 100%), linear-gradient(0deg, rgba(17,23,70,.55) 0%, rgba(17,23,70,0) 50%), url(/preview/assets/bubble/contacts-bg.jpg?v=2) center / cover no-repeat !important;
}
.bubble-contacts h2 { width: auto !important; margin: 0 !important; color: #fff !important; font-size: 64px !important; line-height: 1 !important; text-align: left !important; }
.bubble-contacts__text p { width: auto !important; margin: 14px 0 0 !important; color: rgba(255,255,255,.88) !important; font-size: 17px !important; text-align: left !important; }
.bubble-contacts__links { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; margin: 32px 0 0 !important; }
.bubble-contacts__links a {
  display: grid !important; gap: 2px; height: auto !important; min-height: 0 !important; padding: 16px 20px !important; text-align: left !important;
  border: 1px solid rgba(255,255,255,.22) !important; border-radius: 18px !important; background: rgba(255,255,255,.12) !important;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff;
}
.bubble-contacts__links a:hover { background: rgba(255,255,255,.22) !important; }
.bubble-contacts__links b { color: rgba(255,255,255,.75); font-size: 13px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
.bubble-contacts__links span { overflow: hidden; margin: 0 !important; width: auto !important; color: #fff !important; font-size: 17px !important; font-weight: 500; line-height: 24px !important; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 761px) {
  .bubble-categories { height: 944px !important; }
  .bubble-payment { top: 1934px !important; height: 926px !important; }
  .bubble-discount { top: 168px !important; width: 1336px !important; }
  .bubble-payment__top { top: 546px !important; }
  .bubble-payment__top article { height: auto !important; min-height: 258px; }
  .bubble-popular { top: 2834px !important; }
  .bubble-consultation { top: 3555px !important; height: auto !important; padding: 0 52px 80px !important; background: transparent !important; }
  .bubble-contacts {
    left: 52px !important; top: 4075px !important; width: 1336px !important; height: 560px !important;
    padding: 56px 60px 48px !important; border-radius: 32px;
  }
}
@media (max-width: 760px) {
  .cnt-consult { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; border-radius: 20px; }
  .cnt-consult h2 { font-size: 24px !important; line-height: 30px !important; }
  .cnt-consult__text p { font-size: 15px !important; line-height: 24px !important; }
  .bubble-consultation { padding: 0 !important; background: transparent !important; }
  .bubble-contacts { padding: 32px 20px 20px !important; border-radius: 24px; }
  .bubble-contacts h2 { font-size: 40px !important; }
  .bubble-contacts__links { grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 24px !important; }
  .bubble-contacts__links a { padding: 12px 16px !important; border-radius: 14px !important; }
}
@media (min-width: 761px) { .bubble-body::after { display: none !important; } }
@media (min-width: 761px) { .bubble-payment__top { grid-template-columns: repeat(2, 652px) !important; } }
.bubble-ship__more a { white-space: nowrap; }
.bubble-contacts > .bubble-contacts__text { display: block !important; margin: 0 !important; }
.bubble-contacts__links a { grid-template-columns: 1fr !important; grid-column: auto !important; column-gap: 0 !important; }
.bubble-contacts > .bubble-contacts__links { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 760px) { .bubble-contacts > .bubble-contacts__links { grid-template-columns: 1fr !important; } }
@media (max-width: 760px) {
  .bubble-payment { display: flex !important; flex-direction: column; }
  .bubble-payment > .bubble-discount { order: 1; margin-bottom: 16px; }
  .bubble-payment > .bubble-payment__top { order: 2; }
}

/* Правки 12.11.2026 (лист 2.1): кнопки мессенджеров и поля формы */
.cnt-consult .cnt-chip {
  height: 46px !important; padding: 0 22px !important; border: 1px solid #d8dde6 !important; border-radius: 12px !important;
  background: #fff !important; color: #111746 !important; font-size: 15px !important; font-weight: 600 !important;
}
.cnt-consult .cnt-chip:hover { border-color: #386EF2 !important; background: #fff !important; color: #386EF2 !important; }
.cnt-form input[name="name"], .cnt-form input[name="phone"] { background: #fff !important; }
/* Без «Популярных товаров»: блоки ниже поднимаются; заголовок контактов как на странице контактов */
@media (min-width: 761px) {
  .bubble-consultation { top: 2876px !important; }
  .bubble-contacts { top: 3396px !important; }
}
.bubble-contacts h2 { font-size: 72px !important; letter-spacing: 0 !important; }
.bubble-contacts__text p { max-width: 560px; margin-top: 16px !important; font-size: 17px !important; line-height: 26px !important; }
@media (max-width: 760px) { .bubble-contacts h2 { font-size: 44px !important; } .bubble-contacts__text p { font-size: 15px !important; line-height: 22px !important; } }
@media (max-width: 760px) { .bubble-contacts { margin-top: 16px !important; } }

/* Правки 12.11.2026 (лист «съехало»): серый фон вместо белого, без подписей на фото, без точек */
.bubble-categories, .bubble-payment { background: transparent !important; }
.bubble-category-grid a::before { display: none !important; }
.bubble-ship { list-style: none !important; padding-left: 0 !important; }
.bubble-ship__more a span { display: inline !important; }
.bubble-btn--dark i { display: inline-flex !important; align-items: center; height: auto !important; }
.bubble-btn--dark i::before { line-height: 1 !important; position: relative; top: -1px; }
/* Телефон: крупный заголовок первого экрана, без нижнего шарика (12.11.2026) */
@media (max-width: 760px) {
  .bubble-hero h1 { font-size: 44px !important; line-height: 1.02 !important; }
  .bubble-floats i:nth-child(5) { display: none !important; }
}

/* Меньше пустого места между первым экраном и каталогом (12.11.2026) */
@media (min-width: 761px) {
  .bubble-categories { top: 812px !important; }
  .bubble-payment { top: 1736px !important; }
  .bubble-consultation { top: 2678px !important; }
  .bubble-contacts { top: 3198px !important; }
}