/* =========================================================================
   BOKO — omotac: heder, fioka, footer, okvir strane, native dugmad, paneli.
   Vazi na SVAKOJ stranici gde je dizajn ukljucen, ne samo na proizvodima.

   Prefiks je `body.boko-design.boko-shell`. Druga klasa nema svoje znacenje —
   postoji iskljucivo da tezina selektora ostane (0,2,1), tacno kao kod
   ranijeg `body.boko-product-design.single-product`. Bez nje bi pravila
   pocela da gube od teme. Obe klase dodaje PHP zajedno.

   Generisano iz boko-product-design.css + -revision.css. Ne menjati rucno.
   ========================================================================= */

body.boko-design.boko-shell {
  --boko-alex-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --boko-alex-ink: #171717;
  --boko-alex-muted: #5c5c58;
  --boko-alex-line: #e4e4df;
  background-color: #fff;
}
body.boko-design.boko-shell #main-container {
  width: 100%;
  max-width: 1360px;
  padding: 32px 24px 64px;
}
body.boko-design.boko-shell #tbay-breadcrumb {
  background-color: #fff !important;
  border-bottom: 1px solid var(--boko-alex-line);
  padding-top: 18px;
  padding-bottom: 18px;
}
body.boko-design.boko-shell #tbay-breadcrumb > .container {
  max-width: 1360px;
}

@media (min-width: 992px) {
body.boko-design.boko-shell #main-container {
    padding-top: 44px;
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 479px) {
body.boko-design.boko-shell #main-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

body.boko-design.boko-shell {
  --tb-theme-color: #171717;
  --tb-theme-color-hover: #404040;
  --tb-link-color: #171717;
  --tb-link-hover-color: #525252;
  --tb-back-to-top-bg: #171717;
  --tb-back-to-top-color: #fff;
  --boko-alex-line: #e5e5e5;
  --boko-alex-muted: #737373;
  font-family: var(--boko-alex-font);
  color: #171717;
}
body.boko-design.boko-shell :is(h1,h2,h3,h4,p,label,input,select,textarea,button) { font-family: var(--boko-alex-font); }
body.boko-design.boko-shell :is(a,button,input,select,textarea,[tabindex]):focus-visible { outline: 2px solid #171717; outline-offset: 4px; }
body.boko-design.boko-shell .boko-alex-header {
  position: fixed; inset: 0 0 auto; z-index: 1030; height: 88px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 40px; background: rgb(255 255 255 / 92%); backdrop-filter: blur(12px);
  box-sizing: border-box; border: 0;
}
body.boko-design.boko-shell.admin-bar .boko-alex-header { top: 32px; }
body.boko-design.boko-shell .boko-alex-logo { display: inline-flex; align-items: center; }
body.boko-design.boko-shell .boko-alex-logo img { width: 112px; height: 48px; object-fit: contain; object-position: left; }
body.boko-design.boko-shell :is(.boko-alex-menu-toggle,.boko-alex-close) {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #171717;
}
body.boko-design.boko-shell .boko-alex-menu-toggle { position: absolute; left: 50%; transform: translateX(-50%); }
body.boko-design.boko-shell :is(.boko-alex-menu-toggle,.boko-alex-close) i { display: block; width: 24px; height: 1.5px; background: #171717; }
body.boko-design.boko-shell .boko-alex-close { position: relative; }
body.boko-design.boko-shell .boko-alex-close i { position: absolute; transform: rotate(45deg); }
body.boko-design.boko-shell .boko-alex-close i:last-child { transform: rotate(-45deg); }
body.boko-design.boko-shell :is(.boko-alex-inquiry,.boko-alex-drawer-cta) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
  padding: 12px 24px; border-radius: 999px; background: #171717; color: #fff;
  font: 500 14px/1.5 var(--boko-alex-font); text-decoration: none;
}
body.boko-design.boko-shell .boko-alex-drawer-backdrop { position: fixed; inset: 0; z-index: 1060; background: rgb(0 0 0 / 45%); backdrop-filter: blur(4px); }
body.boko-design.boko-shell .boko-alex-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 448px; max-width: 100%;
  z-index: 1070; background: #fff; padding: 20px 24px 40px; overflow-y: auto; box-sizing: border-box;
  color: #171717; box-shadow: -20px 0 80px rgb(0 0 0 / 8%);
}
body.boko-design.boko-shell :is(.boko-alex-drawer,.boko-alex-drawer-backdrop)[hidden] { display: none !important; }
body.boko-design.boko-shell .boko-alex-drawer-head { display: flex; align-items: center; justify-content: space-between; }
body.boko-design.boko-shell.admin-bar .boko-alex-drawer { top: 32px; }
body.boko-design.boko-shell .boko-alex-menu-links { list-style: none; margin: 40px 8px 0; padding: 0; }
body.boko-design.boko-shell .boko-alex-menu-links a { display: block; padding: 10px 0; font: 500 30px/1.4 var(--boko-alex-font); color: #171717; letter-spacing: -.035em; }
body.boko-design.boko-shell .boko-alex-menu-links a:hover { color: #737373; }
body.boko-design.boko-shell .boko-alex-drawer-cta { margin: 32px 8px 0; }
body.boko-design.boko-shell :is(.topbar-device-mobile,#tbay-mobile-smartmenu) { display: none !important; }
body.boko-design.boko-shell #tbay-header {
  display: block !important; position: relative !important; top: auto !important; z-index: auto;
  height: auto !important; padding: 96px 40px 0 !important; background: #fff !important; border: 0 !important;
  box-shadow: none !important; transform: none !important;
}
body.boko-design.boko-shell #tbay-header > .elementor > section:first-child,
body.boko-design.boko-shell #tbay-header .elementor-element-5936e71c,
body.boko-design.boko-shell #tbay-header .elementor-element-5c327995 { display: none !important; }
body.boko-design.boko-shell #tbay-header .elementor-element-4942623a {
  position: static !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: #fff !important; box-shadow: none !important;
}
body.boko-design.boko-shell #tbay-header :is(.elementor,.elementor-section,.elementor-container,.elementor-column,.elementor-widget-wrap,.elementor-widget) { z-index: auto; }
body.boko-design.boko-shell #tbay-header .elementor-element-4942623a > .elementor-container { max-width: 1280px; justify-content: flex-end; }
body.boko-design.boko-shell #tbay-header .elementor-element-5f9794fe { width: auto !important; }
body.boko-design.boko-shell #tbay-header .elementor-element-5f9794fe > .elementor-widget-wrap { padding: 0; gap: 8px; align-items: center; }
body.boko-design.boko-shell #tbay-header .elementor-element-5f9794fe .elementor-widget { margin: 0; }
body.boko-design.boko-shell #tbay-header :is(.btn-search-icon,.tbay-login > a,.mini-cart) {
  display: inline-flex; align-items: center; gap: 6px; min-width: 44px; height: 44px;
  padding: 10px 12px; background: #fff; color: #525252 !important; border: 1px solid #e5e5e5; border-radius: 999px;
  font: 400 13px/1.5 var(--boko-alex-font); box-shadow: none; position: relative;
}
body.boko-design.boko-shell #tbay-header :is(.btn-search-icon,.tbay-login > a,.mini-cart):hover { background: #fafafa; color: #171717 !important; }
body.boko-design.boko-shell #tbay-header :is(.btn-search-icon,.tbay-login > a,.mini-cart) i { display: none; }
body.boko-design.boko-shell #tbay-header .mini-cart-items { position: static; min-width: 18px; width: auto; height: 18px; margin: 0; padding: 0 4px; border-radius: 50%; background: #f5f5f5; color: #171717; font: 12px/18px var(--boko-alex-font); }
body.boko-design.boko-shell #tbay-header .cart-icon { display: flex; order: 2; }
body.boko-design.boko-shell .boko-alex-native-label { font: inherit; }
body.boko-design.boko-shell #tbay-breadcrumb { padding: 0 40px 16px; border: 0; margin: 0; }
body.boko-design.boko-shell #tbay-breadcrumb > .container { max-width: 1280px; padding: 0; }
body.boko-design.boko-shell #tbay-breadcrumb :is(a,li) { font: 400 12px/1.6 var(--boko-alex-font); color: #737373; }
body.boko-design.boko-shell #tbay-breadcrumb .breadscrumb-inner { border-bottom: 1px solid #e5e5e5; padding: 12px 0 20px; }
body.boko-design.boko-shell #tbay-breadcrumb .product-btn-icon::before { font-family: var(--boko-alex-font); content: "←"; }
body.boko-design.boko-shell #tbay-breadcrumb .right-icon .product-btn-icon::before { content: "→"; }
body.boko-design.boko-shell #tbay-breadcrumb .psnav { border: 1px solid #e5e5e5; border-radius: 16px; box-shadow: 0 12px 30px rgb(0 0 0 / 7%); }
body.boko-design.boko-shell #main-container { padding-top: 16px; }
body.boko-design.boko-shell :is(#back-to-top,#back-to-top-mobile) { background: #171717 !important; color: #fff !important; border-radius: 999px; border: 1px solid #171717; box-shadow: none; }
body.boko-design.boko-shell #tbay-footer { background: #0a0a0a; color: #fff; margin-top: 96px; padding: 64px 40px 24px; }
body.boko-design.boko-shell #tbay-footer > .elementor > section { background: transparent !important; padding: 0; margin: 0; border: 0; }
body.boko-design.boko-shell #tbay-footer .elementor-element-26720d9 > .elementor-container { display: grid; grid-template-columns: 1.2fr .8fr .8fr; grid-template-areas: "intro visit contact" "links news news"; gap: 48px; max-width: 1280px; }
body.boko-design.boko-shell #tbay-footer .boko-alex-footer-intro { grid-area: intro; }
body.boko-design.boko-shell #tbay-footer .elementor-element-e12917a { grid-area: contact; }
body.boko-design.boko-shell #tbay-footer .elementor-element-f4c4e46 { grid-area: visit; }
body.boko-design.boko-shell #tbay-footer .elementor-element-552b8c8 { grid-area: links; }
body.boko-design.boko-shell #tbay-footer .elementor-element-c02c20c { grid-area: news; border-top: 1px solid #333; padding-top: 28px; }
body.boko-design.boko-shell #tbay-footer > .elementor > section > .elementor-container > .elementor-column { width: auto !important; min-width: 0; }
body.boko-design.boko-shell #tbay-footer .elementor-widget-wrap { padding: 0; }
body.boko-design.boko-shell #tbay-footer :is(p,a,span,div,h2,h3) { font-family: var(--boko-alex-font); }
body.boko-design.boko-shell #tbay-footer :is(p,a,span,h2,h3,.elementor-widget-text-editor) { color: #d4d4d4 !important; }
body.boko-design.boko-shell #tbay-footer :is(h2,h3) { font-size: 11px !important; text-transform: uppercase; letter-spacing: .16em; line-height: 1.5; font-weight: 400 !important; margin: 0 0 16px; }
body.boko-design.boko-shell #tbay-footer :is(p,.elementor-widget-text-editor,.menu-vertical a) { font-size: 14px; line-height: 1.7; }
body.boko-design.boko-shell #tbay-footer .boko-alex-footer-intro p { color: #fff !important; font-size: 36px; font-weight: 600; line-height: 1.15; letter-spacing: -.035em; max-width: 400px; }
body.boko-design.boko-shell #tbay-footer .boko-alex-footer-intro a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: underline; text-underline-offset: 5px; margin-top: 16px; font-size: 14px; }
body.boko-design.boko-shell #tbay-footer .elementor-widget { margin-bottom: 14px; }
body.boko-design.boko-shell #tbay-footer .elementor-social-icons-wrapper { display: flex; flex-wrap: wrap; gap: 12px; }
body.boko-design.boko-shell #tbay-footer .elementor-social-icon { display: inline-flex; width: auto; height: auto; padding: 4px 0; background: none; font-size: 12px; }
body.boko-design.boko-shell #tbay-footer .elementor-social-icon i { display: none; }
body.boko-design.boko-shell #tbay-footer .elementor-social-icon .elementor-screen-only { position: static; width: auto; height: auto; clip: auto; overflow: visible; font-size: 12px; }
body.boko-design.boko-shell #tbay-footer .elementor-form { max-width: 600px; }
body.boko-design.boko-shell #tbay-footer .elementor-form input[type=email] { background: #171717; color: #fff; border: 1px solid #525252; border-radius: 14px; font-size: 16px; min-height: 52px; padding: 14px 16px; }
body.boko-design.boko-shell #tbay-footer .elementor-form button { min-height: 52px; border: 1px solid #fff; border-radius: 999px; background: #fff; color: #171717 !important; font: 500 14px/1.5 var(--boko-alex-font); }
body.boko-design.boko-shell #tbay-footer .elementor-form button span { color: #171717 !important; }
body.boko-design.boko-shell #tbay-footer .elementor-element-f68ac65 { margin-top: 40px; padding-top: 24px; border-top: 1px solid #333; }
body.boko-design.boko-shell #tbay-footer .elementor-element-f68ac65 > .elementor-container { max-width: 1280px; gap: 32px; justify-content: space-between; }
body.boko-design.boko-shell #tbay-footer .elementor-element-f68ac65 :is(div,a,p) { font-size: 12px; color: #a3a3a3 !important; }
body.boko-design.boko-shell #tbay-footer :is(a,button,input):focus-visible { outline-color: #fff; }
body.boko-design.boko-shell .sidebar-canvas-search .sidebar-content { z-index: 1055 !important; }
body.boko-design.boko-shell #tbay-header .cart-icon { width: auto !important; background: none !important; }
body.boko-design.boko-shell .sidebar-canvas-search button[type=submit] { width: auto; min-width: 74px; padding: 12px 16px; }
body.boko-design.boko-shell .sidebar-canvas-search button[type=submit] i { display: none; }
body.boko-design.boko-shell .sidebar-canvas-search button[type=submit]::after { content: "Search"; font: 500 13px/1.5 var(--boko-alex-font); color: #fff; }
body.boko-design.boko-shell #custom-login-wrapper .modal-content { border: 1px solid #e5e5e5; border-radius: 24px; box-shadow: 0 24px 80px rgb(0 0 0 / 15%); }
body.boko-design.boko-shell #custom-login-wrapper .create-account-button { border: 1px solid #d4d4d4; border-radius: 999px; background: #fff; color: #171717; min-height: 48px; font: 500 14px/1.5 var(--boko-alex-font); }
body.boko-design.boko-shell #custom-login-wrapper .btn-close i::before { content: "×"; font: 300 28px/1 var(--boko-alex-font); }
body.boko-design.boko-shell .tbay-offcanvas-cart .cart_empty::before { content: none; }
body.boko-design.boko-shell .tbay-offcanvas-cart .cart_empty { background-image: none; padding-top: 48px; }
body.boko-design.boko-shell #tbay-footer .heading-tbay-title .title { font: 400 11px/1.5 var(--boko-alex-font); letter-spacing: .16em; }
body.boko-design.boko-shell #tbay-footer .elementor-form input::placeholder { color: #a3a3a3; opacity: 1; }
body.boko-design.boko-shell #tbay-footer .elementor-form button i { display: none; }
body.boko-design.boko-shell #tbay-footer .elementor-form button .elementor-screen-only { position: static; width: auto; height: auto; clip: auto; overflow: visible; font: 500 14px/1.5 var(--boko-alex-font); }
body.boko-design.boko-shell #tbay-footer .elementor-nav-menu .elementor-item::after { content: none; }
body.boko-design.boko-shell :is(.tbay-offcanvas-cart,.sidebar-canvas-search,#custom-login-wrapper .modal-content) { background: #fff; color: #171717; font-family: var(--boko-alex-font); }
body.boko-design.boko-shell :is(.tbay-offcanvas-cart,.sidebar-canvas-search,#custom-login-wrapper) :is(input:not([type=checkbox]),.CaptionCont) { border: 1px solid #d4d4d4; border-radius: 14px; min-height: 48px; font-size: 16px; }
body.boko-design.boko-shell :is(.tbay-offcanvas-cart,.sidebar-canvas-search,#custom-login-wrapper) :is(.button,button[type=submit]) { background: #171717; color: #fff; border: 1px solid #171717; border-radius: 999px; padding: 12px 24px; font: 500 14px/1.5 var(--boko-alex-font); }
body.boko-design.boko-shell :is(.offcanvas-close,.btn-search-close) i::before { content: "×"; font: 300 28px/1 var(--boko-alex-font); }

@media (max-width: 991px) {
body.boko-design.boko-shell #tbay-footer .elementor-element-26720d9 > .elementor-container { grid-template-columns: 1fr 1fr; grid-template-areas: "intro intro" "visit contact" "links news"; gap: 32px; }
}

@media (max-width: 639px) {
body.boko-design.boko-shell .boko-alex-header { height: 80px; padding: 16px 20px; }
body.boko-design.boko-shell.admin-bar .boko-alex-header { top: 46px; }
body.boko-design.boko-shell.admin-bar .boko-alex-drawer { top: 46px; }
body.boko-design.boko-shell .boko-alex-logo img { width: 96px; }
body.boko-design.boko-shell .boko-alex-inquiry { display: none; }
body.boko-design.boko-shell .boko-alex-drawer { width: 100%; padding: 16px 24px 40px; }
body.boko-design.boko-shell .boko-alex-menu-links a { font-size: 24px; }
body.boko-design.boko-shell #tbay-header { padding: 88px 20px 0 !important; }
body.boko-design.boko-shell #tbay-breadcrumb { padding: 0 20px 8px; }
body.boko-design.boko-shell #tbay-breadcrumb .product-nav-icon { display: flex !important; }
body.boko-design.boko-shell #tbay-footer { padding: 56px 20px 24px; margin-top: 64px; }
body.boko-design.boko-shell #tbay-footer .elementor-element-26720d9 > .elementor-container { grid-template-columns: 1fr; grid-template-areas: "intro" "visit" "contact" "links" "news"; }
body.boko-design.boko-shell #tbay-footer .boko-alex-footer-intro p { font-size: 30px; }
body.boko-design.boko-shell #tbay-footer .elementor-element-f68ac65 > .elementor-container { flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
body.boko-design.boko-shell :is(.boko-alex-header,.boko-alex-drawer,.boko-alex-drawer-backdrop) { transition: none; }
}

body.boko-design.boko-shell .wrapper-container {
  overflow-x: clip;
  overflow-y: visible;
}

body.boko-design.boko-shell #main-container { padding-top: 4px; padding-bottom: 24px; }
body.boko-design.boko-shell #tbay-breadcrumb { padding-bottom: 4px; }
body.boko-design.boko-shell #tbay-footer { margin-top: 32px; padding-top: 32px; }
body.boko-design.boko-shell #tbay-footer {
  padding: 72px 40px 32px;
}
body.boko-design.boko-shell #tbay-footer :is(h2,h3,.boko-eyebrow) {
  font-size: 12px !important;
  letter-spacing: .2em;
  color: #737373 !important;
  margin: 0 0 18px;
}
body.boko-design.boko-shell #tbay-footer :is(p,span,.elementor-widget-text-editor) {
  color: #a3a3a3 !important;
  line-height: 1.7;
}
body.boko-design.boko-shell #tbay-footer :is(a,.boko-link) {
  color: #fff !important;
  text-underline-offset: 4px;
}
body.boko-design.boko-shell #tbay-footer :is(a,.boko-link):hover {
  color: #fff !important;
  text-decoration: underline;
}
body.boko-design.boko-shell #tbay-footer .boko-alex-footer-intro p {
  color: #fff !important;
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  max-width: 28ch;
  margin: 0;
}
body.boko-design.boko-shell #tbay-footer .boko-alex-footer-intro a {
  display: inline-block;
  margin-top: 28px;
  text-decoration: underline;
}
body.boko-design.boko-shell #tbay-footer input[type="email"],
body.boko-design.boko-shell #tbay-footer input[type="text"] {
  border-radius: 999px;
  border-color: #3f3f3f;
  padding-left: 20px;
}
body.boko-design.boko-shell #tbay-footer button[type="submit"],
body.boko-design.boko-shell #tbay-footer input[type="submit"] {
  border-radius: 999px;
}
body.boko-design.boko-shell #tbay-footer img[alt="Accepted payment methods"] {
  display: none;
}
body.boko-design.boko-shell #tbay-footer > .elementor > section:last-of-type {
  max-width: 1280px;
  margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 15%);
}
body.boko-design.boko-shell #tbay-footer > .elementor > section:last-of-type :is(p,span,a) {
  font-size: 14px !important;
}
body.boko-design.boko-shell #tbay-footer .boko-alex-credit-place {
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid rgb(255 255 255 / 22%);
}

@media (min-width: 992px) {
body.boko-design.boko-shell #tbay-header .elementor-widget-wrap:has(a.mini-cart) {
    position: fixed;
    top: 22px;                 
    right: 208px;              
    z-index: 1031;             
    width: auto;
    gap: 4px;
    align-items: center;
  }
body.boko-design.boko-shell.admin-bar #tbay-header .elementor-widget-wrap:has(a.mini-cart) {
    top: 54px;
  }
}

body.boko-design.boko-shell .boko-alex-native-label {
  font-family: var(--boko-alex-font);
  font-size: 13px;
  font-weight: 500;
  color: #171717;
  white-space: nowrap;
}

/* --- Native dugmad dok je fioka otvorena --------------------------------
   Search / Account / Cart su unutar #tbay-header, a tema na njemu pravi
   sopstveni stacking context. Zbog toga njihov z-index: 1031 NE ulazi u
   poredjenje sa fiokom (1070) — brojevi se porede samo unutar istog
   konteksta. Posledica: dugmad su se crtala PREKO otvorene fioke.

   Ne diramo z-index teme, rizik po ceo heder. Gasimo ih dok je fioka
   otvorena; ona ionako ima svoju navigaciju.

   Kljuc je klasa `boko-drawer-open` koju JS upisuje na <body>.
   Prvi pokusaj je koristio `body:has(#drawer[data-open="true"])` i NIJE
   radio — na :has() nad <body> se ne moze racunati kad se atribut menja
   dinamicki. Klasa je deterministicka. */
body.boko-drawer-open #tbay-header .elementor-widget-wrap:has(a.mini-cart) {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

/* Featured-only cards with the same subtle zoom as Shop; never galleries. */
body:is(.boko-shop, .single-product) .product-block img.image-hover {
  display: none !important;
}
body:is(.boko-shop, .single-product) .product-block img.image-effect,
body:is(.boko-shop, .single-product) .product-block:hover img.image-effect {
  opacity: 1 !important;
  visibility: visible !important;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1) !important;
  animation: none !important;
  transform: scale(1) !important;
}
body:is(.boko-shop, .single-product) .product-block:hover img.image-effect {
  transform: scale(1.035) !important;
}