/*! LILIOR | Napis na krabicku | detail produktu | v7 rebrand */
.lxb{
  --lxb-green:#6F4D86;   /* nazev promenne zustava kvuli JS, barva je fialova */
  --lxb-rose:#E494AD;
  --lxb-rose-soft:#fbe6ee;
  --lxb-blush:#f7f3f9;
  --lxb-ink:#26222a;
  --lxb-muted:#67606d;
  --lxb-line:#e6ddeb;
  --lxb-error:#b3261e;
  box-sizing:border-box;
  container-type:inline-size;
  margin:16px 0;
  border:1px solid var(--lxb-line);
  border-radius:16px;
  background:#fff;
  color:var(--lxb-ink);
  font-family:inherit;
  line-height:1.5;
  transition:border-color .2s, box-shadow .2s;
}
.lxb *,.lxb *::before,.lxb *::after{box-sizing:border-box}
.lxb :where(p,span,label){margin:0;padding:0}
.lxb[data-on="true"]{border-color:var(--lxb-green);box-shadow:0 0 0 1px var(--lxb-green)}
.lxb.is-error{border-color:var(--lxb-error);box-shadow:0 0 0 1px var(--lxb-error)}

/* hlavicka */
.lxb__head{display:flex;align-items:center;gap:4px;padding-right:14px}
.lxb__toggle{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:14px;
  margin:0;
  padding:14px 10px 14px 16px;
  border:0;
  border-radius:15px;
  background:transparent;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.lxb__toggle:focus-visible,.lxb__info:focus-visible{outline:2px solid var(--lxb-green);outline-offset:2px}
.lxb__switch{
  position:relative;
  flex:none;
  width:44px;height:26px;
  border-radius:13px;
  background:#d9d2de;
  transition:background-color .2s;
}
.lxb__switch::after{
  content:"";
  position:absolute;
  top:3px;left:3px;
  width:20px;height:20px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.lxb[data-on="true"] .lxb__switch{background:var(--lxb-green)}
.lxb[data-on="true"] .lxb__switch::after{transform:translateX(18px)}
.lxb__intro{flex:1;min-width:0;display:flex;flex-direction:column}
.lxb__titlerow{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:2px}
.lxb__title{font-weight:700;font-size:16px;color:var(--lxb-green)}
.lxb__desc{font-size:14px;color:var(--lxb-muted)}
.lxb__price{
  flex:none;
  padding:1px 9px;
  border-radius:999px;
  background:var(--lxb-rose-soft);
  font-weight:700;
  font-size:13px;
  color:var(--lxb-green);
  white-space:nowrap;
}
.lxb__info{
  flex:none;
  display:grid;
  place-items:center;
  width:30px;height:30px;
  margin:0;
  padding:0;
  border:1.5px solid var(--lxb-green);
  border-radius:50%;
  background:#fff;
  font:inherit;
  font-size:15px;
  font-weight:700;
  line-height:1;
  color:var(--lxb-green);
  cursor:pointer;
  transition:background-color .2s,color .2s;
}
.lxb__info:hover{background:var(--lxb-green);color:#fff}

/* telo */
.lxb__body{
  display:flex;
  gap:20px;
  align-items:flex-start;
  margin:0 16px 16px;
  padding:16px;
  border-radius:12px;
  background:var(--lxb-blush);
}
.lxb__body[hidden]{display:none}

.lxb__preview{flex:none;width:150px}
.lxb__svg{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 10px rgba(30,30,34,.22))}
.lxb__svgtext{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-weight:700;letter-spacing:.02em}
.lxb__svg.is-placeholder .lxb__row{opacity:.4}

.lxb__fields{flex:1;min-width:0}
.lxb__field + .lxb__field{margin-top:10px}
.lxb__label{display:block;margin-bottom:4px;font-size:14px;font-weight:600;color:var(--lxb-green)}
.lxb__inputwrap{position:relative}
.lxb .lxb__input{
  display:block;
  width:100%;
  height:44px;
  margin:0;
  padding:0 56px 0 12px;
  border:1px solid #d6cbdd;
  border-radius:10px;
  background:#fff;
  font:inherit;
  font-size:16px;
  letter-spacing:.04em;
  color:var(--lxb-ink);
  box-shadow:none;
}
.lxb--upper .lxb__input{text-transform:uppercase}
.lxb--upper .lxb__input::placeholder{text-transform:none}
.lxb .lxb__input:focus{outline:none;border-color:var(--lxb-green);box-shadow:0 0 0 3px var(--lxb-rose-soft)}
.lxb .is-empty-error .lxb__input{border-color:var(--lxb-error)}
.lxb__count{
  position:absolute;
  right:12px;top:50%;
  transform:translateY(-50%);
  font-size:13px;
  font-variant-numeric:tabular-nums;
  color:var(--lxb-muted);
  pointer-events:none;
}
.lxb__hint{margin-top:10px !important;font-size:13px;color:var(--lxb-muted)}
.lxb__error{margin-top:8px !important;font-size:14px;font-weight:600;color:var(--lxb-error)}
.lxb__error[hidden]{display:none}

.lxb-native-hidden{display:none !important}

@container (max-width:460px){
  .lxb__head{padding-right:12px}
  .lxb__toggle{padding:12px 8px 12px 14px;gap:12px}
  .lxb__body{flex-direction:column;align-items:stretch;margin:0 12px 12px;padding:14px}
  .lxb__preview{align-self:center;width:170px}
}

/* fotka skutecne krabicky */
.lxb-dialog{
  box-sizing:border-box;
  width:min(640px,calc(100vw - 24px));
  max-height:calc(100dvh - 24px);
  margin:auto;
  padding:0;
  border:0;
  border-radius:18px;
  background:#fff;
  color:#26222a;
  font-family:inherit;
  overflow:auto;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.45);
}
.lxb-dialog::backdrop{background:rgba(28,20,34,.6)}
.lxb-dialog[open]{animation:lxb-in .22s ease-out}
@keyframes lxb-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.lxb-dialog__frame{position:relative}
.lxb-dialog__img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#e9e6e7}
.lxb-dialog__text{padding:18px 22px 22px}
.lxb-dialog__text p{margin:0;font-size:15px;line-height:1.55;color:#67606d}
.lxb-dialog .lxb-dialog__title{margin-bottom:4px;font-size:18px;font-weight:700;color:#6F4D86}
.lxb-dialog__close{
  position:absolute;
  top:12px;right:12px;
  display:grid;place-items:center;
  width:40px;height:40px;
  margin:0;padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.lxb-dialog__close svg{width:20px;height:20px;stroke:#6F4D86;stroke-width:2.2;stroke-linecap:round;fill:none}
.lxb-dialog__close:focus-visible{outline:2px solid #6F4D86;outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .lxb,.lxb *,.lxb *::after{transition:none !important}
  .lxb-dialog[open]{animation:none}
}