*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  body { font-family: 'Manrope', -apple-system, sans-serif; background: #f5f5f7; -webkit-font-smoothing: antialiased; }
  svg { display: block; flex-shrink: 0; }
  a { text-decoration: none; color: inherit; }

  /* ══════════════════════════════
     TOPBAR
  ══════════════════════════════ */
  .topbar { background: #1d1d1f; height: 32px; display: flex; align-items: center; justify-content: center; }
  .topbar-inner { width: 100%; max-width: 1340px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; }
  .topbar-left { display: flex; align-items: center; flex-shrink: 0; }
  .topbar-phone { font-size: 11px; color: rgba(255,255,255,0.70); text-decoration: none; letter-spacing: 0.01em; display: flex; align-items: center; gap: 5px; font-weight: 500; transition: color 0.15s; }
  .topbar-phone:hover { color: white; }
  .topbar-phone svg { opacity: 0.55; }
  .topbar-nav { display: flex; align-items: center; gap: 2px; margin-left: 28px; padding-left: 28px; border-left: 1px solid rgba(255,255,255,0.1); }
  .topbar-nav-link { font-size: 11px; color: rgba(255,255,255,0.50); text-decoration: none; padding: 0 10px; height: 32px; display: flex; align-items: center; border-radius: 6px; white-space: nowrap; transition: color 0.15s, background 0.15s; }
  .topbar-nav-link:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.07); }
  .topbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .topbar-delivery { font-size: 11px; color: rgba(255,255,255,0.50); display: flex; align-items: center; gap: 5px; }
  .topbar-delivery svg { color: #00aab5; opacity: 0.85; flex-shrink: 0; }
  .topbar-delivery strong { color: #00aab5; font-weight: 600; }

  /* ══════════════════════════════
     HEADER
  ══════════════════════════════ */
  .header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,0.07); box-shadow: 0 1px 8px rgba(0,0,0,0.05); }
  .header-inner { width: 100%; max-width: 1340px; margin: 0 auto; padding: 0 32px; height: 66px; display: flex; align-items: center; gap: 32px; }
  .logo { flex-shrink: 0; display: flex; align-items: center; }
  .logo img { height: 36px; width: auto; }
  .nav { display: flex; align-items: center; gap: 12px; flex: 1; }
  .nav-btn-catalog { display: flex; align-items: center; gap: 7px; background: #00aab5; color: white; font-size: 13px; font-weight: 600; padding: 0 16px; height: 36px; border-radius: 10px; border: none; cursor: pointer; text-decoration: none; letter-spacing: -0.01em; flex-shrink: 0; transition: background 0.15s, transform 0.1s; margin-right: 8px; }
  .nav-btn-catalog:hover { background: #009aa5; }
  .nav-link { font-size: 13px; color: #3a3a3c; font-weight: 500; text-decoration: none; padding: 0 12px; height: 36px; display: flex; align-items: center; border-radius: 8px; white-space: nowrap; transition: background 0.15s, color 0.15s; }
  .nav-link:hover { background: rgba(0,0,0,0.05); color: #1d1d1f; }
  .nav-link.active { color: #00aab5; }
  .nav-spacer { flex: 1; }
  .search-wrap { display: flex; align-items: center; background: #f2f2f7; border-radius: 10px; padding: 0 12px; height: 38px; gap: 8px; flex: 1; max-width: 480px; transition: background 0.15s; }
  .search-wrap:focus-within { background: #eaeaf0; outline: 2px solid rgba(0,170,181,0.3); }
  .search-wrap input { border: none; background: none; outline: none; font-size: 13px; color: #1d1d1f; font-family: inherit; flex: 1; min-width: 0; }
  .search-wrap input::placeholder { color: #9a9aa0; }
  .search-wrap svg { flex-shrink: 0; color: #8a8a8e; }
  .header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .hdr-btn { width: 40px; height: 40px; border-radius: 10px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #3a3a3c; position: relative; transition: background 0.15s, color 0.15s; }
  .hdr-btn:hover { background: rgba(0,0,0,0.06); color: #1d1d1f; }
  .cart-badge { position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; border-radius: 50%; background: #ff4d4d; color: white; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid white; }
  .hdr-hamburger { display: none; width: 40px; height: 40px; border-radius: 10px; border: none; background: none; cursor: pointer; align-items: center; justify-content: center; color: #1d1d1f; flex-shrink: 0; transition: background 0.15s; }
  .hdr-hamburger:hover { background: rgba(0,0,0,0.06); }

  /* ══════════════════════════════
     BANNER CAROUSEL
  ══════════════════════════════ */
  .carousel-wrap { position: relative; overflow: hidden; background: #f0ede8; height: 360px; }
  .slides { display: flex; height: 100%; transition: transform 0.55s cubic-bezier(0.77,0,0.175,1); }
  .slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .slide-color { background: radial-gradient(ellipse 70% 120% at 35% 60%, rgba(0,160,175,0.18) 0%, transparent 65%), radial-gradient(ellipse 50% 80% at 80% 20%, rgba(0,90,130,0.12) 0%, transparent 60%), linear-gradient(135deg, #0e2332 0%, #0a3040 55%, #09404e 100%); display: flex; align-items: center; }
  .slide-color-inner { width: 100%; max-width: 1340px; margin: 0 auto; padding: 0 80px; display: flex; align-items: center; justify-content: space-between; }
  .slide-color-text { max-width: 520px; }
  .slide-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #00aab5; background: rgba(0,170,181,0.15); border: 1px solid rgba(0,170,181,0.3); padding: 5px 14px; border-radius: 20px; margin-bottom: 20px; }
  .slide-headline { font-size: 38px; font-weight: 800; line-height: 1.15; color: white; letter-spacing: -0.03em; margin-bottom: 14px; }
  .slide-headline em { color: #00aab5; font-style: normal; }
  .slide-sub { font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.55; margin-bottom: 28px; max-width: 400px; }
  .slide-cta { display: inline-flex; align-items: center; gap: 8px; background: #00aab5; color: white; font-size: 14px; font-weight: 600; padding: 0 24px; height: 46px; border-radius: 12px; border: none; cursor: pointer; transition: background 0.15s; }
  .slide-cta:hover { background: #009aa5; }
  .slide-cta-ghost { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.6); font-size: 14px; font-weight: 500; padding: 0 20px; height: 46px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.15); cursor: pointer; margin-left: 10px; transition: border-color 0.15s, color 0.15s; }
  .slide-cta-ghost:hover { border-color: rgba(255,255,255,0.35); color: white; }
  .slide-cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
  .slide-photo-placeholder { width: 300px; height: 280px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1.5px dashed rgba(255,255,255,0.15); border-radius: 20px; color: rgba(255,255,255,0.25); font-size: 12px; text-align: center; line-height: 1.6; }
  .arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.88); backdrop-filter: blur(6px); border: none; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; color: #1d1d1f; box-shadow: 0 2px 12px rgba(0,0,0,0.14); transition: background 0.15s, transform 0.1s, opacity 0.15s; opacity: 0; }
  .carousel-wrap:hover .arrow { opacity: 1; }
  .arrow:hover { background: white; transform: translateY(-50%) scale(1.05); }
  .arrow-prev { left: 20px; }
  .arrow-next { right: 20px; }
  .dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 10; }
  .dot { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.45); border: none; cursor: pointer; padding: 0; transition: width 0.3s, background 0.3s; }
  .dot.on { width: 22px; background: rgba(255,255,255,0.9); }

  /* ══════════════════════════════
     QUICK ACCESS
  ══════════════════════════════ */
  .qa-wrap { padding: 28px 0 0; }
  .cat-card { position: relative; overflow: hidden; border-radius: 16px; cursor: pointer; transition: transform 0.22s ease, box-shadow 0.22s ease; }
  .cat-card:hover { transform: translateY(-3px); }
  .cat-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.4s ease; }
  .cat-card:hover .cat-card-bg { transform: scale(1.05); }
  .cat-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.10) 55%, transparent 100%); }
  .cat-card-label { position: absolute; bottom: 13px; left: 15px; right: 15px; font-size: 13px; font-weight: 700; color: white; letter-spacing: -0.01em; line-height: 1.3; text-shadow: 0 1px 5px rgba(0,0,0,0.4); }
  .cat-card-label.lg { font-size: 19px; bottom: 20px; left: 20px; }
  .new-badge { position: absolute; top: 14px; left: 14px; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: #00aab5; color: white; padding: 4px 11px; border-radius: 20px; z-index: 2; }
  .bg-novinka { background: linear-gradient(135deg, #0a2f3a 0%, #00aab5 100%); }
  .bg-collection { background: linear-gradient(135deg, #0a2030 0%, #1a6080 100%); }

  .quick-grid { display: grid; grid-template-columns: 220px repeat(8, 1fr); grid-template-rows: 105px 100px; gap: 10px; }
  .qg-novinka    { grid-column: 1;      grid-row: 1 / 3; }
  .qg-zdorov     { grid-column: 2 / 4;  grid-row: 1; }
  .qg-telo       { grid-column: 4 / 6;  grid-row: 1; }
  .qg-chay       { grid-column: 6 / 8;  grid-row: 1; }
  .qg-lit        { grid-column: 8;      grid-row: 1; }
  .qg-rot        { grid-column: 9;      grid-row: 1; }
  .qg-deti       { grid-column: 2;      grid-row: 2; }
  .qg-reklam     { grid-column: 3;      grid-row: 2; }
  .qg-eu         { grid-column: 4 / 6;  grid-row: 2; }
  .qg-krasota    { grid-column: 6 / 8;  grid-row: 2; }
  .qg-collection { grid-column: 8 / 10; grid-row: 2; }

  /* ══════════════════════════════
     PAGE CONTENT WRAPPER
  ══════════════════════════════ */
  .page-content { max-width: 1340px; margin: 0 auto; padding: 0 32px; }

  /* ══════════════════════════════
     SECTION HEADER
  ══════════════════════════════ */
  .sec-hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
  .sec-title { font-size: 20px; font-weight: 800; color: #1d1d1f; letter-spacing: -0.02em; }
  .sec-title span { color: #00aab5; }
  .sec-link { font-size: 13px; font-weight: 600; color: #00aab5; display: flex; align-items: center; gap: 4px; transition: gap 0.15s; }
  .sec-link:hover { gap: 7px; }

  /* ══════════════════════════════
     PRODUCT CARDS
  ══════════════════════════════ */
  .promo-section { padding: 40px 0; }
  .cards-scroll { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .cards-scroll::-webkit-scrollbar { height: 3px; }
  .cards-scroll::-webkit-scrollbar-thumb { background: rgba(0,170,181,0.35); border-radius: 2px; }

  .cards-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: stretch; }

  .card { background: #ffffff; border-radius: 16px; overflow: hidden; cursor: pointer; transition: transform 0.2s ease; display: flex; flex-direction: column; }
  .card:hover { transform: translateY(-4px); }
  .card .photo { position: relative; height: 180px; background: #ffffff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .card .photo > img { width: 130px; height: 158px; object-fit: contain; mix-blend-mode: multiply; }
  .card .organ-icon { position: absolute; bottom: 8px; left: 8px; pointer-events: none; }
  .card .organ-icon img { width: 20px; height: 20px; object-fit: contain; opacity: 0.45; }
  .card .photo .ph-placeholder { width: 80px; height: 100px; border-radius: 12px; background: linear-gradient(135deg, #e8f8f9 0%, #d0eff2 100%); display: flex; align-items: center; justify-content: center; font-size: 28px; }
  .card .bdg { position: absolute; top: 10px; left: 10px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 9px; border-radius: 20px; pointer-events: none; }
  .badge-new  { background: #00aab5; color: #fff; }
  .badge-sale { background: #ff4d4d; color: #fff; }
  .bdg-pct { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 800; color: #ff4d4d; background: rgba(255,77,77,0.10); padding: 3px 9px; border-radius: 20px; border: 1px solid rgba(255,77,77,0.20); letter-spacing: -0.01em; pointer-events: none; }
  .wish-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.12s; z-index: 2; padding: 0; }
  .wish-btn svg { width: 18px; height: 18px; transition: stroke 0.15s, fill 0.15s; }
  .wish-btn:hover { transform: scale(1.15); }
  .wish-btn.active svg { stroke: #ff3b5c; fill: #ff3b5c; }
  .card .strip { height: 1.5px; background: #f2f2f4; flex-shrink: 0; }
  .card .body { padding: 11px 13px 13px; display: flex; flex-direction: column; flex: 1; }
  .card .brand { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #00aab5; margin-bottom: 3px; }
  .card .name { font-size: 15px; font-weight: 700; color: #1d1d1f; line-height: 1.35; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 41px; }
  .card .dose { font-size: 11px; color: #8a8a8e; margin-bottom: 10px; margin-top: auto; }
  .card .footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 0; border-top: 1px solid #f2f2f4; background: white; }
  .chips { display: inline-flex; gap: 0; margin-bottom: 10px; margin-top: auto; background: #e8e8ed; border-radius: 20px; padding: 3px; align-self: flex-start; }
  .chip { font-size: 10px; font-weight: 500; padding: 4px 10px; border-radius: 16px; border: none; color: #3a3a3c; cursor: pointer; background: transparent; transition: background 0.18s, color 0.18s; user-select: none; white-space: nowrap; }
  .chip:hover { color: #1d1d1f; }
  .chip.on { background: #1d1d1f; color: #ffffff; }
  .card .price-old { font-size: 11px; color: #a0a0a8; text-decoration: line-through; margin-bottom: 1px; }
  .card .price { font-size: 19px; font-weight: 800; color: #1d1d1f; letter-spacing: -0.02em; }
  .card .price .cur { font-size: 13px; font-weight: 500; color: #8a8a8e; margin-left: 1px; }
  .btn-ico { width: 34px; height: 34px; background: #00aab5; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.1s; flex-shrink: 0; }
  .btn-ico:hover { background: #009aa5; }
  .btn-ico:active { transform: scale(0.93); }
  .qty-ctrl { display: none; align-items: center; background: #1d1d1f; border-radius: 100px; overflow: hidden; height: 34px; }
  .qty-ctrl.visible { display: flex; }
  .qty-btn { width: 32px; height: 34px; background: none; border: none; color: white; font-size: 18px; font-weight: 400; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.1s; font-family: 'Manrope', sans-serif; user-select: none; }
  .qty-btn:hover { background: rgba(255,255,255,0.12); }
  .qty-num { font-size: 13px; font-weight: 600; color: white; min-width: 20px; text-align: center; font-family: 'Manrope', sans-serif; }

  /* Second row of promo cards */
  .promo-row2 { margin-top: 16px; }

  /* ══════════════════════════════
     NEWS SECTION
  ══════════════════════════════ */
  .news-section { padding: 40px 0; }
  .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .news-card { background: white; border-radius: 16px; overflow: hidden; cursor: pointer; transition: transform 0.2s ease; }
  .news-card:hover { transform: translateY(-3px); }
  .news-cat { display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; }
  .news-cat-health { background: rgba(0,170,181,0.12); color: #00909a; }
  .news-cat-science { background: rgba(90,60,180,0.10); color: #6040c0; }
  .news-cat-promo { background: rgba(255,77,77,0.10); color: #d03030; }
  .news-body { padding: 20px 20px 22px; }
  .news-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .news-date { font-size: 11px; color: #9a9aa0; }
  .news-title { font-size: 15px; font-weight: 700; color: #1d1d1f; line-height: 1.35; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .news-excerpt { font-size: 12px; color: #6e6e73; line-height: 1.60; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 16px; }
  .news-read { font-size: 12px; font-weight: 600; color: #00aab5; display: inline-flex; align-items: center; gap: 4px; }

  /* ══════════════════════════════
     SERVICE BANNERS — горизонтальные пастельные
  ══════════════════════════════ */
  .service-section { padding: 40px 0; }
  .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .svc-card { border-radius: 20px; overflow: hidden; position: relative; padding: 28px 28px 28px 28px; height: 160px; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; background-size: cover; background-position: center right; }
  .svc-card:hover { transform: translateY(-2px); }
  .svc-card-consult { background-color: #f5e8d8; background-image: url('../icons/consultation.webp'); }
  .svc-card-lit { background-color: #dff0e8; background-image: url('../icons/assistant-peptides.webp'); }
  .svc-card-complex { background-color: #d8eef5; background-image: url('../icons/complex.webp'); }
  .svc-text { flex: 1; min-width: 0; max-width: 55%; }
  .svc-title { font-size: 18px; font-weight: 800; color: #1d1d1f; line-height: 1.25; letter-spacing: -0.02em; margin-bottom: 14px; }
  .svc-btn { display: inline-flex; align-items: center; gap: 6px; background: white; color: #1d1d1f; font-size: 13px; font-weight: 600; padding: 0 18px; height: 38px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.10); cursor: pointer; transition: background 0.15s, box-shadow 0.15s; white-space: nowrap; }
  .svc-btn:hover { background: #f7f7f7; }

  /* ══════════════════════════════
     POPULAR SERIES
  ══════════════════════════════ */
  .series-section { padding: 40px 0; }
  .series-sec-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
  .series-nav { display: flex; gap: 8px; }
  .series-nav-btn { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #d0d0d8; background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #3a3a3c; transition: border-color 0.15s, background 0.15s; }
  .series-nav-btn:hover { border-color: #00aab5; background: #f0fbfc; color: #00aab5; }
  .series-nav-btn:disabled { opacity: 0.35; cursor: default; }
  .series-scroll-wrap { overflow: hidden; }
  .series-track { display: flex; gap: 14px; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
  .series-card { flex-shrink: 0; width: 196px; background: white; border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform 0.2s ease; }
  .series-card:hover { transform: translateY(-3px); }
  .series-card-photo { height: 148px; background: #ffffff; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid #f2f2f4; }
  .series-card-photo img { width: 120px; height: 130px; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.3s ease; }
  .series-card:hover .series-card-photo img { transform: scale(1.04); }
  .series-card-label { padding: 10px 12px 12px; font-size: 12px; font-weight: 600; color: #1d1d1f; line-height: 1.35; }

  /* ══════════════════════════════
     SUBSCRIBE — 3-col layout
  ══════════════════════════════ */
  .subscribe-section { padding: 48px 0; }
  .subscribe-row { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: stretch; }
  .sub-col-main { background: white; border-radius: 20px; padding: 36px 40px; display: flex; align-items: center; gap: 48px; }
  .sub-title { font-size: 22px; font-weight: 800; color: #1d1d1f; letter-spacing: -0.02em; line-height: 1.3; flex-shrink: 0; max-width: 220px; }
  .sub-right { flex: 1; min-width: 0; }
  .sub-form { display: flex; gap: 10px; margin-bottom: 12px; }
  .sub-input { flex: 1; height: 46px; border: 1.5px solid #e0e0e5; border-radius: 12px; padding: 0 16px; font-size: 14px; font-family: inherit; outline: none; color: #1d1d1f; transition: border-color 0.15s; }
  .sub-input:focus { border-color: #00aab5; }
  .sub-input::placeholder { color: #b0b0b8; }
  .sub-submit { height: 46px; padding: 0 22px; background: #00aab5; color: white; font-size: 14px; font-weight: 600; border: none; border-radius: 12px; cursor: pointer; white-space: nowrap; transition: background 0.15s; }
  .sub-submit:hover { background: #009aa5; }
  .sub-legal { font-size: 11px; color: #9a9aa0; line-height: 1.55; }
  .sub-legal a { color: #00aab5; }
  .sub-col-social { background: #e8f7f8; border-radius: 20px; padding: 28px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .social-title { font-size: 16px; font-weight: 700; color: #1d1d1f; margin-bottom: 20px; }
  .social-icons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
  .social-btn { background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: transform 0.15s, opacity 0.15s; }
  .social-btn img { width: 36px; height: 36px; object-fit: contain; }
  .social-btn:hover { transform: translateY(-2px); opacity: 0.8; }

  /* ══════════════════════════════
     FOOTER
  ══════════════════════════════ */
  .footer { background: #1d1d1f; padding: 52px 0 28px; }
  .footer-inner { max-width: 1340px; margin: 0 auto; padding: 0 32px; }
  .footer-top { display: grid; grid-template-columns: 260px 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 28px; }
  .footer-brand {}
  .footer-logo { margin-bottom: 14px; }
  .footer-logo img { height: 26px; filter: brightness(0) invert(1); opacity: 0.9; }
  .footer-tagline { font-size: 12px; color: rgba(255,255,255,0.40); line-height: 1.6; margin-bottom: 18px; }
  .footer-phone { font-size: 16px; font-weight: 700; color: white; display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
  .footer-phone svg { color: #00aab5; }
  .footer-phone-note { font-size: 11px; color: rgba(255,255,255,0.30); }
  .footer-col {}
  .footer-col-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 14px; }
  .footer-col-links { display: flex; flex-direction: column; gap: 8px; }
  .footer-col-link { font-size: 13px; color: rgba(255,255,255,0.55); transition: color 0.15s; }
  .footer-col-link:hover { color: white; }
  .footer-bottom { display: flex; align-items: center; justify-content: space-between; }
  .footer-copy { font-size: 11px; color: rgba(255,255,255,0.25); }
  .footer-legal { display: flex; gap: 16px; }
  .footer-legal a { font-size: 11px; color: rgba(255,255,255,0.25); transition: color 0.15s; }
  .footer-legal a:hover { color: rgba(255,255,255,0.55); }

  /* ══════════════════════════════
     DRAWER
  ══════════════════════════════ */
  .drawer-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
  .drawer-overlay.open { opacity: 1; pointer-events: all; }
  .drawer { position: fixed; top: 0; left: 0; bottom: 0; z-index: 201; width: 300px; max-width: 85vw; background: #fff; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s; display: flex; flex-direction: column; box-shadow: none; }
  .drawer.open { transform: translateX(0); box-shadow: 4px 0 32px rgba(0,0,0,0.15); }
  .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #f2f2f4; }
  .drawer-logo img { height: 28px; }
  .drawer-close { width: 36px; height: 36px; border-radius: 8px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #3a3a3c; transition: background 0.15s; }
  .drawer-close:hover { background: rgba(0,0,0,0.06); }
  .drawer-body { flex: 1; overflow-y: auto; padding: 12px 0; }
  .drawer-section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #b0b0b8; padding: 12px 20px 6px; }
  .drawer-link { display: flex; align-items: center; gap: 12px; padding: 12px 20px; font-size: 15px; font-weight: 500; color: #1d1d1f; text-decoration: none; transition: background 0.12s; }
  .drawer-link:hover { background: rgba(0,0,0,0.04); }
  .drawer-link svg { color: #8a8a8e; flex-shrink: 0; }
  .drawer-catalog-btn { display: flex; align-items: center; gap: 12px; margin: 8px 16px 4px; background: #00aab5; color: white; padding: 14px 16px; border-radius: 12px; font-size: 15px; font-weight: 600; text-decoration: none; transition: background 0.15s; }
  .drawer-catalog-btn:hover { background: #009aa5; }
  .drawer-footer { padding: 16px 20px; border-top: 1px solid #f2f2f4; }
  .drawer-phone { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #1d1d1f; text-decoration: none; margin-bottom: 6px; }
  .drawer-phone svg { color: #00aab5; }

  /* ══════════════════════════════
     MOBILE
  ══════════════════════════════ */
  @media (max-width: 1200px) {
    .cards-grid { grid-template-columns: repeat(4, 1fr); }
  }

  @media (max-width: 960px) {
    .cards-grid { grid-template-columns: repeat(3, 1fr); }
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .service-grid { grid-template-columns: repeat(2, 1fr); }
    .subscribe-row { grid-template-columns: 1fr; gap: 12px; }
  }

  @media (max-width: 768px) {
    .topbar { display: none; }
    .header-inner { height: 56px; padding: 0 12px; gap: 0; }
    .hdr-hamburger { display: flex; }
    .logo { flex: 1; justify-content: center; }
    .nav { display: none; }
    .header-actions { gap: 2px; }
    .header-actions .hdr-btn:not(:nth-last-child(2)) { display: none; }
    .carousel-wrap { height: 125vw; max-height: 620px; }
    .carousel-wrap .arrow { opacity: 0.75; }
    .arrow { width: 36px; height: 36px; }
    .dot { width: 8px; height: 8px; }
    .dot.on { width: 26px; }
    .slide-color-inner { flex-direction: column; justify-content: center; padding: 32px 24px; gap: 24px; }
    .slide-photo-placeholder { display: none; }
    .slide-headline { font-size: 26px; }
    .slide-sub { font-size: 13px; }
    .slide-cta { height: 42px; font-size: 13px; padding: 0 20px; }
    .slide-cta-ghost { display: none; }
    .drawer-overlay { display: block; }

    /* quick access mobile */
    .qa-wrap { padding: 20px 0 0; }
    .quick-grid { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; align-items: flex-start; padding: 0 16px 6px; grid-template-columns: unset; grid-template-rows: unset; }
    .quick-grid::-webkit-scrollbar { height: 3px; }
    .quick-grid::-webkit-scrollbar-thumb { background: rgba(0,170,181,0.45); border-radius: 2px; }
    .quick-grid .cat-card { flex-shrink: 0; scroll-snap-align: start; width: 138px; height: 168px; border-radius: 14px; }
    .quick-grid .qg-novinka { width: 196px; }
    .quick-grid.expanded { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 108px 108px 90px 90px 90px; align-items: stretch; overflow-x: hidden; padding: 0 12px 6px; gap: 8px; }
    .quick-grid.expanded .cat-card { width: auto; height: auto; flex-shrink: unset; scroll-snap-align: unset; }
    .quick-grid.expanded .qg-novinka    { grid-column: 1 / 3; grid-row: 1 / 3; }
    .quick-grid.expanded .qg-zdorov     { grid-column: 3;     grid-row: 1; }
    .quick-grid.expanded .qg-telo       { grid-column: 3;     grid-row: 2; }
    .quick-grid.expanded .qg-chay       { grid-column: 1;     grid-row: 3; }
    .quick-grid.expanded .qg-lit        { grid-column: 2;     grid-row: 3; }
    .quick-grid.expanded .qg-rot        { grid-column: 3;     grid-row: 3; }
    .quick-grid.expanded .qg-deti       { grid-column: 1 / 3; grid-row: 4; }
    .quick-grid.expanded .qg-reklam     { grid-column: 3;     grid-row: 4; }
    .quick-grid.expanded .qg-eu         { grid-column: 1;     grid-row: 5; }
    .quick-grid.expanded .qg-krasota    { grid-column: 2;     grid-row: 5; }
    .quick-grid.expanded .qg-collection { grid-column: 3;     grid-row: 5; }
    .cat-card-label     { font-size: 12px; bottom: 10px; left: 11px; right: 11px; }
    .cat-card-label.lg  { font-size: 15px; bottom: 14px; left: 14px; }
    .new-badge          { font-size: 9px; top: 10px; left: 10px; padding: 3px 9px; }

    @keyframes hint-bounce {
      0%, 55%, 100% { transform: translateY(0); }
      25%            { transform: translateY(4px); }
      40%            { transform: translateY(1px); }
    }
    .expand-btn { display: flex; align-items: center; justify-content: center; margin: 10px auto 0; width: 52px; height: 22px; border-radius: 11px; border: none; background: rgba(255,255,255,0.68); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 10px rgba(0,0,0,0.10), inset 0 0 0 1px rgba(255,255,255,0.6); cursor: pointer; padding: 0; transition: background 0.2s ease; }
    .expand-btn:active { background: rgba(255,255,255,0.85); }
    .expand-btn .btn-icon { display: flex; align-items: center; justify-content: center; animation: hint-bounce 2.4s ease-in-out infinite; transition: transform 0.3s ease; }
    .expand-btn.expanded .btn-icon { animation: none; transform: rotate(180deg); }

    /* content sections mobile */
    .page-content { padding: 0 16px; }
    .cards-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .card .photo { height: 148px; }
    .card .photo > img { width: 100px; height: 122px; }
    .news-grid { grid-template-columns: 1fr; gap: 12px; }
    .service-grid { grid-template-columns: 1fr; gap: 12px; }
    .svc-card { height: auto; min-height: 120px; padding: 20px 16px; }
    .svc-illo { width: 80px; height: 80px; font-size: 52px; }
    .svc-title { font-size: 16px; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
    .footer-brand { grid-column: 1 / -1; }
    .subscribe-row { grid-template-columns: 1fr; gap: 12px; }
    .sub-form { flex-direction: column; }
    .sub-input, .sub-submit { width: 100%; }
    .sec-title { font-size: 17px; }
    .promo-row2 { margin-top: 10px; }
    .series-card { width: 160px; }
    .series-card-photo { height: 120px; }
  }

  @media (min-width: 769px) {
    .expand-btn { display: none; }
  }