/* ── ALATIN01 SHARED STYLES ─────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --red: #E82520; --red-dark: #c01e1a;
  --orange: #F77F00; --yellow: #FFD100;
  --bg: #0d0d0d; --bg2: #141414; --bg3: #1c1c1c;
  --card: #191919; --border: #272727; --border2: #333;
  --text: #f0f0f0; --text2: #aaa; --text3: #666;
  --white: #fff; --green: #22a853; --blue: #1a6ef5;
  --heading: 'Oswald', sans-serif;
  --body: 'Inter', sans-serif;
  --shadow: rgba(0,0,0,.4);
  --theme-icon: '☀';
}
[data-theme="light"] {
  --bg: #f0f2f5; --bg2: #ffffff; --bg3: #e8eaed;
  --card: #ffffff; --border: #d8dce2; --border2: #a0aab8;
  --text: #1a1f2e; --text2: #4a5568; --text3: #8896aa;
  --white: #1a1f2e; --green: #18865a; --blue: #1a6ef5;
  --shadow: rgba(26,31,46,.1);
  --theme-icon: '🌙';
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100vw; }
body { background: var(--bg); color: var(--text); font-family: var(--body); font-size: 15px; overflow-x: hidden; max-width: 100vw; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--body); }
input, select, textarea { font-family: var(--body); }

/* ── TOPBAR ── */
.topbar { background: var(--red); padding: 7px 0; font-size: 12px; font-weight: 600; color: #fff; }
.topbar * { color: #fff !important; }
.topbar a:hover { opacity: .85; }
.topbar-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbar-items { display: flex; align-items: center; gap: 20px; }
.topbar-item { display: flex; align-items: center; gap: 5px; }
.topbar-phone { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 5px; }

/* ── HEADER ── */
.header { background: var(--bg2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 20px rgba(0,0,0,.5); }
.header-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 24px; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark { width: 42px; height: 42px; background: var(--red); display: flex; align-items: center; justify-content: center; font-family: var(--heading); font-weight: 700; font-size: 17px; color: #fff; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); flex-shrink: 0; }
.logo-text { font-family: var(--heading); font-weight: 700; font-size: 24px; letter-spacing: 3px; color: var(--white); }
.logo-text span { color: var(--red); }
.search-bar { display: flex; align-items: center; background: var(--bg3); border: 1.5px solid var(--border2); border-radius: 4px; overflow: hidden; transition: border-color .2s; }
.search-bar:focus-within { border-color: var(--red); }
.search-bar input { flex: 1; background: none; border: none; outline: none; padding: 11px 16px; font-size: 14px; color: var(--text); }
.search-bar input::placeholder { color: var(--text3); }
.search-btn { background: var(--red); width: 48px; height: 46px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .2s; }
.search-btn:hover { background: var(--red-dark); }
.header-actions { display: flex; align-items: center; gap: 4px; }
.header-action { display: flex; flex-direction: column; align-items: center; padding: 8px 12px; border-radius: 4px; transition: background .2s; position: relative; gap: 2px; cursor: pointer; }
.header-action:hover { background: var(--bg3); }
.header-action .ha-label { font-size: 10px; color: var(--text2); font-weight: 500; white-space: nowrap; }
.ha-badge { position: absolute; top: 4px; right: 6px; background: var(--red); color: #fff; font-size: 9px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.mob-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }

/* ── NAV ── */
.main-nav { background: var(--bg3); border-bottom: 1px solid var(--border); }
.main-nav-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; }
.nav-all-btn { background: var(--red); display: flex; align-items: center; gap: 10px; padding: 12px 20px; font-family: var(--heading); font-weight: 700; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; color: #fff; cursor: pointer; white-space: nowrap; transition: background .2s; border: none; }
.nav-all-btn:hover { background: var(--red-dark); }
.nav-links { display: flex; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-link { padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--text2); white-space: nowrap; text-transform: uppercase; letter-spacing: .06em; transition: color .2s; display: block; }
.nav-link:hover, .nav-link.active { color: var(--white); }
.nav-link.hot { color: var(--red); }
.nav-link.new { color: var(--yellow); }

/* ── BUTTONS ── */
.btn-primary { background: var(--red); color: #fff; font-family: var(--heading); font-weight: 600; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; padding: 13px 30px; display: inline-flex; align-items: center; gap: 8px; border-radius: 3px; transition: background .2s, transform .1s; border: none; cursor: pointer; }
.btn-primary:hover { background: var(--red-dark); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--white); font-family: var(--heading); font-weight: 600; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; padding: 12px 26px; border: 1.5px solid var(--border2); display: inline-flex; align-items: center; gap: 8px; border-radius: 3px; transition: border-color .2s, background .2s; cursor: pointer; }
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,.05); }

/* ── PRODUCT CARD ── */
.product-card { background: var(--card); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; transition: all .25s; cursor: pointer; position: relative; }
.product-card:hover { border-color: var(--border2); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.4); }
.pc-img { position: relative; aspect-ratio: 1; background: var(--bg3); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pc-img-ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text3); font-family: monospace; font-size: 10px; text-align: center; padding: 12px; background: repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(255,255,255,.012) 6px, rgba(255,255,255,.012) 7px); }
.pc-icon { font-size: 38px; opacity: .22; }
.pc-desc { opacity: .4; line-height: 1.4; }
.pc-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; }
.badge { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; padding: 3px 7px; border-radius: 2px; }
.badge-red { background: var(--red); color: #fff; }
.badge-yellow { background: var(--yellow); color: #000; }
.badge-blue { background: var(--blue); color: #fff; }
.badge-green { background: var(--green); color: #fff; }
.pc-actions { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: translateX(8px); transition: all .25s; }
.product-card:hover .pc-actions { opacity: 1; transform: translateX(0); }
.pc-action-btn { width: 32px; height: 32px; background: rgba(0,0,0,.8); border: 1px solid rgba(255,255,255,.1); border-radius: 2px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s; color: var(--text); font-size: 14px; }
.pc-action-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.pc-body { padding: 14px; flex: 1; display: flex; flex-direction: column; }
.pc-brand { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text3); margin-bottom: 4px; }
.pc-name { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.45; margin-bottom: 8px; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.stars { color: var(--yellow); font-size: 11px; letter-spacing: -1px; }
.rating-count { font-size: 11px; color: var(--text3); }
.pc-price-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pc-prices { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price-new { font-family: var(--heading); font-weight: 900; font-size: 20px; color: var(--white); letter-spacing: -.5px; }
.price-cur { font-size: 12px; font-weight: 600; color: var(--text2); margin-left: 2px; }
.price-old { font-size: 12px; color: var(--text3); text-decoration: line-through; }
.price-pct { font-size: 10px; font-weight: 700; background: var(--red); color: #fff; padding: 2px 5px; border-radius: 2px; }
.pc-atc { width: 36px; height: 36px; background: var(--red); color: #fff; border-radius: 2px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s; border: none; cursor: pointer; }
.pc-atc:hover { background: var(--red-dark); }
.pc-stock { font-size: 11px; color: var(--green); font-weight: 600; margin-top: 8px; display: flex; align-items: center; gap: 4px; }
.pc-stock.low { color: var(--orange); }
.pc-stock.out { color: var(--text3); }

/* ── FORMS ── */
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text2); }
.form-label.req::after { content: ' *'; color: var(--red); }
.form-input { background: var(--bg3); border: 1.5px solid var(--border); border-radius: 2px; padding: 11px 14px; font-size: 14px; color: var(--text); outline: none; transition: border-color .2s; width: 100%; }
.form-input:focus { border-color: var(--red); }
.form-select { background: var(--bg3); border: 1.5px solid var(--border); border-radius: 2px; padding: 11px 14px; font-size: 14px; color: var(--text); outline: none; width: 100%; cursor: pointer; }
.form-select:focus { border-color: var(--red); }
textarea.form-input { min-height: 80px; resize: vertical; }

/* ── TOAST ── */
.toast { position: fixed; top: 90px; right: 20px; background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid var(--green); border-radius: 4px; padding: 14px 20px; z-index: 9999; min-width: 260px; display: flex; align-items: center; gap: 10px; transform: translateX(120%); transition: transform .3s; box-shadow: 0 8px 32px rgba(0,0,0,.4); }
.toast.show { transform: translateX(0); }
.toast.error { border-left-color: var(--red); }

/* ── FOOTER ── */
.footer { background: var(--bg2); border-top: 1px solid var(--border); }
.footer-grid { max-width: 1400px; margin: 0 auto; padding: 60px 20px 48px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr; gap: 48px; }
.footer-brand p { font-size: 13px; color: var(--text2); line-height: 1.6; margin: 16px 0 20px; }
.social-links { display: flex; gap: 8px; }
.social-link { width: 36px; height: 36px; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all .2s; cursor: pointer; color: var(--text2); }
.social-link:hover { background: var(--red); border-color: var(--red); color: #fff; }
.footer-col-title { font-family: var(--heading); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 16px; color: var(--white); }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-link { font-size: 13px; color: var(--text2); transition: color .2s; }
.footer-link:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid var(--border); padding: 20px; max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-bottom p { font-size: 12px; color: var(--text3); }
.pay-badges { display: flex; gap: 8px; }
.pay-badge { background: var(--bg3); border: 1px solid var(--border); border-radius: 3px; padding: 4px 10px; font-size: 10px; font-weight: 700; color: var(--text2); }

/* ── WHATSAPP ── */
.wa-float { position: fixed; bottom: 24px; left: 24px; width: 52px; height: 52px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 800; box-shadow: 0 4px 16px rgba(37,211,102,.4); font-size: 26px; text-decoration: none; transition: transform .2s; }
.wa-float:hover { transform: scale(1.1); }

/* ── SCROLL TOP ── */
.scroll-top { position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; background: var(--red); color: #fff; border-radius: 2px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 800; opacity: 0; transform: translateY(10px); transition: all .3s; border: none; font-size: 18px; }
.scroll-top.visible { opacity: 1; transform: translateY(0); }
.scroll-top:hover { background: var(--red-dark); }

/* ── MOBILE MENU ── */
.mob-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 1500; opacity: 0; pointer-events: none; transition: opacity .3s; }
.mob-overlay.active { opacity: 1; pointer-events: all; }
.mob-menu { position: fixed; top: 0; left: 0; bottom: 0; width: 300px; background: var(--bg2); z-index: 1600; transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; overflow-y: auto; }
.mob-menu.active { transform: translateX(0); }
.mob-menu-hdr { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.mob-menu-link { display: flex; align-items: center; gap: 12px; padding: 13px 20px; font-size: 14px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border); cursor: pointer; transition: all .15s; }
.mob-menu-link:hover { background: var(--bg3); color: var(--red); }

/* ── STICKY MOB ATC ── */
.sticky-mob { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg2); border-top: 2px solid var(--red); padding: 12px 16px; z-index: 900; gap: 12px; align-items: center; }

/* ── SECTION UTILS ── */
.section { padding: 60px 0; }
.section-sm { padding: 40px 0; }
.container { max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.section-hdr { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; gap: 20px; }
.section-lbl { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.section-ttl { font-family: var(--heading); font-weight: 700; font-size: clamp(24px,3.5vw,40px); text-transform: uppercase; letter-spacing: .5px; line-height: 1.1; }
.section-ttl span { color: var(--red); }
.section-more { font-size: 13px; font-weight: 600; color: var(--red); display: flex; align-items: center; gap: 4px; white-space: nowrap; transition: gap .2s; }
.section-more:hover { gap: 8px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; padding: 16px 0; font-size: 12px; color: var(--text3); flex-wrap: wrap; }
.breadcrumb a { color: var(--text3); transition: color .2s; }
.breadcrumb a:hover { color: var(--text); }
.panel { background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.panel-hdr { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.panel-ttl { font-family: var(--heading); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: .3px; }

/* ── STATUS BADGES ── */
.status-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; }
.sb-nova { background: rgba(26,110,245,.15); color: #5b9ef7; }
.sb-obrada { background: rgba(247,127,0,.15); color: var(--orange); }
.sb-poslano { background: rgba(34,168,83,.15); color: var(--green); }
.sb-isporuceno { background: rgba(34,168,83,.2); color: var(--green); }
.sb-otkazano { background: rgba(232,37,32,.15); color: var(--red); }
.sb-aktivan { background: rgba(34,168,83,.15); color: var(--green); }

/* ── THEME TOGGLE ── */
.theme-toggle { width: 40px; height: 40px; border-radius: 50%; background: var(--bg3); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 17px; transition: background .2s, transform .3s; flex-shrink: 0; }
.theme-toggle:hover { background: var(--border2); transform: rotate(20deg); }

/* ── CATEGORIES DROPDOWN ── */
.nav-cat-wrap { position: relative; flex-shrink: 0; }
.cat-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 2000;
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 6px;
  box-shadow: 0 16px 48px rgba(0,0,0,.35); min-width: 240px;
  opacity: 0; transform: translateY(-8px) scaleY(.97); pointer-events: none;
  transition: opacity .18s, transform .18s;
  transform-origin: top left;
}
.cat-dropdown.open { opacity: 1; transform: translateY(0) scaleY(1); pointer-events: all; }
.cat-drop-inner { padding: 8px; }
.cat-drop-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 4px;
  font-size: 13px; font-weight: 600; color: var(--text2);
  text-decoration: none; transition: background .12s, color .12s;
  white-space: nowrap;
}
.cat-drop-item:hover { background: var(--bg3); color: var(--white); }
.cat-drop-hot { color: var(--red) !important; }
.cat-drop-hot:hover { background: rgba(232,37,32,.08) !important; }
.cat-drop-new { color: #5b9ef7 !important; }
.cat-drop-new:hover { background: rgba(26,110,245,.08) !important; }
.cat-drop-divider { height: 1px; background: var(--border); margin: 6px 8px; }

/* ══════════════════════════════════════════════
   LIGHT MODE — PREMIUM OVERRIDES
   ══════════════════════════════════════════════ */

/* Base */
[data-theme="light"] body { background: #f0f2f5; }

/* ── Header ── */
[data-theme="light"] .header { background: #fff; box-shadow: 0 1px 0 #e2e6ec, 0 4px 20px rgba(26,31,46,.07); }
[data-theme="light"] .logo-text { color: #0d0f14; }
[data-theme="light"] .header-action { color: #0d0f14; }
[data-theme="light"] .header-action svg { stroke: #0d0f14; }
[data-theme="light"] .header-action .ha-label { color: #5a6475; }
[data-theme="light"] .header-action:hover { background: #f4f5f8; }
[data-theme="light"] .mob-toggle { background: #f4f5f7; border-color: #d8dce2; color: #0d0f14; }
[data-theme="light"] .mob-toggle svg { stroke: #0d0f14; }

/* ── Search ── */
[data-theme="light"] .search-bar { background: #f7f8fa; border-color: #d0d6de; }
[data-theme="light"] .search-bar:focus-within { background: #fff; border-color: var(--red); box-shadow: 0 0 0 3px rgba(232,37,32,.09); }
[data-theme="light"] .search-bar input { color: #0d0f14; }
[data-theme="light"] .search-bar input::placeholder { color: #9aa3b0; }

/* ── Navigation bar ── */
[data-theme="light"] .main-nav { background: #fff; border-bottom: 1px solid #e2e6ec; box-shadow: 0 2px 8px rgba(26,31,46,.04); }
[data-theme="light"] .nav-link { color: #3d4759; font-weight: 600; }
[data-theme="light"] .nav-link:hover { color: #0d0f14; background: #f4f5f8; }
[data-theme="light"] .nav-link.active { color: #0d0f14; }
[data-theme="light"] .nav-link.hot { color: var(--red); }
[data-theme="light"] .nav-link.new { color: #1a6ef5; }

/* ── Categories dropdown ── */
[data-theme="light"] .cat-dropdown { background: #fff; border-color: #e2e6ec; box-shadow: 0 16px 48px rgba(26,31,46,.14); }
[data-theme="light"] .cat-drop-item { color: #3d4759; }
[data-theme="light"] .cat-drop-item:hover { background: #f4f5f8; color: #0d0f14; }

/* ── Product cards — the most important ── */
[data-theme="light"] .product-card {
  background: #fff;
  border-color: #e8edf2;
  box-shadow: 0 1px 3px rgba(26,31,46,.06), 0 4px 12px rgba(26,31,46,.04);
}
[data-theme="light"] .product-card:hover {
  border-color: #c8d0dc;
  box-shadow: 0 4px 16px rgba(26,31,46,.10), 0 12px 32px rgba(26,31,46,.07);
  transform: translateY(-3px);
}
[data-theme="light"] .pc-img { background: #f7f8fb; }
[data-theme="light"] .pc-img-ph { background: repeating-linear-gradient(-45deg,transparent,transparent 8px,rgba(26,31,46,.018) 8px,rgba(26,31,46,.018) 9px); }
[data-theme="light"] .pc-icon { opacity: .15; }
[data-theme="light"] .pc-body { background: #fff; }
[data-theme="light"] .pc-brand { color: #8896aa; }
[data-theme="light"] .pc-name { color: #0d0f14; font-weight: 700; }
[data-theme="light"] .price-new { color: #0d0f14; font-size: 22px; }
[data-theme="light"] .price-cur { color: #5a6475; }
[data-theme="light"] .price-old { color: #9aa3b0; }
[data-theme="light"] .rating-count { color: #9aa3b0; }
[data-theme="light"] .pc-stock { color: #18865a; }
[data-theme="light"] .pc-stock.low { color: #c07000; }
[data-theme="light"] .pc-stock.out { color: #9aa3b0; }
[data-theme="light"] .pc-atc { box-shadow: 0 2px 8px rgba(232,37,32,.25); }
[data-theme="light"] .pc-atc:hover { box-shadow: 0 4px 12px rgba(232,37,32,.35); }
[data-theme="light"] .pc-action-btn { background: #fff; border-color: #d8dee6; color: #3d4759; box-shadow: 0 2px 6px rgba(26,31,46,.08); }
[data-theme="light"] .pc-action-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* Badges more punchy in light */
[data-theme="light"] .badge-red { box-shadow: 0 2px 6px rgba(232,37,32,.3); }
[data-theme="light"] .badge-yellow { box-shadow: 0 2px 6px rgba(255,209,0,.3); }
[data-theme="light"] .badge-blue { box-shadow: 0 2px 6px rgba(26,110,245,.25); }

/* ── Sections ── */
[data-theme="light"] .section-ttl { color: #0d0f14; }
[data-theme="light"] .section-lbl { color: var(--red); }
[data-theme="light"] .breadcrumb { color: #9aa3b0; }
[data-theme="light"] .breadcrumb a { color: #9aa3b0; }
[data-theme="light"] .breadcrumb a:hover { color: #0d0f14; }

/* ── Panels ── */
[data-theme="light"] .panel { background: #fff; border-color: #e8edf2; box-shadow: 0 1px 4px rgba(26,31,46,.06); }
[data-theme="light"] .panel-ttl { color: #0d0f14; }
[data-theme="light"] .panel-hdr { background: #fafbfc; border-color: #e8edf2; }

/* ── Forms ── */
[data-theme="light"] .form-input { background: #fff; border-color: #d0d6de; color: #0d0f14; }
[data-theme="light"] .form-input:focus { border-color: var(--red); background: #fff; box-shadow: 0 0 0 3px rgba(232,37,32,.07); }
[data-theme="light"] .form-input::placeholder { color: #9aa3b0; }
[data-theme="light"] .form-select { background: #fff; border-color: #d0d6de; color: #0d0f14; }
[data-theme="light"] .form-label { color: #5a6475; }

/* ── Buttons ── */
[data-theme="light"] .btn-primary { box-shadow: 0 4px 12px rgba(232,37,32,.25); }
[data-theme="light"] .btn-primary:hover { box-shadow: 0 6px 16px rgba(232,37,32,.35); }
[data-theme="light"] .btn-outline { color: #0d0f14; border-color: #c0c8d6; background: #fff; }
[data-theme="light"] .btn-outline:hover { border-color: #0d0f14; background: #f4f5f8; }

/* ── Toast ── */
[data-theme="light"] .toast { background: #fff; border-color: #e8edf2; color: #0d0f14; box-shadow: 0 8px 32px rgba(26,31,46,.12); }

/* ── Footer ── */
[data-theme="light"] .footer { background: #f4f5f8; border-top-color: #e2e6ec; }
[data-theme="light"] .footer-brand p { color: #5a6475; }
[data-theme="light"] .footer-col-title { color: #0d0f14; }
[data-theme="light"] .footer-link { color: #5a6475; }
[data-theme="light"] .footer-link:hover { color: #0d0f14; }
[data-theme="light"] .footer-bottom { border-top-color: #e2e6ec; }
[data-theme="light"] .footer-bottom p { color: #9aa3b0; }
[data-theme="light"] .pay-badge { background: #fff; border-color: #d8dee6; color: #5a6475; }
[data-theme="light"] .social-link { background: #fff; border-color: #d8dee6; color: #5a6475; }
[data-theme="light"] .social-link:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ── Mobile menu ── */
[data-theme="light"] .mob-menu { background: #fff; }
[data-theme="light"] .mob-menu-link { color: #0d0f14; border-color: #eff1f4; font-weight: 600; }
[data-theme="light"] .mob-menu-link:hover { background: #f4f5f8; color: var(--red); }
[data-theme="light"] .mob-overlay { background: rgba(13,15,20,.5); }

/* ── Hero slider ── */
[data-theme="light"] .hero-slide.hs1 { background: linear-gradient(135deg,#fff6f5 0%,#fde0de 100%); }
[data-theme="light"] .hero-slide.hs2 { background: linear-gradient(135deg,#f0f6ff 0%,#dae8ff 100%); }
[data-theme="light"] .hero-slide.hs3 { background: linear-gradient(135deg,#f0fff6 0%,#d4f5e4 100%); }
[data-theme="light"] .hero-title { color: #0d0f14; }
[data-theme="light"] .hero-desc { color: #3d4759; }
[data-theme="light"] .hero-badge { color: #fff; }

/* ── Countdown bar — crvena pozadina, uvijek bijeli tekst ── */
.countdown-bar, .countdown-bar * { color: #fff !important; }
.cd-num { background: rgba(0,0,0,.25) !important; color: #fff !important; }

/* ── Promo baneri — tamna pozadina, uvijek bijeli tekst ── */
.promo-banner, .promo-banner * { color: #fff !important; }
.pb1 .pb-lbl { color: #ff8a85 !important; }
.pb2 .pb-lbl { color: #5b9ef7 !important; }
.pb3 .pb-lbl { color: #4cca7a !important; }

/* ── Nav ALL dugme ── */
.nav-all-btn { color: #fff !important; }
.nav-all-btn svg { stroke: #fff !important; }

/* ── Sticky mob footer ── */
[data-theme="light"] .sticky-mob { background: #fff; border-top-color: var(--red); box-shadow: 0 -4px 20px rgba(26,31,46,.08); }

/* ── Admin panel ── */
[data-theme="light"] .admin-sidebar { background: #fff; border-right-color: #e8edf2; box-shadow: none; }
[data-theme="light"] .admin-topbar { background: #fff; border-bottom-color: #e8edf2; box-shadow: 0 1px 4px rgba(26,31,46,.05); }
[data-theme="light"] .admin-wrap { background: #f4f5f8; }
[data-theme="light"] .stat-card { background: #fff; border-color: #e8edf2; box-shadow: 0 1px 4px rgba(26,31,46,.06); }
[data-theme="light"] .admin-table-wrap { background: #fff; border-color: #e8edf2; }
[data-theme="light"] .admin-table th { background: #fafbfc; color: #8896aa; border-bottom-color: #e8edf2; }
[data-theme="light"] .admin-table td { color: #3d4759; border-bottom-color: #eff1f4; }
[data-theme="light"] .admin-table tr:hover td { background: #f7f8fb; }
[data-theme="light"] .modal-overlay { background: rgba(13,15,20,.55); }
[data-theme="light"] .modal-box { background: #fff; border-color: #e8edf2; box-shadow: 0 24px 64px rgba(26,31,46,.18); }
[data-theme="light"] .modal-hdr { background: #fafbfc; border-color: #e8edf2; }
[data-theme="light"] .modal-footer { background: #fafbfc; border-color: #e8edf2; }
[data-theme="light"] .search-field { background: #fff; border-color: #d0d6de; color: #0d0f14; }
[data-theme="light"] .search-field:focus { border-color: var(--red); }
[data-theme="light"] .search-field::placeholder { color: #9aa3b0; }
[data-theme="light"] .filter-tab { color: #5a6475; background: #fff; }
[data-theme="light"] .filter-tabs { background: #fff; border-color: #e2e6ec; }
[data-theme="light"] .export-btn { background: #fff; border-color: #d0d6de; color: #5a6475; }
[data-theme="light"] .export-btn:hover { border-color: #0d0f14; color: #0d0f14; }
[data-theme="light"] .btn-sm.ghost { background: #f4f5f8; border-color: #d0d6de; color: #5a6475; }
[data-theme="light"] .btn-sm.ghost:hover { border-color: #0d0f14; color: #0d0f14; background: #eef0f3; }
[data-theme="light"] .stock-inp { background: #fff; border-color: #d0d6de; color: #0d0f14; }
[data-theme="light"] .status-sel { background: #fff; border-color: #d0d6de; color: #0d0f14; }
[data-theme="light"] .table-footer { background: #fafbfc; border-color: #e8edf2; }
[data-theme="light"] .tpage-btn { background: #fff; border-color: #d0d6de; color: #5a6475; }
[data-theme="light"] .tpage-btn:hover, [data-theme="light"] .tpage-btn.active { background: var(--red); border-color: var(--red); color: #fff; }
[data-theme="light"] .anav-item { color: #5a6475; }
[data-theme="light"] .anav-item:hover { background: #f4f5f8; color: #0d0f14; }
[data-theme="light"] .anav-item.active { background: rgba(232,37,32,.07); color: var(--red); border-left-color: var(--red); }
[data-theme="light"] .admin-sidebar-hdr { border-color: #e8edf2; }
[data-theme="light"] .login-card { background: #fff; border-color: #e8edf2; box-shadow: 0 8px 40px rgba(26,31,46,.09); }
[data-theme="light"] .prod-icon-prev { background: #f4f5f8; border-color: #e2e6ec; }
[data-theme="light"] .badges-check { background: #fafbfc; border-radius: 4px; }

/* ── Product page light fixes ── */
[data-theme="light"] .price-block { background: #fafbfc; border-color: #e2e6ec; }
[data-theme="light"] .delivery-box { background: #fafbfc; border-color: #e2e6ec; }
[data-theme="light"] .ditem strong { color: #0d0f14; }
[data-theme="light"] .ditem span { color: #5a6475; }
[data-theme="light"] .gallery-main { background: #f7f8fb; border-color: #e2e6ec; }
[data-theme="light"] .gallery-thumb { background: #f7f8fb; border-color: #e2e6ec; }
[data-theme="light"] .price-big { color: #0d0f14; }
[data-theme="light"] .price-was { color: #9aa3b0; }
[data-theme="light"] .tabs-bar { border-color: #e2e6ec; }
[data-theme="light"] .tab-btn { color: #8896aa; }
[data-theme="light"] .tab-btn.active, [data-theme="light"] .tab-btn:hover { color: #0d0f14; }
[data-theme="light"] .specs-table td:first-child { background: #f7f8fb; color: #5a6475; }
[data-theme="light"] .specs-table tr { border-color: #e8edf2; }
[data-theme="light"] .review-form { background: #fafbfc; border-color: #e2e6ec; }
[data-theme="light"] .review-item { background: #fff; border-color: #e8edf2; box-shadow: 0 1px 4px rgba(26,31,46,.05); }
[data-theme="light"] .ri-name { color: #0d0f14; }
[data-theme="light"] .ri-text { color: #3d4759; }
[data-theme="light"] .abtn { background: #fff; border-color: #d8dee6; color: #5a6475; }
[data-theme="light"] .abtn:hover { border-color: #0d0f14; color: #0d0f14; background: #f4f5f8; }
[data-theme="light"] .btn-buy { background: #f4f5f8; border-color: #c8d0d8; color: #0d0f14; }
[data-theme="light"] .btn-buy:hover { background: #eef0f3; border-color: #0d0f14; }
[data-theme="light"] .qbtn { background: #f4f5f8; color: #0d0f14; }
[data-theme="light"] .qbtn:hover { background: #e8edf2; }
[data-theme="light"] .qty-sel { border-color: #d0d6de; }
[data-theme="light"] .qinput { color: #0d0f14; border-color: #d0d6de; }
[data-theme="light"] .meta-row { border-color: #e8edf2; }
[data-theme="light"] .meta-item { color: #5a6475; }
[data-theme="light"] .meta-item strong { color: #0d0f14; }
[data-theme="light"] .rating-summary { border-color: #e8edf2; }
[data-theme="light"] .rbar-track { background: #e8edf2; }
[data-theme="light"] .desc-body { color: #3d4759; }
[data-theme="light"] .desc-body h3 { color: #0d0f14; }

/* ── Cart page light ── */
[data-theme="light"] .cart-item-row { border-color: #e8edf2; }

/* ── WhatsApp + ScrollTop ── */
[data-theme="light"] .scroll-top { box-shadow: 0 4px 12px rgba(232,37,32,.25); }

/* ── Product sliders ── */
[data-theme="light"] .pslider-btn { background: #fff; border-color: #d0d6de; color: #1a1f2e; }
[data-theme="light"] .pslider-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ── Trust bar ── */
[data-theme="light"] .trust-bar { background: #fff; border-bottom: 1px solid #e8edf2; }
[data-theme="light"] .trust-text strong { color: #0d0f14; }
[data-theme="light"] .trust-text span { color: #5a6475; }
[data-theme="light"] .trust-icon { background: rgba(232,37,32,.08); }

/* ── Category cards ── */
[data-theme="light"] .cat-card { background: #fff; border-color: #e8edf2; box-shadow: 0 1px 4px rgba(26,31,46,.06); }
[data-theme="light"] .cat-card:hover { border-color: var(--red); box-shadow: 0 4px 16px rgba(232,37,32,.12); }
[data-theme="light"] .cat-icon { background: #f4f5f8; border-color: #e2e6ec; }
[data-theme="light"] .cat-name { color: #0d0f14; }
[data-theme="light"] .cat-count { color: #9aa3b0; }

/* ── Why us ── */
[data-theme="light"] .why-item { background: #fff; }
[data-theme="light"] .why-grid { background: #e8edf2; border-color: #e8edf2; }
[data-theme="light"] .why-body p { color: #5a6475; }

/* ── Review cards (homepage) ── */
[data-theme="light"] .review-card { background: #fff; border-color: #e8edf2; box-shadow: 0 1px 4px rgba(26,31,46,.06); }
[data-theme="light"] .rv-text { color: #3d4759; }
[data-theme="light"] .rv-info strong { color: #0d0f14; }

/* ── Newsletter section ── */
[data-theme="light"] .newsletter { background: linear-gradient(135deg,#fff6f5 0%,#fff0f0 100%); border-top-color: rgba(232,37,32,.15); border-bottom-color: rgba(232,37,32,.15); }
[data-theme="light"] .nl-title { color: #0d0f14; }
[data-theme="light"] .nl-sub { color: #5a6475; }
[data-theme="light"] .nl-form { border-color: #d0d6de; }
[data-theme="light"] .nl-form input { background: #fff; color: #0d0f14; }

/* ── Blog cards ── */
[data-theme="light"] .blog-card { background: #fff; border-color: #e8edf2; box-shadow: 0 1px 4px rgba(26,31,46,.06); }
[data-theme="light"] .blog-card:hover { box-shadow: 0 4px 16px rgba(26,31,46,.10); }
[data-theme="light"] .blog-img { background: #f4f5f8; }

/* ── Brands ── */
[data-theme="light"] .brands-row { border-color: #e8edf2; }
[data-theme="light"] .brand-item { border-right-color: #e8edf2; }
[data-theme="light"] .brand-item:hover { background: #f4f5f8; }
[data-theme="light"] .brand-name { color: #c8d0d8; }
[data-theme="light"] .brand-item:hover .brand-name { color: #5a6475; }

/* ── FAQ ── */
[data-theme="light"] .faq-item { border-color: #e8edf2; }
[data-theme="light"] .faq-q { color: #0d0f14; }
[data-theme="light"] .faq-a { color: #5a6475; }

/* ── Shop page & cart page dark spots ── */
[data-theme="light"] .summary-box { background: #fff; border-color: #e8edf2; }
[data-theme="light"] .sum-row { border-color: #e8edf2; }
[data-theme="light"] .coupon-row { background: #fff; border-color: #d0d6de; }
[data-theme="light"] .cart-item { background: #fff; border-color: #e8edf2; }
[data-theme="light"] .ci-name { color: #0d0f14; }
[data-theme="light"] .ci-sku { color: #9aa3b0; }
[data-theme="light"] .ci-del { background: #f4f5f8; border-color: #e2e6ec; color: #5a6475; }
[data-theme="light"] .qb { background: #f4f5f8; color: #0d0f14; }
[data-theme="light"] .qn { color: #0d0f14; border-color: #d0d6de; }
/* Shop sidebar */
[data-theme="light"] .sb-section { background: #fff; border-color: #e8edf2; }
[data-theme="light"] .sb-title { color: #0d0f14; border-bottom-color: #e8edf2; }
[data-theme="light"] .fi { color: #5a6475; }
[data-theme="light"] .fi:hover { color: #0d0f14; }
[data-theme="light"] .fi-c { background: #f4f5f8; color: #9aa3b0; }
[data-theme="light"] .price-input { background: #fff; border-color: #d0d6de; color: #0d0f14; }
[data-theme="light"] .sort-sel { background: #fff; border-color: #d0d6de; color: #0d0f14; }
[data-theme="light"] .shop-count { color: #5a6475; }
[data-theme="light"] .shop-count strong { color: #0d0f14; }
[data-theme="light"] .vbtn { background: #fff; border-color: #d0d6de; color: #9aa3b0; }
[data-theme="light"] .cat-header { background: #fff; border-bottom-color: #e8edf2; }
[data-theme="light"] .cat-title { color: #0d0f14; }
[data-theme="light"] .page-btn { background: #fff; border-color: #d0d6de; color: #5a6475; }

/* ── Account page ── */
[data-theme="light"] .ord-card { background: #fff; border-color: #e8edf2; }

/* ── Info pages (dostava, povrat, etc.) ── */
[data-theme="light"] .info-section { background: #fff; }
[data-theme="light"] .info-box { background: #f7f8fb; border-color: #e8edf2; }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  .topbar-items { display: none; }
  .main-nav { display: none; }
  .mob-toggle { display: flex !important; }
  .header-inner { grid-template-columns: auto 1fr auto; }
  .sticky-mob { display: flex; }
  body { padding-bottom: 76px; }
  .wa-float { bottom: 88px; }
  .scroll-top { bottom: 88px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1/-1; }
}
@media(max-width:600px) {
  .header-inner { height: 60px; gap: 12px; }
  .logo-text { font-size: 20px; }
  .logo-mark { width: 34px; height: 34px; font-size: 14px; }
  .footer-grid { grid-template-columns: 1fr; }
  .search-bar { display: none; }
}
@media(max-width:480px) {
  * { max-width: 100%; }
  img { max-width: 100%; height: auto; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .section-inner, .section-wrap, [class*="-wrap"], [class*="-inner"] { padding-left: 14px !important; padding-right: 14px !important; }
}