/* Wake Park Džbán — převzato ze statického webu (wake-dzban-obnova/novy, 10/2026). */
:root{
  --brand:#e50051;
  --ink:#fff;
  --line:rgba(255,255,255,.85);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh; display:flex; flex-direction:column;
  background:var(--brand); color:var(--ink);
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
main{flex:1; display:grid; place-items:center; padding:clamp(16px,4vw,56px)}
.tiles{
  list-style:none; margin:0; padding:0; width:100%; max-width:1120px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,2.2vw,28px);
}
.tile{
  aspect-ratio:1; display:grid; place-items:center;
  border:2px solid var(--line); border-radius:4px;
  color:var(--ink); text-decoration:none;
  transition:background-color .18s, color .18s, transform .18s;
}
.tile svg{width:64%; height:64%; overflow:visible}
.tile .lbl{fill:currentColor; stroke:none; font-family:inherit; font-weight:700; font-size:12.6px; letter-spacing:3.6px}
a.tile:hover, a.tile:focus-visible{background:var(--ink); color:var(--brand); transform:translateY(-3px); outline:none}
.tile.soon{cursor:default}
footer .languages{margin-top:8px; font-size:13px}
footer .languages a{margin:0 4px; text-decoration:none; opacity:.75}
footer .languages a[aria-current]{opacity:1; font-weight:700}
footer{text-align:center; font-size:14px; font-weight:500; padding:8px 16px 28px; line-height:1.6}
footer p{margin:0}
footer a{color:inherit}
footer .small{font-size:12px; opacity:.8}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (max-width:760px){
  .tiles{grid-template-columns:repeat(2,1fr); max-width:480px}
  footer .sep{display:none}
  footer p a{display:block}
}

/* ---- podstránky (ceník) ---- */
.page-head{text-align:center; padding:32px 16px 8px}
.page-head .home{display:inline-block; color:var(--ink)}
.page-head .home svg{width:84px; height:auto; transition:transform .18s}
.page-head .home:hover svg{transform:translateY(-3px)}
.page-head h1{margin:14px 0 2px; font-size:clamp(28px,5vw,40px); letter-spacing:.06em; text-transform:uppercase}
.page-head .sub{margin:0; font-weight:500; opacity:.85}
.page-body{display:block; place-items:normal; max-width:760px; margin:0 auto; width:100%}
.card{
  background:#fff; color:#1d1d1f; border-radius:6px;
  padding:22px 24px; margin-bottom:18px; scroll-margin-top:16px;
}
.card h2{margin:0 0 6px; color:var(--brand); font-size:19px; letter-spacing:.04em; text-transform:uppercase}
.card a{color:var(--brand)}
.card .note{margin:0 0 10px; color:#5f5f66; font-size:14px; line-height:1.55}
.card .row{display:flex; align-items:baseline; gap:14px; padding:11px 0; border-top:1px solid #eee}
.card h2 + .row, .card .note + .row{border-top:0}
.card h3.subsection{margin:18px 0 6px; font-size:15px; letter-spacing:.03em; text-transform:uppercase; color:#1d1d1f}
.card h3.subsection + .row{border-top:0}
.card .name{flex:1; min-width:0}
.card .name b{font-weight:700}
.card .desc{display:block; color:#6b6b72; font-size:13.5px; margin-top:2px; line-height:1.45}
.card .price{font-weight:700; white-space:nowrap}
.card .price.free{color:#1a8f52}
.card .tag{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px; vertical-align:2px;
  background:var(--brand); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
@media (max-width:520px){ .card{padding:18px 16px} }

/* ---- e-shop ---- */
.products{list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px}
.product{display:flex; flex-direction:column; border:1px solid #eee; border-radius:6px; padding:12px}
.product img{width:100%; height:auto; border-radius:4px}
.card .product h3{margin:12px 0 4px; font-size:16px; color:#1d1d1f; text-transform:none; letter-spacing:0}
.product .desc{flex:1; margin:0 0 10px; color:#6b6b72; font-size:13.5px; line-height:1.45}
.product .price{margin:0; font-weight:700; font-size:18px}
.product .price span{font-weight:500; font-size:12px; color:#6b6b72}
.eshop-note{text-align:center; font-size:14px; line-height:1.55; padding:0 16px 24px}
.eshop-note a{color:inherit; font-weight:700}

.trial-banner{margin:0 0 18px; padding:14px 18px; border-radius:6px; background:#ffd600; color:#1d1d1f; font-size:15px; line-height:1.5; text-align:center}
.trial-banner b{display:block; font-size:18px; text-transform:uppercase; letter-spacing:.04em}

/* ---- objednávka ---- */
.product .qty{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; font-size:13px; font-weight:700; color:#6b6b72}
.product .qty input{width:64px; padding:8px; font:inherit; font-size:16px; color:#1d1d1f; border:1px solid #ccc; border-radius:4px; text-align:center}
.product .stepper{display:flex; align-items:center; gap:6px}
.product .step{width:40px; height:40px; border:0; border-radius:50%; background:#f0f0f2; color:#1d1d1f; font:inherit; font-size:22px; font-weight:700; line-height:1; cursor:pointer}
.product .step:active{background:#e2e2e6}
.product img, .product h3{cursor:pointer}
.product.selected{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand)}
.order-total{margin:12px 0 0; font-size:18px; text-align:right}
.order-total b{color:var(--brand); font-size:22px}
.card.errors{border-left:4px solid var(--brand)}
.card.errors ul{margin:6px 0 0; padding-left:20px; line-height:1.6}
.contact .fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px 18px; margin:10px 0}
.contact label{display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:700; color:#6b6b72}
.contact label .opt{font-weight:500}
.contact input[type=text], .contact input[type=email], .contact input[type=tel], .contact input:not([type]){
  padding:10px; font:inherit; font-size:16px; color:#1d1d1f; border:1px solid #ccc; border-radius:4px}
.contact .company-toggle{flex-direction:row; align-items:center; gap:10px; margin:6px 0; font-size:14px; color:var(--brand); cursor:pointer}
.contact .company-toggle input{width:20px; height:20px; margin:0; flex:none}
.contact .company-fields{display:none}
.contact .company:has(.company-toggle input:checked) .company-fields{display:block}
.contact .company-hint, .contact .company-status{margin:4px 0; color:#5f5f66; font-size:13.5px}
.contact .company-status:empty{display:none}
.contact input[readonly]{background:#f4f4f6; border-color:#e2e2e6}
.contact .fields .wide{grid-column:1/-1}
.contact .terms{flex-direction:row; align-items:flex-start; gap:10px; margin:16px 0 6px; font-size:14px; font-weight:500; color:#1d1d1f}
.contact .terms input{width:20px; height:20px; margin:0; flex:none}
.contact .pay-note{color:#5f5f66; font-size:13.5px; line-height:1.55}
.contact .hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.order-button{display:block; width:100%; margin-top:8px; padding:15px; border:0; border-radius:6px; background:var(--brand); color:#fff; font:inherit; font-size:17px; font-weight:700; cursor:pointer}
.order-button:hover{filter:brightness(1.08)}
.payment .pay-grid{display:flex; flex-wrap:wrap; gap:22px; align-items:center; margin-top:8px}
.payment .qr svg{display:block; width:220px; height:220px}
.pay-details{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:15px}
.pay-details dt{color:#6b6b72; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; align-self:center}
.pay-details dd{margin:0; font-weight:700; word-break:break-all}
.pay-details .amount{font-size:22px; color:var(--brand)}
.card .row.total{border-top:2px solid #1d1d1f}
.card.paid{background:#1a8f52; color:#fff; text-align:center}
.card.paid h2{color:#fff; font-size:24px}
.card.paid p{margin:6px 0 0; font-size:16px; line-height:1.5}
.card .watching{font-style:italic}
.pay-details .copy{margin-left:8px; padding:3px 9px; border:1px solid #ccc; border-radius:999px; background:#fff; color:#1d1d1f; font:inherit; font-size:12px; font-weight:700; cursor:pointer; vertical-align:2px}
.pay-details .amount .copy{font-size:12px}
.mobile-pay{margin-top:14px; padding:14px 16px; border-radius:6px; background:#f5f5f7; font-size:14px; line-height:1.55}
.mobile-pay p{margin:0 0 10px}
.save-qr{display:inline-block; padding:10px 16px; border-radius:6px; background:var(--brand); color:#fff !important; font-weight:700; text-decoration:none}

/* ---- kontakt ---- */
.card h3{margin:16px 0 4px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#6b6b72}
.kv-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:4px 24px; margin-top:8px}
.kv{margin:0 0 12px}
.kv b{display:block; font-size:12px; color:#6b6b72; font-weight:700; text-transform:uppercase; letter-spacing:.06em}
.kv span, .kv a{font-size:16px}
.hours{width:100%; border-collapse:collapse; margin:4px 0 12px}
.hours td{padding:9px 8px; border-top:1px solid #eee}
.hours tr:first-child td{border-top:0}
.hours td:last-child{text-align:right; font-weight:700; white-space:nowrap}
.hours tr.today td{background:#fdeef4}
.hours tr.today td:first-child{border-radius:4px 0 0 4px}
.hours tr.today td:last-child{border-radius:0 4px 4px 0}
.desc-inline{color:#6b6b72; font-size:13.5px; margin-left:6px}
.card .btn{
  display:inline-block; margin-top:4px; padding:11px 20px; border-radius:4px;
  background:var(--brand); color:#fff; font-weight:700; font-size:14px; letter-spacing:.04em;
  text-decoration:none; transition:transform .18s, background-color .18s;
}
.card .btn:hover{background:#c40046; transform:translateY(-2px)}