/* ==========================================================================
   Lonci & Poklopci — mobilni off-canvas meni
   Breakpoint: 921px (keep in sync with lp_drawer_breakpoint() in PHP)
   ========================================================================== */

#lp-drawer{
  --lp-red:#FF2800;
  --lp-red-ink:#D92100;
  --lp-ink:#2D2D2D;
  --lp-ink-2:#5C564D;
  --lp-ink-3:#8A8073;
  --lp-line:#ECE4D8;
  --lp-line-soft:#F1EDE6;
  --lp-cream:#FAF5EC;
  --lp-cream-2:#FFF6F3;
}

/* ---------- shell ---------- */

#lp-drawer-backdrop{
  position:fixed; inset:0; z-index:99998;
  background:rgba(45,45,45,.5);
  opacity:0; transition:opacity .26s ease;
  -webkit-tap-highlight-color:transparent;
}
#lp-drawer-backdrop.is-open{ opacity:1; }

#lp-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:99999;
  width:min(88vw,420px);
  display:flex; flex-direction:column;
  background:#fff;
  color:var(--lp-ink);
  font-size:16px;
  box-shadow:-16px 0 40px -18px rgba(45,45,45,.5);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  overscroll-behavior:contain;
}
#lp-drawer.is-open{ transform:translateX(0); }

/* [hidden] must not beat the flex display */
#lp-drawer[hidden],
#lp-drawer-backdrop[hidden]{ display:none; }

html.lp-drawer-open{ overflow:hidden; }

/* ---------- top bar ---------- */

#lp-drawer .lp-topbar{
  flex:0 0 auto;
  background:var(--lp-ink); color:#EDE7DE;
  font-size:11.5px; font-weight:500; line-height:1.4;
  text-align:center; padding:8px 12px;
  padding-top:calc(8px + env(safe-area-inset-top));
}

/* ---------- header ---------- */

#lp-drawer .lp-head{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px 10px 16px;
  border-bottom:1px solid var(--lp-line-soft);
}
#lp-drawer .lp-mark{ display:flex; align-items:center; text-decoration:none; }
#lp-drawer .lp-mark img{ height:38px; width:auto; max-width:190px; display:block; }
#lp-drawer .lp-mark-text{
  background:var(--lp-red); color:#fff; font-weight:700; font-size:13px;
  padding:9px 14px; border-radius:999px; line-height:1;
}
#lp-drawer .lp-head-actions{ display:flex; align-items:center; gap:2px; }

#lp-drawer .lp-iconbtn{
  position:relative;
  width:42px; height:42px;
  display:grid; place-items:center;
  border:0; background:transparent; border-radius:12px;
  color:var(--lp-ink); cursor:pointer; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
#lp-drawer .lp-iconbtn:hover{ background:var(--lp-cream); }
#lp-drawer .lp-iconbtn:focus-visible{ outline:2px solid var(--lp-red); outline-offset:-2px; }
#lp-drawer .lp-iconbtn svg{ width:21px; height:21px; }

#lp-drawer .lp-cart-badge{
  position:absolute; top:5px; right:5px;
  min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; background:var(--lp-red); color:#fff;
  font-size:9.5px; font-weight:700; line-height:17px; text-align:center;
}
#lp-drawer .lp-cart-badge[data-empty]{ display:none; }

/* ---------- scroll area ---------- */

#lp-drawer .lp-scroll{
  flex:1 1 auto;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* ---------- search ---------- */

#lp-drawer .lp-searchwrap{
  position:sticky; top:0; z-index:5;
  background:#fff; padding:12px 16px 14px;
  border-bottom:1px solid var(--lp-line-soft);
}
#lp-drawer .lp-search{
  display:flex; align-items:center; gap:10px;
  height:46px; padding:0 6px 0 14px;
  background:var(--lp-cream); border:1px solid var(--lp-line); border-radius:12px;
}
#lp-drawer .lp-search > svg{ color:#A79E90; flex:0 0 auto; }
#lp-drawer .lp-search input[type="search"]{
  flex:1 1 auto; min-width:0; height:44px;
  border:0; background:transparent; box-shadow:none; outline:none;
  font-size:14.5px; color:var(--lp-ink); padding:0;
}
#lp-drawer .lp-search input[type="search"]::placeholder{ color:#A79E90; }
#lp-drawer .lp-search button{
  flex:0 0 auto;
  width:34px; height:34px; padding:0;
  display:grid; place-items:center;
  border:0; border-radius:9px; background:var(--lp-red); color:#fff; cursor:pointer;
}
#lp-drawer .lp-search button svg{ width:16px; height:16px; }

/* FiboSearch, if present */
#lp-drawer .dgwt-wcas-search-wrapp{ max-width:100%; }
#lp-drawer .dgwt-wcas-search-form{ margin:0; }
#lp-drawer .dgwt-wcas-search-input{
  background:var(--lp-cream) !important;
  border:1px solid var(--lp-line) !important;
  border-radius:12px !important;
  height:46px !important;
  font-size:14.5px !important;
}

/* ---------- promo ---------- */

#lp-drawer .lp-promo{
  margin:14px 16px 4px;
  background:var(--lp-cream-2); border:1px solid #FFD4C9; border-radius:14px;
  overflow:hidden;
}
#lp-drawer .lp-promo-top{ display:flex; align-items:center; gap:10px; padding:13px 14px 11px; }
#lp-drawer .lp-promo-top .lp-fl{
  flex:0 0 auto; width:30px; height:30px; border-radius:9px;
  background:var(--lp-red); color:#fff; display:grid; place-items:center;
}
#lp-drawer .lp-promo-top .lp-fl svg{ width:17px; height:17px; }
#lp-drawer .lp-promo-top h3{ margin:0; font-size:15px; font-weight:600; color:var(--lp-ink); line-height:1.3; }
#lp-drawer .lp-promo-top p{ margin:2px 0 0; font-size:11.5px; color:var(--lp-ink-3); line-height:1.4; }

#lp-drawer .lp-chips{ display:flex; flex-wrap:wrap; gap:7px; padding:0 14px 13px; }
#lp-drawer .lp-chip{
  font-size:12px; font-weight:500; white-space:nowrap;
  color:var(--lp-red-ink); background:#fff;
  border:1px solid #FFD4C9; border-radius:999px;
  padding:6px 11px; text-decoration:none;
}
#lp-drawer .lp-chip:hover,
#lp-drawer .lp-chip:focus{ background:var(--lp-red); border-color:var(--lp-red); color:#fff; }

/* ---------- category rows ---------- */

#lp-drawer .lp-list{ margin:10px 8px 0; padding:0 8px; }

#lp-drawer .lp-row{
  width:100%; min-height:54px;
  display:flex; align-items:center; gap:13px;
  padding:0; margin:0;
  background:transparent; border:0; border-bottom:1px solid var(--lp-line-soft);
  font-family:inherit; font-size:15.5px; color:var(--lp-ink); text-align:left;
  text-decoration:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#lp-drawer .lp-row:last-child{ border-bottom:0; }
#lp-drawer .lp-row:focus-visible{ outline:2px solid var(--lp-red); outline-offset:-3px; border-radius:8px; }

#lp-drawer .lp-ic{
  flex:0 0 auto; width:34px; height:34px;
  display:grid; place-items:center;
  background:var(--lp-cream); border-radius:10px; color:var(--lp-red-ink);
  transition:background .18s ease, color .18s ease;
}
#lp-drawer .lp-lbl{ flex:1 1 auto; min-width:0; font-weight:500; line-height:1.3; }
#lp-drawer .lp-cnt{ flex:0 0 auto; font-size:12px; font-weight:500; color:#B4AB9C; }
#lp-drawer .lp-chev{ flex:0 0 auto; color:#BDB4A6; display:grid; place-items:center; transition:transform .22s ease; }
#lp-drawer .lp-chev svg{ width:17px; height:17px; stroke-width:2.2; }

#lp-drawer .lp-row.is-active .lp-lbl{ color:var(--lp-red-ink); font-weight:600; }
#lp-drawer .lp-toggle[aria-expanded="true"]{ border-bottom-color:transparent; }
#lp-drawer .lp-toggle[aria-expanded="true"] .lp-ic{ background:var(--lp-red); color:#fff; }
#lp-drawer .lp-toggle[aria-expanded="true"] .lp-chev{ transform:rotate(180deg); color:var(--lp-red); }

/* ---------- submenu ---------- */

#lp-drawer .lp-sub{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .26s ease;
}
#lp-drawer .lp-sub[data-open="true"]{ grid-template-rows:1fr; }
#lp-drawer .lp-sub > div{ overflow:hidden; }

#lp-drawer .lp-subinner{
  background:var(--lp-cream); border-radius:12px;
  padding:6px 8px 8px; margin:0 0 10px;
}
#lp-drawer .lp-subinner a{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 12px; border-radius:8px;
  font-size:14px; line-height:1.35; color:var(--lp-ink-2); text-decoration:none;
}
#lp-drawer .lp-subinner a:hover,
#lp-drawer .lp-subinner a:focus{ background:#fff; color:var(--lp-ink); }
#lp-drawer .lp-subinner a.is-active{ color:var(--lp-red-ink); font-weight:600; }
#lp-drawer .lp-subinner .lp-n{ font-size:11.5px; color:#B4AB9C; }
#lp-drawer .lp-subinner .lp-all{ color:var(--lp-red-ink); font-weight:600; font-size:13.5px; }

/* ---------- secondary links ---------- */

#lp-drawer .lp-sec{
  margin:16px 16px 0; padding-top:6px;
  border-top:1px solid var(--lp-line);
}
#lp-drawer .lp-sec a{
  display:flex; align-items:center; gap:12px;
  padding:11px 0;
  font-size:14px; color:var(--lp-ink-2); text-decoration:none;
}
#lp-drawer .lp-sec a svg{ flex:0 0 auto; width:17px; height:17px; color:#A79E90; }
#lp-drawer .lp-sec a:hover,
#lp-drawer .lp-sec a:focus{ color:var(--lp-red-ink); }
#lp-drawer .lp-sec a:hover svg{ color:var(--lp-red-ink); }

/* ---------- footer ---------- */

#lp-drawer .lp-foot{
  margin-top:18px;
  padding:18px 16px calc(22px + env(safe-area-inset-bottom));
  background:var(--lp-cream); border-top:1px solid var(--lp-line);
}
#lp-drawer .lp-foot-grid{ display:flex; gap:10px; }
#lp-drawer .lp-foot-grid a{
  flex:1 1 0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 8px; border-radius:11px;
  font-size:13.5px; font-weight:600; text-decoration:none;
}
#lp-drawer .lp-foot-grid a svg{ width:15px; height:15px; }
#lp-drawer .lp-call{ background:var(--lp-red); color:#fff; }
#lp-drawer .lp-mail{ background:#fff; border:1px solid var(--lp-line); color:var(--lp-ink); }

#lp-drawer .lp-hours{
  margin:12px 0 0;
  font-size:11.5px; line-height:1.6; color:var(--lp-ink-3); text-align:center;
}
#lp-drawer .lp-social{ display:flex; justify-content:center; gap:16px; margin-top:14px; }
#lp-drawer .lp-social a{ color:var(--lp-ink-3); line-height:0; }
#lp-drawer .lp-social a:hover{ color:var(--lp-red-ink); }

/* ==========================================================================
   Desktop: never show. Astra's own off-canvas: never show on mobile.
   ========================================================================== */

@media (min-width:922px){
  #lp-drawer,
  #lp-drawer-backdrop{ display:none !important; }
}

@media (max-width:921px){
  .ast-mobile-popup-drawer,
  #ast-mobile-popup{ display:none !important; }
}

@media (prefers-reduced-motion:reduce){
  #lp-drawer,
  #lp-drawer-backdrop,
  #lp-drawer .lp-sub,
  #lp-drawer .lp-chev{ transition:none !important; }
}