/* Hitra ketna — header mini cart (Option B: trigger expands in place into an
   overlay panel). Self-contained so it works without Breakdance's WooCommerce
   styling. Aleo + Merriweather Sans are served globally by Breakdance. */

.hk-mc{
  --am:#d9962b; --amd:#f0ad44; --ink:#F3EEE6; --mut:#ABA399;
  --card:#232019; --card2:#2c281f; --ln:#3a342b; --onam:#16120c;
  position:relative; display:inline-block;
  font-family:'Merriweather Sans',system-ui,sans-serif;
}

/* --- trigger ------------------------------------------------------------ */
.hk-mc-trigger{
  display:inline-flex; align-items:center; gap:9px;
  background:transparent; border:1px solid var(--am); border-radius:10px;
  padding:9px 13px; cursor:pointer; color:var(--ink); font:inherit; line-height:1;
}
.hk-mc-ico{ position:relative; display:inline-flex; color:var(--amd); }
.hk-mc-cart{ display:block; }
.hk-mc-count{
  position:absolute; top:-8px; right:-9px; min-width:16px; height:16px;
  background:var(--am); color:var(--onam); border-radius:9px;
  font-family:'Merriweather Sans',sans-serif; font-size:10.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}
.hk-mc-count[hidden]{ display:none; }
.hk-mc-total{ font-family:'Aleo',Georgia,serif; font-weight:700; font-size:14px; color:var(--ink); }
.hk-mc-total .amount{ color:inherit; }

/* --- panel (overlays the trigger + page) -------------------------------- */
.hk-mc-panel{
  position:absolute; top:0; right:0; z-index:1000;
  width:322px; max-width:calc(100vw - 32px);
  background:var(--card); border:1px solid var(--am); border-radius:14px;
  overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,.5);
  transform-origin:top right;
  animation:hk-mc-in .16s cubic-bezier(.2,.7,.3,1);
}
.hk-mc-panel[hidden]{ display:none; }
@keyframes hk-mc-in{
  from{ opacity:0; transform:translateY(-6px) scale(.985); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .hk-mc-panel{ animation:none; }
}

.hk-mc-head{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--card2); padding:11px 14px;
}
.hk-mc-head-l{ display:inline-flex; align-items:center; gap:10px; }
.hk-mc-close{
  background:none; border:0; color:var(--mut); cursor:pointer;
  font-size:20px; line-height:1; padding:0; display:inline-flex;
}
.hk-mc-close:hover{ color:var(--amd); }

.hk-mc-label{
  padding:12px 15px 2px; font-family:'Aleo',Georgia,serif; font-weight:700;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut);
}
.hk-mc-label[hidden]{ display:none; }

/* --- native WooCommerce mini-cart, restyled ----------------------------- */
.hk-mc .widget_shopping_cart_content{ color:var(--ink); }

.hk-mc ul.woocommerce-mini-cart{
  list-style:none; margin:0; padding:0 15px; max-height:320px; overflow-y:auto;
}
.hk-mc li.woocommerce-mini-cart-item{
  position:relative; display:flex; text-align:left;
  padding:12px 0 12px 20px; border-top:1px solid var(--ln);
}
.hk-mc ul.woocommerce-mini-cart li.woocommerce-mini-cart-item:first-child{ border-top:0; }
.hk-mc li.woocommerce-mini-cart-item a.remove{
  position:absolute; left:0; top:12px; width:18px; height:18px;
  display:flex; align-items:center; justify-content:flex-start;
  color:var(--mut)!important; font-size:15px; line-height:1; text-decoration:none;
  border-radius:50%; background:transparent!important;
}
.hk-mc li.woocommerce-mini-cart-item a.remove:hover{ color:var(--amd)!important; }
.hk-mc li.woocommerce-mini-cart-item .hk-mc-name,
.hk-mc li.woocommerce-mini-cart-item > a:not(.remove){
  display:block; font-size:13px; font-weight:600; line-height:1.3;
  color:var(--ink); text-decoration:none;
}
.hk-mc li.woocommerce-mini-cart-item img{ display:none; }
.hk-mc li.woocommerce-mini-cart-item .quantity{
  display:block; float:none; margin-top:3px; margin-left:auto; font-size:11.5px; color:var(--mut); text-align:left;
}
/* variation meta (e.g. Dolžina / Vključeno): compact, muted, left-aligned */
.hk-mc li.woocommerce-mini-cart-item dl.variation{
  display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; margin:4px 0 0; padding:0; font-size:11px; line-height:1.45; color:var(--mut);
}
.hk-mc li.woocommerce-mini-cart-item dl.variation dt{
  display:inline; float:none; margin:0; font-weight:400; color:var(--mut);
}
.hk-mc li.woocommerce-mini-cart-item dl.variation dt::after{ content:"\00a0"; }
.hk-mc li.woocommerce-mini-cart-item dl.variation dd{
  display:inline; margin:0 6px 0 0; color:var(--mut);
}
.hk-mc li.woocommerce-mini-cart-item dl.variation dd p{ display:inline; margin:0; }
.hk-mc li.woocommerce-mini-cart-item .quantity .amount{ color:var(--mut); }

.hk-mc .woocommerce-mini-cart__empty-message{
  margin:0; padding:18px 15px; text-align:center; color:var(--mut); font-size:13px;
}

.hk-mc .woocommerce-mini-cart__total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin:0; padding:13px 15px; border-top:1px solid var(--ln);
  font-family:'Aleo',Georgia,serif; font-weight:700; font-size:14px; color:var(--ink);
}
.hk-mc .woocommerce-mini-cart__total strong{ font-weight:700; }
.hk-mc .woocommerce-mini-cart__total .amount{ color:var(--amd); font-weight:800; font-size:16px; }

.hk-mc .woocommerce-mini-cart__buttons{
  margin:0; padding:4px 15px 15px; display:flex; flex-direction:column; gap:9px;
}
/* Styled by position (not class) so it works whatever the buttons' markup is:
   first = outline "Prikaži košarico", last = filled "Zaključek nakupa". */
.hk-mc .woocommerce-mini-cart__buttons a{
  display:block !important; text-align:center; border-radius:10px !important; padding:13px !important;
  line-height:1; font-family:'Aleo',Georgia,serif; font-weight:700; font-size:14.5px;
  text-decoration:none; border:1px solid var(--am) !important;
}
.hk-mc .woocommerce-mini-cart__buttons a:first-child{
  background:transparent !important; color:var(--amd) !important;
}
.hk-mc .woocommerce-mini-cart__buttons a:last-child,
.hk-mc .woocommerce-mini-cart__buttons a:only-child{
  background:var(--am) !important; color:var(--onam) !important;
}
.hk-mc .woocommerce-mini-cart__buttons .button.hk-mc-view:hover{ background: var(--am) !important; color:#1a1712 !important; }
.hk-mc .woocommerce-mini-cart__buttons .button.checkout:hover{ background: var(--amd) !important; }

/* --- narrow screens ----------------------------------------------------- */
@media (max-width:420px){
  .hk-mc-panel{ width:calc(100vw - 24px); }
}