/* Tiny Toes · doplnky k tt.css pre živý web
   tt.css = dizajnový systém bez zmien, pages.css = štýly obrazoviek z návrhu (vygenerované),
   tu: preklad mobilných pravidiel (.m) na media queries, hlavička, menu, stavy a administrácia. */

html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;min-height:100vh;display:flex;flex-direction:column}
body > main{flex:1 0 auto}
a{color:var(--slate)}
a:hover{color:var(--thread)}
img{max-width:100%}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--thread);outline-offset:3px}
.btn:focus-visible{outline:none}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;padding:10px 16px;border-radius:12px;font-weight:800}
.skip:focus{left:8px}
.sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.m-only{display:none !important}

/* hlavička a mobilné menu */
.site-hdr{position:sticky;top:0;z-index:20}
.hdr-cta{min-height:46px;padding:0 22px}
.hdr-m{align-items:center;gap:8px}
.menu-btn{cursor:pointer;position:relative}
.vcount{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--thread);color:#fff;font-size:12px;display:grid;place-items:center}
.mmenu{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;overflow-y:auto}
.ml{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:2px dashed #9FB9B0;text-decoration:none;color:#4F5F5D;font-family:'Caveat Brush',cursive;font-size:40px;line-height:1.1;min-height:44px}
.ml:hover{color:#B23F3A}
.ml-dot{font-size:24px;color:#B23F3A;visibility:hidden}
.ml.on .ml-dot{visibility:visible}
body.menu-open{overflow:hidden}

/* úvod: pásik so srdiečkami (tt.css .hearts nuluje odsadenie .wrap) */
.landing .hearts{padding-left:40px;padding-right:40px}
.landing .leaf{pointer-events:none}

/* karty, stavy */
.card{cursor:pointer}
article.card{cursor:default}
.card .ph .badge.res{background:#FFF1D6;color:#8A5A00}
.empty-box{grid-column:1/-1;background:#fff;border-radius:24px;padding:32px;text-align:center;color:var(--ink2)}
.loading{opacity:.55}
.age{min-height:112px}
.fab,.choice,.age,.chip{touch-action:manipulation}
.drop{position:relative}
.drop:focus-within{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--thread)}
.tip p{margin:0}

/* objednávka */
.steps-ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-weight:800;font-size:15px}
.steps-ol .s{width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
.sum-row{display:flex;justify-content:space-between;gap:12px}
.sel-actions{display:flex;gap:16px}
.sel-actions button{background:none;border:0;padding:0;min-height:44px;font:700 15px var(--f-b);color:var(--slate);cursor:pointer;text-decoration:underline}
.sel-actions button.rm{color:var(--ink2)}
.opt{align-items:center}

/* kontakt, info */
.ct{min-height:44px}
.form-ok{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.info-side{position:sticky;top:110px}

/* administrácia */
.adm{min-height:100vh}
.adm .side-nav{position:sticky;top:0;height:100vh}
.adm-mhdr{background:#4F5F5D;color:#fff;display:none}
.adm-mhdr .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.adm-mhdr a{color:#fff}
.side-nav .logo{color:#fff;padding:0 6px 20px;min-height:0}
.side-nav .logo img{box-shadow:0 0 0 3px #fff;width:48px;height:48px}
.side-nav .logo b{font-size:26px}
.side-nav button.out{background:none;border:0;color:#fff;font:700 14px var(--f-b);text-align:left;padding:0;min-height:36px;cursor:pointer;text-decoration:underline}
.adm-cards{display:none;flex-direction:column;gap:14px}
.adm-card{background:#fff;border-radius:20px;padding:12px;display:flex;flex-direction:column;gap:12px}
.toast-wrap{position:fixed;right:40px;bottom:40px;z-index:70}
.ph-tile{position:relative}
.ph-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:16px;display:block}
.ph-tile[draggable=true]{cursor:grab}
.ph-tile.drag{opacity:.4}
.ph-x{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.95);display:grid;place-items:center;cursor:pointer;color:#2C3735}
.ph-main{position:absolute;top:6px;left:6px;min-height:32px;padding:0 10px;border-radius:999px;border:0;background:rgba(255,255,255,.95);font:800 12px var(--f-b);color:#2C3735;cursor:pointer}
.photos-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.drop{position:relative;grid-column:span 2}
.drop.over{border-color:var(--slate);background:var(--mint-l)}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.drop:focus-within{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--thread)}
.switch{width:56px;height:32px;border-radius:999px;padding:4px;display:flex;transition:background .2s;background:#CFDED8;justify-content:flex-start}
.switch.on{background:#3F6B57;justify-content:flex-end}
.switch i{width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.scrim{position:fixed;z-index:80}
.upload-bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden}
.upload-bar i{display:block;height:100%;background:var(--slate);width:0;transition:width .2s}



/* objednávky v administrácii (v štýle tt.css) */
.side-nav .side-cnt{margin-left:auto;background:var(--thread);color:#fff}
.adm-mnav{display:flex;gap:6px;padding-bottom:10px}
.adm-mnav a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:14px;color:#E8F0ED;text-decoration:none;font-weight:800;font-size:15px}
.adm-mnav a.on{background:#fff;color:var(--slate)}
.ord{background:#fff;border-radius:22px;box-shadow:0 1px 0 var(--line);overflow:hidden}
.ord-new{box-shadow:inset 4px 0 0 var(--thread),0 1px 0 var(--line)}
.ord-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:16px;width:100%;min-height:72px;padding:14px 20px;border:0;background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.ord-head:hover{background:#FBFDFC}
.ord-no{font:400 24px var(--f-d);color:var(--thread);white-space:nowrap}
.ord-who{display:flex;flex-direction:column;min-width:0}
.ord-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ord-sum{font-weight:800;white-space:nowrap}
.ord-chev{color:var(--ink2);font-size:12px}
.ord-body{border-top:1px dashed var(--line);padding:20px;display:flex;flex-direction:column;gap:20px}
.ord-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:28px}
.ord-cols h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin:14px 0 4px}
.ord-cols h4:first-child{margin-top:0}
.ord-cols p{margin:0 0 4px}
.ord-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ord-item{background:var(--mint-xl);border-radius:16px;padding:14px 16px}
.ord-dl{margin:8px 0 6px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:15px}
.ord-dl dd{margin:0;font-weight:700}
.ord-photo-link{font-weight:800;display:inline-flex;min-height:44px;align-items:center}
.ord-actions{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;border-top:1px dashed var(--line);padding-top:16px}

/* ---------- 980 px ---------- */
@media (max-width:980px){
  .site-hdr .nav,.d-only{display:none !important}
  .m-only{display:inline-flex !important}
  .hdr-m.m-only{display:flex !important}
  .adm .side-nav{flex-basis:220px}
  .adm-main{padding:32px 28px}
}

/* ---------- 640 px = mobilné artboardy (.m z tt.css) ---------- */
@media (max-width:640px){
  .tt{font-size:16px}
  .tt h1{font-size:50px}.tt h2{font-size:40px}.tt h3{font-size:28px}
  .wrap{padding:0 20px}
  .sec{padding:56px 0}
  .hdr-in{height:70px}
  .logo img{width:46px;height:46px}
  .logo b{font-size:26px}
  .lead{font-size:17px}
  .g3,.grid2{grid-template-columns:minmax(0,1fr);gap:16px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .panel{padding:22px;border-radius:22px}
  .card{border-radius:20px;padding:8px 8px 14px}
  .card .ph{border-radius:14px}
  .card .body{padding:12px 4px 0;gap:4px}
  .card h4{font-size:15px}
  .tag{font-size:14px;padding:5px 10px 5px 22px}
  .tag::before{left:8px}
  .ftr{padding:48px 0 28px}
  .seg button,.seg a{padding:0 14px;font-size:14px}
  .landing .hearts{padding-left:20px;padding-right:20px}
  .steps-ol{font-size:13px;gap:8px}
  .steps-ol .bar{width:20px !important}
  .send-row .btn,.det-go .btn,.m-w{width:100%}
  .info-side{position:static}
  /* admin */
  .adm{flex-direction:column}
  .adm .side-nav{display:none}
  .adm-mhdr{display:block}
  .adm-main{padding:20px !important;gap:18px !important}
  .adm-main h1{font-size:50px !important}
  .adm-table{display:none}
  .adm-cards{display:flex}
  .adm-add-top{display:none !important}
  .adm-mbar{display:flex !important}
  .photos-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .adm-tabs{overflow-x:auto}
  .adm-tabs button{white-space:nowrap;padding:0 10px}
  .adm-filter{flex-wrap:nowrap !important;overflow-x:auto;padding-bottom:4px}
  .adm-filter .chip{flex:none}
  .toast-wrap{left:20px;right:20px;bottom:96px}
  .adm-save .btn-p{width:100%;min-height:64px;font-size:18px}
  .adm-preview{max-width:none !important}
  .login-wrap{padding:20px !important}
  .ord-head{grid-template-columns:auto minmax(0,1fr) auto;gap:8px 12px;padding:12px 14px}
  .ord-head .ord-sum{grid-column:2/4;grid-row:2;font-size:14px}
  .ord-head .status{grid-column:3;grid-row:1}
  .ord-chev{display:none}
  .ord-body{padding:14px}
  .ord-cols{grid-template-columns:minmax(0,1fr);gap:8px}
  .adm-filter .cnt{display:none}
}
.adm-mbar{display:none}