/* ============================================================
   Sentimentum — mobile.css
   Shared responsive layer for ALL pages. Loaded LAST so it
   wins the cascade over per-page inline styles.
   Breakpoints: 768px (phones/small tablets), 480px (phones),
   360px (small phones)
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; }

@media (max-width: 768px) {

  /* ---------- global rhythm ---------- */
  .wrap { padding-left: 18px !important; padding-right: 18px !important; }

  /* ---------- top utility bar ---------- */
  .util { display: none !important; }

  /* ---------- header ---------- */
  .header { top: 0 !important; padding-top: 10px; }
  .header .wrap { height: 60px !important; }
  .brand img { height: 26px !important; }
  .header.scrolled .brand img { height: 22px !important; }
  .nav .nav-links { display: none !important; }
  .menu-btn { display: flex !important; }

  /* ---------- hero (homepage + subpage heads) ---------- */
  .hero-inner { padding: 92px 20px 22vh !important; gap: 0 !important; }
  .hero-logo { height: clamp(48px, 13vw, 92px) !important; margin-bottom: 22px !important; }
  .hero .hero-eyebrow { font-size: 10px !important; letter-spacing: .26em !important; margin-bottom: 14px !important; }
  .hero h1 { font-size: clamp(27px, 8vw, 40px) !important; max-width: none !important; }
  .scroll-cue { display: none !important; }

  /* ---------- intro ---------- */
  .intro { padding: 56px 0 !important; }
  .intro p { font-size: clamp(19px, 5.4vw, 26px) !important; max-width: none !important; }
  .ornament-img { width: clamp(150px, 46vw, 220px) !important; }

  /* ---------- feature sections (image + copy) ---------- */
  .feature { padding: 52px 0 !important; }
  .feature .wrap { display: flex !important; flex-direction: column !important; gap: 26px !important; }
  .feature .media { order: 1 !important; width: 100% !important; }
  .feature .copy { order: 2 !important; max-width: none !important; }
  .feature h2 { font-size: clamp(26px, 7vw, 36px) !important; }
  .feature .copy p { font-size: 15.5px !important; line-height: 1.65 !important; }
  .feature .media .tag { font-size: 9.5px !important; letter-spacing: .18em !important; padding: 6px 11px !important; bottom: 12px !important; left: 12px !important; }

  /* ---------- materials scroll section (KOLEKCJA) ---------- */
  .mats-track { height: auto !important; }
  .mats-sticky { position: static !important; height: auto !important; padding: 56px 0 !important; }
  .mats-grid { display: flex !important; flex-direction: column !important; gap: 30px !important; padding: 0 18px !important; }
  .mats-left, .mats-visual { transform: none !important; opacity: 1 !important; }
  .mats-visual { order: 2 !important; aspect-ratio: 4/3.2 !important; }
  .mats-lede { font-size: clamp(22px, 6vw, 32px) !important; max-width: none !important; margin-bottom: 22px !important; }
  .mats-item { opacity: 1 !important; pointer-events: auto !important; padding: 20px 0 !important; }
  .mats-item h3 { font-size: clamp(26px, 7.5vw, 40px) !important; }
  .mats-item .mats-fold { max-height: none !important; opacity: 1 !important; margin-top: 10px !important; }
  .mats-desc { font-size: 14.5px !important; padding-left: 26px !important; }
  .mats-rail { display: none !important; }

  /* ---------- story / steps ---------- */
  .story-grid { display: flex !important; flex-direction: column !important; gap: 32px !important; }
  .steps-grid { display: flex !important; flex-direction: column !important; gap: 32px !important; margin-top: 36px !important; }
  .step .num { font-size: 34px !important; }
  .step h3 { font-size: 19px !important; }

  /* ---------- testimonials ---------- */
  .testi { padding: 60px 0 !important; }
  .quote-wrap { min-height: 210px !important; margin-top: 28px !important; }
  .quote blockquote { font-size: clamp(19px, 5vw, 26px) !important; }
  .quote-mark { font-size: 58px !important; }

  /* ---------- CTA ---------- */
  .cta { padding: 64px 0 !important; }
  .cta h2, .cta-section h2 { font-size: clamp(24px, 6.6vw, 36px) !important; max-width: none !important; }

  /* ---------- footer ---------- */
  .footer-grid { display: flex !important; flex-direction: column !important; gap: 30px !important; }
  .footer-bottom { flex-direction: column !important; gap: 12px !important; text-align: center !important; }
  .footer-bottom .fsoc { justify-content: center !important; }

  /* ---------- floating buttons ---------- */
  .scroll-top { bottom: 14px !important; right: 12px !important; height: 40px !important; padding: 0 13px !important; }
  .scroll-top-label { display: none !important; }
  .back-btn { top: 74px !important; left: 12px !important; }

  /* ---------- collection / gallery pages ---------- */
  .page-head { padding: 96px 0 56px !important; }
  .page-head h1 { font-size: clamp(27px, 8vw, 40px) !important; }
  .gallery { padding: 52px 0 !important; }
  .gallery-head { margin-bottom: 34px !important; }
  .gallery-head h2 { font-size: clamp(23px, 6vw, 32px) !important; }
  .grid.grid--two, .grid--two { display: flex !important; flex-direction: column !important; gap: 34px !important; }

  /* ---------- product page (urn.html) ---------- */
  .product-grid { display: flex !important; flex-direction: column !important; gap: 30px !important; }
  .urn-name { font-size: clamp(26px, 8vw, 40px) !important; }
  .buy-row { flex-direction: column !important; align-items: stretch !important; gap: 13px !important; }
  .buy-row .add-to-cart, .buy-row .btn { width: 100% !important; text-align: center !important; }

  /* ---------- checkout / forms ---------- */
  input, select, textarea { font-size: 16px !important; } /* prevents iOS zoom */
  .co-grid { display: flex !important; flex-direction: column !important; }
  .steps-bar { flex-wrap: wrap !important; gap: 8px !important; }
  .steps-bar .st .lab { font-size: 10.5px !important; }
  .step-nav { flex-direction: column-reverse !important; gap: 12px !important; }
  .step-nav .btn { width: 100% !important; text-align: center !important; }

  /* ---------- legal / doc pages (privacy, terms) ---------- */
  .doc-grid, .legal-grid { display: flex !important; flex-direction: column !important; }
  .toc, .doc-toc { position: static !important; max-height: none !important; margin-bottom: 26px !important; }

  /* ---------- b2b ---------- */
  .tier-grid, .tiers { display: flex !important; flex-direction: column !important; gap: 20px !important; }
  .b2b-form-grid { display: flex !important; flex-direction: column !important; }

  /* ---------- materials page ---------- */
  .intro-grid { display: flex !important; flex-direction: column !important; gap: 26px !important; }
  .prin-grid { display: flex !important; flex-direction: column !important; gap: 24px !important; }
  .m-hero h1 { font-size: clamp(27px, 8vw, 42px) !important; }
  .mat { flex-direction: column !important; }
  .mat .swatch { width: 100% !important; height: 120px !important; }

  /* ---------- touch targets ---------- */
  .nav a, .drawer a, .add-btn, .btn, button { min-height: 42px; }
  .add-btn { padding: 12px 18px !important; }
}

@media (max-width: 480px) {
  .wrap { padding-left: 15px !important; padding-right: 15px !important; }
  .hero-inner { padding: 84px 16px 20vh !important; }
  .hero h1 { font-size: clamp(24px, 8.4vw, 34px) !important; }
  .hero-logo { height: clamp(42px, 13vw, 72px) !important; }
  .hero .hero-eyebrow { font-size: 9px !important; letter-spacing: .22em !important; }
  .feature h2 { font-size: clamp(23px, 6.8vw, 30px) !important; }
  .intro p { font-size: clamp(17.5px, 5.4vw, 23px) !important; }
  .cta h2, .cta-section h2 { font-size: clamp(21px, 6.4vw, 30px) !important; }
  .quote blockquote { font-size: clamp(17.5px, 5vw, 23px) !important; }
  .mats-item h3 { font-size: clamp(23px, 7.4vw, 34px) !important; }
  .page-head h1 { font-size: clamp(24px, 8vw, 34px) !important; }
  .card .name { font-size: 18px !important; }
  .footer-grid { gap: 24px !important; }
}

@media (max-width: 360px) {
  .hero h1 { font-size: 22px !important; }
  .hero-logo { height: 40px !important; }
  .feature h2 { font-size: 21px !important; }
}