/* Studio Piksel kredit u footeru — homage animaciji sa studiopiksel.me (trepćući kurzor + zagrade na hover). */
@keyframes obsBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.obs-piksel-mark { font-family: ui-monospace, "JetBrains Mono", "Fira Code", "SF Mono", Menlo, monospace; font-weight: 700; letter-spacing: -0.02em; display: inline-flex; align-items: center; }
.obs-piksel-cur { display: inline-block; width: 2px; height: 0.95em; background: #9B7BFF; margin: 0 1px; animation: obsBlink 0.9s step-end infinite; }
.obs-piksel-br { color: #9B7BFF; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.obs-piksel:hover .obs-piksel-br.l { transform: translateX(-3px); }
.obs-piksel:hover .obs-piksel-br.r { transform: translateX(3px); }

/* responsive.css — mobilni prelom za sve stranice.
   Prototip koristi inline stilove (React), pa se oslanjamo na atribut-selektore + !important
   (pravilo iz stylesheet-a sa !important nadjačava inline stil bez !important).
   Kuka: skoro svaki section-inner kontejner ima `max-width: 1400px`. Breakpoint 900px = OBS_useIsMobile. */

@media (max-width: 900px) {
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* --- Bočni padding svih section-inner kontejnera (48px -> 18px) --- */
  [style*="max-width: 1400px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* --- Sekcije sa bočnim paddingom u shorthand obliku --- */
  [style*="padding: 96px 48px"] { padding: 48px 18px !important; }
  [style*="padding: 80px 48px"] { padding: 44px 18px !important; }
  [style*="padding: 72px 48px 60px"] { padding: 40px 18px 40px !important; }
  [style*="padding: 64px 48px"] { padding: 40px 18px !important; }

  /* --- Vertikalni padding sekcija smanji (manje praznog prostora na telefonu) --- */
  [style*="padding: 80px 0"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  [style*="padding: 72px 0"] { padding-top: 44px !important; padding-bottom: 44px !important; }
  [style*="padding: 96px 0"] { padding-top: 52px !important; padding-bottom: 52px !important; }

  /* --- Product/kolonski gridovi: 4 i 3 kolone -> 2 --- */
  [style*="repeat(4, 1fr)"], [style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  [style*="repeat(3, 1fr)"], [style*="repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- Dvokolonske sadržajne podjele (hero-priča, tamna feature sekcija) -> jedna kolona --- */
  [style*="1.1fr 1fr"] { grid-template-columns: 1fr !important; gap: 28px !important; }
  [style*="grid-template-columns: 1fr 1fr"][style*="gap: 80px"] { grid-template-columns: 1fr !important; gap: 28px !important; }
  [style*="grid-template-columns: 1fr 1fr"][style*="gap: 72px"] { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* --- Footer: 5 kolona -> 2, i smanji bočni padding (inner maxWidth daje 18px) --- */
  [style*="2fr 1fr 1fr 1fr 1.3fr"] { grid-template-columns: 1fr 1fr !important; gap: 24px 20px !important; }
  footer[style*="64px 48px 28px"] { padding-left: 0 !important; padding-right: 0 !important; padding-top: 44px !important; }

  /* --- Korpa / checkout: sadržaj | sažetak (1fr 380px) -> stack --- */
  [style*="1fr 380px"] { grid-template-columns: 1fr !important; gap: 28px !important; }
  /* Red u korpi (naziv | količina | cijena | ukloni) — stisni fiksne kolone da stane na telefon */
  [style*="1fr 120px 120px 40px"] { grid-template-columns: 1fr 84px 62px 26px !important; gap: 8px !important; }

  /* Cart drawer (fiksna širina 420px) — ne smije biti širi od ekrana */
  [style*="width: 420px"] { width: min(420px, 92vw) !important; }

  /* Nalog / korisničke stranice: sidebar (240px/260px | 1fr) -> stack */
  [style*="240px 1fr"], [style*="260px 1fr"] { grid-template-columns: 1fr !important; gap: 20px !important; }

  /* "Novo u ponudi": vanjski featured|2x2 raspored (1fr 1fr + align-items:start) -> stack.
     Featured ide pun preko širine, pa 2x2 male kartice ispod (unutrašnji grid nema align-items pa ostaje 2-kol). */
  [style*="grid-template-columns: 1fr 1fr"][style*="align-items: start"] { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* Uži telefoni: neki gusti 2-kol gridovi izgledaju bolje kao 1 kolona */
@media (max-width: 460px) {
  /* Trust badges (4->2->ostaje 2, ok). Sekcije ostaju 2-kol za proizvode. */
}