/* Header, nav, footer, minicart. */
.site-header { background: #fff; position: sticky; top: 0; z-index: 50;
  box-shadow: 0 4px 14px rgba(10, 37, 64, .10); }
.hdr-row { display: flex; align-items: center; gap: 22px; padding-block: 12px; }
.hdr-logo img { height: 32px; width: auto; }
.hdr-search { flex: 1; display: flex; max-width: 520px; position: relative; }
.hdr-search input { padding-right: 44px; background: var(--bg-soft); border-color: transparent; }
.hdr-search input:focus { background: #fff; }
.hdr-search button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 8px; cursor: pointer; color: var(--muted); }
.hdr-search button:hover { color: var(--teal); }
.hdr-tools { display: flex; align-items: center; gap: 16px; margin-left: auto; }

/* PDV toggle (reference: utteam's switch) */
.vat-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.vat-toggle input { position: absolute; opacity: 0; }
.vt-track { width: 40px; height: 22px; border-radius: 999px; background: #C4CED8; position: relative; transition: background .15s; }
.vt-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.vat-toggle input:checked + .vt-track { background: var(--teal); }
.vat-toggle input:checked + .vt-track::after { left: 21px; }
.vt-label { font-weight: 700; font-size: .85em; color: var(--navy); }

.hdr-lang { display: flex; gap: 2px; }
.hdr-lang a { padding: 4px 7px; border-radius: 6px; font-size: .82em; font-weight: 700; color: var(--muted); }
.hdr-lang a.on { background: var(--navy); color: #fff; }
.hdr-lang a:hover { text-decoration: none; color: var(--navy); }
.hdr-lang a.on:hover { color: #fff; }

.hdr-cart { position: relative; background: none; border: 0; cursor: pointer; color: var(--navy); padding: 6px; }
.hdr-cart .ico { width: 1.6em; height: 1.6em; }
.cart-badge { position: absolute; top: -2px; right: -4px; background: var(--sale); color: #fff;
  font-size: .68rem; font-weight: 700; border-radius: 999px; min-width: 17px; height: 17px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; }
.hdr-burger { display: none; background: none; border: 0; color: var(--navy); cursor: pointer; padding: 6px; }

/* predictive search */
.search-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  z-index: 70; overflow: hidden; }
.search-suggest a { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  color: var(--ink); font-size: .92em; }
.search-suggest a:hover, .search-suggest a.on { background: var(--teal-pale); text-decoration: none; }
.search-suggest img, .ss-ph { width: 40px; height: 40px; object-fit: contain; background: var(--bg-soft);
  border-radius: 6px; flex: none; }
.ss-name { flex: 1; font-weight: 600; color: var(--navy); }
.ss-sale { font-style: normal; background: var(--sale); color: #fff; border-radius: 4px;
  padding: 0 4px; font-size: .78em; font-weight: 700; }
.ss-price { white-space: nowrap; font-weight: 700; color: var(--navy); }

/* nav */
.hdr-nav { background: var(--navy); }
.nav-row { display: flex; align-items: stretch; gap: 4px; }
.nav-row > a, .nav-dd { display: inline-flex; align-items: stretch; }
.nav-row > a, .nav-dd > button {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; height: 42px;
  line-height: 1; color: #DCE7F2; font-weight: 600; font-size: .93em; background: none;
  border: 0; cursor: pointer; font-family: inherit; }
.nav-dd > button .ico { position: relative; top: 1px; }
.nav-row > a:hover, .nav-dd > button:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,.08); }
.nav-strong { color: #fff !important; }
.nav-sale { color: #FFB62D !important; }
.nav-dd { position: relative; }
.nav-dd .ico { width: 1em; height: 1em; }
.dd-panel { display: none; position: absolute; top: 100%; left: 0; background: #fff; z-index: 60;
  min-width: 240px; box-shadow: var(--shadow); border-radius: 0 0 var(--radius) var(--radius);
  padding: 12px; max-height: 70vh; overflow: auto; }
.nav-dd.open .dd-panel { display: block; }
.nav-dd.open .dd-panel.dd-cols { display: grid; }
@media (hover: hover) {
  .nav-dd:hover .dd-panel { display: block; }
  .nav-dd:hover .dd-panel.dd-cols { display: grid; }
  .nav-dd:hover > button { color: #fff; background: rgba(255,255,255,.08); }
}
.dd-cols { grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 2px 16px; }
.dd-brands { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
.dd-panel a { padding: 6px 8px; border-radius: 6px; color: var(--ink); font-size: .93em; }
.dd-panel a:hover { background: var(--teal-pale); text-decoration: none; color: var(--navy); }

/* footer */
.site-footer { background: var(--navy); color: #C9D6E2; margin-top: 60px; }

/* brand wall: fixed cells so wildly different logo aspect ratios read uniform */
.ft-brands { padding: 40px 20px 8px; text-align: center; }
.ft-brands h4 { color: #fff; margin-bottom: 22px; }
.ft-brand-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 34px; }
.ft-brand-wall a { flex: none; width: 118px; height: 46px; display: flex; align-items: center; justify-content: center; }
.ft-brand-wall img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  filter: brightness(0) invert(1); opacity: .72; transition: opacity .15s; }
.ft-brand-wall a:hover img { opacity: 1; }

/* contact | circle logo | about */
.ft-mid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 44px; align-items: center;
  padding: 38px 20px 26px; }
.ft-contact { text-align: center; }
.ft-contact h4 { color: var(--teal); margin: 14px 0 4px; font-size: 1.15em; }
.ft-contact h4:first-child { margin-top: 0; }
.ft-contact .ft-big { display: block; color: #fff; font-size: 1.25em; font-weight: 700; padding: 2px 0; }
.ft-contact .ft-big:hover { color: var(--teal); text-decoration: none; }
.ft-contact p { margin: 14px auto 10px; max-width: 340px; }
.ft-social { display: flex; justify-content: center; gap: 12px; }
.ft-social img { width: 42px; height: 42px; display: block; border-radius: 10px; transition: transform .15s; }
.ft-social a:hover img { transform: scale(1.08); }
.ft-krug img { width: 190px; height: 190px; display: block; }
.ft-about { text-align: center; max-width: 420px; justify-self: center; }
.ft-about p { margin: 0 0 14px; }
.ft-about a { color: var(--teal); text-decoration: underline; }
.ft-about a:hover { color: #fff; }

.ft-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; padding: 8px 20px 26px;
  max-width: 860px; text-align: center; border-top: 1px solid rgba(255,255,255,.12); margin-top: 10px; }
@media (max-width: 700px) { .ft-grid { grid-template-columns: 1fr; gap: 20px; } }
.ft-col h4 { color: #fff; margin-bottom: .8em; }
.ft-col a { display: block; color: #C9D6E2; padding: 3px 0; }
.ft-col a:hover { color: #fff; }

/* sister shops: same visual height despite different aspect ratios */
.ft-sisters { display: flex; justify-content: center; align-items: center; gap: 56px;
  flex-wrap: wrap; padding: 10px 20px 34px; }
.ft-sisters a { flex: none; height: 52px; max-width: 240px; display: flex; align-items: center; }
.ft-sisters img { height: 100%; width: auto; max-width: 100%; object-fit: contain;
  opacity: .92; transition: opacity .15s; }
.ft-sisters a:hover img { opacity: 1; }

@media (max-width: 900px) {
  .ft-mid { grid-template-columns: 1fr; gap: 30px; justify-items: center; text-align: center; }
  .ft-krug { order: -1; }
  .ft-krug img { width: 150px; height: 150px; }
  .ft-sisters { gap: 30px; }
  .ft-sisters a { height: 40px; }
  .ft-brand-wall { gap: 16px 22px; }
  .ft-brand-wall a { width: 96px; height: 38px; }
}
.ft-sister a { display: inline; }
.ft-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 14px 0; font-size: .85em; color: #8FA3B8; text-align: center; }

/* minicart drawer */
.mc-overlay { position: fixed; inset: 0; background: rgba(10,37,64,.45); z-index: 80; }
.minicart { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 88vw); background: #fff;
  z-index: 90; display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(10,37,64,.2);
  transform: translateX(100%); transition: transform .22s ease; }
.minicart.open { transform: none; }
.mc-head { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line); color: var(--navy); }
.mc-close { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 4px; }
.mc-close:hover { color: var(--navy); }
.mc-body { flex: 1; overflow-y: auto; padding: 12px 20px; }
.mc-line { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--line); align-items: center; }
.mc-line img { width: 54px; height: 54px; object-fit: contain; background: var(--bg-soft); border-radius: 8px; }
.mc-line .ph { width: 54px; height: 54px; background: var(--bg-soft); border-radius: 8px; }
.mc-name { font-weight: 600; color: var(--navy); font-size: .92em; display: block; }
.mc-name:hover { text-decoration: underline; }
.mc-thumb { display: block; flex: none; }
.mc-meta { font-size: .82em; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mc-sw { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); display: inline-block; }
.mc-bo { color: var(--warn); font-size: .78em; }
.mc-qty { display: flex; align-items: center; gap: 6px; }
/* drawer stepper: narrower than the cart page, the panel is only ~340px */
.mc-qty .qty { height: 30px; }
.mc-qty .qty button { width: 26px; }
.mc-qty .qty button svg { width: 12px; height: 12px; }
.mc-qty .qty input[type=number] { width: 38px; }
.mc-rm { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 4px; }
.mc-rm:hover { color: var(--danger); }
.mc-foot { border-top: 1px solid var(--line); padding: 14px 20px; }
.mc-total { display: flex; justify-content: space-between; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.mc-actions { display: grid; gap: 8px; }
.mc-free { font-size: .85em; color: var(--ok); margin-bottom: 8px; }

@media (max-width: 900px) {
  .hdr-row { flex-wrap: wrap; gap: 10px 8px; justify-content: space-between; }
  .hdr-search { order: 3; flex-basis: 100%; max-width: none; }
  /* logo + PDV toggle + language + cart + burger stay on ONE row — the logo
     shrinks and yields (min-width:0) instead of pushing the tools down */
  .hdr-logo { min-width: 0; flex: 0 1 auto; }
  .hdr-logo img { height: 20px; width: auto; max-width: 40vw; }
  .hdr-tools { gap: 8px; flex: none; }
  .vat-toggle { gap: 5px; }
  .hdr-lang { gap: 2px; }
  .hdr-burger { display: block; }
  .hdr-nav { display: none; }
  .ft-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- mobile menu drawer ---- */
.mnav-overlay { position: fixed; inset: 0; background: rgba(10,37,64,.45); z-index: 95; }
.mnav { position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 86vw); background: #fff;
  z-index: 100; display: flex; flex-direction: column; box-shadow: 8px 0 30px rgba(10,37,64,.2);
  transform: translateX(-100%); transition: transform .22s ease; }
.mnav.open { transform: none; }
.mnav-head { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line); }
.mnav-head img { height: 24px; width: auto; }
.mnav-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 0; }
.mnav-link, .mnav-acc summary {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  min-height: 48px; padding: 0 18px; font-weight: 600; color: var(--navy);
  border-bottom: 1px solid var(--bg-soft); cursor: pointer; }
.mnav-link:hover, .mnav-acc summary:hover { text-decoration: none; background: var(--teal-pale); }
.mnav-link .ico, .mnav-acc summary .ico { color: var(--muted); flex: none; margin-left: auto; }
.mnav-strong { color: var(--teal-dark); }
.mnav-sale { color: var(--sale); }
.mnav-acc summary { list-style: none; user-select: none; }
.mnav-acc summary::-webkit-details-marker { display: none; }
.mnav-acc summary .ico { transition: transform .18s; }
.mnav-acc[open] summary { background: var(--bg-soft); }
.mnav-acc[open] summary .ico { transform: rotate(180deg); }
.mnav-list { border-bottom: 1px solid var(--line); }
.mnav-list a { display: flex; align-items: center; min-height: 44px; padding: 0 18px 0 30px;
  color: var(--ink); font-size: .95em; border-bottom: 1px solid var(--bg-soft); }
.mnav-list a:hover { background: var(--teal-pale); text-decoration: none; }
.mnav-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-top: 1px solid var(--line); }
.mnav-foot a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--navy); }
.mnav-langs { display: flex; gap: 4px; }
.mnav-langs a { padding: 4px 9px; border-radius: 6px; font-size: .85em; font-weight: 700; color: var(--muted); }
.mnav-langs a.on { background: var(--navy); color: #fff; }
@media (min-width: 901px) { .mnav, .mnav-overlay { display: none !important; } }
@media (max-width: 600px) {
  /* compact header tier so logo + PDV + lang + cart + burger fit one row */
  .hdr-row { gap: 10px 6px; }
  .hdr-logo img { height: auto; max-height: 20px; max-width: 34vw; }
  .hdr-tools { gap: 6px; }
  .vat-toggle { gap: 4px; }
  .vt-track { width: 34px; }
  .vat-toggle input:checked + .vt-track::after { left: 15px; }
  .hdr-lang a { padding: 3px 5px; }
  .hdr-cart { padding: 4px; }
  .hdr-burger { padding: 4px; }
}
@media (max-width: 380px) {
  .vt-label { display: none; }   /* switch keeps its title tooltip */
}
@media (max-width: 560px) {
  .ft-grid { grid-template-columns: 1fr; }
}

/* mini-cart grouped by style, then by unit price */
/* the group rule sat right on the stepper below it */
.mc-group { border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; }
.mc-line:last-child { border-bottom: 0; padding-bottom: 4px; }
.mc-group:last-child { border-bottom: 0; }
.mc-ghead { display: flex; gap: 10px; align-items: center; }
.mc-gsum { font-size: .82em; color: var(--muted); margin-top: 2px; }
.mc-tier-head { font-size: .82em; padding: 6px 0 2px; border-top: 1px dashed var(--line); margin-top: 6px; }
/* the grouping rewrite dropped the bottom padding while .mc-line kept its
   border-bottom, so the stepper sat 1px off the rule between two variants */
.mc-line { display: flex; gap: 8px; align-items: flex-start; padding: 10px 0 12px; }
.mc-var { flex: 1; min-width: 0; }
/* callouts inside the drawer: tighter than on the cart page */
.mc-callouts .callout { margin-bottom: 8px; padding: 8px 10px; font-size: .85em; }

/* category icons (assets/img/categories/<slug>.svg) beside category names */
.cat-ico { display: inline-block; flex: none; vertical-align: -0.3em; }
.dd-panel a, .mnav-list a { display: flex; align-items: center; gap: 9px; }
/* icon-bearing nav links: tighter icon-to-label gap than the default 6/10px */
.nav-row > a.nav-sale, .nav-row > a.nav-novo { gap: 3px; }
.mnav-sale, .mnav-novo { gap: 7px; }
.cat-tile { display: inline-flex; align-items: center; gap: 9px; }
h1 .cat-ico { vertical-align: -0.18em; }

/* ---- cookie notice (informational, bottom-left) ---- */
.cookie-note { position: fixed; left: 16px; bottom: 16px; z-index: 998; max-width: 310px;
  display: flex; flex-direction: column; gap: 9px; padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 12px;
  background: var(--navy); color: #fff; font-size: 13px; line-height: 1.45;
  box-shadow: 0 6px 24px rgba(10, 37, 64, .4); }
.cookie-note[hidden] { display: none; }
.cookie-note p { margin: 0; }
.cookie-note a, .cookie-note a:visited { color: #fff; text-decoration: underline; }
.cookie-note a:hover { color: var(--teal); }
.cookie-note__ok { align-self: flex-start; background: var(--teal); color: #fff; border: 0;
  border-radius: 8px; padding: 6px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.cookie-note__ok:hover { background: var(--teal-dark); }

/* link-styled button (e.g. "Vrati proizvode u košaricu" on a cancelled payment) */
.ord-restore { display: inline; margin-left: 6px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
  color: var(--teal-dark); text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: var(--navy); }