@media (max-width: 767px) {

  /* ── Prevent horizontal scroll ─────────────────── */
  body, .area {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* ── Logo: compact, don't stretch full width ────── */
  .node.node2.widget-image {
    max-width: 160px !important;
    margin: 0 auto !important;
  }
  .node.node2.widget-image .bgimage {
    height: 52px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }

  /* ── Header phone button: show on mobile ────────── */
  .node.node12 .button-container.xs-none {
    display: block !important;
  }
  .node.node12 .btn {
    font-size: 12px !important;
    padding: 8px 14px !important;
  }

  /* ── All grid columns → full width ─────────────── */
  .gridwrap {
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .gridwrap > .col,
  .grid > .col {
    width: 100% !important;
    flex: 0 0 100% !important;
    min-width: 0 !important;
  }

  /* ── Section padding ────────────────────────────── */
  .section > .wrapper1 > .wrapper2 > .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ── Large heading text → readable sizes ────────── */

  /* H1-style hero title (64px → 26px) */
  .cr-text span[style*="font-size: 64px"],
  .cr-text span[style*="font-size:64px"] {
    font-size: 26px !important;
    line-height: 1.3 !important;
  }

  /* Section titles (48px → 22px) */
  .textable span[style*="font-size: 48px"],
  .textable span[style*="font-size:48px"],
  .cr-text span[style*="font-size: 48px"],
  .cr-text span[style*="font-size:48px"] {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  /* Price/number large text (75px → 32px) */
  .cr-text span[style*="font-size: 75px"],
  .cr-text span[style*="font-size:75px"],
  .textable span[style*="font-size: 75px"],
  .textable span[style*="font-size:75px"] {
    font-size: 32px !important;
  }

  /* Mid-size headings (40px → 20px, 34px → 18px) */
  .textable span[style*="font-size: 40px"],
  .textable span[style*="font-size:40px"],
  .cr-text span[style*="font-size: 40px"],
  .cr-text span[style*="font-size:40px"] {
    font-size: 20px !important;
  }
  .textable span[style*="font-size: 34px"],
  .textable span[style*="font-size:34px"],
  .cr-text span[style*="font-size: 34px"],
  .cr-text span[style*="font-size:34px"] {
    font-size: 18px !important;
  }

  /* Subtitle text (28px → 16px, 24px → 15px) */
  .textable span[style*="font-size: 28px"],
  .cr-text span[style*="font-size: 28px"] {
    font-size: 16px !important;
  }
  .textable span[style*="font-size: 24px"],
  .cr-text span[style*="font-size: 24px"] {
    font-size: 15px !important;
  }

  /* font-header wrapper fallback */
  .font-header.textable {
    font-size: 22px !important;
  }

  /* ── Images and bgimage ─────────────────────────── */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Product/gallery images (400–424px → 220px) */
  .bgimage[style*="height: 400px"],
  .bgimage[style*="height: 418px"],
  .bgimage[style*="height: 424px"],
  .bgimage[style*="height: 300px"] {
    height: 220px !important;
    background-size: cover !important;
  }

  /* "Про нас" car photo — position bottom so car is visible */
  .node187 .bgimage {
    background-position: center 75% !important;
    height: 260px !important;
  }

  /* ── xs-scale: cancel shrink transforms on mobile ── */
  .xs-scale-80,
  .xs-scale-70 {
    transform: scale(1) !important;
  }

  /* ── Buttons ────────────────────────────────────── */
  .macros-button .btn-out {
    text-align: center !important;
  }
  .macros-button .btn-inner {
    width: auto !important;
  }
  .macros-button .btn {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* ── Forms ──────────────────────────────────────── */
  .macros-form .outer {
    max-width: 100% !important;
  }
  .macros-form .form-control {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Header: hide desktop nav ──────────── */
  .node.node3,
  .node.node4,
  .node.node6,
  .node.node7,
  .node.node8,
  .node.node9,
  .node.node10,
  .node.node11 {
    display: none !important;
  }

  /* ── Header: show "Ваше замовлення" cart button on mobile ── */
  .node.node14 {
    display: block !important;
  }
  .node.node14 .button-container {
    display: block !important;
  }
  .node.node14 .btn {
    font-size: 11px !important;
    padding: 6px 10px !important;
    white-space: nowrap !important;
  }

  /* ── Header: show phone button on mobile ─────────── */
  .node.node12 {
    display: block !important;
  }
  .node.node12 .button-container {
    display: block !important;
  }
  .node.node12 .btn {
    font-size: 13px !important;
    padding: 8px 16px !important;
    white-space: nowrap !important;
  }

  /* ── Mobile burger menu button — fixed in header ─── */
  .mobile-burger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 10px;
    right: 12px;
    z-index: 10000;
    width: 42px;
    height: 42px;
    background: rgba(0,0,0,0.55);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 6px;
    flex-direction: column;
    gap: 5px;
  }
  .mobile-burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    transition: all 0.25s;
    border-radius: 2px;
  }
  .mobile-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-burger.open span:nth-child(2) { opacity: 0; }
  .mobile-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ── Mobile nav dropdown ─────────────────────────── */
  .mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  .mobile-nav.open {
    display: flex !important;
  }
  .mobile-nav a {
    display: block;
    color: #fff !important;
    text-decoration: none;
    font-size: 18px;
    font-family: inherit;
    padding: 16px 32px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    width: 100%;
    letter-spacing: 0.05em;
  }
  .mobile-nav a:last-child { border-bottom: none; }
  .mobile-nav a:active { background: rgba(255,255,255,0.1); }
  .mobile-nav-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    padding: 8px;
  }

  /* ── Header: logo col takes natural width, no stack ─ */
  .node.node0 .gridwrap {
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .node.node0 .gridwrap > .col {
    width: auto !important;
    flex: 0 0 auto !important;
  }

  /* ── Alignment helpers ──────────────────────────── */
  .xs-force-center,
  .xs-force-center * {
    text-align: center !important;
  }

  /* ── Price table: stack rows ────────────────────── */
  .s-elements-grid {
    display: block !important;
  }
  .s-elements-grid__cell {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 !important;
  }
}