/* Tiny Toes Capačky · dizajnové tokeny a komponenty */
:root{
  --mint:#B5CFC7;      /* farba pozadia pôvodného webu */
  --mint-l:#E4EEEA;    /* svetlá eukalyptová */
  --mint-xl:#F3F8F6;   /* takmer biela s nádychom */
  --white:#FFFFFF;
  --slate:#4F5F5D;     /* kruh v logu, nadpisy */
  --slate-d:#3C4947;
  --ink:#2C3735;       /* text */
  --ink2:#5B6966;      /* sekundárny text */
  --thread:#B23F3A;    /* červená niť a capačky v logu */
  --thread-l:#F6E3E1;
  --line:#CFDED8; --line-d:#9FB9B0;
  --err:#B3261E; --err-l:#FCEDEB; --ok:#3F6B57;
  --f-d:'Caveat Brush','Caveat',cursive; --f-b:'Nunito',system-ui,sans-serif; --f-h:'Caveat',cursive;
}
.tt{font-family:var(--f-b);color:var(--ink);background:var(--mint-xl);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.tt *{box-sizing:border-box}
.tt h1,.tt h2,.tt h3{font-family:var(--f-d);font-weight:400;line-height:1.05;margin:0;color:var(--slate)}
.tt h4{font-family:var(--f-b);font-weight:800;font-size:18px;margin:0;color:var(--ink);line-height:1.3}
.tt h1{font-size:76px}.tt h2{font-size:54px}.tt h3{font-size:34px}
.tt p{margin:0}
.tt em.fx{font-style:normal;color:var(--thread)}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px;width:100%}
.sec{padding:96px 0}
.hand{font-family:var(--f-h);font-size:30px;line-height:1;color:var(--thread);font-weight:700}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.lead{font-size:20px;color:var(--ink2);max-width:640px}
.muted{color:var(--ink2)}
.bg-mint{background:var(--mint)}
.bg-mint-l{background:var(--mint-l)}
.bg-white{background:var(--white)}
.stitch{outline:2px dashed var(--line-d);outline-offset:-10px}
.seam{border:0;border-top:2px dashed var(--line);margin:0}
.thread-line{height:2px;background:repeating-linear-gradient(90deg,var(--thread) 0 10px,transparent 10px 18px)}
/* srdiečkový zoznam z letáku */
.hearts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hearts li{display:flex;gap:12px;align-items:flex-start}
.hearts li::before{content:"";flex:none;width:16px;height:16px;margin-top:5px;background:var(--slate);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 6-8 11-8 11z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 6-8 11-8 11z'/%3E%3C/svg%3E") center/contain no-repeat}
/* krajčírsky meter */
.tape{height:30px;border-radius:4px;background-color:#FBFAF4;background-image:repeating-linear-gradient(90deg,var(--slate) 0 2px,transparent 2px 60px),repeating-linear-gradient(90deg,rgba(79,95,93,.55) 0 1px,transparent 1px 12px);background-size:100% 100%,100% 40%;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px var(--line)}
/* fotky v kruhu so širokým rámom, ako na letáku */
.ring{border-radius:50%;overflow:hidden;box-shadow:0 0 0 10px var(--slate);background:var(--white)}
.ring img,.ph img{width:100%;height:100%;object-fit:cover;display:block}
/* tlačidlá */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font:800 16px/1 var(--f-b);text-decoration:none;border:0;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s,color .15s;white-space:nowrap}
.btn-p{background:var(--slate);color:#fff;outline:1.5px dashed rgba(255,255,255,.55);outline-offset:-6px}
.btn-p:hover,.btn-p.is-hover{background:var(--slate-d);transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(44,55,53,.6)}
.btn-s{background:var(--white);color:var(--slate);box-shadow:inset 0 0 0 2px var(--slate)}
.btn-s:hover,.btn-s.is-hover{background:var(--slate);color:#fff}
.btn-l{min-height:44px;padding:0 4px;background:none;color:var(--ink);text-decoration:underline;text-decoration-style:dashed;text-decoration-color:var(--thread);text-underline-offset:6px}
.btn-l:hover,.btn-l.is-hover{color:var(--thread)}
.btn:focus-visible,.btn.is-focus{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--thread)}
.btn[disabled],.btn.is-disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn-big{min-height:64px;padding:0 40px;font-size:18px}
.btn-w{width:100%}
/* hlavička */
.hdr{background:rgba(255,255,255,.96);border-bottom:2px dashed var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--slate)}
.logo img{width:56px;height:56px;border-radius:50%;box-shadow:0 0 0 3px var(--slate);background:#fff}
.logo b{font-family:var(--f-d);font-weight:400;font-size:32px;line-height:1}
.nav{display:flex;align-items:center;gap:28px}
.nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:16px;padding:12px 2px}
.nav a:hover{color:var(--thread)}
.nav a.on{color:var(--slate);text-decoration:underline dashed var(--thread) 2px;text-underline-offset:9px}
.menu-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--slate);background:#fff;font:800 15px var(--f-b);color:var(--slate);text-decoration:none}
/* karty */
.card{display:block;background:var(--white);border-radius:24px;padding:12px 12px 20px;text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s;box-shadow:0 1px 0 var(--line)}
.card:hover,.card.is-hover{transform:translateY(-4px);box-shadow:0 18px 34px -20px rgba(44,55,53,.55)}
.card .ph{border-radius:18px;aspect-ratio:1/1;overflow:hidden;position:relative;background:var(--mint-l)}
.card .body{padding:16px 8px 0;display:flex;flex-direction:column;gap:6px}
.card .row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.card .more{font-weight:800;font-size:15px;color:var(--thread);opacity:0;transition:opacity .2s}
.card:hover .more,.card.is-hover .more{opacity:1}
.badge{position:absolute;top:14px;left:14px;background:var(--white);color:var(--slate);font-size:13px;font-weight:800;padding:6px 12px;border-radius:999px}
.badge.go{background:var(--slate);color:#fff}
.tag{display:inline-flex;align-items:center;position:relative;background:var(--mint-l);color:var(--slate-d);font-weight:800;font-size:16px;padding:7px 14px 7px 26px;border-radius:6px 999px 999px 6px}
.tag::before{content:"";position:absolute;left:10px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-d)}
.size{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--slate)}
/* prepínač */
.seg{display:inline-flex;background:var(--white);border-radius:999px;padding:5px;gap:4px;box-shadow:inset 0 0 0 2px var(--line)}
.seg button,.seg a{min-height:46px;padding:0 22px;border-radius:999px;border:0;background:none;font:800 15px var(--f-b);color:var(--ink2);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.seg .on{background:var(--slate);color:#fff}
/* výberové prvky */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{min-width:56px;min-height:50px;padding:0 16px;border:2px solid var(--line);border-radius:14px;background:var(--white);font:800 15px var(--f-b);color:var(--ink);cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;transition:border-color .15s;text-align:center}
.chip small{font-weight:600;font-size:12px;color:var(--ink2)}
.chip:hover,.chip.is-hover{border-color:var(--slate)}
.chip.on{background:var(--slate);border-color:var(--slate);color:#fff}
.chip.on small{color:var(--mint-l)}
.chip.pill{border-radius:999px;min-height:44px;flex-direction:row}
.choice{display:flex;gap:14px;align-items:center;padding:14px 16px;border:2px solid var(--line);border-radius:18px;background:var(--white);cursor:pointer;text-align:left;font:inherit;color:var(--ink);width:100%}
.choice:hover{border-color:var(--line-d)}
.choice.on{border-color:var(--slate);box-shadow:0 0 0 3px var(--mint-l)}
.choice .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-d);flex:none;display:grid;place-items:center}
.choice.on .dot{border-color:var(--slate)}
.choice.on .dot::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--slate)}
.step{display:inline-flex;align-items:center;border:2px solid var(--line);border-radius:999px;background:var(--white)}
.step button{width:48px;height:48px;border:0;background:none;font:800 20px var(--f-b);color:var(--slate);cursor:pointer;border-radius:999px}
.step span{min-width:32px;text-align:center;font-weight:800}
/* formulár */
.fld{display:flex;flex-direction:column;gap:7px}
.lbl{font-weight:800;font-size:15px;color:var(--ink)}
.req{color:var(--thread)}
.inp{width:100%;min-height:54px;border:2px solid var(--line);border-radius:14px;background:var(--white);padding:0 16px;font:600 16px var(--f-b);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.inp::placeholder{color:#8A9895;font-weight:400}
.inp:hover,.inp.is-hover{border-color:var(--line-d)}
.inp:focus,.inp.is-focus{outline:none;border-color:var(--slate);box-shadow:0 0 0 4px var(--mint-l)}
textarea.inp{min-height:120px;padding:14px 16px;resize:vertical;line-height:1.5}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%234F5F5D' stroke-width='2.2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 18px center;padding-right:44px}
.unit{position:relative}
.unit .inp{padding-right:52px}
.unit span{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-weight:800;color:var(--ink2)}
.fld.err .inp{border-color:var(--err);background:var(--err-l)}
.fld.ok .inp{border-color:var(--ok)}
.msg{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:800;color:var(--err)}
.hint{font-size:14px;color:var(--ink2)}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:15px;cursor:pointer}
.chk input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--slate);flex:none}
.chk.err{color:var(--err)}
.opt{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:2px solid var(--line);border-radius:16px;background:var(--white);cursor:pointer}
.opt input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--slate);flex:none}
.opt.on{border-color:var(--slate)}
.alert{display:flex;gap:12px;align-items:flex-start;border-radius:16px;padding:16px 18px;font-size:15px}
.alert.err{background:var(--err-l);border:2px solid var(--err);color:#7A1C16}
.alert.info{background:var(--mint-l);color:var(--slate-d)}
.panel{background:var(--white);border-radius:28px;padding:32px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.num{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:2px dashed var(--thread);font:400 26px var(--f-d);color:var(--thread);flex:none}
.ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:var(--mint-l);color:var(--slate);flex:none}
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:var(--white);border-radius:18px;overflow:hidden;font-size:16px}
.tbl th{background:var(--slate);color:#fff;text-align:left;padding:14px 18px;font-weight:800;font-size:14px}
.tbl td{padding:13px 18px;border-top:1px dashed var(--line)}
.tbl td:first-child{font-weight:800}
/* päta */
.ftr{background:var(--slate);color:#E8F0ED;padding:64px 0 32px;font-size:15px}
.ftr a{color:#fff;text-decoration:none}
.ftr a:hover{text-decoration:underline}
.ftr-cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px}
.ftr-col{display:flex;flex-direction:column;gap:10px}
.ftr-col h4{color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.ftr-bottom{margin-top:48px;padding-top:24px;border-top:1px dashed rgba(255,255,255,.3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:#D3E0DB;font-size:14px}
.crumbs{display:flex;gap:10px;font-size:14px;color:var(--ink2);align-items:center}
.crumbs a{color:var(--ink2)}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.tt h1{font-size:56px}.tt h2{font-size:44px}}
@media (max-width:640px){.g3,.grid2{grid-template-columns:minmax(0,1fr)}.wrap{padding:0 20px}.sec{padding:56px 0}.nav{display:none}}
/* mobilné artboardy */
.m{font-size:16px}
.m .wrap{padding:0 20px}
.m .sec{padding:56px 0}
.m h1{font-size:50px}.m h2{font-size:40px}.m h3{font-size:28px}
.m .hdr-in{height:70px}
.m .logo img{width:46px;height:46px}
.m .logo b{font-size:26px}
.m .lead{font-size:17px}
.m .g3,.m .grid2{grid-template-columns:minmax(0,1fr);gap:16px}
.m .g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.m .panel{padding:22px;border-radius:22px}
.m .card{border-radius:20px;padding:8px 8px 14px}
.m .card .ph{border-radius:14px}
.m .card .body{padding:12px 4px 0;gap:4px}
.m .card h4{font-size:15px}
.m .tag{font-size:14px;padding:5px 10px 5px 22px}
.m .tag::before{left:8px}
.m .ftr{padding:48px 0 28px}
.m .seg button,.m .seg a{padding:0 14px;font-size:14px}
.mbar{position:sticky;bottom:0;z-index:5;background:var(--white);border-top:2px dashed var(--line);padding:12px 20px 18px;display:flex;align-items:center;gap:14px}
/* administrácia */
.adm{display:flex;min-height:100%;background:var(--mint-xl)}
.side-nav{flex:0 0 260px;background:var(--slate);color:#fff;display:flex;flex-direction:column;gap:6px;padding:28px 18px}
.side-nav a{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 14px;border-radius:14px;color:#E8F0ED;text-decoration:none;font-weight:700}
.side-nav a:hover{background:rgba(255,255,255,.1)}
.side-nav a.on{background:#fff;color:var(--slate)}
.adm-main{flex:1 1 auto;min-width:0;padding:40px 48px;display:flex;flex-direction:column;gap:28px}
.tabs{display:flex;gap:6px;border-bottom:2px solid var(--line)}
.tabs button,.tabs a{min-height:48px;padding:0 18px;border:0;background:none;font:800 15px var(--f-b);color:var(--ink2);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.tabs .on{color:var(--slate);border-bottom-color:var(--thread)}
.cnt{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--mint-l);font-size:12px;color:var(--slate)}
.atbl{width:100%;border-collapse:separate;border-spacing:0 10px;font-size:15px}
.atbl th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);padding:0 14px}
.atbl td{background:#fff;padding:12px 14px;vertical-align:middle}
.atbl td:first-child{border-radius:18px 0 0 18px}
.atbl td:last-child{border-radius:0 18px 18px 0}
.atbl tr:hover td{background:#FBFDFC}
.thumb{width:64px;height:64px;border-radius:14px;object-fit:cover;display:block}
.price{display:flex;align-items:center;gap:6px}
.price input{width:96px;min-height:44px;border:2px solid var(--line);border-radius:12px;padding:0 10px;font:800 16px var(--f-b);color:var(--ink);text-align:right}
.price input:focus{outline:none;border-color:var(--slate);box-shadow:0 0 0 4px var(--mint-l)}
.status{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;font-weight:800;font-size:13px;border:0;cursor:pointer}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.st-live{background:#E2F0E8;color:var(--ok)}
.st-res{background:#FFF1D6;color:#8A5A00}
.st-sold{background:var(--thread-l);color:var(--thread)}
.st-hid{background:#ECEFEE;color:var(--ink2)}
.icon-btn{width:44px;height:44px;border-radius:12px;border:2px solid var(--line);background:#fff;display:inline-grid;place-items:center;color:var(--slate);cursor:pointer;text-decoration:none}
.icon-btn:hover{border-color:var(--slate)}
.icon-btn.danger:hover{border-color:var(--err);color:var(--err)}
.drop{border:2.5px dashed var(--line-d);border-radius:22px;background:var(--mint-xl);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px;text-align:center;cursor:pointer}
.drop:hover{border-color:var(--slate);background:var(--mint-l)}
.toast{display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border-radius:16px;padding:14px 18px;font-weight:700;box-shadow:0 16px 30px -14px rgba(0,0,0,.5)}
.scrim{position:absolute;inset:0;background:rgba(44,55,53,.45);display:grid;place-items:center;padding:20px}
.dialog{background:#fff;border-radius:26px;padding:32px;max-width:480px;width:100%;display:flex;flex-direction:column;gap:16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45)}
.btn-danger{background:var(--err);color:#fff}
.btn-danger:hover{background:#8F1E18}
.panel.bg-mint{background:var(--mint)}.panel.bg-mint-l{background:var(--mint-l)}