/* ============ FTPC Mobile Optimizations (autogenerated) ============ */
:root { --ftpc-touch: 44px; }

/* === FIX: hide mobile drawer/overlay on desktop === */
@media (min-width: 901px) {
  .mobile-drawer, .mobile-overlay { display: none !important; }
}

@media (max-width: 900px) {
  /* Container & spacing */
  .container { padding-left: 12px !important; padding-right: 12px !important; }
  .section { padding-top: 24px !important; padding-bottom: 24px !important; }
  body { font-size: 15px; }
  h1 { font-size: 24px !important; line-height: 1.25; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 17px !important; }

  /* HEADER: hamburger meni */
  .site-header { position: sticky; top: 0; z-index: 100; }
  .header__main { gap: 8px !important; }
  .nav-mega, .header__nav { display: none !important; }
  /* Header pretraga MORA da se vidi na mobilnom (puna sirina ispod logoa) */
  .header__search { display: flex !important; grid-column: 1 / -1 !important; order: 3 !important; max-width: 100% !important; }
  .header__mobile-toggle { display: inline-flex !important; }
  .header__icons { gap: 4px !important; }
  .header__icon-text { display: none !important; }
  .logo img { max-height: 40px !important; }

  /* Mobile drawer (injected by mobile.js) */
  .mobile-drawer { position: fixed; top: 0; left: -85%; width: 85%; max-width: 360px; height: 100vh;
    background: var(--bg-2, #0f1722); color: var(--text, #e6edf3); z-index: 200; padding: 18px 16px;
    overflow-y: auto; transition: left .25s ease; box-shadow: 4px 0 20px rgba(0,0,0,.5); }
  .mobile-drawer.open { left: 0; }
  .mobile-drawer__close { position: absolute; top: 10px; right: 10px; background: transparent; border: 0;
    color: inherit; font-size: 28px; cursor: pointer; padding: 8px 12px; }
  .mobile-drawer h4 { margin: 18px 0 8px; font-size: 13px; opacity: .6; text-transform: uppercase; letter-spacing: 1px; }
  .mobile-drawer a { display: block; color: inherit; text-decoration: none; padding: 12px 8px; min-height: var(--ftpc-touch);
    border-radius: 8px; }
  .mobile-drawer a:active, .mobile-drawer a:hover { background: rgba(255,255,255,.06); }
  .mobile-drawer__search { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.15);
    background: rgba(0,0,0,.25); color: inherit; font-size: 16px; margin-bottom: 12px; }
  .mobile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 150; opacity: 0;
    pointer-events: none; transition: opacity .25s; }
  .mobile-overlay.open { opacity: 1; pointer-events: auto; }
  body.no-scroll { overflow: hidden; }

  /* Product grid: 2 kolone na mobilu */
  .product-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .product-card { font-size: 13px; }
  .product-card__title { font-size: 13px !important; line-height: 1.3 !important; }
  .product-card__price { font-size: 15px !important; }
  .product-card img { aspect-ratio: 1/1; object-fit: contain; }
  .product-card .btn { min-height: var(--ftpc-touch); font-size: 13px; padding: 8px 10px; }

  /* Touch targets */
  .btn, button, .nav a, input[type="submit"] { min-height: var(--ftpc-touch); }
  input[type="text"], input[type="email"], input[type="number"], input[type="tel"], input[type="search"],
  textarea, select { font-size: 16px !important; min-height: var(--ftpc-touch); padding: 10px 12px; }

  /* Hero scaling */
  .hero { padding: 30px 0 !important; }
  .hero h1 { font-size: 22px !important; }
  .hero p { font-size: 14px; }
  .hero .btn { padding: 12px 20px; }

  /* Cat-page: filteri kao colaps */
  .cat-page { display: block !important; grid-template-columns: 1fr !important; }
  .cat-filters { position: fixed; top: 0; right: -100%; width: 90%; max-width: 380px; height: 100vh;
    background: var(--bg-2, #0f1722); z-index: 200; padding: 60px 16px 16px; overflow-y: auto;
    transition: right .25s; box-shadow: -4px 0 20px rgba(0,0,0,.5); }
  .cat-filters.open { right: 0; }
  .cat-filters__close-btn { position: absolute; top: 12px; right: 12px; background: transparent; color: inherit;
    border: 0; font-size: 26px; padding: 8px 12px; cursor: pointer; }
  .filter-toggle-btn { display: inline-flex !important; align-items: center; gap: 6px; padding: 10px 16px;
    border-radius: 8px; background: var(--accent, #2563eb); color: white; border: 0; font-size: 14px;
    margin-bottom: 12px; min-height: var(--ftpc-touch); }

  /* Product page detail */
  .product-detail { display: block !important; }
  .product-detail__gallery { width: 100% !important; }
  .product-detail__info { width: 100% !important; padding: 12px 0 !important; }
  .product-detail__info h1 { font-size: 22px !important; }
  .price-block { font-size: 22px !important; }

  /* Cart: stack rows */
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table tr { border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 10px; margin-bottom: 12px; }
  .cart-table td { padding: 6px 0 !important; border: none !important; }
  .cart-table td::before { content: attr(data-label) ': '; font-weight: 600; opacity: .7; margin-right: 6px; }

  /* Footer */
  .footer__main { grid-template-columns: 1fr !important; gap: 20px !important; }
  .footer__col { text-align: left; }

  /* Tables: horizontalni scroll */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Sticky add-to-cart bar (injected by mobile.js on product page) */
  .sticky-buy-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--bg-2, #0f1722);
    border-top: 1px solid rgba(255,255,255,.1); padding: 10px 12px; display: flex; align-items: center; gap: 10px;
    box-shadow: 0 -4px 20px rgba(0,0,0,.4); }
  .sticky-buy-bar__price { font-size: 18px; font-weight: 700; color: var(--accent, #2563eb); white-space: nowrap; }
  .sticky-buy-bar__btn { flex: 1; padding: 12px; background: var(--accent, #2563eb); color: white; border: 0;
    border-radius: 8px; font-weight: 600; min-height: var(--ftpc-touch); }
  body.has-sticky-buy { padding-bottom: 70px; }

  /* Modal cart on mobile */
  .modal__content { width: 96% !important; max-width: 100% !important; max-height: 90vh; overflow-y: auto; }

  /* Hide-on-mobile utility */
  .hide-on-mobile { display: none !important; }
}

/* Always show on mobile only */
.show-on-mobile { display: none; }
@media (max-width: 900px) { .show-on-mobile { display: inline-flex !important; } }

/* Back to top button */
#backToTop { position: fixed; bottom: 80px; right: 16px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent, #2563eb); color: white; border: 0; font-size: 20px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 80; }
#backToTop.visible { opacity: 1; pointer-events: auto; }
@media (min-width: 901px) { #backToTop { bottom: 24px; right: 24px; } }

/* Lazy image fade-in */
img[loading="lazy"] { opacity: 0; transition: opacity .3s; }
img[loading="lazy"].lazy-loaded, img[loading="lazy"].is-loaded { opacity: 1; }
img.lazy-error { opacity: 1; }

/* ====== DODATNA MOBILNA OPTIMIZACIJA (telefon) ====== */
@media (max-width: 900px) {
  /* Korpa: ne prikazuj prazno ": " na ćelijama bez labele */
  .cart-table .cart-item__img::before,
  .cart-table .cart-item__name::before,
  .cart-table .cart-item__remove::before { content: none !important; }
  /* Tap targeti min 44px */
  .cart-remove { width: 44px !important; height: 44px !important; font-size: 20px; }
  .qty-selector button { padding: 14px 16px !important; min-height: 44px; }
  .qty-selector input { width: 100% !important; }
  .payment-option { min-height: 44px; padding: 16px !important; }
  /* iOS ne zumira input ako je font >=16px */
  input[type="search"], input[type="email"], input[type="tel"],
  input[type="text"], input[type="number"], input[type="password"], select, textarea { font-size: 16px; }
}
@media (max-width: 600px) {
  .specs-grid { grid-template-columns: 1fr !important; }
  .product-page__thumbs { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
  .trust-strip__inner { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
  .trust-item__icon { width: 46px !important; height: 46px !important; }
}
@media (max-width: 380px) {
  .cat-grid { grid-template-columns: 1fr !important; }
}

/* ====== MOBILNI NAV (kategorije + meni) — bez preklapanja ====== */
@media (max-width: 900px) {
  .main-nav__inner { flex-wrap: wrap; gap: 0; }
  /* SVE KATEGORIJE — svoj red, puna sirina */
  .main-nav__categories { flex: 1 1 100%; position: relative; }
  .cat-toggle { width: 100%; justify-content: center; }
  /* Meni linkovi — red ispod, horizontalni scroll umesto preklapanja */
  .main-nav__menu { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; gap: 0;
    -webkit-overflow-scrolling: touch; border-top: 1px solid var(--border); scrollbar-width: none; }
  .main-nav__menu::-webkit-scrollbar { display: none; }
  .main-nav__menu a { white-space: nowrap; }
  /* Megameni panel: u toku (static), puna sirina, otvara se na TAP (.open) */
  .megamenu__panel {
    position: static !important; width: 100% !important; max-width: 100% !important;
    grid-template-columns: 1fr !important; box-shadow: none; border-radius: 0; max-height: 70vh; overflow-y: auto;
  }
  .megamenu:hover .megamenu__panel { display: none !important; }   /* iskljuci hover na touch */
  .megamenu.open .megamenu__panel { display: grid !important; }     /* otvori na tap */
  .megamenu__roots { background: rgba(0,0,0,.2); }
}

/* ====== Kartice: badge "Izdvojeno/Akcija" da se ne seku i ne udaraju u srce ====== */
@media (max-width: 600px) {
  .badge { font-size: 8.5px !important; letter-spacing: .3px !important; padding: 3px 7px !important; top: 8px; }
  .badge--sale { left: 8px; }
  /* "Izdvojeno" levo (srce/wishlist je gore desno) */
  .badge--featured { right: auto !important; left: 8px; top: 8px; }
}