/* Mobile overrides for dopimeble.pl */

/* Force hardware acceleration and fix viewport issues - applied selectively */
.hero, .cart-fab, .site-logo {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-overflow-scrolling: touch;
}

/* Fix viewport issues on iOS */
@supports (-webkit-touch-callout: none) {
  body {
    min-height: -webkit-fill-available;
  }
}

/* Desktop - oryginalne transformacje (domyślne) */
[data-anim] {
  transform: translateY(24px);
}

[data-anim="fade-up"] {
  transform: translateY(28px);
}

[data-anim="slide-left"] {
  transform: translateX(36px);
}

[data-anim="slide-right"] {
  transform: translateX(-36px);
}

[data-anim="scale-in"] {
  transform: scale(0.9) translateY(10px);
}

[data-anim].in {
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media only screen and (max-width: 1024px) {
  :root {
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Layout spacing adjustments */
  body.with-toolbar {
    padding-bottom: calc(var(--toolbar-h) + 12px + var(--safe-bottom));
  }
  .section { padding: 48px 0; }
  .section--tight { padding: 36px 0; }
  .section--split { padding: 56px 0; }
  .section--cta { padding: 72px 0; }
  .usps { grid-template-columns: 1fr 1fr; gap: 8px; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .insight-card { grid-column: span 12; }

  /* Hero spacing so CTA nie wchodzi pod toolbar */
  .hero__content { padding-bottom: calc(12svh + var(--toolbar-h) + var(--safe-bottom)); }

  /* Products grid */
  .card { grid-column: span 12; }

  /* Lista produktów */
  .prod-layout { grid-template-columns: 1fr; gap: 16px; }
  .prod-aside { position: static; top: auto; border-radius: 12px; }
  .filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 12px 0; }
  .filters input[type="number"], .filters select { width: 100%; min-width: 0; }

  /* Toolbar becomes vertical-only on sides */
  .toolbar {
    right: 12px !important; left: auto !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important;
    gap: 8px; padding: 8px; border-radius: 14px; max-height: 80svh; overflow: auto;
    background: rgba(255,255,255,.92);
  }
  .toolbar .tool-btn span { display: none; }
  .toolbar .tool-btn { padding: 8px; border-radius: 10px; }
  .toolbar .tool-btn svg { width: 20px; height: 20px; }

  /* Optional: Nav behavior on contact page */
  .site-header--sub { position: sticky; top: 0; background: #fff; z-index: 20; border-bottom: 1px solid var(--line); }
  .nav { height: 56px; padding: 0 12px; }
  /* Fullscreen mobile dropdown sheet */
  .mobile-dropdown { inset: 0 !important; top: 0 !important; right: 0 !important; width: 100vw !important; height: 100vh !important; padding: 20px 16px; }
  .mobile-dropdown__nav {
    height: 100%; display: grid; align-content: start; gap: 14px; padding: 16px; border-radius: 18px;
    background: rgba(255,255,255,.85); border: 1px solid var(--line);
  }
  .mobile-dropdown__link { padding: 16px 18px; border-radius: 14px; font-size: 18px; }
  
  /* Tablet - średnie transformacje */
  [data-anim] {
    transform: translateY(20px) !important;
  }
  
  [data-anim="fade-up"] {
    transform: translateY(20px) !important;
  }
  
  [data-anim="slide-left"] {
    transform: translateX(24px) !important;
  }
  
  [data-anim="slide-right"] {
    transform: translateX(-24px) !important;
  }
  
  [data-anim="scale-in"] {
    transform: scale(0.92) translateY(8px) !important;
  }
  
  /* About Nataniel page mobile */
  .about-hero__inner {
    padding: 40px 20px;
  }
  
  .about-logo {
    width: 60px;
    height: 60px;
  }
  
  .about-tag {
    font-size: 16px;
    line-height: 1.4;
  }
  
  .about-cta {
    flex-direction: column;
    gap: 12px;
  }
  
  .big-cta__btn {
    font-size: 16px;
    padding: 16px 20px;
    word-break: break-word;
  }
  
  .applied-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .applied-card {
    padding: 20px;
  }
  
  .applied-ico {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }
  
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .feature {
    padding: 20px;
  }
  
  .feature .ico {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .service {
    padding: 20px;
  }
  
  .process-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .step-card {
    padding: 20px;
  }
  
  .logo-row {
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
  }
  
  .logo-pill {
    font-size: 14px;
    padding: 8px 16px;
  }
  
  .marquee__track {
    gap: 20px;
  }
  
  .pill {
    font-size: 14px;
    padding: 8px 16px;
  }
  
  /* Legal pages mobile */
  .card {
    padding: 20px;
  }
  
  h1 {
    font-size: 24px;
    line-height: 1.3;
  }
  
  h2 {
    font-size: 20px;
    line-height: 1.4;
  }
  
  /* Footer mobile */
  .footer__inner {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .footer__nav {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .footer__nav a {
    font-size: 14px;
    padding: 8px 12px;
  }
}

@media (max-width: 720px) {
  .cart-row{grid-template-columns:1fr; align-items:start}
  .cart-summary{flex-direction:column; align-items:flex-start}
  .c-qty{width:100%}
  .cart-fab__btn{ width:68px; height:68px; }
  .cart-mini{ width:min(96vw, 380px); right:0; }
  
  /* Contact page mobile */
  .contact-shell {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .contact-grid {
    gap: 20px;
  }
  
  .contact-item {
    gap: 12px;
  }
  
  .contact-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  /* About page mobile */
  .about-grid {
    grid-template-columns: 1fr;
  }
  
  .about-hero {
    padding: 24px;
  }
  
  .about-card {
    padding: 20px;
  }
  
  .security-badges {
    justify-content: center;
  }
  
  .cta-actions {
    flex-direction: column;
    align-items: center;
  }
  
  /* Small mobile adjustments */
  .breadcrumbs {
    font-size: 14px;
    margin-bottom: 16px;
  }
  
  .btn {
    font-size: 14px;
    padding: 12px 16px;
  }
  
  .btn--ghost {
    padding: 10px 14px;
  }
  
  /* About page small mobile */
  .about-hero__inner {
    padding: 30px 16px;
  }
  
  .about-logo {
    width: 50px;
    height: 50px;
  }
  
  .about-tag {
    font-size: 14px;
  }
  
  .big-cta__btn {
    font-size: 14px;
    padding: 14px 16px;
  }
  
  .applied-card {
    padding: 16px;
  }
  
  .feature {
    padding: 16px;
  }
  
  .service {
    padding: 16px;
  }
  
  .step-card {
    padding: 16px;
  }
  
  /* Fix animacji na mobile - mniejsze transformacje */
  [data-anim] {
    transform: translateY(16px) !important;
  }
  
  [data-anim="fade-up"] {
    transform: translateY(16px) !important;
  }
  
  [data-anim="slide-left"] {
    transform: translateX(20px) !important;
  }
  
  [data-anim="slide-right"] {
    transform: translateX(-20px) !important;
  }
  
  [data-anim="scale-in"] {
    transform: scale(0.95) translateY(6px) !important;
  }
  
  /* Szybsze animacje na mobile */
  [data-anim].in {
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  }
}