:root{
  --red:#e30613; --red-dark:#b3040f; --ink:#1a1a1a; --muted:#6b7280;
  --bg:#f4f5f7; --surface:#ffffff; --line:#e5e7eb; --radius:14px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 8px 24px rgba(0,0,0,.05);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* header */
.site-header{position:sticky;top:0;z-index:40;background:var(--surface);
  border-bottom:1px solid var(--line);box-shadow:0 1px 6px rgba(0,0,0,.04)}
.header-inner{display:flex;align-items:center;gap:24px;height:70px}
.brand{display:flex;align-items:baseline;gap:8px;font-weight:800;font-size:26px;letter-spacing:-.5px}
.brand .mm{color:var(--red)}
.brand small{font-weight:500;font-size:13px;color:var(--muted);letter-spacing:0}
.nav{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
@media(max-width:1100px){.nav{gap:6px}.nav a{padding:8px 10px;font-size:13.5px}}
.nav a{padding:8px 14px;border-radius:999px;font-weight:600;font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.nav a:hover{background:var(--bg);color:var(--ink)}
.nav a.cta{background:var(--red);color:#fff}
.nav a.cta:hover{background:var(--red-dark)}

/* layout with sidebar */
.layout{display:grid;grid-template-columns:250px 1fr;gap:32px;padding:32px 0}
@media(max-width:860px){.layout{grid-template-columns:1fr}}
.sidebar{align-self:start;position:sticky;top:94px}
.sidebar h3{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 10px}
.cat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.cat-list a{display:flex;justify-content:space-between;padding:8px 12px;border-radius:8px;font-size:14px;color:#374151}
.cat-list a:hover{background:var(--surface)}
.cat-list a.active{background:var(--red);color:#fff;font-weight:600}
.cat-list a.active .count{color:#fff;opacity:.8}
.count{color:var(--muted);font-size:12px}

/* hero */
.hero{background:linear-gradient(120deg,#1a1a1a,#2d2d2d);color:#fff;border-radius:var(--radius);
  padding:48px 40px;margin:32px 0;box-shadow:var(--shadow)}
.hero h1{margin:0 0 10px;font-size:34px;letter-spacing:-.5px}
.hero p{margin:0;color:#cbd5e1;max-width:560px}
.hero .accent{color:#ff3b45;font-weight:800;text-shadow:0 2px 14px rgba(0,0,0,.55)}

/* grid + cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);box-shadow:0 6px 12px rgba(0,0,0,.08),0 16px 40px rgba(0,0,0,.08)}
.card .thumb{aspect-ratio:4/3;background:#fafafa;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .thumb.empty{color:#cbd5e1;font-size:13px}
.card .body{padding:14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .name{font-weight:600;font-size:15px;line-height:1.3}
.card .price{margin-top:auto;font-weight:800;color:var(--red)}
.card .price.na{color:var(--muted);font-weight:600;font-size:13px}

/* section heading */
.page-head{display:flex;align-items:center;gap:14px;margin:0 0 8px}
.page-head h1,.page-head h2{font-size:26px;margin:0;letter-spacing:-.4px}
.page-head .pill{background:var(--red);color:#fff;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px}
.blurb{color:var(--muted);margin:0 0 24px;max-width:720px}

/* product detail */
.product{display:grid;grid-template-columns:1fr 1fr;gap:36px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
@media(max-width:720px){.product{grid-template-columns:1fr}}
.product .photo{background:#fafafa;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.product h1{margin:0 0 6px;font-size:26px}
.product .price-big{font-size:28px;font-weight:800;color:var(--red);margin:8px 0 20px}
.specs{width:100%;border-collapse:collapse}
.specs th,.specs td{text-align:left;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.specs th{color:var(--muted);font-weight:500;width:40%}
.crumb{font-size:13px;color:var(--muted);margin:0 0 16px}
.crumb a:hover{color:var(--red)}

/* buttons + forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
  background:var(--red);color:#fff;border:0;padding:11px 20px;border-radius:10px;
  font-weight:700;font-size:15px;cursor:pointer;box-sizing:border-box}
.btn:hover{background:var(--red-dark)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--bg)}
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);max-width:560px}
.form label{display:block;font-weight:600;font-size:14px;margin:14px 0 6px}
.form input,.form textarea,.form select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font:inherit}
.form textarea{min-height:130px;resize:vertical}
/* Red variant of .alert, for validation failures. */
.alert.error{background:#fde2e1;color:#a11;border-color:#f4bcc0}
.alert{background:#e7f8ed;color:#0f7a37;border:1px solid #b6e6c6;padding:12px 16px;border-radius:10px;margin-bottom:18px}
.err{color:var(--red);font-size:13px;margin-top:4px}

/* footer */
.site-footer{background:#1a1a1a;color:#9ca3af;margin-top:56px;padding:36px 0}
.site-footer strong{color:#fff}
.site-footer a:hover{color:#fff}

/* admin */
.admin-shell{padding:32px 0}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:28px}
@media(max-width:640px){.stat-row{grid-template-columns:1fr}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.stat .n{font-size:32px;font-weight:800;color:var(--red)}
.stat .l{color:var(--muted);font-size:14px}
table.data{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
table.data th,table.data td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:14px}
table.data th{background:#fafafa;font-weight:600}

/* --- polish pass --- */
body{display:flex;flex-direction:column;min-height:100vh}
main.container{flex:1 0 auto;width:100%}
.card .name{min-height:2.6em}
.product .photo{min-height:340px}
.product .photo img{width:100%;height:auto;max-height:520px;object-fit:contain}
.site-footer{flex-shrink:0}
.site-footer .container{font-size:14px}

/* ===== hero with shadowed photo + fade/parallax feel ===== */
.hero-photo{position:relative;overflow:hidden;padding:0;border:0;
  background:#111;min-height:360px;display:flex;align-items:center}
.hero-photo::after{z-index:1}
.hero-photo::before{content:"";position:absolute;inset:0;
  background:url('/images/site/hero.jpg') center/cover no-repeat;
  transform:scale(1.08);filter:saturate(1.05);
  animation:heroZoom 12s ease-out forwards}
.hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(5,5,7,.97) 0%,rgba(5,5,7,.93) 50%,rgba(5,5,7,.82) 100%)}
.hero-inner{position:relative;z-index:3;padding:56px 48px;max-width:640px;
  animation:heroFade 1.1s ease-out both}
.hero-photo h1{font-size:46px;line-height:1.05;margin:0 0 16px;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.hero-photo p{color:#f3f4f6;font-size:17px;max-width:520px;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.hero-cta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.hero-cta .btn{width:100%;min-width:0;justify-content:center;padding:12px 14px;white-space:nowrap}
@media(max-width:640px){.hero-cta{grid-template-columns:1fr}.hero-cta .btn{width:100%}}
.btn.ghost.light{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);color:#fff}
.btn.ghost.light:hover{background:rgba(255,255,255,.16)}
@media(max-width:640px){.hero-photo h1{font-size:32px}.hero-inner{padding:40px 24px}}

@keyframes heroFade{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroZoom{from{transform:scale(1.15)}to{transform:scale(1.04)}}

/* subtle reveal on the whole page for a dynamic feel */
main.container{animation:pageFade .5s ease-out both}
@keyframes pageFade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .hero-photo::before,.hero-inner,main.container{animation:none}
  .hero-photo::before{transform:scale(1.04)}
}

/* ===== compact hero (less vertical space) ===== */
.hero-photo{min-height:300px}
.hero-inner{padding:40px 44px}
.hero-photo h1{font-size:38px;margin-bottom:12px;text-shadow:0 3px 30px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.9)}
.hero-photo p{font-size:16px;text-shadow:0 1px 8px rgba(0,0,0,.9);color:#f3f4f6}
.hero-cta{margin-top:20px}
@media(max-width:640px){.hero-photo{min-height:260px}.hero-photo h1{font-size:28px}}

/* ===== quick contact strip ===== */
.quickbar{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 32px;justify-items:stretch}
.quickbar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:14px;color:#374151;text-align:center}
.quickbar a:hover{border-color:var(--red);color:var(--red)}
.quickbar a span{display:inline-flex;width:22px;height:22px;flex:none;align-items:center;justify-content:center;
  border-radius:50%;background:var(--red);color:#fff;font-size:12px;font-weight:800}

/* ===== compact category tiles (round discs) ===== */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:16px 4px;justify-items:center}
.cat-grid--row{display:flex;flex-wrap:nowrap;gap:4px;justify-content:space-between;overflow:hidden}
.cat-tile{flex:1 1 0;min-width:0;max-width:120px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;
  width:96px;padding:2px 2px 6px;background:none;border:0;border-radius:0;box-shadow:none;position:relative}
/* v20 (2026-09-12): fixed dark-ring paint glitch on category discs. Cause:
   semi-transparent border rgba(255,255,255,.7) + inset dark shadow on a 50%%
   circle mis-rasterized a dark ring on first paint, cleared on hover repaint.
   Fix = opaque --line border, drop inset dark shadow, promote to own layer.
   Rollback = restore border rgba(255,255,255,.7), re-add inset 0 -2px 4px
   rgba(0,0,0,.05), remove will-change/translateZ. */
.cat-disc{width:80px;height:80px;flex:none;border-radius:50%;
  background:linear-gradient(145deg,#ffffff,#eef0f3);
  border:1px solid var(--line);
  box-shadow:0 6px 16px rgba(0,0,0,.08),inset 0 1px 1px rgba(255,255,255,.9);
  will-change:transform;transform:translateZ(0);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s,border-color .15s,box-shadow .15s,background .15s}
.cat-tile:hover .cat-disc{transform:translateY(-2px);border-color:rgba(0,0,0,.12);
  background:linear-gradient(145deg,#ffffff,#e4e6ea);
  box-shadow:0 12px 24px rgba(0,0,0,.14),inset 0 1px 1px rgba(255,255,255,.95)}
.cat-ico{width:38px;height:38px;color:var(--red);flex:none}
/* Two lines, always. "Sedací soupravy 3+1+1" and "Rohové sedačky" used to run
   to three lines and push their own disc/count out of step with the neighbours,
   so the icon row read as broken. Clamped to two lines with the full name in
   the tile's title attribute. */
.ct-name{font-weight:600;font-size:12px;line-height:1.2;color:var(--ink);height:2.4em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;text-align:center;flex:none}
.cat-tile:hover .ct-name{color:var(--ink)}
.ct-count{font-size:11px;color:var(--muted);background:var(--bg);padding:1px 8px;border-radius:999px;line-height:1.5;margin-top:auto}
@media(max-width:640px){.quickbar{grid-template-columns:1fr}.quickbar a{justify-content:flex-start}}
@media(max-width:520px){.cat-grid,.cat-grid--row{gap:8px 4px}.ct-name{font-size:11px;min-height:2.2em}.cat-disc{width:56px;height:56px}.cat-ico{width:30px;height:30px}}

/* ===== PDF catalog tiles ===== */
.pdf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.pdf-tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);transition:.15s;display:flex;flex-direction:column}
.pdf-tile:hover{transform:translateY(-3px);border-color:var(--red)}
.pdf-tile img{width:100%;height:96px;object-fit:cover;background:#fafafa}
.pdf-meta{display:flex;align-items:center;justify-content:space-between;padding:9px 12px}
.pdf-meta strong{font-size:14px}
.pdf-badge{background:var(--red);color:#fff;font-size:11px;font-weight:800;padding:3px 8px;border-radius:6px}

/* ===== trust row ===== */
.trust-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:6px 0 4px}
.trust-item{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);color:#374151;font-weight:600;font-size:13.5px}
.trust-item .chk{width:22px;height:22px;flex:none;border-radius:50%;background:#e7f6ec;color:#16a34a;
  font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.trust-item:hover{border-color:#16a34a}

/* ===== AKCE badge on cards ===== */
.card .thumb{position:relative;isolation:isolate}
.badge-akce{position:absolute;top:10px;left:10px;background:var(--red);color:#fff;
  font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;letter-spacing:.02em;
  box-shadow:0 2px 6px rgba(0,0,0,.18);z-index:5;pointer-events:none}

/* ===== opening hours table ===== */
.hours{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line)}
.hours th{background:#fafafa;font-weight:700;text-align:left;padding:8px 12px;font-size:14px}
.hours td{padding:9px 12px;border-bottom:1px solid var(--line);font-size:14px}
.hours tr.today td{background:#fdebec;font-weight:700}
.hours tr.today td small{color:var(--red);font-weight:800;font-size:11.5px}

/* ===== search empty box ===== */
.empty-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 26px;box-shadow:var(--shadow)}
.empty-box p{margin:0 0 12px}
.empty-box p:last-child{margin:0}

/* ===== contact info forms: tighter headings ===== */
.form h3{font-size:15px;font-weight:700;color:var(--ink)}

/* ===== contact map embed ===== */
.map-embed{position:relative;z-index:0;margin:16px 0 22px;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow);background:#eee}
.map-embed iframe{display:block;width:100%;height:260px;border:0}
/* opaque catcher over Google's own "Open in maps" pill + zoom (top-left of embed) */
.map-embed .map-btn{position:absolute;top:3px;left:3px;margin:0;z-index:2;background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
@media(max-width:640px){.map-embed iframe{height:220px}}

/* ===== search: similar-category suggestion chips ===== */
.sim-cats{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 24px}
.sim-cats__label{color:var(--muted);font-size:14px;margin-right:2px}
.sim-chip{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);color:#374151;font-size:14px;
  font-weight:600;text-decoration:none;transition:all .15s ease}
.sim-chip:hover{border-color:var(--red);color:var(--red);transform:translateY(-1px);box-shadow:var(--shadow)}

/* ===== search form (hero + header variants) ===== */
.srch{display:flex;align-items:center;gap:10px}
.srch input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;
  /* [r2] 16px is the floor: iOS Safari auto-zooms the page when a focused
     input renders below 16px, which broke the header search on phones. */
  background:#fff;color:var(--ink);font-size:16px}
.srch input:focus{outline:none;border-color:var(--red)}
.srch .srch-ico{flex:none;color:var(--muted)}
.srch .srch-go{flex:none}

/* hero variant — large, sits inside the dark hero */
.srch--hero{margin:22px 0 4px;max-width:560px;background:rgba(255,255,255,.96);
  border-radius:12px;padding:8px 8px 8px 14px;box-shadow:0 6px 24px rgba(0,0,0,.28)}
.srch--hero input{border:0;padding:12px 6px;font-size:16px;background:transparent}
.srch--hero .srch-go{padding:12px 24px}
@media(max-width:640px){
  .srch--hero{flex-wrap:wrap;padding:10px}
  .srch--hero input{flex:1 1 auto;order:2}
  .srch--hero .srch-ico{order:1}
  .srch--hero .srch-go{order:3;width:100%;justify-content:center}
}

/* header variant — compact, in the sticky bar on inner pages */
.header-search{padding:0 20px 12px}
.srch--header{max-width:520px;margin:0 auto}
.srch--header input{padding:9px 12px}
.srch--header .srch-go{padding:9px 18px}

/* ===== opening hours card ===== */
.hours{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 20px;margin:0 0 8px;max-width:420px}
.hours-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.hours-head h2{font-size:17px;margin:0;letter-spacing:-.2px}
.hours-badge{font-size:12px;font-weight:700;padding:3px 12px;border-radius:999px;white-space:nowrap}
.hours-badge.is-open{background:#e7f7ec;color:#1a7f37}
.hours-badge.is-closed{background:#fdecec;color:var(--red-dark)}
.hours-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
/* Day left, time right, on one line at every width. On a 390px screen the row
   used to break twice: "Po–Pá (dnes)" split before the "(dnes)" and then
   "8:00–12:00, 13:00–17:00" wrapped under it, turning a five-row table into
   eleven ragged lines. The time is the part that must stay intact, so it never
   wraps and the day label yields instead. */
.hours-list li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 8px;border-radius:8px;font-size:14px;color:#374151}
.hours-list li.is-today{background:var(--bg);font-weight:600;color:var(--ink)}
.hours-day{white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.hours-day em{color:var(--red);font-style:normal;font-weight:700;font-size:12px}
.hours-time{color:var(--muted);text-align:right;white-space:nowrap;flex:none}
.hours-list li.is-today .hours-time{color:var(--ink)}

/* ===== homepage layout v2: centered hero, search below box, contact on top ===== */

/* contact strip pulled above the hero box (still below the header) */
.quickbar--top{margin-top:0;margin-bottom:14px}

/* centered hero: title larger + centered, description stays directly below it */
.hero--centered .hero-inner{max-width:820px;margin-left:0;margin-right:auto;text-align:left}
.hero--centered .hero-inner p{margin-left:0;margin-right:0}
.hero--centered .hero-cta{justify-content:center;max-width:560px;margin-left:auto;margin-right:auto}
.hero--centered.hero-photo h1{font-size:56px;line-height:1.03}
@media(max-width:900px){.hero--centered.hero-photo h1{font-size:44px}}
@media(max-width:640px){.hero--centered.hero-photo h1{font-size:32px}}

/* search directly under the hero box (its own row, not inside the hero) */
.hero-search{margin:16px auto 4px;max-width:640px}
.hero-search .srch--hero{margin:0 auto;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.hero-search .srch--hero input{color:var(--ink)}

/* ===== homepage layout v3 ===== */

/* action buttons pulled above the hero box (were inside .hero-inner) */
.hero-cta--top{display:flex;flex-wrap:nowrap;gap:12px;margin:10px 0}
.hero-cta--top .btn{flex:1 1 0;width:auto;min-width:0;justify-content:center;white-space:nowrap}
@media(max-width:640px){.hero-cta--top{gap:8px}.hero-cta--top .btn{padding:11px 8px;font-size:14px}}

/* below-hero row: search left, trust points right (stacked) */
.below-hero{display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;margin:16px 0 4px;flex-wrap:wrap}
.below-hero .hero-search{margin:0;flex:1 1 420px;max-width:640px}
/* override v2 centering — search sits left now */
.below-hero .hero-search .srch--hero{margin:0}

.trust-row--stacked{display:flex;flex-direction:column;align-items:stretch;
  gap:8px;margin:0;flex:0 0 auto;width:max-content}
.trust-row--stacked .trust-item{width:100%;justify-content:flex-start}
@media(max-width:640px){
  .below-hero{flex-direction:column}
  .trust-row--stacked{align-items:stretch;width:100%}
}

/* ===== homepage layout v4: trust + hours in one row (equal height); search above categories ===== */

/* trust points (left) + opening hours (right), same height */
.info-row{display:flex;align-items:stretch;gap:20px;margin:16px 0 8px;flex-wrap:wrap}

/* left column: trust pills stretched to match the hours card height */
.info-row .trust-row--stacked{flex:1 1 300px;align-items:stretch;width:auto;
  justify-content:space-between;gap:10px}
.info-row .trust-row--stacked .trust-item{width:100%;justify-content:flex-start;flex:1 1 0}

/* right column: opening hours fills its half, no max-width cap inside the row */
.info-row .hours{flex:1 1 300px;max-width:none;margin:0;display:flex;flex-direction:column}
.info-row .hours .hours-list{flex:1;justify-content:space-between}

@media(max-width:640px){
  .info-row{flex-direction:column}
  .info-row .trust-row--stacked,.info-row .hours{flex:1 1 auto;width:100%}
}

/* search sits right above the categories */
.hero-search--above-cats{margin:8px auto 6px;max-width:640px}
.hero-search--above-cats .srch--hero{margin:0}

/* v4b: hero text hard left — cut the big left padding so title/desc hug the edge */
.hero--centered .hero-inner{padding-left:24px}
@media(max-width:640px){.hero--centered .hero-inner{padding-left:20px}}

/* v5: search tucked into the bottom-right corner of the hero photo (homepage) */
.hero-search--corner{position:absolute;z-index:4;right:32px;bottom:28px;
  width:min(400px,calc(100% - 64px));max-width:400px;margin:0}
.hero-search--corner .srch--hero{margin:0;background:rgba(255,255,255,.97);
  box-shadow:0 10px 34px rgba(0,0,0,.5)}
.hero-search--corner .srch--hero input{color:var(--ink)}
@media(max-width:820px){
  /* drop out of the corner and stack under the hero text on narrow screens;
     hero is a flex row on desktop, so switch it to block here first */
  .hero-photo{display:block}
  .hero-search--corner{position:relative;z-index:3;right:auto;bottom:auto;width:auto;
    max-width:none;margin:0;padding:0 24px 24px}
}
@media(max-width:640px){
  .hero-search--corner{padding:0 20px 20px}
}


/* on narrow screens keep them but let them wrap under the brand; nav "Zavolat" still exists */
@media(max-width:860px){
  .header-contacts{display:flex;width:100%;justify-content:center;order:2}
  .header-contacts .tel-link{display:inline-flex;font-size:13px;padding:6px 10px}
  .header-contacts .tel-link.mail{max-width:100%}
}

/* ===== v15: grid header — contacts(2 rows) | brand centered | nav ===== */
.header-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;gap:18px;
  height:auto;min-height:84px;position:static;
}
/* left column: contacts, two rows (phone on top, e-mail full width below) */
.header-contacts{
  justify-self:start;
  display:flex;flex-direction:column;align-items:stretch;gap:6px;
  min-width:0;order:1;width:max-content;
}
.header-contacts .contacts-top{
  display:flex;gap:6px;align-items:stretch;
}
.header-contacts .contacts-top .tel-link{flex:1 1 0}
.header-contacts .tel-link.mail{width:100%;justify-content:center}
.header-contacts .tel-link{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:14px;font-weight:800;padding:7px 11px;
  border:1px solid var(--line);border-radius:999px;color:var(--ink);
  white-space:nowrap;background:var(--surface);line-height:1;
}
.header-contacts .tel-link:hover{border-color:var(--red);color:var(--red)}
/* header icons share one box so phone / e-mail line up at the same optical size */
.header-contacts .tel-link .tel-ico{width:17px;height:17px;flex:none}
.header-contacts .tel-link .tel-ico{color:var(--red)}

/* center column: brand is geometrically centered on the page */
.brand{
  position:static;transform:none;left:auto;top:auto;
  justify-self:center;white-space:nowrap;order:2;
  font-size:32px;letter-spacing:-1px;
}
.brand small{font-size:17px;margin-left:2px}

/* right column: nav, compact so it fits its 1fr cell without crowding the brand */
.nav{justify-self:end;order:3;flex-wrap:nowrap;gap:6px}
.nav a{padding:8px 12px;font-size:13.5px}

/* --- responsive: keep brand centered; shrink sides progressively --- */
@media(max-width:1200px){
  .brand{font-size:28px}.brand small{display:none}   /* drop "Přeštice" tagline */
  .nav a{padding:7px 10px;font-size:13px}
}
@media(max-width:1040px){
  .brand{font-size:26px}
  .header-contacts .tel-num--full{font-size:12px}    /* e-mail stays, slightly smaller */
  .header-contacts .tel-link{font-size:13px;padding:6px 9px}
}
/* stack cleanly on phones: single column, brand on top, contacts + nav below */
@media(max-width:860px){
  .header-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
    padding-top:12px;padding-bottom:12px}
  .brand{order:-1;font-size:32px;width:100%;text-align:center;justify-content:center;justify-self:center}
  .brand small{display:inline}
  .header-contacts{width:max-content;max-width:100%;align-items:stretch;margin-inline:auto;justify-self:center}
  .header-contacts .contacts-top{justify-content:center}
  .header-contacts .tel-link.mail{width:100%}
  .header-contacts .tel-link .tel-num{display:inline}
  .header-contacts .tel-num--full{display:inline}
  .nav{margin-left:0;width:100%;flex-wrap:wrap;justify-content:center;justify-self:center}
}


/* --- Sleva / discount pricing --- */
.price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-top:auto}
.price-row .price{margin-top:0}
.price-new{font-weight:800;color:var(--red)}
.price-old{color:var(--muted);text-decoration:line-through;font-weight:600;font-size:13px}
.price-save{background:var(--red);color:#fff;font-weight:800;font-size:12px;padding:2px 7px;border-radius:6px;line-height:1.4}
.price-big-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin:8px 0 20px}
.price-big-row .price-big{margin:0}
.price-big-old{font-size:20px;color:var(--muted);text-decoration:line-through;font-weight:600}
.price-save-big{font-size:15px;padding:3px 10px}
/* The qualifier the admin types into the price field ("dle matrace") — a note
   about the price, never the price itself. @see App\Support\Price::split() */
.price-note{color:var(--muted);font-size:12px;line-height:1.35;margin-top:3px}
.price-note-big{font-size:14px;margin:-12px 0 20px}
.price-big-na{font-size:20px;color:var(--muted)}

.pdf-section{margin-top:44px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 22px 26px}
.pdf-section .page-head{margin-top:0}
.pdf-section .blurb{margin-bottom:18px}


/* ===== anniversary medallion (programmatic recreation of legacy 20let.png) ===== */
.anniv-badge{width:140px;height:140px;line-height:0;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.45))}
.anniv-badge svg{width:100%;height:100%;display:block}
.anniv-badge text{font-family:Georgia,"Times New Roman",serif}
/* viewBox is 300 units wide; font-size is in those units so it scales with the badge */
.anniv-badge .ab-arc{font-weight:700}
.anniv-badge .ab-arc--top{font-size:22px;fill:#4a350c;letter-spacing:1px}
.anniv-badge .ab-arc--bot{font-size:14px;fill:#5a3e12;letter-spacing:1.2px}
.anniv-badge .ab-num{font-weight:800;font-size:118px;letter-spacing:-3px;
  dominant-baseline:central}
.anniv-badge .ab-let{font-weight:700;font-size:30px;font-style:italic}
.anniv-badge .ab-stars{font-size:15px;letter-spacing:1px}

/* float it in the top-right corner of the hero photo */
.hero .anniv-badge{position:absolute;z-index:4;top:22px;right:26px}
@media(max-width:820px){
  .hero .anniv-badge{width:112px;height:112px;top:16px;right:16px}
}
@media(max-width:520px){
  .hero .anniv-badge{width:92px;height:92px;top:12px;right:12px}
}

/* Site-wide closure notice. Sits above the sticky header and scrolls away with
   the page, so .site-header keeps its 94px height and .sidebar{top:94px} holds.
   Muted on purpose — a bright box with a button at the top of the page reads as
   an ad and gets skipped. */
.vacation-bar{background:#fdf6e3;border-bottom:1px solid #eadfc0;color:#5c4a1a}
.vacation-bar p{margin:0;padding:10px 0;font-size:14.5px;line-height:1.5}
.vacation-bar strong{color:#3f3310}
.vacation-note{color:#7a6733}
@media(max-width:640px){.vacation-bar p{font-size:13.5px;padding:9px 0}}
.hours-vacation{margin:10px 0 0;padding:9px 12px;background:#fdf6e3;border:1px solid #eadfc0;border-radius:10px;color:#5c4a1a;font-size:13.5px;line-height:1.45}
.form-note{margin:0 0 14px;padding:10px 14px;background:#fdf6e3;border:1px solid #eadfc0;border-radius:10px;color:#5c4a1a;font-size:13.5px}

/* ===== v16 (2026-09-10): UI/UX audit — Tier 1 mobile blockers + a11y =====
   Audit items 1, 2, 7, 8, 11, 12, 30, 34. Appended as one labelled layer;
   nothing above this line was touched. Remove this block to revert M1. */

/* [1] The contact page carried its two columns as an inline style with no
   media query. On 390px the form column was pushed off the right edge and
   the whole document overflowed horizontally — which is what clipped the
   header on every other page too. */
.contact-cols{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
@media(max-width:820px){.contact-cols{grid-template-columns:1fr;gap:24px}}

/* [30] Keyboard focus was invisible site-wide: .srch input:focus killed the
   outline and no :focus-visible existed anywhere in 499 lines. */
:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:4px}
.srch input:focus-visible{outline:3px solid var(--red);outline-offset:1px}
.btn:focus-visible,.nav a:focus-visible,.card:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.hero a:focus-visible,.site-footer a:focus-visible{outline-color:#fff}

/* [34] Sticky sidebar was pinned to a header height that no longer exists
   (top:94px against the current min-height:84px). */
.sidebar{top:84px}

/* [12] minmax(230px) gave three fat columns on a 1440px screen. */
@media(min-width:1200px){.grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}

/* [11] One card per row turned a 24-item category into ~8000px of scrolling. */
@media(max-width:640px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .card .body{padding:10px 12px;gap:4px}
  .card .name{font-size:13.5px}
  .card .price{font-size:14.5px}
  .card .price.na{font-size:12.5px}
}

/* [8] On phones the sidebar dumped all 25 category links — roughly 900px of
   stacked text — above the first product. Products first, category list after. */
@media(max-width:860px){
  .layout>.sidebar{order:2;position:static;margin-top:36px}
  .layout>*:not(.sidebar){order:1}
}

/* [2] Twelve 80px discs in a nowrap flex row inside 390px overprinted each
   other. Below 820px it becomes a swipeable strip at natural tile size. */
@media(max-width:820px){
  .cat-grid--row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    justify-content:flex-start;gap:14px;padding-bottom:10px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    /* Scroll affordance: the strip cut "Křes…" off the right edge with nothing
       saying it could be swiped. Two fixed gradients (scroll) sit under two
       gradients pinned to the content (local), so each edge fade shows only
       while there is more strip in that direction — no JS, self-hiding at the
       ends. Colour is the page background these tiles sit on. */
    background:
      linear-gradient(to right,var(--bg),rgba(244,245,247,0)) left center/28px 100% no-repeat,
      linear-gradient(to left,var(--bg),rgba(244,245,247,0)) right center/28px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.10),rgba(0,0,0,0)) left center/12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.10),rgba(0,0,0,0)) right center/12px 100% no-repeat;
    background-attachment:local,local,scroll,scroll}
  .cat-grid--row>*{flex:0 0 84px;scroll-snap-align:start}
  .cat-grid--row .ct-name{font-size:11.5px}
}
@media(max-width:520px){
  .cat-grid--row{gap:12px}
  .cat-grid--row>*{flex:0 0 72px}
}

/* [7] "bezkonkurenční" clipped the hero box and the 30-let medallion sat on
   top of the headline — the first thing a phone visitor sees. */
.hero-photo h1{overflow-wrap:break-word}
@media(max-width:820px){
  .hero--centered .hero-inner{padding-right:140px}
}
@media(max-width:640px){
  .hero--centered .hero-inner{padding-right:24px}
  .hero .anniv-badge{position:static;margin:0 0 16px}
}

/* ===== v17 (2026-09-10): UI/UX audit M2 — catalog sort bar + below-fold blurb =====
   Append-only layer. Rollback = delete this block. */
.sortbar{
  display:flex; align-items:center; gap:10px;
  margin:0 0 18px; font-size:14px; color:var(--muted);
}
.sortbar label{font-weight:600}
.sortbar select{
  appearance:auto; font:inherit; color:var(--ink);
  background:var(--surface); border:1px solid var(--line);
  border-radius:10px; padding:7px 12px; cursor:pointer; max-width:100%;
}
.sortbar select:focus-visible{outline:2px solid var(--red); outline-offset:2px}
/* Category descriptive blurb, pushed below the product grid so products lead. */
.blurb--below{
  margin:28px 0 0; padding-top:20px;
  border-top:1px solid var(--line); max-width:820px; font-size:15px;
}
@media(max-width:640px){
  .sortbar{flex-wrap:wrap}
  .sortbar select{flex:1 1 auto}
}

/* ===== v18 (2026-09-10): UI/UX audit M4 — product page trust strip + CTA row =====
   Append-only layer. Rollback = delete this block. */
.product-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.product-note{margin:14px 0 0;font-size:14px;color:var(--muted)}
.trust{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;
  margin:40px 0 8px;
}
.trust-card{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:18px 20px;
}
.trust-ico{font-size:26px;line-height:1;flex:0 0 auto}
.trust-card strong{display:block;font-size:15.5px;margin:0 0 4px;color:var(--ink)}
.trust-card p{margin:0;font-size:14px;color:var(--muted);line-height:1.5}
.trust-card a{color:var(--red);font-weight:600}
@media(max-width:720px){
  .trust{grid-template-columns:1fr;gap:12px;margin-top:28px}
  .product-cta .btn{flex:1 1 auto}
}

/* ===== v19 (2026-09-10): UI/UX audit M5 — maps consent gate =====
   Click-to-load Google Maps: the embed area shows a styled consent panel and
   loads nothing from Google until the visitor clicks "Zobrazit mapu". The
   gated state gives the panel a map-ish neutral fill so it doesn't look empty.
   Rollback = delete this block. */
.map-embed--gated{min-height:220px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(0deg,#e9edf0,#eef1f4);
  background-image:linear-gradient(#dfe4e8 1px,transparent 1px),linear-gradient(90deg,#dfe4e8 1px,transparent 1px);
  background-size:100% 100%,22px 22px,22px 22px}
.map-consent{max-width:320px;margin:0 auto;padding:44px 20px 22px;text-align:center}
.map-consent-text{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--muted)}
.map-consent-btn{margin:0}

/* contact: opening-hours as a subtle nested block (no floating card) */
.contact-cols .hours{background:var(--bg);border:1px solid var(--line);box-shadow:none;border-radius:10px;padding:12px 14px;max-width:none;margin:16px 0 4px}
.contact-cols .hours-head{margin:0 0 8px}
.contact-cols .hours-list li{padding:6px 8px}
.contact-cols .hours-list li.is-today{background:var(--surface)}

/* ============================================================
   Readability layer — older visitors / low vision (WCAG AA/AAA)
   Appended override; scoped to be safe & reversible.
   ============================================================ */
:root{
  /* darker muted: #6b7280 (~4.8:1) -> #4b5563 (~7:1 on white) */
  --muted:#4b5563;
}
/* larger, airier base copy */
html{font-size:106.25%}            /* ~17px root */
body{line-height:1.6}
p,li,dd,dt{font-size:1rem}

/* lift the many sub-15px UI texts to a readable floor */
.blurb{font-size:16.5px;line-height:1.6}
.crumb{font-size:14.5px}
.nav a{font-size:15.5px}
.cat-list a{font-size:15px}
.count{font-size:13px}
.card .name{font-size:16px;line-height:1.35}
.card .price{font-size:16px}
.card .price.na{font-size:14px}
.specs th,.specs td{font-size:16px}
.form label{font-size:15.5px}
.form input,.form textarea,.form select{font-size:16px}   /* also stops iOS zoom-on-focus */
table.data th,table.data td{font-size:15px}
.site-footer .container{font-size:15px}
/* Touch readability bump, but the hours row is a two-column line ("Po–Pá (dnes)"
   + "9:00–12:00, 13:30–17:00") that has to survive 390px intact. A flat 15.5px
   made the day label ellipsize away the "(dnes)" marker, so it scales down with
   the viewport and only reaches 15.5px where there is room. */
.hours-list li{font-size:clamp(13px,3.3vw,15.5px)}
.hours-list li .hours-day em{font-size:clamp(11px,2.9vw,13px)}
.ct-name{font-size:13px}
.ct-count{font-size:12px}

/* make links obviously clickable in body content */
.blurb a,.crumb a,.specs a,.contact-cols a,.site-footer a,
p a[href^="tel:"],p a[href^="mailto:"],p a[href^="http"]{
  text-decoration:underline;text-underline-offset:2px;
}
.nav a,.btn,.quickbar a,.cat-list a,.card a{text-decoration:none}  /* keep chrome/buttons clean */

/* visible keyboard focus for everyone */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--red);outline-offset:2px;border-radius:4px;
}

/* ============================================================
   BRAND REDESIGN 2026-09-11 — black / red / white / grey
   Appended overlay: wins by cascade order.
   Two rules this file lives by:
   1. the black is a material, not a fill — it has a gradient,
      a top highlight and a faint red bloom behind the brand;
   2. vertical space is expensive — nothing gets padding it
      does not earn.
   ============================================================ */

/* --- tokens --- */
:root{
  --red:#e30613; --red-dark:#b3040f; --red-bright:#ff2d3a;
  --ink:#121214; --ink-soft:#3c4149;
  --muted:#5d6570; --line:#e3e5e8;
  --bg:#f4f5f6; --surface:#ffffff;
  --black:#0c0d10;
  --black-grad:linear-gradient(180deg,#1b1f26 0%,#111419 46%,#0a0b0e 100%);
  --radius:12px;
  --shadow:0 1px 3px rgba(0,0,0,.07),0 8px 20px rgba(0,0,0,.045);
}

h1,h2{letter-spacing:-.5px}

/* --- header: cool glass over black, NO red wash ---
   The old red radial bloom under the wordmark mixed with the dark gradient into
   a muddy brown and read as "ticklish". Red is now a point accent only (the M+M,
   the CTA), never a field wash. The header material is: layered black + a cool
   silver sheen off the top-left + a faint fine-grain glass texture, so it can
   read as the same pane of glass as the hero below it. The bottom edge is a
   white hairline (glass rim), not a red rule. */
.site-header{
  position:relative;z-index:2;
  /* softer charcoal than --black-grad — still clearly black, just doesn't shout.
     A faint warmth (barely more R/G than B), less brown than before — near-neutral. */
  background:linear-gradient(180deg,#242522 0%,#1a1b18 46%,#121311 100%);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 18px rgba(0,0,0,.35),
    0 10px 26px -12px rgba(0,0,0,.55);
}
/* cool silver sheen from the top-left + a hair of a grain so the black reads as
   frosted glass, not flat paint. Two stops only — kept subtle. */
.site-header::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 150% at 10% -35%,rgba(180,196,220,.14) 0%,rgba(180,196,220,0) 58%),
    radial-gradient(90% 130% at 92% -20%,rgba(150,166,190,.08) 0%,rgba(150,166,190,0) 55%),
    linear-gradient(180deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,0) 40%);
}
/* fine-grain glass texture — a tiled SVG noise, very low opacity, so the pane
   has micro-structure instead of a dead-flat fill. Shared with the hero. */
.site-header::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.header-inner{height:64px;position:relative;z-index:1}
.site-header .container{position:relative;z-index:1}
/* --- wordmark: the company name, made to lead ---
   Was 26px/800 white sitting at the same weight as the nav — it vanished. Now
   it is the loudest thing in the bar: bigger, tighter, with the two words locked
   into one lockup. "M+M" gets a subtle red-glass chip behind it so the mark
   reads as a logo, not three words in a row. "Přeštice" drops to a quiet
   location tag (uppercase, tracked, muted) so it stops competing with the name. */
.brand{font-size:34px;font-weight:800;color:#fff;letter-spacing:-1px;
  display:inline-flex;align-items:center;gap:8px;line-height:1;
  text-shadow:0 1px 3px rgba(0,0,0,.55)}
.brand .mm{
  color:#f24651;font-weight:800;letter-spacing:-1px;
  text-shadow:0 1px 3px rgba(0,0,0,.55)}
.brand small{color:#8b929c;font-size:11px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;align-self:center;
  padding-left:11px;margin-left:2px;border-left:1px solid rgba(255,255,255,.16)}

/* contact pills: clean glass — near-transparent, thin light rim */
.header-contacts .tel-link{
  position:relative;color:#fff;font-weight:700;padding:7px 13px;border-radius:10px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  transition:background .18s ease,border-color .18s ease;
}
.header-contacts .tel-link .tel-num{color:#f2f4f7}
.header-contacts .tel-link .tel-ico{color:var(--red-bright)}
.header-contacts .tel-link:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.22);
}
.header-contacts .tel-link:hover .tel-num{color:#fff}

.nav a{color:#b6bcc4;font-weight:600;font-size:14.5px}
.nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.nav a.cta{background:var(--red);color:#fff;box-shadow:0 2px 12px rgba(0,0,0,.35)}
.nav a.cta:hover{background:var(--red-bright);color:#fff}
.header-search{padding-bottom:11px;background:transparent;position:relative;z-index:1}

/* --- hero: shorter, photo reads through on the right --- */
/* butt the hero straight up against the header's red rule: no top gap, and the
   two top corners go square so the photo meets the black bar as one edge. The
   bottom corners stay rounded to match the cards below. */
.hero{margin:0 0 16px;border-top-left-radius:0;border-top-right-radius:0}
.hero-photo{min-height:360px;border-top-left-radius:0;border-top-right-radius:0}
.hero-photo::before{background-image:url('/images/site/brand-hero.jpg')}
/* no red wash over the photo any more — it was the other half of the muddy
   brown. A cool neutral scrim keeps the white text legible on the left, and the
   same fine glass grain as the header is stacked on top (as an extra background
   layer, so no new markup) — so hero + header read as one frosted pane. The
   grain data-URI is first (topmost layer), scrim gradients below it.
   NEW (Jarda): a "barevný podkres" so the left/bottom does not read as an empty
   dark plate — two very low-saturation, localized blooms: a warm red one down in
   the bottom-left behind the copy + CTA (brand colour, but tiny alpha and pinned
   to the corner so it can't muddy the whole field to brown again), and a cool
   blue-grey one bottom-right for depth. Citlivě = alphas stay under .10. */
.hero-photo::after{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"),
    radial-gradient(70% 80% at 12% 100%,rgba(200,208,220,.12) 0%,rgba(200,208,220,0) 55%),
    radial-gradient(60% 70% at 96% 104%,rgba(120,150,200,.10) 0%,rgba(120,150,200,0) 55%),
    radial-gradient(100% 130% at 6% 40%,rgba(150,166,190,.08) 0%,rgba(150,166,190,0) 45%),
    linear-gradient(100deg,rgba(10,12,15,.92) 0%,rgba(10,12,15,.82) 38%,rgba(10,12,15,.42) 70%,rgba(10,12,15,.10) 100%);
  background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat;
}
.hero-inner{padding:36px 40px;max-width:640px}
.hero--centered.hero-photo h1{
  font-size:clamp(30px,3.8vw,46px);line-height:1.06;font-weight:800;margin:0 0 10px}
.hero-photo p{color:#dfe3e8;font-size:16.5px;line-height:1.5;max-width:500px;text-shadow:none}
/* accent = plain red word, no underline, no glow */
.hero .accent,.hero-photo h1 .accent{color:var(--red-bright);font-weight:800;text-shadow:none;background:none}

/* --- anniversary mark: a plaque, not a coin ---
   The disc is gone. A circle with arced type is a stock seal; this page is
   built from rounded rectangles, dark glass and short red rules, so the mark
   is made of glass and type instead. This is lighter, glassier dark glass than
   the header pills — low opacity + strong blur so it reads as sitting IN the
   photo, not stuck on top of it. No standing red rule: the red lives inside the
   word "LET", and a hairline divider parts the numeral from the meta column.
   Real HTML text, so the sizes are the sizes — no 300-unit viewBox to get wrong. */
.hero .anniv-badge{
  position:absolute;z-index:4;top:18px;right:18px;
  width:auto;height:auto;line-height:1;filter:none;opacity:1;
  /* the hero is .hero--centered, so this has to opt out of the inherited centring */
  text-align:left;
  display:flex;align-items:center;gap:12px;
  padding:11px 18px;border-radius:13px;
  background:linear-gradient(180deg,rgba(20,23,29,.42) 0%,rgba(8,9,12,.55) 100%);
  -webkit-backdrop-filter:blur(13px) saturate(115%);backdrop-filter:blur(13px) saturate(115%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 6px 18px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05);
}
.anniv-badge .ab-num{font-size:45px;font-weight:800;letter-spacing:-2px;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.55)}
/* hairline divider between the numeral and the two-line meta column */
.anniv-badge .ab-meta{display:flex;flex-direction:column;gap:5px;padding:3px 0 0 12px;
  margin-left:1px;border-left:1px solid rgba(255,255,255,.14)}
/* font-style:normal is load-bearing — the legacy .ab-let rule (line ~477) is
   still in the file and still matches this span, and it sets italic.
   text-shadow gives "LET" and the year span their own legibility floor over any
   patch of the photo, independent of the glass behind them. */
.anniv-badge .ab-let{font-size:13.5px;font-weight:800;font-style:normal;
  letter-spacing:3.5px;text-transform:uppercase;color:var(--red-bright);
  text-shadow:0 1px 4px rgba(0,0,0,.7)}
.anniv-badge .ab-since{font-size:11.5px;font-weight:700;letter-spacing:1.5px;color:#c2c8d0;
  text-shadow:0 1px 3px rgba(0,0,0,.65)}

/* --- hero search: white bar, bottom right --- */
.hero-search--corner{position:absolute;left:auto;right:0;bottom:0;z-index:5;
  width:min(660px,94%);padding:0 20px 20px;display:flex;justify-content:flex-end}
.hero-search--corner .srch--hero{margin:0;background:#fff;border-radius:12px;padding:6px 6px 6px 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);width:100%}
.hero-search--corner .srch--hero input{font-size:16px;font-weight:500;color:#1a1d21;padding:11px 8px}
.hero-search--corner .srch--hero .srch-go{background:var(--red);color:#fff;border-radius:9px;
  padding:11px 22px;font-size:15px;font-weight:700;min-height:44px}
.hero-search--corner .srch--hero .srch-go:hover{background:var(--red-dark)}

/* --- trust + hours strip: one compact band --- */
/* the vacation strip is a note, not a headline */
.vacation-bar p{padding:7px 0;font-size:13.5px;line-height:1.45}

.info-row{margin:0 0 18px;gap:16px}
/* chips group in the middle instead of being spread to the card's height */
.info-row .trust-row--stacked{justify-content:center;gap:8px}
.info-row .trust-row--stacked .trust-item{flex:0 0 auto;padding:10px 15px;border-radius:10px}
.trust-item{font-weight:700;color:var(--ink)}
/* check marks in green — a positive "confirmed" cue */
.trust-item .chk{width:19px;height:19px;font-size:11px;background:#e4f7ec;color:#1faa53}
.trust-item:hover{border-color:#25d366}
.hours{padding:13px 18px}
.hours-head{margin:0 0 6px}
.hours-list li{padding:4px 8px}

/* --- section heads: short red rule, tight --- */
.page-head{margin:0 0 12px;gap:11px}
.page-head h1,.page-head h2{font-size:27px;font-weight:800;letter-spacing:-.5px}
.page-head::before{content:"";display:inline-block;width:24px;height:4px;background:var(--red);
  border-radius:2px;vertical-align:middle;position:relative;top:-3px;flex:none}

/* --- category tiles: smaller discs, less air --- */
.cat-grid{gap:10px 4px}
.cat-disc{width:64px;height:64px}
.cat-disc svg{width:30px;height:30px}
.cat-tile{gap:4px;padding:6px 2px}
.ct-name{font-size:11.5px;min-height:2.1em}
.ct-count{font-size:10.5px}

/* --- cards: quiet until hovered --- */
.grid{gap:16px}
.card{border-color:#dcdee1;border-top:3px solid transparent}
.card:hover{transform:translateY(-3px);border-top-color:var(--red);
  box-shadow:0 8px 24px rgba(0,0,0,.09),0 2px 6px rgba(0,0,0,.06)}

/* --- footer: same material as the header, mirrored --- */
/* top edge mirrors the header: a light hairline + inset highlight + soft shadows
   around it, instead of the red rule. Same frosted-pane language, bookends the page. */
.site-footer{
  position:relative;
  background:linear-gradient(180deg,#1a1b18 0%,#151613 54%,#101110 100%);
  color:#a7adb5;border-top:1px solid rgba(255,255,255,.12);padding:30px 0 34px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(255,255,255,.06),
    0 -2px 18px rgba(0,0,0,.35),
    0 -10px 26px -12px rgba(0,0,0,.55);
}
.site-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(110% 170% at 50% -18%,rgba(190,200,214,.16) 0%,rgba(190,200,214,0) 58%);
}
.site-footer .container{position:relative;z-index:1}
.site-footer a{color:#d6dae0}
.site-footer a:hover{color:#fff}
.site-footer strong{color:#fff;font-weight:800;letter-spacing:-.2px}
/* readable rhythm: give the <br>-separated rows air and a clear hierarchy */
.site-footer .container{line-height:1.75}
.site-footer .container>strong:first-child{font-size:16px}
.site-footer small{display:inline-block;margin-top:10px;color:#8b929b;font-size:13px}

/* --- buttons --- */
.btn{border-radius:10px;background:var(--red)}
.btn:hover{background:var(--red-dark)}

@media(max-width:900px){
  .hero--centered.hero-photo h1{font-size:36px}
  .hero-inner{padding:32px 28px}
  .hero-photo{min-height:330px}
}
@media(max-width:640px){
  .vacation-bar p{padding:7px 0;font-size:13px}
  .header-inner{height:auto;padding:8px 0;gap:8px}
  .brand{font-size:25px}
  .header-contacts{gap:6px}
  .header-contacts .tel-link{padding:5px 10px;font-size:13.5px}
  .nav a{padding:6px 10px}
  /* vertical ramp: the text sits over the bottom half on narrow screens */
  .hero{margin:12px 0}
  .hero-photo{min-height:0}
  .hero-photo::after{
    background:linear-gradient(180deg,rgba(8,9,11,.5) 0%,rgba(8,9,11,.78) 42%,rgba(8,9,11,.94) 100%)}
  .hero--centered.hero-photo h1{font-size:28px;line-height:1.12;margin-bottom:8px}
  .hero-photo p{font-size:15.5px;line-height:1.45}
  /* the 54px top is the badge's clearance: it is pinned in the corner and the
     H1's first line would otherwise run straight into it at 390px */
  .hero-inner{padding:57px 18px 12px}
  .hero .anniv-badge{position:absolute;margin:0;top:9px;right:10px;
    gap:10px;padding:7px 12px;border-radius:11px}
  .anniv-badge .ab-num{font-size:27px;letter-spacing:-1.3px}
  /* one line on mobile — the year span is noise at this size and survives in aria-label */
  .anniv-badge .ab-meta{gap:0;padding:1px 0 0 10px}
  .anniv-badge .ab-let{font-size:11px;letter-spacing:2.5px}
  .anniv-badge .ab-since{display:none}
  /* the board is a flex row (headline | corner search); on phones stack it as a
     column so the un-cornered search drops BELOW the headline instead of being
     pushed off the right edge and clipped by the page's overflow:hidden. */
  .hero-page--board{flex-direction:column;align-items:stretch;justify-content:center}
  /* the stacked board (headline + full-width search) needs more vertical room
     than the 360px landscape hero; raise --hero-h so the deck track and both
     pages grow together (keeps the horizontal snap aligned) and the search
     button is not clipped by the page's overflow:hidden. */
  .hero-deck{--hero-h:470px}
  .hero-search--corner{position:relative;left:auto;right:auto;width:100%;padding:0 14px 14px;margin-top:12px}
  .info-row{margin:0 0 14px;gap:10px}
  .info-row .trust-row--stacked .trust-item{width:100%;padding:9px 14px}
}

/* ===== v19 (2026-09-12): section header typography polish =====
   Append-only. No markup or copy changes. Rollback = delete this block. */

/* count pill: quieter, reads as a label not an alarm */
.page-head .pill{
  background:var(--bg);
  color:var(--muted);
  font-weight:700;
  font-size:12.5px;
  padding:3px 11px;
  border:1px solid var(--line);
  letter-spacing:.2px;
}

/* pill rides the h1 cap height, not the baseline */
.page-head{align-items:center;gap:12px}
.page-head .pill{align-self:center;transform:translateY(1px)}

/* intro blurb: tighter measure, calmer color, balanced spacing */
.blurb{
  max-width:60ch;
  color:var(--ink);
  opacity:.7;
  margin:2px 0 26px;
  line-height:1.55;
}

/* ===== v20 (2026-09-12): nav link size trim =====
   Append-only. Header nav read slightly large; nudge down + tighten. */
.nav a{font-size:13.5px;letter-spacing:.1px}
@media(max-width:1100px){.nav a{font-size:13px}}

/* ===== v21 (2026-09-12): unified section-head spacing across all pages =====
   Append-only. Adds top breathing room so the first heading isn't jammed
   against the header. Applies site-wide via the shared main.container.
   Homepage is exempt: it opens with a full-bleed hero, not a page-head. */
main.container > .page-head:first-child{margin-top:28px}

/* keep the intro blurb rhythm consistent on every page that has one */
.page-head + .blurb{margin-top:2px}

/* ===== v23 (2026-09-12): hero as a 2-page horizontal deck =====
   Page 1 = board (headline + search + O nás button). Page 2 = O nás story.
   The deck fills the hero photo; scroll right / click O nás to slide to the
   story with a smooth snap. The O nás button pulses lightly.
   Rollback = delete this block + revert the .hero-deck markup and the deck
   <script> in home.blade.php (backups: *.bak-hero2-*). */

/* deck fills the hero and sits above the photo/gradient layers */
.hero-deck{
  position:relative;
  z-index:3;
  flex:1 1 100%;
  width:100%;
  height:100%;
  align-self:stretch;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hero-deck::-webkit-scrollbar{display:none}
.hero-deck__track{
  display:flex;
  /* [r2] auto height + min-height: the deck grows to its tallest page instead
     of clipping it. align-items defaults to stretch, so both pages stay the
     same height and the horizontal scroll-snap stays aligned. */
  height:auto;
  min-height:var(--hero-h,360px);
}
.hero-page{
  position:relative;
  flex:0 0 100%;
  width:100%;
  min-width:100%;
  height:auto;
  min-height:var(--hero-h,360px);
  box-sizing:border-box;
  scroll-snap-align:start;
  display:flex;
  align-items:center;
  overflow:hidden;
}

/* page 1 keeps the existing hero-inner + corner search look;
   hero-inner animation kept, but the deck now owns scroll */
.hero-page--board{padding:0}

/* the O nás button (reused from v22, restyled for inline placement) */
.about-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:26px;
  padding:11px 20px;
  border:0;
  cursor:pointer;
  border-radius:12px;
  font-weight:700;
  font-size:15px;
  letter-spacing:.2px;
  color:#fff;
  background:linear-gradient(145deg,var(--red),var(--red-dark));
  box-shadow:0 6px 18px rgba(227,6,19,.32);
  animation:about-pulse 2.8s ease-in-out infinite;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.about-btn__arrow{transition:transform .18s ease}
.about-btn:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 10px 24px rgba(227,6,19,.42)}
.about-btn:hover .about-btn__arrow{transform:translateX(3px)}
.about-btn:active{transform:translateY(0)}
.about-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
@keyframes about-pulse{
  0%,100%{box-shadow:0 6px 18px rgba(227,6,19,.30),0 0 0 0 rgba(227,6,19,.34)}
  50%{box-shadow:0 6px 18px rgba(227,6,19,.30),0 0 0 8px rgba(227,6,19,0)}
}

/* page 2: the story, sized to roughly fill the board */
.hero-page--about{padding:0;overflow:hidden;align-items:flex-start}
.about-story{
  position:relative;
  z-index:3;
  padding:10px 48px 14px;
  max-width:760px;
  min-height:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  animation:heroFade 1.1s ease-out both;
}
.about-story__eyebrow{
  display:inline-block;
  font-size:13px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#ff3b45;
  margin-bottom:4px;
  text-shadow:0 2px 14px rgba(0,0,0,.6);
}
.about-story__title{
  margin:0 0 10px;
  font-size:23px;
  line-height:1.15;
  color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}
.about-story p{
  margin:0 0 9px;
  color:#f3f4f6;
  font-size:15px;
  line-height:1.45;
  max-width:640px;
  text-shadow:0 1px 8px rgba(0,0,0,.85);
}
.about-story strong{color:#fff;font-weight:700}
.about-story__cta{color:#fff}
.about-actions{
  flex:1 1 auto;
  display:flex;
  align-items:center;
}
.about-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:10px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.about-back:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6);transform:translateX(-2px)}
.about-back:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media(max-width:640px){
  /* [r2] the old mobile block made the story BIGGER (36px padding, 26px title),
     which pushed ~330px of copy and the whole CTA row out of the hero box.
     Compact it instead so the panel fits phones with the deck's auto height. */
  .about-story{padding:20px 18px 22px}
  .about-story__eyebrow{font-size:11px;letter-spacing:1.5px;margin-bottom:2px}
  .about-story__title{font-size:20px;margin:0 0 8px}
  .about-story p{font-size:14px;line-height:1.5;margin:0 0 8px}
}
@media(prefers-reduced-motion:reduce){
  .about-btn{animation:none}
  .hero-deck{scroll-behavior:auto}
}

/* product photo zoom + lightbox */
.photo-zoom{display:block;width:100%;border:0;background:none;padding:0;margin:0;cursor:pointer;position:relative;line-height:0}
.photo-zoom img{width:100%;height:auto;max-height:520px;object-fit:contain;display:block}
.photo-zoom-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  background:rgba(26,26,26,.72);color:#fff;font-size:12px;font-weight:600;line-height:1;
  padding:6px 12px;border-radius:999px;opacity:0;transition:opacity .15s;pointer-events:none}
.photo-zoom:hover .photo-zoom-hint,.photo-zoom:focus-visible .photo-zoom-hint{opacity:1}
.lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:rgba(15,15,15,.78);padding:8vh 4vw}
.lightbox[hidden]{display:none}
.lightbox-inner{position:relative;background:var(--surface);border-radius:var(--radius);
  padding:14px;box-shadow:0 20px 60px rgba(0,0,0,.45);max-width:min(92vw,1100px);cursor:default}
.lightbox-img{display:block;max-width:100%;max-height:76vh;width:auto;height:auto;
  border-radius:8px;object-fit:contain}
.lightbox-close{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;
  border:0;background:var(--red);color:#fff;font-size:26px;line-height:1;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center}
.lightbox-close:hover{background:var(--red-dark)}
@media(max-width:720px){.lightbox{padding:0}.lightbox-inner{max-width:100vw;height:100%;border-radius:0;display:flex;align-items:center;justify-content:center}.lightbox-img{max-height:88vh}.lightbox-close{top:8px;right:8px}}

/* Search-as-you-type category dropdown (appended; does not touch existing .srch rules) */
.srch{position:relative}
.srch-drop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);overflow:hidden;max-height:320px;overflow-y:auto}
.srch-drop a{display:block;padding:10px 14px;color:var(--ink);text-decoration:none;font-size:14px}
.srch-drop a:hover,.srch-drop a.is-active{background:var(--bg)}
.srch-drop a+a{border-top:1px solid var(--line)}
/* Product results appended below category results in the same dropdown. */
.srch-drop .srch-group-label{padding:6px 14px;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);background:var(--bg);border-top:1px solid var(--line)}
.srch-drop .srch-price{float:right;color:var(--muted);font-size:13px}

/* ===== v20 (2026-09-13): responsive audit iteration 2 =====
   Findings from a CDP device-metrics sweep (11 viewports x 7 pages).
   Append-only. Rollback = delete this block + restore app.css.bak-responsive2-*. */

@media(max-width:640px){
  /* [r2-1] At 320px the <h1> "Nábytek za bezkonkurenční ceny" has a min-content
     width of 243px; with min-width:auto on the flex item plus 44px of padding
     .hero-inner was floored at 287px inside a 280px box and clipped 7px.
     min-width:0 lets it shrink so overflow-wrap:break-word can do its job. */
  .hero-inner{min-width:0}

  /* [r2-1b] min-width:0 alone was not enough: the v23 deck block declares
     .hero-page{align-items:center}, which has the SAME specificity as the
     .hero-page--board rule further up this file and wins on source order. With
     a centered (not stretched) cross size .hero-inner is fit-content sized, so
     it still snapped back to the h1's 243px min-content. Forcing stretch here —
     after v23 — gives it the page's full 280px and break-word can act. */
  .hero-page--board{align-items:stretch}
}

@media(max-width:360px){
  /* "bezkonkurenční" measures 243px at 28px but a 320px page only offers 236px
     of content width, so overflow-wrap:break-word would snap it mid-word. 26px
     fits the word whole — no hyphen-less break in the headline. */
  .hero--centered.hero-photo h1{font-size:26px}
}

/* [r2-2] Tap targets below the WCAG 2.5.8 (AA) 24px minimum. Vertical padding on
   the inline links grows the hit area without changing the text flow; the raised
   line-height keeps the padded areas of stacked lines from overlapping.
   pointer:coarse is in the query because iPad-class touch devices are 768-1024px
   wide and were missing these fixes entirely, while mouse-driven laptops in the
   same width range should keep the tighter footer. */
@media(max-width:640px),(pointer:coarse){
  .crumb{line-height:2.2}
  .crumb a{padding:7px 2px}
  .site-footer .container{line-height:2.2}
  .site-footer .container a{padding:7px 0}
  .contact-cols .form p a{padding:5px 0}

  /* [r2-3] the GDPR consent checkbox rendered 13x13px */
  .form input[type=checkbox]{width:24px;height:24px;flex:none}
}

/* [r2-4] Header broke open on tablet portrait (641-860px). Three rules collided:
   the v15 grid header sets .header-inner{height:auto;min-height:84px}, a later
   block re-declares .header-inner{height:64px} (same specificity, wins on source
   order), and the @media(max-width:860px) block switches .header-inner to a
   WRAPPING flex where brand, contacts and nav each take width:100% — three rows,
   ~185px tall. With the height still pinned at 84px the contacts row and the
   entire nav spilled out of the header box and, because .site-header is
   z-index:2, painted straight over the hero. Phones were fine only because the
   @media(max-width:640px) block happens to reset height:auto; 641-860 (iPad
   portrait, 768/820) had no such reset. Give the stacked layout its natural
   height wherever it applies. */
@media(max-width:860px){
  .header-inner{height:auto}
}

/* [r2-5] "Katalogy výrobců" heading row broke out of its container at 320px.
   .page-head is a nowrap flex of three items — the red ::before dash (24px), the
   h2, and the "PDF ke stažení" pill — and none of them can shrink below its own
   min-content, so the row measured 255px inside a 234px box and the pill landed
   21px past the right gutter (still on screen, but visibly out of alignment).
   Letting the row wrap drops the pill onto its own line instead. */
@media(max-width:640px){
  .page-head{flex-wrap:wrap}
}

/* Hidden-but-visible admin entrypoint: the © after the footer brand links to /admin.
   Blends into the footer grey so visitors read past it; owner knows to click it. */
.site-footer .footer-admin{color:#6b7280;text-decoration:none;margin-left:2px;cursor:default}
.site-footer .footer-admin:hover{color:#fff;cursor:pointer}

/* ==========================================================================
   Inline editing on the public category page (/{kategorie}?edit=1)
   Only ever rendered for a logged-in admin; a visitor never loads any of it.
   ========================================================================== */

/* Entry point in the category heading, visible only when logged in. */
.edit-enter{margin-left:auto;font-size:14px;font-weight:600;color:var(--red);
  border:1px solid var(--red);border-radius:999px;padding:6px 14px;white-space:nowrap}
.edit-enter:hover{background:var(--red);color:#fff}

/* Sticky toolbar for the edit session. */
.edit-bar{position:sticky;top:70px;z-index:30;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:#fff7f7;border:1px solid var(--red);border-radius:var(--radius);
  padding:12px 16px;margin:0 0 18px;box-shadow:var(--shadow)}
.edit-bar-title{color:var(--red);white-space:nowrap}
.edit-bar-hint{font-size:13.5px;color:var(--muted);flex:1;min-width:240px}
.edit-bar-hint a{color:var(--red);text-decoration:underline}
.edit-bar .btn{min-height:38px;padding:0 14px;font-size:14px}
.edit-status{font-size:13.5px;font-weight:600;color:#15803d;min-width:110px;text-align:right}
.edit-status.is-error{color:var(--red)}
@media(max-width:860px){.edit-bar{top:0}}

/* The editable card keeps the visitor's look and gains a tool strip. */
.grid--edit .card--edit{position:relative;cursor:default}
.grid--edit .card--edit:hover{transform:none;box-shadow:var(--shadow)}
.grid--edit .card--edit.is-dragging{opacity:.4}
.grid--edit .card--edit.is-busy{opacity:.55;pointer-events:none}

/* Tight on purpose: the strip must fit a 230px grid column without clipping. */
.card-tools{display:flex;align-items:center;gap:2px;padding:5px 6px;
  background:#fafafa;border-bottom:1px solid var(--line)}
.card-tools .tool-spacer{flex:1;min-width:0}
.drag-handle{cursor:grab;padding:2px 3px;color:var(--muted);font-size:15px;line-height:1;user-select:none}
.drag-handle:active{cursor:grabbing}
.tool-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:23px;height:23px;
  padding:0;border:1px solid var(--line);border-radius:6px;background:#fff;
  color:var(--ink);font-size:11px;line-height:1;cursor:pointer}
.tool-btn:hover{background:var(--bg)}
.tool-del{color:var(--red);border-color:rgba(227,6,19,.35)}
.tool-del:hover{background:var(--red);color:#fff}
/* The one button that carries a word, so it overrides the square tool size. */

/* The whole card opens the dialog, so it reads as one clickable surface. */
.grid--edit .card--edit .thumb,
.grid--edit .card--edit .body{cursor:pointer}

/* ---- new product tile ---- */
.card--new{border:2px dashed var(--line);background:#fcfcfd;box-shadow:none;cursor:pointer;
  align-items:center;justify-content:center;gap:8px;min-height:220px;color:var(--muted);
  font:inherit;font-weight:600;padding:20px;text-align:center}
.card--new:hover{border-color:var(--red);color:var(--red);background:#fff;transform:none}
.card--new[disabled]{opacity:.5;cursor:progress}
.card--new-plus{font-size:34px;line-height:1;font-weight:400}
.card--new-label{font-size:14px}

/* ---- product dialog (photo, fields, parameters, category) ---- */
.edit-panel{position:fixed;inset:0;z-index:9999;background:rgba(15,23,42,.45);
  display:flex;align-items:center;justify-content:center;padding:20px}
.edit-panel[hidden]{display:none}
.edit-panel-box{background:var(--surface);border-radius:var(--radius);box-shadow:0 24px 60px rgba(0,0,0,.28);
  width:min(560px,100%);max-height:88vh;overflow:auto;padding:20px 22px 18px}
.edit-panel-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.edit-panel-head strong{font-size:16px}
.edit-panel-name{flex:1;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Fields span the dialog; photos get their own full-width section below. */
.pd-main{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.pd-upload{cursor:pointer;text-align:center;flex:none}
.pd-section-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.pd-section-head .pd-section-title{margin:0;flex:1}
.pd-gcount{color:var(--muted);font-weight:600;letter-spacing:0}
.pd-fields{flex:1;min-width:220px;display:flex;flex-direction:column;gap:12px}
.pd-field{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.pd-field span{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.pd-field input{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:14px;background:#fff}
.pd-field input:focus{outline:2px solid var(--red);outline-offset:-1px;border-color:var(--red)}
.pd-row{display:flex;gap:12px;flex-wrap:wrap}
/* Prices are free text ("8.990 Kc (akce na postele)"), so the current one gets more room. */
.pd-row .pd-field{flex:1 1 120px}
.pd-row .pd-field:first-child{flex:2 1 180px}
.pd-check{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:pointer}
.pd-check input{margin:0;accent-color:var(--red)}
.pd-section{border-top:1px solid var(--line);padding-top:14px}
.pd-section-title{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);margin-bottom:8px}
.specs--edit th,.specs--edit td{padding:6px 8px 6px 0;vertical-align:middle}
.specs--edit th{width:38%}
.specs--edit input{width:100%;box-sizing:border-box;padding:7px 9px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:14px;background:#fff}
.specs--edit input:focus{outline:2px solid var(--red);outline-offset:-1px;border-color:var(--red)}
.specs--edit .specs-del{width:30px;padding-right:0;text-align:right}
.edit-panel-empty{color:var(--muted);font-size:13px;margin:6px 0 0}
.btn-sm{min-height:34px;padding:0 12px;font-size:13px;margin-top:10px}
.edit-panel-move{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.edit-panel-move label{font-size:13px;color:var(--muted)}
.edit-panel-move select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:14px;background:#fff}
.edit-panel-link{margin-left:auto;font-size:13px;color:var(--muted)}
.edit-panel-link:hover{color:var(--red)}
.edit-panel-foot{display:flex;align-items:center;gap:10px;margin-top:16px}
.edit-panel-status{flex:1;font-size:13px;color:var(--muted)}
.edit-panel-status.is-error{color:var(--red);font-weight:600}
body.has-panel{overflow:hidden}

/* Rozcestník v /admin: dlaždice kategorií vedou rovnou do režimu úprav. */
.admin-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:14px 0 30px}
.admin-tile{display:flex;flex-direction:column;gap:4px;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.admin-tile:hover{border-color:var(--red);transform:translateY(-2px)}
.admin-tile strong{font-size:16px}
.admin-tile span{color:var(--muted);font-size:13px}
.admin-tile--akce{border-color:var(--red)}
.admin-tile--akce strong{color:var(--red)}
/* ---- inline category editing (/kategorie?edit=1) ---- */
/* Five tools (⠿ ◀ ▶ ↗ ✕) are wider than the 96px tile, so edit mode gets its
   own, roomier columns and the pill is centred instead of hanging off the right
   corner — otherwise the pills overlap the neighbouring tiles. */
.cat-grid--edit{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:22px 8px}
.cat-tile--edit{position:relative;cursor:pointer}
.cat-tile--edit:hover .cat-disc{transform:translateY(-2px);border-color:var(--red)}
.cat-tile--edit.is-dragging{opacity:.4}
.cat-edit-tools{position:absolute;top:-13px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2px;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:1px 2px;box-shadow:var(--shadow);z-index:5}
.cat-edit-tools .tool-btn{width:20px;height:20px}
.cat-tile--new{border:2px dashed var(--line);background:#fcfcfd;box-shadow:none;cursor:pointer;
  align-items:center;justify-content:center;gap:8px;min-height:110px;color:var(--muted);
  font:inherit;font-weight:600;padding:10px;text-align:center}
.cat-tile--new:hover{border-color:var(--red);color:var(--red);background:#fff;transform:none}
.cat-tile--new[disabled]{opacity:.5;cursor:progress}
.cat-tile--new-plus{font-size:26px;line-height:1;font-weight:400}
.cat-tile--new-label{font-size:12px}
/* category dialog (name + blurb); shares .edit-panel-box/.pd-* with the product dialog */
#cat-edit-panel .pd-fields{margin-bottom:16px}
.cd-slug{margin:0;font-size:12px;color:var(--muted)}
.cd-slug code{font-family:inherit}
.cd-blurb{width:100%;box-sizing:border-box;margin-top:8px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:14px;line-height:1.5;resize:vertical}
.cd-blurb:focus{outline:2px solid var(--red);outline-offset:-1px;border-color:var(--red)}
/* Admin search terms in the category dialog + the read-only built-in list. */
.cd-synonyms{width:100%;box-sizing:border-box;margin-top:8px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:14px}
.cd-synonyms:focus{outline:2px solid var(--red);outline-offset:-1px;border-color:var(--red)}
.cd-builtin{margin:6px 0 0;font-size:12px;color:var(--muted)}
.edit-bar-hint.is-pending{color:var(--red);font-weight:600}
a.an-miss{text-decoration:none}
a.an-miss:hover{text-decoration:underline}
/* Icon picker inside the category dialog: a scrollable grid of MDI glyphs
   grouped by room/purpose. Group labels span the whole grid row. */
.icon-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;
  max-height:260px;overflow-y:auto;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.icon-group{grid-column:1/-1;margin:8px 0 0;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.icon-group:first-of-type{margin-top:0}
.icon-opt{display:flex;align-items:center;justify-content:center;aspect-ratio:1;padding:6px;cursor:pointer;
  border:1px solid transparent;border-radius:8px;background:var(--bg);color:inherit}
.icon-opt:hover{border-color:var(--line)}
.icon-opt svg{width:100%;height:100%}
.icon-opt.is-picked{border-color:var(--red);background:var(--surface);color:var(--red)}
.icon-opt-auto{font-size:11px;font-weight:600;color:var(--muted)}

/* Rich-text blurb editor: a hidden textarea kept in sync by a contenteditable
   box, so the admin never sees HTML tags. Buttons mirror sanitize_html()'s
   allowlist. */
.rt{margin-top:8px}
.rt-bar{display:flex;flex-wrap:wrap;gap:4px;padding:6px;border:1px solid var(--line);border-bottom:0;
  border-radius:8px 8px 0 0;background:var(--bg)}
.rt-btn{min-width:30px;height:28px;padding:0 7px;cursor:pointer;font-size:13px;line-height:1;
  border:1px solid transparent;border-radius:6px;background:transparent;color:inherit}
.rt-btn:hover{border-color:var(--line);background:var(--surface)}
.rt-area{min-height:160px;max-height:340px;overflow-y:auto;padding:10px;border:1px solid var(--line);
  border-radius:0 0 8px 8px;background:var(--surface);font-size:14px;line-height:1.5}
.rt-area:focus{outline:2px solid var(--red);outline-offset:-2px;border-color:var(--red)}
.rt-area:empty:before{content:attr(data-placeholder);color:var(--muted)}
.rt-area h2{font-size:18px;margin:.6em 0 .3em}
.rt-area h3{font-size:16px;margin:.6em 0 .3em}
.rt-area p{margin:0 0 .6em}
.rt-area ul,.rt-area ol{margin:0 0 .6em;padding-left:1.4em}
/* Placeholder chip: a token like {years} is shown as one atomic, non-editable
   pill with the value it will have on the site, so the admin never sees or
   breaks the braces. rich-text.js turns it back into the raw token on save. */
.rt-token{display:inline-block;padding:1px 8px;margin:0 1px;border-radius:999px;
  background:#ffe9ea;color:var(--red);border:1px solid #f4bcc0;font-size:.9em;
  font-weight:600;white-space:nowrap;cursor:default;user-select:all}
/* The GDPR consent line is now edited with the rich-text box, so a saved value
   arrives wrapped in <p>. It sits inline next to the checkbox — keep it inline
   so the sentence does not suddenly become a block with margins. */
.consent span p{display:inline;margin:0}

/* ↗ on a category tile in edit mode: the tile itself opens the edit dialog,
   so opening the category's products needs its own control. */
.tool-open{color:var(--muted);text-decoration:none}
.tool-open:hover{background:var(--red);border-color:var(--red);color:#fff}

/* Vacation editor (admin settings). The fields collapse only once JS marked
   the block as enhanced — with JS off the three inputs must stay reachable. */
.vac-editor[data-vac-js]:not([data-vac-on]) .vac-fields{display:none}
.vac-editor[data-vac-js]:not([data-vac-on]) .vac-status{margin-bottom:10px}
.vac-pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.85em;font-weight:600}
.vac-status{margin:0 0 12px}
.vac-switch{margin:0 0 14px;display:flex;gap:8px;flex-wrap:wrap}
/* .btn sets display:inline-block, which outranks the [hidden] UA rule — the
   plan/clear toggle relies on hidden, so force it back inside this block. */
.vac-editor [hidden]{display:none !important}
.vac-dates{display:flex;gap:16px;flex-wrap:wrap}
.vac-dates label{flex:1 1 200px}
.vac-dates input{width:100%}
.vac-dates label,.vac-msg{display:block;margin-top:4px}
.vac-dates label>span,.vac-msg>span{display:block;font-weight:600;margin-bottom:2px}
.vac-dates small{display:block;color:#777;margin-top:2px}
.vac-msg{margin-top:14px}
.vac-msg em{font-weight:400;color:#777;font-style:normal}
.vac-msg input{width:100%}
.vac-quick{margin-top:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.vac-quick>span{color:#777;font-size:.9em}
.vac-quick .btn{padding:3px 10px;font-size:.9em}
.vac-error{margin:12px 0 0;padding:8px 12px;border-radius:8px;background:#fde2e1;color:#a11;font-weight:600}
.vac-preview{margin-top:16px}
.vac-preview>strong{display:block;font-size:.9em;color:#777;margin-bottom:4px}
/* Deliberately echoes .vacation-bar so the preview reads as the real thing. */
.vac-preview-bar{padding:10px 14px;border-radius:8px;background:#f6f3ee;border:1px solid #e2ddd4}

/* Opening-hours editor (admin settings). The time inputs collapse only once
   JS marked the block as enhanced — with JS off every field must stay
   reachable, because they are the real form inputs. */
.hrs-editor [hidden]{display:none !important}
.hrs-day{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid #f0efec}
.hrs-day:last-of-type{border-bottom:0}
.hrs-name{flex:0 0 70px;font-weight:600;white-space:nowrap}
/* Per mode, not per row: every row in a mode shares the basis, so the time
   columns stay aligned. "Pondělí–Pátek" simply needs more than "Čtvrtek". */
.hrs-editor[data-hrs-simple] .hrs-name{flex-basis:136px}
.hrs-toggle{flex:0 0 112px;display:flex;align-items:center;gap:6px;color:#777;cursor:pointer;flex-wrap:nowrap;white-space:nowrap}
/* The admin stylesheet stretches every input to full width; the day row needs
   them inline and small, otherwise seven days become a wall of boxes. */
.hrs-editor input[type=checkbox]{width:auto;margin:0;flex:0 0 auto}
.hrs-editor input[type=time]{width:auto;padding:3px 6px;font-size:.9em;margin:0}
.hrs-editor[data-hrs-js] .hrs-day:not([data-hrs-open]) .hrs-ranges{display:none}
.hrs-editor[data-hrs-js] .hrs-day[data-hrs-open] .hrs-closed{display:none}
.hrs-editor:not([data-hrs-js]) .hrs-closed{display:none}
.hrs-closed{color:#999}
.hrs-ranges{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1 1 auto}
.hrs-range{display:inline-flex;align-items:center;gap:6px}
.hrs-and{color:#777}
.hrs-add{padding:2px 9px;font-size:.85em}
/* Copy-down is a helper, not an action the page is about — a quiet link keeps
   the six of them from reading as six buttons. */
.hrs-copy{border:0;background:none;padding:0 2px;font-size:.85em;color:#777;text-decoration:underline;cursor:pointer}
.hrs-copy:hover{color:#a11}
/* Simple mode: Mon stands in for the whole work week, so the other four rows
   and the copy helpers have nothing left to do. */
.hrs-editor[data-hrs-simple] [data-hrs-weekday]{display:none}
.hrs-editor[data-hrs-simple] .hrs-copy{display:none}
.hrs-mode{margin:0 0 4px;text-align:right}
.hrs-mode-btn{border:0;background:none;padding:0;font-size:.85em;color:#777;text-decoration:underline;cursor:pointer}
.hrs-mode-btn:hover{color:#a11}
.hrs-x{border:0;background:none;color:#a11;cursor:pointer;font-size:1.1em;line-height:1;padding:0 2px}
.hrs-error{margin:14px 0 0;padding:8px 12px;border-radius:8px;background:#fde2e1;color:#a11;font-weight:600}
.hrs-preview{margin-top:16px}
.hrs-preview>strong{display:block;font-size:.9em;color:#777;margin-bottom:4px}
/* Deliberately echoes the footer hours line so the preview reads as the real thing. */
.hrs-preview-line{padding:10px 14px;border-radius:8px;background:#f6f3ee;border:1px solid #e2ddd4}

/* Settings page layout. The shared .form stays 560px wide (login, contact);
   this page instead fills the 1200px container and arranges its groups in a
   grid, because on a wide screen the old single column left half the page
   empty and pushed Právní below three scrolls of nothing. */
.form--wide{max-width:none}
.set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:0 22px;align-items:start}
/* The groups are independent boxes, so a plain auto-placed grid is enough —
   no masonry needed, each column just stacks. */
.set-group{border:1px solid #e2e2e2;border-radius:10px;padding:16px 18px;margin:0 0 20px}
.set-group>legend{font-weight:600;padding:0 6px}
/* Hours rows and rich-text boxes are unusable in half a column. */
.set-group--wide{grid-column:1/-1}
.set-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 20px;align-items:start}
.set-field{min-width:0}
.set-field--wide{grid-column:1/-1}
.form .set-field label{margin-top:12px}
.set-hint{display:block;color:#777;margin-top:2px}
.set-save{grid-column:1/-1;margin-top:4px}
@media (max-width:900px){
  /* One column below this width; minmax() would otherwise force a scrollbar. */
  .set-grid{grid-template-columns:1fr}
}

/* ---------- Analytics (/admin/analytika) ------------------------------- */
/* Charts are plain divs with a percentage height: no chart library, nothing
   to load, and it prints correctly. */
.an-ranges{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 18px}
.an-period{color:#6b6b6b;font-size:.9rem;margin-left:6px}
.an-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:18px}
.an-tile{background:#fff;border:1px solid #e6e2dc;border-radius:10px;padding:14px 16px}
.an-tile-n{display:block;font-size:2rem;font-weight:700;line-height:1.1}
.an-tile-l{display:block;color:#6b6b6b;font-size:.9rem}
.an-trend{display:inline-block;margin-top:6px;font-size:.85rem;font-weight:600}
.an-up{color:#2e7d32}.an-down{color:#c62828}.an-flat{color:#8a8a8a}
.an-tile-h{margin:8px 0 0;font-size:.82rem;line-height:1.4;color:#7a7a7a}
.an-card{background:#fff;border:1px solid #e6e2dc;border-radius:10px;padding:16px 18px;margin-bottom:18px}
.an-card h3{margin:0 0 4px}
.an-note{margin:0 0 12px;font-size:.85rem;color:#7a7a7a;line-height:1.5}
.an-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.an-plot{display:grid;grid-template-columns:auto 1fr;column-gap:8px;--h:170px}
.an-plot--sm{--h:110px}
.an-y{grid-column:1;grid-row:1;height:var(--h);display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-end;font-size:.75rem;line-height:1;color:#9a9a9a}
/* The bottom label sits on the baseline, the top one on the top gridline. */
.an-y span:first-child{transform:translateY(-.35em)}
.an-y span:last-child{transform:translateY(.35em)}
.an-grid{grid-column:2;grid-row:1;position:relative;height:var(--h);min-width:0;
  border-bottom:1px solid #ddd6cc;border-top:1px solid #f0ece6;
  background:linear-gradient(to bottom,transparent calc(50% - 1px),#f0ece6 calc(50% - 1px),#f0ece6 50%,transparent 50%)}
.an-chart{display:flex;align-items:flex-end;gap:2px;height:100%;position:relative}
.an-bar-wrap{flex:1;height:100%;display:flex;align-items:flex-end}
.an-bar{width:100%;background:#b08968;border-radius:3px 3px 0 0;transition:background .15s}
.an-bar-wrap:hover .an-bar{background:#7f5539}
.an-axis{grid-column:2;grid-row:2;display:flex;justify-content:space-between;margin-top:6px;font-size:.78rem;color:#9a9a9a}
.an-table{width:100%;border-collapse:collapse}
.an-table td{padding:5px 6px;border-bottom:1px solid #f0ece6;font-size:.9rem;vertical-align:middle}
.an-td-label{max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-td-bar{width:38%}
.an-hbar{display:block;height:9px;background:#e0cdb8;border-radius:5px}
.an-td-n{text-align:right;white-space:nowrap;font-weight:600;width:1%}
.an-empty{background:#fff;border:1px dashed #d9d3cb;border-radius:10px;padding:26px;text-align:center;color:#7a7a7a}
.an-empty h3{margin:0 0 8px;color:#4a4a4a}
.an-privacy ul{margin:0;padding-left:20px;font-size:.88rem;line-height:1.65;color:#5f5f5f}
@media (max-width:900px){
  .an-cols{grid-template-columns:1fr}
}

/* ---------- Cookie consent bar ----------------------------------------- */
/* Deliberately quiet: this site loads no third-party script and sets no
   tracking cookie, so a loud modal would misrepresent the problem. One slim
   strip, text and buttons side by side, no red call to action - all options
   look identical so the bar does not nudge toward "accept all". */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:120;padding:10px;display:flex;justify-content:center;pointer-events:none}
.ck[hidden]{display:none}
.ck-box{pointer-events:auto;width:100%;max-width:880px;background:#fff;border:1px solid #e6e2dc;border-radius:10px;padding:12px 14px;box-shadow:0 4px 14px rgba(0,0,0,.10);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.ck-text{flex:1 1 320px;min-width:0}
.ck-h{margin:0;font-size:.85rem;font-weight:700}
.ck-t{margin:2px 0 0;font-size:.82rem;line-height:1.5;color:#7a7a7a}
.ck-detail{flex:1 1 100%;order:3;border-top:1px solid #f0ece6;padding-top:8px}
.ck-row{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:.85rem;line-height:1.45}
.ck-row input{margin-top:3px;flex:none}
.ck-row small{color:#8a8a8a}
.ck-btns{display:flex;flex-wrap:wrap;gap:6px;flex:none}
.ck-btns .btn{min-height:36px;padding:0 12px;font-size:.85rem}
/* .btn sets display, which beats the browser default for [hidden]. */
.ck-btns .btn[hidden]{display:none}
@media (max-width:640px){
  .ck-btns{flex:1 1 100%}
  .ck-btns .btn{flex:1 1 auto}
}

/* ---- inline PDF-catalog editing (/?edit=1) ---- */
/* Same idea as .cat-grid--edit: the ⠿ ◀ ▶ ↗ ✕ pill hangs above the tile, so
   edit mode needs a little vertical room and wider columns for the title plus
   the size badge. The visitor grid is untouched. */
.pdf-grid--edit{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:26px 14px}
.pdf-tile--edit{position:relative;cursor:pointer;text-align:left;overflow:visible}
/* The visitor tile clips with overflow:hidden; the .cat-edit-tools pill sits at
   top:-13px and would be cut in half and left lying on the cover. Edit mode
   unclips the tile and re-rounds the cover itself, which was the only thing
   the clipping was doing. */
.pdf-tile--edit>img,.pdf-tile--edit .pdf-cover-empty{border-radius:11px 11px 0 0}
.pdf-tile--edit.is-dragging{opacity:.4}
.pdf-tile--edit .cat-edit-tools{top:-13px}
/* No cover yet: keep the tile the same height as one with an image so the grid
   does not jump while the admin is still filling the catalog in. */
.pdf-cover-empty{display:flex;align-items:center;justify-content:center;height:96px;
  background:var(--bg);color:var(--muted);font-size:12px;border-bottom:1px solid var(--line)}
/* A row with no PDF is admin-only — the badge says so instead of lying "PDF". */
.pdf-badge--missing{background:var(--bg);color:var(--muted);border:1px dashed var(--line)}
.pdf-tile--new{border:2px dashed var(--line);background:#fcfcfd;box-shadow:none;cursor:pointer;
  align-items:center;justify-content:center;gap:8px;min-height:130px;color:var(--muted);
  font:inherit;font-weight:600;padding:10px;text-align:center}
.pdf-tile--new:hover{border-color:var(--red);color:var(--red);background:#fff;transform:none}
.pdf-tile--new[disabled]{opacity:.5;cursor:progress}
/* catalog dialog; shares .edit-panel-box/.pd-* with the product and category dialogs */
#cat-pdf-panel .pd-fields{margin-bottom:16px}
#cat-pdf-panel .pd-section+.pd-section{margin-top:14px}
#cat-pdf-panel input[type=file]{display:block;margin-top:8px;font:inherit;font-size:13px;max-width:100%}
#cat-pdf-panel input[type=file]:disabled{opacity:.5;cursor:progress}
.pdf-current{margin:8px 0 0;font-size:13px;color:var(--muted)}
.pdf-current a{color:var(--red);font-weight:600}

/* ===== product photo gallery ===== */
/* Public detail: thumbnail strip under the big photo. */
.photo-wrap{display:flex;flex-direction:column;gap:10px;min-width:0}
.gallery-strip{display:flex;gap:8px;flex-wrap:wrap}
.gallery-thumb{width:72px;height:72px;padding:0;border:1px solid var(--line);border-radius:8px;
  background:#fafafa;overflow:hidden;cursor:pointer;line-height:0;transition:border-color .12s ease}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-thumb:hover{border-color:var(--red)}
.gallery-thumb.is-active{border-color:var(--red);box-shadow:0 0 0 2px rgba(200,16,46,.18)}

/* Card grid: how many photos the product carries. */
.badge-photos{position:absolute;top:10px;right:10px;background:rgba(17,17,17,.72);color:#fff;
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.18);z-index:5;pointer-events:none}

/* Edit dialog: gallery as a wrapping grid of tiles. A one-column strip in a
   190px sidebar pushed Save off screen at ~6 photos; the grid grows sideways
   first and only then scrolls inside its own box, so the dialog keeps its
   height whatever the photo count. */
.pd-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px;
  max-height:290px;overflow-y:auto;padding:2px}
.pd-gphoto{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden;
  cursor:grab;transition:border-color .12s,box-shadow .12s}
.pd-gphoto:hover{box-shadow:0 2px 10px rgba(0,0,0,.10)}
.pd-gphoto.is-dragging{opacity:.45;cursor:grabbing}
.pd-gphoto.is-primary{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.pd-gphoto-img{position:relative;aspect-ratio:4/3;background:var(--bg)}
.pd-gphoto-img img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.pd-gbadge{position:absolute;left:5px;bottom:5px;background:var(--red);color:#fff;font-size:10px;
  font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:999px}
.pd-gdel{position:absolute;top:4px;right:4px;width:26px;height:26px;border:0;border-radius:999px;
  background:rgba(17,17,17,.62);color:#fff;font-size:13px;line-height:1;cursor:pointer;padding:0}
.pd-gdel:hover{background:var(--red)}
.pd-gphoto-tools{display:flex;align-items:stretch;border-top:1px solid var(--line)}
.pd-gbtn{flex:none;min-width:30px;min-height:30px;border:0;background:none;cursor:pointer;
  font-size:13px;line-height:1;color:var(--muted);padding:0 6px}
.pd-gstar{flex:1;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;
  border-left:1px solid var(--line);border-right:1px solid var(--line)}
.pd-gbtn:hover:not(:disabled){background:var(--bg);color:var(--ink)}
.pd-gbtn:disabled{opacity:.32;cursor:default}
.pd-gphoto.is-primary .pd-gstar:disabled{opacity:1;color:var(--red)}
.pd-gallery-hint{margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.4}
/* Only the product dialog carries the photo grid; 680px fits four tiles a row.
   The category and catalog dialogs keep the shared 560px. */
#edit-panel .edit-panel-box{width:min(680px,100%)}

/* ===== pagination (vendor/pagination/site.blade.php) ===== */
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px}
.pager-link{display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;line-height:1;
  text-decoration:none;transition:border-color .12s ease,color .12s ease}
.pager-link:hover{border-color:var(--red);color:var(--red)}
.pager-link.is-active{background:var(--red);border-color:var(--red);color:#fff;cursor:default}
.pager-link.is-disabled{opacity:.4;pointer-events:none}
.pager-gap{padding:0 4px;color:var(--muted);font-size:14px}

/* Pager sits right above the .blurb--below border-top; pad it so the rule is not
   crowding the buttons (margins would just collapse into the blurb margin). */
.pager{padding-bottom:32px}

/* ===== v30 (2026-09-24): anniversary mark -> round gold medallion =====
   Replaces the dark-glass plaque above (its rules still match .anniv-badge, so
   this block resets them with the higher-specificity .anniv-badge.anniv-medal).
   Build: brushed-gold conic rim -> dark gap -> gold hairline -> dark face with
   a gold numeral. All type is horizontal HTML text; no arced lettering. */
.hero .anniv-badge.anniv-medal{
  --medal:132px;
  position:absolute;z-index:4;top:18px;right:20px;
  width:var(--medal);height:var(--medal);padding:5px;margin:0;
  display:block;border:0;border-radius:50%;line-height:1;text-align:center;
  -webkit-backdrop-filter:none;backdrop-filter:none;filter:none;
  /* brushed metal: several light/dark stops round the rim read as polished gold */
  background:conic-gradient(from 210deg,
    #8c6a22,#e9cf7f 10%,#fff4c9 16%,#c89b3c 26%,#7d5b1a 38%,
    #d9b766 50%,#fbeab0 58%,#b8892f 70%,#7a5718 82%,#e2c373 93%,#8c6a22);
  box-shadow:0 10px 26px rgba(0,0,0,.45),0 2px 5px rgba(0,0,0,.35),
    inset 0 1px 1px rgba(255,255,255,.55),inset 0 -1px 2px rgba(0,0,0,.35);
}
/* dark face + gold hairline, inset from the rim by a thin dark gap */
.anniv-medal .am-face{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 50% 30%,#2b2519 0%,#16130d 60%,#0d0b08 100%);
  box-shadow:inset 0 0 0 3px #0d0b08,inset 0 0 0 4px rgba(233,205,128,.85),
    inset 0 6px 14px rgba(0,0,0,.6);
}
/* soft diagonal sheen across the face — one static highlight, no glitter */
.anniv-medal .am-face::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,240,200,.13) 0%,rgba(255,240,200,0) 45%);
}
.anniv-medal .am-num,.anniv-medal .am-let,.anniv-medal .am-since{position:relative;z-index:1}
.anniv-medal .am-num{
  font-size:52px;font-weight:800;letter-spacing:-2px;line-height:.95;margin:2px 0 3px;
  background:linear-gradient(180deg,#fff3c4 0%,#f0d27f 38%,#c99a3a 70%,#e8c776 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.6));
}
.anniv-medal .am-let{
  font-size:12.5px;font-weight:800;letter-spacing:4px;text-transform:uppercase;
  color:#f0d27f;padding-left:4px; /* re-centre: letter-spacing pads the right */
}
/* the year span sits between two short gold rules */
.anniv-medal .am-since{
  display:flex;align-items:center;gap:5px;margin-top:6px;
  font-size:9.5px;font-weight:700;letter-spacing:1px;color:#b9a37a;
}
.anniv-medal .am-since::before,.anniv-medal .am-since::after{
  content:"";width:9px;height:1px;background:rgba(233,205,128,.6)}

@media(max-width:820px){
  .hero .anniv-badge.anniv-medal{--medal:112px;top:14px;right:14px}
  .anniv-medal .am-num{font-size:44px}
  .anniv-medal .am-let{font-size:11px;letter-spacing:3.5px}
  .anniv-medal .am-since{font-size:8.5px}
}
@media(max-width:640px){
  /* small coin in the corner; the year span is noise at this size and survives
     in aria-label. The 57px hero-inner top padding is the clearance under it. */
  .hero .anniv-badge.anniv-medal{--medal:66px;padding:3px;top:8px;right:10px}
  .anniv-medal .am-face{box-shadow:inset 0 0 0 2px #0d0b08,inset 0 0 0 3px rgba(233,205,128,.85)}
  .anniv-medal .am-num{font-size:26px;letter-spacing:-1px;margin:1px 0 1px}
  .anniv-medal .am-let{font-size:8px;letter-spacing:2.5px;padding-left:2.5px}
  .anniv-medal .am-since{display:none}
}

/* Search: "show all results" row in the hint dropdown, zero-result flag in admin analytics */
/* Pinned to the bottom of the scrolling dropdown so it is always reachable. */
.srch-drop a.srch-all{font-weight:600;border-top:1px solid var(--line,#e5e5e5);position:sticky;bottom:0;background:var(--surface)}
.srch-drop a.srch-all:hover,.srch-drop a.srch-all.is-active{background:var(--bg)}
.an-miss{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;background:#fdecea;color:#b3261e;font-size:11px;font-weight:600;vertical-align:middle}
.an-miss.an-mapped{background:#e6f4ea;color:#1e7b34}

/* ===== admin: contact message inbox ===== */
a.stat{display:block;color:inherit;text-decoration:none}
a.stat:hover{border-color:var(--red)}
.msg-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px}
.msg-tabs a{padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;background:var(--surface)}
.msg-tabs a.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.msg-list tr.is-unread td{font-weight:700}
.msg-list tr.is-handled td{color:var(--muted)}
.msg-list td a{color:var(--red)}
.msg-tag{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:#eee;color:#444;margin:0 4px 0 0;white-space:nowrap}
.msg-tag--new{background:var(--red);color:#fff}
.msg-tag--warn{background:#fff3cd;color:#7a5a00}
.msg-tag--bad{background:#fde2e1;color:#a4161a}
/* Contact message the admin cannot open (locked / unreadable key). */
.alert.msg-sealed{background:#fff6e0;color:#7a5200;border-color:#f0d9a0}
.msg-sealed p{margin:0}
.msg-sealed form{margin-top:10px}
.msg-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:18px}
.msg-meta{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0 0 18px}
.msg-meta dt{color:var(--muted);font-size:14px}
.msg-meta dd{margin:0;overflow-wrap:anywhere}
.msg-meta a{color:var(--red)}
.msg-body{border-top:1px solid var(--line);padding-top:16px;line-height:1.6;overflow-wrap:anywhere}
.msg-actions{display:flex;gap:10px;flex-wrap:wrap}