@media (max-width: 768px) {

  /* ── Base ──────────────────────────────────────── */
  body {
    overflow-x: hidden;
    /* space for fixed bottom tab bar */
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Minimum tap target */
  a, button {
    touch-action: manipulation;
  }

  /* Input zoom prevention (iOS) */
  input, select, textarea {
    font-size: 16px !important;
  }


  /* ════════════════════════════════════════════════
     CHANGE 1 — NAVIGATION
  ════════════════════════════════════════════════ */

  /* Hide desktop navbar and legacy hamburger overlay */
  #navbar        { display: none !important; }
  #mobile-menu   { display: none !important; }

  /* ── Bottom tab bar ──────────────────────────── */
  #mob-tab-bar {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 600;
    height: 56px;
    background: #fff;
    border-top: 0.5px solid #e8e8e8;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    align-items: stretch;
    box-shadow: 0 -4px 16px rgba(0,0,0,.05);
  }
  .mob-tab-item {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: #999;
    min-height: 44px;
    touch-action: manipulation;
    transition: color 0.15s;
    padding: 6px 0;
  }
  .mob-tab-item:active { background: #f5f5f5; }
  .mob-tab-item.active { color: #111; }
  .mob-tab-item i {
    font-size: 22px;
    line-height: 1;
    display: block;
  }
  .mob-tab-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.03em;
    font-family: 'DM Sans', system-ui, sans-serif;
    line-height: 1;
  }


  /* ════════════════════════════════════════════════
     CHANGE 2 — HERO SECTION
  ════════════════════════════════════════════════ */

  /* Reduce height, keep immersive */
  #sem-sticky {
    height: 85vh !important;
    min-height: 480px;
  }

  /* Hide scroll indicator */
  #sem-scroll-hint { display: none !important; }

  /* Headline scale */
  #sem-title {
    font-size: clamp(2rem, 8vw, 3rem) !important;
    letter-spacing: -.02em !important;
    margin-bottom: 1rem !important;
  }

  /* Hero pill chip (injected by JS) */
  #mob-hero-chip {
    display: inline-flex !important;
    align-items: center;
    background: rgba(255,255,255,.1);
    border: 0.5px solid rgba(255,255,255,.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    font-family: 'DM Sans', sans-serif;
    margin-bottom: 1.25rem;
  }

  /* CTA buttons — side by side, equal width */
  #sem-ctas {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: .5rem !important;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
  #sem-ctas a {
    flex: 1 1 0 !important;
    text-align: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    padding: 12px 8px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }

  /* ── Stats bar — 2×2 with dividers ─────────────── */
  #stats-bar {
    padding: 0 !important;
    overflow: hidden;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    border-top: 0.5px solid rgba(255,255,255,.08);
  }
  .stats-grid > div {
    padding: 1.75rem .75rem !important;
    border-right: 0.5px solid rgba(255,255,255,.1);
    border-bottom: 0.5px solid rgba(255,255,255,.1);
  }
  .stats-grid > div:nth-child(2n) {
    border-right: none;
  }
  .stats-grid > div:nth-child(3),
  .stats-grid > div:nth-child(4) {
    border-bottom: none;
  }


  /* ════════════════════════════════════════════════
     CHANGE 3 — SERVICES (index.html)
  ════════════════════════════════════════════════ */

  /* Hide desktop card grid */
  .svc-grid { display: none !important; }

  /* Show injected mobile list */
  #mob-svc-wrapper {
    display: block !important;
    margin: 0 -1.5rem;  /* bleed to edges on mobile */
  }

  /* List */
  #mob-svc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 0.5px solid #efefef;
  }
  .mob-svc-item {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 15px 20px;
    border-bottom: 0.5px solid #efefef;
    text-decoration: none;
    color: inherit;
    min-height: 64px;
    background: #fff;
    touch-action: manipulation;
    transition: background .12s;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-svc-item:active { background: #f9f8f6; }

  .mob-svc-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #3D3D5C;
  }
  .mob-svc-icon i { font-size: 18px; line-height: 1; }

  .mob-svc-text { flex: 1; min-width: 0; }
  .mob-svc-title {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    font-family: 'DM Sans', sans-serif;
    line-height: 1.3;
    display: block;
  }
  .mob-svc-sub {
    font-size: 11px;
    color: #999;
    font-weight: 400;
    margin-top: 2px;
    font-family: 'DM Sans', sans-serif;
    line-height: 1.35;
    display: block;
  }
  .mob-svc-chevron {
    color: #d0d0d0;
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1;
  }

  /* "Vse storitve" footer link */
  #mob-svc-cta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #2D7D6F;
    font-family: 'DM Sans', sans-serif;
    text-decoration: none;
    background: #fff;
    border-top: 0.5px solid #efefef;
    letter-spacing: .03em;
    min-height: 52px;
    touch-action: manipulation;
  }
  #mob-svc-cta:active { background: #f0f7f5; }

  /* Hide original "Vse storitve" button on mobile */
  .svc-grid ~ div .btn-outline { display: none !important; }


  /* ════════════════════════════════════════════════
     CHANGE 4 — BRANDS
  ════════════════════════════════════════════════ */

  /* Hide animated carousel */
  .brands-wrapper { display: none !important; }

  /* Show pill row (injected by JS) */
  #mob-brands-pills {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 0 1.25rem 1.5rem;
  }
  .mob-brand-pill {
    border: 0.5px solid #ddd;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 500;
    color: #555;
    font-family: 'DM Sans', sans-serif;
    background: #fff;
    white-space: nowrap;
    display: inline-block;
  }


  /* ════════════════════════════════════════════════
     CHANGE 5 — REVIEWS (horizontal scroll snap)
  ════════════════════════════════════════════════ */

  /* Outer slider: enable scroll-snap */
  #reviews-slider {
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    cursor: grab;
  }
  #reviews-slider::-webkit-scrollbar { display: none; }

  /* Inner flex strip: don't use transform anymore */
  #reviews-slides {
    display: flex !important;
    transition: none !important;
    will-change: auto !important;
    gap: 0;
    width: max-content;
  }

  /* Each slide */
  .review-slide {
    min-width: 80vw !important;
    max-width: 80vw !important;
    scroll-snap-align: start !important;
    padding: 0 8px !important;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  /* Review card: compact */
  .review-card { padding: 20px !important; }

  /* Avatar: smaller on mobile */
  .review-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: .75rem !important;
  }

  /* Hide dot indicators (scroll handles swiping) */
  #reviews-dots { display: none !important; }

  /* Rating bar: compact */
  #reviews-section [style*="background:#fff"][style*="border-radius:16px"] {
    padding: 1rem 1.25rem !important;
  }
  #gplace-rating { font-size: 2.8rem !important; }


  /* ════════════════════════════════════════════════
     CHANGE 6 — BOOKING CTA SECTION
  ════════════════════════════════════════════════ */

  section[style*="background:#1a3d35"] {
    padding: 48px 0 !important;
  }
  section[style*="background:#1a3d35"] h2 {
    font-size: clamp(1.6rem, 5vw, 2.4rem) !important;
    margin-bottom: 1rem !important;
  }
  section[style*="background:#1a3d35"] p {
    font-size: .82rem !important;
    margin-bottom: 1.75rem !important;
  }
  /* Buttons side by side */
  section[style*="background:#1a3d35"] .reveal.rd3 [style*="display:flex"],
  section[style*="background:#1a3d35"] [style*="display:flex;gap:1rem"] {
    flex-wrap: nowrap !important;
    gap: .5rem !important;
    padding: 0 1.25rem !important;
  }
  section[style*="background:#1a3d35"] .btn-green,
  section[style*="background:#1a3d35"] .btn-outline-white {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 12px 6px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }


  /* ════════════════════════════════════════════════
     CHANGE 7 — FOOTER
  ════════════════════════════════════════════════ */

  .footer-stacked { padding: 40px 0 28px; }

  .footer-nav-link {
    font-size: 13px !important;
    color: rgba(255,255,255,.45) !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .footer-nav-row { gap: 20px 16px !important; }

  .footer-social-btn {
    width: 44px !important;
    height: 44px !important;
  }
  .footer-social-btn svg {
    width: 18px !important;
    height: 18px !important;
  }

  .footer-copy {
    font-size: 11px !important;
    letter-spacing: .01em;
  }
  .footer-legal-link { font-size: 11px !important; }
  .footer-chatoo { font-size: 10px !important; }

  /* Stack bottom row vertically */
  .footer-bottom-row {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: center !important;
  }


  /* ════════════════════════════════════════════════
     MISC PAGE FIXES
  ════════════════════════════════════════════════ */

  /* Inner page-hero: offset for missing navbar */
  .page-hero { padding-top: 64px !important; }

  /* About teaser: hide decorative big number */
  .big-num { display: none !important; }
  .about-grid > div:last-child > div {
    text-align: left !important;
    margin-top: 0 !important;
  }

  /* Page sections: tighten padding */
  section { padding-top: 48px !important; padding-bottom: 48px !important; }
  #stats-bar { padding: 0 !important; }

  /* Reduce section-label spacing */
  .section-label { margin-bottom: .5rem !important; }

  /* Gold rule: thinner/subtler */
  .gold-rule { margin: 0; }

  /* Kontakt / narocanje: full-width forms */
  .form-2col  { grid-template-columns: 1fr !important; }
  .booking-grid { grid-template-columns: 1fr !important; }

  /* Buttons: min tap target */
  .btn-green,
  .btn-outline,
  .btn-outline-white {
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Auth cards: full width on small phones */
  .auth-card {
    margin: 0 .75rem;
    padding: 2rem 1.25rem !important;
  }

} /* end @media (max-width: 768px) */