/* Barevný styl, společné styly všech stránek */

/* Písma jsou uložená přímo na webu (variabilní soubory, latinka + česká diakritika) */
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:700 800;font-display:swap;src:url("fonts/bsd.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:700 800;font-display:swap;src:url("fonts/bsd-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/plex.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/plex-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/plex-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/plex-italic-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --red:#DB2F32; /* o chlup tmavší než logo (#E13235), aby bílý text splnil kontrast 4,5 : 1 */
  --red-dark:#B8262A;
  --red-deep:#9E1F23;
  --ink:#15335E;
  --navy:#15335E;
  --navy-deep:#0F2748;
  --blue:#306EB5;
  --blue-dark:#1D4F8C;
  --sky:#42B4E8;
  --orange:#F18E22;
  --text:#454C5A;
  --muted:#646B78;
  --plane:#EEF3F9;
  --line:#DCE3EC;
  --line-strong:#B4BECB;
  --white:#FFFFFF;
  --yellow:#FFD113;
  --display:"Big Shoulders Display","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --max:1200px;
  --gutter:24px;
  --bar-h:66px;
  --head-h:72px;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 16px);background-color:var(--white)} /* Safari 26 bere barvu lišty z pozadí html */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--white);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:var(--red-dark)}
a:hover{color:var(--red-deep)}
h1,h2,h3{font-family:var(--display);color:var(--ink);line-height:1;margin:0;font-weight:800;letter-spacing:.005em;text-wrap:balance}
h2{font-size:clamp(40px,5vw,64px)}
h3{font-size:clamp(26px,2.4vw,32px);font-weight:700}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.hero :focus-visible,.page-head :focus-visible,.calc-out :focus-visible,footer :focus-visible,.band :focus-visible,.cta :focus-visible,.bar :focus-visible,.proposal :focus-visible{outline-color:var(--yellow)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
section{padding:96px 0}
.lead{font-size:20px;line-height:1.5;color:var(--ink);max-width:60ch}
.muted{font-size:14px;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tight{padding-top:0}
.nowrap{white-space:nowrap}

/* skip link a proužek návrhu */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:6px;text-decoration:none;font-weight:600}
.skip:focus{top:12px;color:#fff}
.proposal{background:var(--ink);color:#fff;font-size:13px;line-height:1.4;text-align:center;padding:8px var(--gutter)}
.proposal a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* tlačítka */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;border-radius:6px;font-weight:600;font-size:16px;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:var(--body);line-height:1.2;text-align:center;transition:background .15s,color .15s,border-color .15s}
.btn-red{background:var(--red);color:#fff;border-color:var(--red)}
.btn-red:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff}
.btn-ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-ink:hover{background:#000;color:#fff}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.btn-line-w{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-line-w:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-white{background:#fff;color:var(--red-dark);border-color:#fff}
.btn-white:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btns{display:flex;gap:14px;flex-wrap:wrap}
.more{display:inline-block;margin-top:8px;font-weight:600;color:var(--red-dark);text-decoration:underline;text-underline-offset:3px}
.more:hover{color:var(--red-deep)}

/* hlavička */
.top{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;flex-wrap:wrap;gap:0 28px;min-height:var(--head-h)}
.logo{display:block;width:190px;flex:none}
.logo img{width:100%;height:auto}
.nav{display:flex;gap:22px;margin-left:auto}
.nav > a{white-space:nowrap;color:var(--ink);text-decoration:none;font-weight:500;font-size:16px;padding:6px 0;border-bottom:2px solid transparent}
.nav > a:hover{border-bottom-color:var(--red);color:var(--ink)}
.nav > a[aria-current="page"]{border-bottom-color:var(--red);font-weight:600}
.top-actions{display:flex;align-items:center;gap:14px;flex:none}
.top-phone{color:var(--ink);text-decoration:none;font-weight:600;white-space:nowrap}
.top-phone:hover{color:var(--red-dark)}
.top .btn{min-height:44px;padding:0 20px}
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:2px solid var(--ink);border-radius:6px;background:#fff;color:var(--ink);font:600 15px/1 var(--body);cursor:pointer}
.menu-ico{position:relative;width:18px;height:12px;flex:none}
.menu-ico::before,.menu-ico::after,.menu-ico span{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:1px}
.menu-ico::before{top:0}
.menu-ico span{top:5px}
.menu-ico::after{bottom:0}
.top.open .menu-ico::before{top:5px;transform:rotate(45deg)}
.top.open .menu-ico::after{bottom:5px;transform:rotate(-45deg)}
.top.open .menu-ico span{opacity:0}

/* hero úvodní stránky */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--ink);color:#fff;padding:0}
.hero-inner{grid-column:1;padding-left:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)))}
.hero-text{padding:56px 48px 60px 0;display:flex;flex-direction:column;justify-content:center;max-width:640px;width:100%;height:100%}
.hero-text h1{color:#fff;font-size:clamp(50px,4.5vw,70px);margin-bottom:24px;line-height:1.06}
.hero-text h1 .l{display:block;white-space:nowrap}
.hero-text .lead{color:rgba(255,255,255,.86);margin-bottom:32px}
.hero-text .lead b{color:#fff;font-weight:600}


/* úvodní animace: slova nadpisu plynule vyjedou jedno po druhém, pak naběhne zbytek.
   Animuje se jen průhlednost a posun: maska ani ořez (clip-path) se v Chromu při omezeném vykreslování
   (karta na pozadí) umí zaseknout a nechat text neviditelný. */
@media (prefers-reduced-motion:no-preference){
  .hero-text h1 .w{display:inline-block;animation:hero-rise .9s cubic-bezier(.2,.75,.2,1) both;animation-delay:var(--d,0s)}
  .hero-text .lead{animation:hero-up .8s .55s cubic-bezier(.2,.75,.2,1) both}
  .hero-text .hero-actions{animation:hero-up .8s .68s cubic-bezier(.2,.75,.2,1) both}
  .hero-stage{animation:hero-fade .9s .2s ease-out both}
  .page-head h1{animation:hero-rise .9s .05s cubic-bezier(.2,.75,.2,1) both}
  .page-head .lead,.page-head .btns{animation:hero-up .8s .3s cubic-bezier(.2,.75,.2,1) both}
  .page-head figure{animation:hero-fade 1s .15s ease-out both}
}
@keyframes hero-rise{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
@keyframes hero-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hero-fade{from{opacity:0}to{opacity:1}}

/* plynulé odhalování při posouvání (třídy přidává skript, bez něj je vše vidět) */
.reveal-on [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s ease-out,transform .8s cubic-bezier(.2,.75,.2,1);transition-delay:var(--rd,0s)}
.reveal-on [data-reveal="rise"]{transform:translateY(30px);transition-duration:.8s,.95s}
.reveal-on [data-reveal].is-in{opacity:1;transform:none}

/* záhlaví podstránek */
.page-head{position:relative;z-index:2;background:var(--ink);color:#fff;padding:0;isolation:isolate;margin-bottom:40px}
.page-head + .contact-sec,.page-head + .calc-sec{margin-top:-40px;padding-top:136px}
.page-head .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;padding-top:56px;padding-bottom:64px}
.page-head.no-media .wrap{grid-template-columns:minmax(0,1fr)}
.page-head h1{color:#fff;font-size:clamp(48px,6vw,84px);line-height:1;margin-bottom:20px}
.page-head .lead{color:rgba(255,255,255,.86);margin:0}
.page-head .btns{margin-top:28px}
.page-head figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.page-head figcaption{font-size:13px;color:rgba(255,255,255,.7);padding-top:10px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:rgba(255,255,255,.7);margin-bottom:18px}
.crumbs a{color:#fff}
.crumbs a:hover{color:var(--yellow)}

/* trhaný okraj (tah stěrkou) */
.ink-edge{position:absolute;left:0;right:0;width:100%;height:44px;display:block;pointer-events:none;overflow:visible}
.ink-edge.edge-t{top:-40px}
.ink-edge.edge-b{bottom:-40px;transform:scaleY(-1)}
.band,.cta,.page-head{overflow-x:clip}
.band .wrap,.cta .wrap,.page-head .wrap{position:relative;z-index:1}

/* červený pás s argumenty */
.band{position:relative;background:var(--red);color:#fff;padding:44px 0 48px;isolation:isolate}
.band::after,.cta::after,.tile::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:multiply;background-image:var(--noise)}
.args{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.args strong{display:block;font-family:var(--display);font-weight:800;font-size:clamp(40px,3.6vw,54px);line-height:.95;color:#fff;margin-bottom:10px;white-space:nowrap}
.args span{display:block;font-size:15px;line-height:1.45;color:#fff;max-width:24ch}
.args a{color:#fff}

/* dvousloupcové bloky */
.two{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}
.two.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.two.mid{align-items:center}
.photo{position:relative}
.photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.photo.landscape img{aspect-ratio:4/3}
.photo.square img{aspect-ratio:1/1}
.photo figcaption{font-size:13px;color:var(--muted);padding-top:10px}
.sec-head{margin-bottom:40px;max-width:26ch}
.sec-head + .lead{margin-top:-16px}
.head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;margin-bottom:40px}
.head-row .sec-head{margin-bottom:0}

/* přehled technologií */
.tech{border-top:1px solid var(--ink);margin-top:40px}
.tech li{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.tech b{font-family:var(--display);font-weight:700;font-size:28px;color:var(--ink);line-height:1}
.tech b a{color:inherit;text-decoration:none}
.tech b a:hover{color:var(--red-dark)}
.tech p{margin:0;font-size:16px}
.tech small{display:block;color:var(--red-dark);font-weight:600;font-size:14px;margin-top:2px}

/* pro koho: dlaždice s fotkami zakázek */
.segs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}
.seg{display:block;text-decoration:none;color:var(--text)}
.seg img{width:100%;aspect-ratio:4/3;object-fit:cover}
.seg-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:14px}
.seg h3{font-size:30px}
.seg-n{font-size:14px;color:var(--muted);white-space:nowrap}
.seg p{margin:6px 0 0;font-size:16px}
.seg:hover h3{color:var(--red-dark)}
.seg:hover img{filter:saturate(1.08) contrast(1.03)}

/* pro koho: textové bloky */
.who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 48px}
.who > div{border-top:3px solid var(--ink);padding-top:18px}
.who h3{margin-bottom:10px}
.who p{font-size:16px;margin:0}
.photo img.banner{aspect-ratio:auto}

/* štítky a sklad */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 20px}
.tags li{border:1px solid var(--line-strong);padding:5px 11px;font-size:15px;line-height:1.3;color:var(--ink);border-radius:3px}
.table{width:100%;border-collapse:collapse;border-top:1px solid var(--ink);font-size:16px;margin-top:4px}
.table th,.table td{text-align:left;vertical-align:baseline;padding:12px 16px 12px 0;border-bottom:1px solid var(--line)}
.table th{font-weight:600;color:var(--ink)}
.table th[scope="row"]{width:42%}
.table td{color:var(--text)}
.table td:last-child,.table th:last-child{padding-right:0}
.table thead th{font-size:14px;font-weight:600;color:var(--muted);border-bottom:1px solid var(--ink)}
.table .num{text-align:right;white-space:nowrap;font-family:var(--display);font-weight:800;font-size:24px;color:var(--ink)}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll-x .table{min-width:700px}
.scroll-hint{display:none;font-size:14px;color:var(--muted);margin:16px 0 0}
.compare th[scope="row"]{width:auto;white-space:nowrap}
.compare td:nth-child(2){white-space:nowrap}
.compare th a{font-family:var(--display);font-size:24px;font-weight:700;color:var(--ink);text-decoration:none}
.compare th a:hover{color:var(--red-dark)}
.note-sm{font-size:15px;margin-top:14px}

/* postup */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;counter-reset:step}
.steps li{border-top:3px solid var(--ink);padding-top:18px;counter-increment:step}
.steps li::before{content:counter(step);font-family:var(--display);font-weight:800;font-size:56px;line-height:1;color:var(--red);display:block;margin-bottom:10px}
.steps h3{margin-bottom:8px;min-height:2em}
.steps p{font-size:16px;margin:0}
.steps.three{grid-template-columns:repeat(3,1fr)}
@media (min-width:1025px){.steps:has(> li:nth-child(5)){grid-template-columns:repeat(5,1fr);gap:24px}} /* pět kroků v jedné řadě, jen na počítači */

/* ceník e-shopu */
.shop{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;align-items:stretch}
/* fotka je pevná a sahá přesně na výšku ceníku vedle, při posouvání se nehýbe */
.shop-photo{position:relative;min-height:420px}
.shop-photo img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:28% 50%}
.pricelist{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:36px}
.pricelist ul{border-top:1px solid var(--ink)}
.pricelist li{border-bottom:1px solid var(--line)}
.pricelist a,.pricelist .pl{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;text-decoration:none;color:var(--ink)}
.pricelist a:hover .pl-n{color:var(--red-dark)}
.pl-n{font-weight:600;font-size:16px;line-height:1.3}
.pl-n small{display:block;font-weight:400;font-size:14px;color:var(--muted)}
.pl-p{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;white-space:nowrap;color:var(--ink)}
.shop-foot{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-top:28px}
.shop-foot p{margin:0;font-size:15px}

/* cenový pruh na úvodní stránce */
.prices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.prices li{padding:22px 24px 22px 0}
.prices li + li{padding-left:24px;border-left:1px solid var(--line)}
.prices b{display:block;font-family:var(--display);font-weight:800;font-size:44px;line-height:1;color:var(--ink)}
.prices span{display:block;margin-top:8px;font-size:15px;line-height:1.4}

/* kalkulačka */
.calc-sec{background:var(--plane)}
.calc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start;margin-top:40px}
.calc-form{background:#fff;padding:36px;border:1px solid var(--line);display:flex;flex-direction:column}
.calc-form > .btn{margin-top:8px;align-self:flex-start}
.row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.field label,.field .lbl{font-weight:600;color:var(--ink);font-size:15px}
.field .req{font-weight:400;color:var(--muted)}
.field input:not([type=file]),.field select{height:52px}
.field [aria-invalid="true"]{border-color:var(--red-deep)}
.field input,.field select,.field textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:6px;background:#fff;color:var(--ink);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);outline:2px solid var(--red);outline-offset:1px}
.field textarea{min-height:130px;resize:vertical}
.file{display:flex;align-items:center;gap:14px;flex-wrap:wrap;position:relative}
.file input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.file-btn{min-height:44px;padding:0 18px;font-size:15px}
.field .file-btn{font-weight:600;color:var(--ink)}
.field .file-btn:hover{color:#fff}
.file input:focus-visible + .file-btn{outline:3px solid var(--red);outline-offset:3px}
.file-name{font-size:15px;color:var(--muted);overflow-wrap:anywhere}
.hint{font-size:13px;color:var(--muted);margin:0}
.form-err{margin:12px 0 0;color:var(--red-deep);font-size:15px;font-weight:500}
.calc-out{background:var(--ink);color:#fff;padding:36px;display:flex;flex-direction:column}
.calc-out h2{color:#fff;font-size:32px;margin-bottom:22px}
.calc-out .big{font-family:var(--display);font-weight:800;font-size:clamp(64px,6vw,96px);line-height:.9;color:var(--yellow)}
.calc-out .big em{font-style:normal;font-size:28px;font-weight:700}
.calc-out .per{font-size:15px;color:rgba(255,255,255,.82);margin:12px 0 26px}
.calc-out dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:15px;border-top:1px solid rgba(255,255,255,.2);padding-top:16px}
.calc-out dt{color:rgba(255,255,255,.72)}
.calc-out dd{margin:0;color:#fff}
.calc-out .btn{margin-top:28px;align-self:flex-start}
.calc-note{font-size:13px;color:rgba(255,255,255,.75);margin:18px 0 0}

/* zakázky */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.chips button{font:500 15px/1 var(--body);color:var(--ink);background:#fff;border:1px solid var(--line-strong);border-radius:999px;padding:11px 18px;cursor:pointer;min-height:44px}
.chips button:hover{border-color:var(--ink)}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.gal-count{font-size:14px;color:var(--muted);margin:0 0 28px}
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 20px}
.gal figure{margin:0}
.gal .ph{display:block;overflow:hidden}
.gal img{width:100%;aspect-ratio:1/1;object-fit:cover}
.gal figcaption{padding-top:10px;font-size:15px;line-height:1.35}
.gal figcaption b{display:block;color:var(--ink);font-weight:600}
.gal .wide{grid-column:span 2}
.gal .wide img{aspect-ratio:2/1}
.tile{position:relative;background:var(--red);color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:24px;isolation:isolate;min-height:220px}
.tile::after{z-index:-1}
.tile p{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(34px,3.2vw,46px);line-height:1;color:#fff}
.tile .btn{align-self:flex-start;min-height:46px;padding:0 18px}
.tile :focus-visible{outline-color:var(--ink)}
.clients{margin:40px 0 0;padding:20px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);font-size:18px;color:var(--ink)}
.clients span{color:var(--text)}
.clients b{font-weight:600}

/* recenze */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:8px}
.rev{border-left:3px solid var(--red);padding-left:22px;margin:0}
.rev blockquote{margin:0 0 14px;font-size:18px;line-height:1.5;color:var(--ink)}
.rev figcaption{font-size:15px}
.rev figcaption b{color:var(--ink);font-weight:600;display:block}
.note{font-size:13px;color:var(--muted);margin-top:32px;padding-top:14px;border-top:1px dashed var(--line)}

/* technologie v detailu */
.tdet{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start;padding:72px 0;border-top:1px solid var(--line)}
.tdet:first-of-type{border-top:0;padding-top:0}
.tdet.no-media{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.tdet h2{font-size:clamp(40px,4.4vw,58px);margin-bottom:18px}
.tdet .lead{font-size:19px;margin-bottom:20px}
.spec{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:24px 0 0;padding-top:18px;border-top:1px solid var(--ink);font-size:16px}
.spec dt{font-weight:600;color:var(--ink)}
.spec dd{margin:0}
.side-list{border-top:1px solid var(--ink)}
.side-list li{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.side-list b{display:block;color:var(--ink);font-weight:600}
.side-note{background:var(--plane);padding:28px}
.side-note h3{font-size:28px;margin-bottom:10px}
.side-note p:last-child{margin:0}

/* na počkání */
.checks li{position:relative;padding:14px 0 14px 36px;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink)}
.checks{border-top:1px solid var(--ink)}
.checks li::before{content:"";position:absolute;left:4px;top:21px;width:16px;height:9px;border-left:3px solid var(--red);border-bottom:3px solid var(--red);transform:rotate(-45deg)}
.checks small{display:block;font-size:15px;color:var(--text)}
.qs{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.qs li{border-top:3px solid var(--red);padding-top:18px}
.qs h3{font-size:28px;margin-bottom:8px}
.qs p{margin:0;font-size:16px}

/* časté dotazy */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;font-family:var(--display);font-weight:700;font-size:26px;color:var(--ink);position:relative;line-height:1.1}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:15px;font-size:32px;font-weight:700;color:var(--red);line-height:1}
.faq details[open] summary::after{content:"×"}
.faq summary:hover{color:var(--red-dark)}
.faq .a{padding:0 0 22px;max-width:70ch;font-size:16px}
.faq .a p:last-child,.faq .a ul:last-child{margin-bottom:0}
.faq .a ul{list-style:disc;padding-left:22px;margin:0 0 1em}
.faq .a li{margin-bottom:6px}
.faq-groups{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px 64px}
.faq-groups h2{font-size:clamp(32px,3.4vw,44px);position:sticky;top:calc(var(--head-h) + 24px)}
.faq-group + .faq-group{margin-top:64px}

/* o dílně */
.facts{width:100%;border-collapse:collapse;border-top:1px solid var(--ink);margin-top:28px;font-size:16px}
.facts th,.facts td{text-align:left;padding:11px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.facts th{font-weight:600;color:var(--ink);width:34%;padding-right:16px}
.quote{font-family:var(--display);font-weight:800;font-size:clamp(34px,3.6vw,48px);line-height:1.08;color:var(--ink);margin:0 0 18px;max-width:22ch}
.photo-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.photo-row img{width:100%;aspect-ratio:1/1;object-fit:cover}
.photo-row figcaption{font-size:13px;color:var(--muted);padding-top:8px}

/* kontakt */
.contact-sec{background:var(--plane)}
.contact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:start}
.form{background:#fff;border:1px solid var(--line);padding:36px}
.ok{background:#fff;border:1px solid var(--line);padding:36px}
.ok h2{font-size:36px;margin-bottom:12px}
.ok h2:focus{outline:none}
.info-block{padding:22px 0;border-bottom:1px solid var(--line)}
.info-block:first-child{padding-top:0}
.info-block:last-child{border-bottom:0}
.info-block b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px;font-size:14px}
.info-block .big-link{font-family:var(--display);font-weight:700;font-size:30px;color:var(--ink);text-decoration:none;line-height:1.05;word-break:break-word}
.info-block .big-link:hover{color:var(--red-dark)}
.info-block p{margin:0;font-size:16px}
.info-block .small{display:inline-block;margin-top:8px;font-size:16px;font-weight:500;color:var(--red-dark);text-decoration:underline}
.social{display:flex;gap:18px;margin-top:6px}
.social a{font-size:16px;font-weight:500;color:var(--red-dark);text-decoration:underline}
.brief{margin-top:28px;padding:22px 24px;background:#fff;border-left:3px solid var(--red)}
.brief b{display:block;color:var(--ink);margin-bottom:8px}
.brief ul{list-style:disc;padding-left:20px;font-size:15px}
.brief li{margin-bottom:4px}

/* výzva k akci */
.cta{position:relative;background:var(--red);color:#fff;padding:80px 0;isolation:isolate;margin:34px 0 0}
.cta + footer{margin-top:40px}
.cta h2{color:#fff;font-size:clamp(44px,6vw,84px);max-width:16ch;margin-bottom:22px}
.cta p{font-size:19px;max-width:52ch;color:#fff;margin:0}
.cta-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 48px;align-items:end}
.cta-grid .btns{flex-direction:column;align-items:stretch;max-width:380px;justify-self:end;width:100%}

/* chybová stránka */
.err404{padding:120px 0}
.err404 h1{font-size:clamp(64px,10vw,140px);margin-bottom:20px}
.err404 .lead{margin-bottom:28px}

/* patička */
footer{background:var(--navy-deep);color:rgba(255,255,255,.8);padding:72px 0 40px;font-size:15px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.foot-contact{margin-top:10px}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.15);font-size:15px}
.foot-links a{color:#fff;text-decoration:none}
.foot-links a:hover{text-decoration:underline;color:#fff}
.foot .logo{width:220px;margin-bottom:18px}
.foot b{display:block;color:#fff;font-weight:600;margin-bottom:10px}
.foot a{color:#fff;text-decoration:none}
.foot a:hover{text-decoration:underline;color:#fff}
.foot li{margin-bottom:6px}
.foot p{margin:0 0 6px}
.copy{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);font-size:13px;color:rgba(255,255,255,.6);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.copy a{color:rgba(255,255,255,.75)}

/* spodní lišta na mobilu */
.bar{display:none}

/* ===== Nová barevnost podle loga: modrá, červená, žlutá, oranžová a světle modrá ===== */
.btn-yellow{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}
.btn-yellow:hover{background:#fff;border-color:#fff;color:var(--navy)}
.btn-blue{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-blue:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
.btn svg{width:18px;height:18px;flex:none}

/* barevný proužek pod nadpisem sekce, jako barvy v logu */
.sec-head::after{content:"";display:block;width:84px;height:6px;margin-top:18px;border-radius:3px;background:linear-gradient(90deg,var(--red) 0 25%,var(--orange) 25% 50%,var(--yellow) 50% 75%,var(--sky) 75% 100%)}
.band .sec-head::after,.cta .sec-head::after{display:none}

/* hlavička s rozbalovacím menu */
.logo{width:196px}
.nav{gap:20px;align-items:center}
.nav > a,.nav-toggle{white-space:nowrap;color:var(--ink);text-decoration:none;font:500 16px/1.2 var(--body);padding:6px 0;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer}
.nav > a:hover,.nav-toggle:hover{border-bottom-color:var(--red);color:var(--ink)}
.nav > a[aria-current="page"],.nav-item:has([aria-current="page"]) > .nav-toggle{border-bottom-color:var(--red);font-weight:600}
.nav-item{position:relative}
.nav-toggle{display:inline-flex;align-items:center;gap:6px}
.nav-toggle::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.nav-toggle[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.sub{display:none;position:absolute;top:calc(100% + 14px);left:-18px;z-index:45;width:520px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 40px rgba(15,39,72,.16);padding:10px;grid-template-columns:1fr 1fr;gap:2px}
.sub::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-toggle[aria-expanded="true"] + .sub{display:grid}
.sub a{display:block;padding:10px 12px;border-radius:7px;text-decoration:none;color:var(--ink)}
.sub a b{display:block;font-weight:600;font-size:15px}
.sub a span{display:block;font-size:13px;color:var(--muted);margin-top:1px}
.sub a:hover,.sub a[aria-current="page"]{background:var(--plane);color:var(--ink)}
.sub a:hover b{color:var(--red-dark)}
.sub .sub-all{grid-column:1/-1;border-top:1px solid var(--line);border-radius:0 0 7px 7px;font-weight:600;font-size:15px;color:var(--red-dark);margin-top:4px;padding-top:12px}
.top-konf{gap:8px}

/* hero úvodní stránky: modré pozadí s barevnými skvrnami jako v logu */
.hero{position:relative;background:var(--navy);overflow:hidden;isolation:isolate}
.hero-blobs{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-blobs i{position:absolute;display:block;border-radius:58% 42% 55% 45% / 48% 58% 42% 52%;filter:saturate(1.05)}
.hero-blobs .b1{width:520px;height:380px;left:-260px;top:-250px;background:var(--orange);opacity:.92;transform:rotate(-12deg)}
.hero-blobs .b2{width:520px;height:640px;right:-300px;top:-120px;background:var(--sky);opacity:.9;border-radius:46% 54% 38% 62% / 55% 40% 60% 45%}
.hero-blobs .b3{width:900px;height:420px;right:-160px;bottom:-300px;background:var(--yellow);transform:rotate(-6deg)}
.hero-blobs .b4{width:760px;height:760px;right:4%;top:6%;background:var(--blue);opacity:.55;border-radius:50%}
.hero-text h1 em{font-style:normal;color:var(--yellow)}
.hero-stage{position:relative;display:flex;align-items:stretch;justify-content:center;padding:40px 40px 56px;min-height:620px}
.hero-stage #konf-mini{width:100%;max-width:620px;min-height:540px}
.hero-stage .konf-fallback{align-self:center;color:#fff;text-align:center}

/* záhlaví podstránek v modré s jemnou skvrnou */
.page-head{background:radial-gradient(300px 240px at calc(100% - 30px) -30px,var(--blue) 97%,transparent 100%),radial-gradient(220px 150px at -30px 100%,rgba(66,180,232,.28) 97%,transparent 100%),var(--navy)}
.page-head .lead a{color:#fff}
.crumbs a:hover{color:var(--yellow)}

/* upozornění, například u sítotisku */
.notice{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;background:#FFF8D6;border:1px solid #F3DD7A;border-left:6px solid var(--yellow);border-radius:8px;padding:22px 24px;color:var(--ink)}
.notice-ico{width:40px;height:40px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font:800 24px/1 var(--display);color:var(--navy)}
.notice h2,.notice h3{font-size:clamp(26px,2.4vw,32px);margin-bottom:6px}
.notice p{margin:0;font-size:17px}
.notice p + p{margin-top:8px}

/* srovnání dvou technologií */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.vs > div{border-radius:12px;padding:28px 28px 24px;border:1px solid var(--line);background:#fff}
.vs > .win{border:2px solid var(--blue);box-shadow:0 12px 32px rgba(48,110,181,.14);position:relative}
.vs > .win::before{content:"Tiskneme";position:absolute;top:-14px;left:24px;background:var(--blue);color:#fff;font:600 13px/1 var(--body);padding:7px 12px;border-radius:999px}
.vs > .old::before{content:"Už netiskneme";display:inline-block;margin-bottom:14px;background:var(--plane);color:var(--muted);font:600 13px/1 var(--body);padding:7px 12px;border-radius:999px}
.vs h3{font-size:34px;margin-bottom:14px}
.vs dl{margin:0;display:grid;gap:12px}
.vs dt{font-weight:600;color:var(--ink);font-size:15px}
.vs dd{margin:2px 0 0;font-size:16px}

/* gravírování na úvodní stránce: výrazný žlutý blok */
.grav-feature{position:relative;background:var(--yellow);overflow:hidden;isolation:isolate;margin:40px 0}
.grav-feature::before{content:"";position:absolute;z-index:-1;right:-180px;top:-200px;width:620px;height:520px;border-radius:58% 42% 55% 45% / 48% 58% 42% 52%;background:var(--orange);opacity:.55}
.grav-feature .two{align-items:center}
.grav-feature .kicker{display:inline-block;background:var(--navy);color:#fff;font:600 14px/1 var(--body);padding:9px 14px;border-radius:999px;margin-bottom:18px;letter-spacing:.02em}
.grav-feature h2{font-size:clamp(46px,6vw,88px);margin-bottom:18px}
.grav-feature .lead{color:var(--ink);margin-bottom:24px}
.grav-feature .btns{margin-top:28px}
.grav-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin:0;padding:0}
.grav-list li{font-weight:600;color:var(--ink);font-size:17px;display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(21,51,94,.18);padding:9px 0}
.grav-list li span{font-family:var(--display);font-weight:800;font-size:22px;white-space:nowrap}

/* předměty ke gravírování */
.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.products.p3{grid-template-columns:repeat(3,minmax(0,1fr))}
.prod{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--text);transition:transform .2s}
.prod-img{border-radius:11px 11px 0 0}
/* stín se jen prolne (opacity), animovaný box-shadow sekal posouvání */
a.prod::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:0 14px 30px rgba(15,39,72,.12);opacity:0;transition:opacity .2s;pointer-events:none}
a.prod:hover{transform:translateY(-3px);color:var(--text)}
a.prod:hover::after{opacity:1}
.prod-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:radial-gradient(70% 70% at 50% 45%,#fff 0%,var(--plane) 100%)}
.prod:nth-child(4n+2) .prod-img{background:radial-gradient(70% 70% at 50% 45%,#fff 0%,#FFF3C4 100%)}
.prod:nth-child(4n+3) .prod-img{background:radial-gradient(70% 70% at 50% 45%,#fff 0%,#DCF0FB 100%)}
.prod:nth-child(4n+4) .prod-img{background:radial-gradient(70% 70% at 50% 45%,#fff 0%,#FDE3CB 100%)}
.prod-img img,.prod-img svg{position:absolute;inset:0;margin:auto;width:76%;height:76%;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(15,39,72,.18))}
.prod-t{padding:14px 16px 16px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.prod-t h3{font-size:24px}
.prod-t .pr{font-family:var(--display);font-weight:800;font-size:24px;color:var(--red-dark);white-space:nowrap}
.prod-t p{margin:4px 0 0;font-size:14px;color:var(--muted)}

/* galerie po třech */
.gal-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* obsah stránek pro jednotlivé příležitosti */
.intro-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}
.pill-list{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.pill-list li{background:var(--plane);border-radius:999px;padding:7px 14px;font-size:15px;color:var(--ink);font-weight:500}
.side-note .pill-list li{background:#fff;border:1px solid var(--line)}
.konf-band{position:relative;background:var(--blue);color:#fff;border-radius:16px;padding:36px 40px;display:grid;grid-template-columns:1fr auto;gap:20px 40px;align-items:center;overflow:hidden;isolation:isolate}
.konf-band::before{content:"";position:absolute;z-index:-1;right:-80px;bottom:-140px;width:360px;height:280px;border-radius:58% 42% 55% 45% / 48% 58% 42% 52%;background:var(--yellow);opacity:.95}
.konf-band::after{content:"";position:absolute;z-index:-1;left:-60px;top:-90px;width:220px;height:170px;border-radius:46% 54% 38% 62% / 55% 40% 60% 45%;background:var(--sky);opacity:.8}
.konf-band h2{color:#fff;font-size:clamp(34px,3.6vw,50px);margin-bottom:8px}
.konf-band p{margin:0;color:rgba(255,255,255,.92);max-width:56ch}
.konf-band :focus-visible{outline-color:var(--yellow)}
.lead-2{font-size:18px;color:var(--ink);max-width:62ch}
.prose p{max-width:68ch}
.prose h3{margin:28px 0 10px}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{margin:4px 0 16px}
.konf-hint{margin-top:28px;padding:22px 24px;background:#fff;border-left:3px solid var(--blue);border-radius:0 8px 8px 0}
.konf-hint b{display:block;color:var(--ink);margin-bottom:6px}
.konf-hint p{font-size:15px;margin:0 0 14px}
.konf-hint .btn{min-height:46px}
.who h3 a,.tdet h2 a{color:inherit;text-decoration:none}
.who h3 a:hover{color:var(--red-dark)}
.prod-t > div{min-width:0}
.table th a{color:inherit}
@media (max-width:1180px){
  .nav{align-items:stretch}
  .nav > a,.nav-toggle{font-size:18px;padding:14px 0;border-bottom:1px solid var(--line);width:100%;justify-content:space-between;text-align:left}
  .nav > a:hover,.nav-toggle:hover{border-bottom-color:var(--line);color:var(--red-dark)}
  .nav > a[aria-current="page"],.nav-item:has([aria-current="page"]) > .nav-toggle{border-bottom-color:var(--line);color:var(--red-dark)}
  .nav-item{width:100%}
  .sub{position:static;width:auto;box-shadow:none;border:0;border-radius:0;padding:4px 0 10px;grid-template-columns:1fr;border-bottom:1px solid var(--line)}
  .sub::before{display:none}
  .sub a{padding:9px 12px}
}
@media (max-width:1024px){
  .hero-stage{min-height:0;padding:12px var(--gutter) 56px}
  .hero-stage #konf-mini{min-height:480px;max-width:560px}
  .vs,.intro-grid{grid-template-columns:1fr;gap:28px}
  .products{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grav-list{grid-template-columns:1fr}
  .konf-band{grid-template-columns:1fr}
}
@media (max-width:640px){
  .logo{width:150px}
  .hero-stage{padding:4px var(--gutter) 44px}
  .hero-stage #konf-mini{min-height:420px}
  .hero-blobs .b1{width:320px;height:240px;left:-150px;top:-150px}
  .hero-blobs .b2{display:none}
  .hero-blobs .b3{width:600px;height:300px;right:-200px;bottom:-200px}
  .hero-blobs .b4{width:460px;height:460px;right:-120px;top:auto;bottom:10%}
  .top-konf{display:none}
  .products,.products.p3{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .prod-t{flex-direction:column;gap:2px;padding:10px 12px 12px}
  .prod-t h3,.prod-t .pr{font-size:21px}
  .gal-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vs > div{padding:22px 18px}
  .notice{grid-template-columns:1fr;padding:18px}
  .konf-band{padding:26px 20px}
  .grav-feature h2{font-size:48px}
}
@media (max-width:360px){
  .logo{width:132px}
}

/* horní lišta s kontakty */
.util{background:var(--navy-deep);color:rgba(255,255,255,.88);font-size:14px}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 28px;min-height:40px;flex-wrap:wrap}
.util-claim{margin:0;color:rgba(255,255,255,.7)}
.util-list{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0}
.util-list a{display:inline-flex;align-items:center;gap:7px;color:#fff;text-decoration:none;padding:6px 0}
.util-list a:hover{color:var(--yellow)}
.util-list svg{width:15px;height:15px;flex:none;opacity:.8}

/* rozbalovací menu ve dvou sloupcích */
.sub-mega{width:660px;grid-template-columns:1fr 1fr;gap:6px 18px;padding:18px}
.sub-head{display:block;font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 12px 10px}
.sub-col{min-width:0}

/* katalog textilu */
.kat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px}
.kat-item{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.kat-img{position:relative;aspect-ratio:1/1;background:radial-gradient(70% 70% at 50% 40%,#fff 0%,var(--plane) 100%)}
.kat-item:nth-child(4n+2) .kat-img{background:radial-gradient(70% 70% at 50% 40%,#fff 0%,#FFF3C4 100%)}
.kat-item:nth-child(4n+3) .kat-img{background:radial-gradient(70% 70% at 50% 40%,#fff 0%,#DCF0FB 100%)}
.kat-item:nth-child(4n+4) .kat-img{background:radial-gradient(70% 70% at 50% 40%,#fff 0%,#FDE3CB 100%)}
.kat-img img{position:absolute;inset:0;margin:auto;width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(15,39,72,.16))}
.kat-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.kat-body h3{font-size:24px;margin-bottom:6px}
.kat-desc{font-size:14px;margin:0 0 12px}
.kat-spec{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:14px;border-top:1px solid var(--line);padding-top:10px}
.kat-spec dt{color:var(--muted)}
.kat-spec dd{margin:0;color:var(--ink);font-weight:500}
.kat-price{margin:12px 0 0;font-size:15px}
.kat-price b{font-family:var(--display);font-weight:800;font-size:24px;color:var(--red-dark)}
.kat-more{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.kat-more summary{cursor:pointer;list-style:none;font-size:14px;font-weight:600;color:var(--red-dark);display:flex;align-items:center;gap:8px;min-height:32px}
.kat-more summary::-webkit-details-marker{display:none}
.kat-more summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.kat-more[open] summary::before{transform:rotate(45deg)}
.kat-more img{margin-top:12px;border:1px solid var(--line);border-radius:6px;width:100%;height:auto}
.kat-cta{margin-top:14px;align-self:flex-start;font-weight:600;font-size:15px;color:var(--red-dark);text-decoration:underline;text-underline-offset:3px}
.kat-cta:hover{color:var(--red-deep)}

/* služby v kartách */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:10px;padding:24px 26px}
.card:nth-child(3n+2){border-left-color:var(--yellow)}
.card:nth-child(3n+3){border-left-color:var(--orange)}
.card h3{font-size:26px;margin-bottom:8px}
.card p{margin:0;font-size:16px}
.card a{font-weight:600}

/* balíčky */
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:8px}
.pack{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 26px}
.pack.hi{border:2px solid var(--red);box-shadow:0 14px 34px rgba(225,50,53,.12)}
.pack-kick{display:inline-block;align-self:flex-start;background:var(--plane);color:var(--ink);font:600 13px/1 var(--body);padding:7px 12px;border-radius:999px;margin-bottom:14px}
.pack.hi .pack-kick{background:var(--red);color:#fff}
.pack h3{font-size:30px;margin-bottom:8px}
.pack > p{font-size:16px;margin:0 0 16px}
.pack ul{border-top:1px solid var(--line);margin-bottom:18px}
.pack li{padding:9px 0 9px 26px;border-bottom:1px solid var(--line);font-size:15px;position:relative}
.pack li::before{content:"";position:absolute;left:2px;top:15px;width:12px;height:7px;border-left:2.5px solid var(--red);border-bottom:2.5px solid var(--red);transform:rotate(-45deg)}
.pack-price{margin-top:auto;font-size:15px;color:var(--muted)}
.pack-price b{display:block;font-family:var(--display);font-weight:800;font-size:38px;line-height:1;color:var(--ink)}
.pack .btn{margin-top:18px;align-self:flex-start}

/* loga klientů */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px 44px;margin-top:8px}
.logos img{height:58px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .2s,opacity .2s}
.logos img:hover{filter:none;opacity:1}
.logos-note{text-align:center;font-size:14px;color:var(--muted);margin:26px 0 0}

/* hotové kusy z e-shopu */
.shop-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.shop-item{display:block;text-decoration:none;color:var(--text)}
.shop-item .ph{display:block;background:var(--plane);border-radius:10px;aspect-ratio:1/1;position:relative;overflow:hidden}
.shop-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shop-item b{display:block;color:var(--ink);font-weight:600;font-size:15px;margin-top:10px}
.shop-item span{font-family:var(--display);font-weight:800;font-size:22px;color:var(--red-dark)}
.shop-item:hover b{color:var(--red-dark)}

@media (max-width:1180px){
  .sub-mega{width:auto;grid-template-columns:1fr;padding:4px 0 10px}
  .sub-head{padding:10px 12px 6px}
}
@media (max-width:1024px){
  .kat{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards,.packs{grid-template-columns:1fr}
  .shop-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .util-claim{display:none}
}
@media (max-width:640px){
  .util{font-size:13px}
  .util .wrap{justify-content:center}
  .util-list{gap:4px 16px;justify-content:center}
  .hide-s{display:none}
  .kat{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
  .kat-body{padding:12px 12px 14px}
  .kat-body h3{font-size:20px}
  .kat-desc{display:none}
  .kat-spec{font-size:13px}
  .shop-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .logos img{height:42px}
  .pack{padding:22px 18px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.nav > a,.nav-toggle{transition:none}
}

/* hlavička: mezi 1181 a 1260 px schovat telefon, pod 1180 px menu v tlačítku */
@media (max-width:1260px){
  .top-phone{display:none}
}
@media (max-width:1180px){
  .top-phone{display:inline}
  .menu-btn{display:inline-flex}
  .top-actions{margin-left:auto}
  .nav{display:none;order:3;flex:0 0 100%;flex-direction:column;gap:0;margin:0 0 12px;border-top:1px solid var(--line)}
  .top.open .nav{display:flex}
  .nav > a{font-size:18px;padding:14px 0;border-bottom:1px solid var(--line)}
  .nav > a:hover{border-bottom-color:var(--line);color:var(--red-dark)}
  .nav > a[aria-current="page"]{border-bottom-color:var(--line);color:var(--red-dark)}
}

@media (max-width:1024px){
  .args{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps.three{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(3,minmax(0,1fr))}
  .segs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reviews{grid-template-columns:1fr}
  .prices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prices li:nth-child(3){padding-left:0;border-left:0}
  .prices li:nth-child(n+3){border-top:1px solid var(--line)}
  .foot{grid-template-columns:1fr 1fr}
  .two,.two.rev,.calc,.contact,.shop,.tdet,.tdet.no-media,.faq-groups{grid-template-columns:1fr;gap:40px}
  .faq-groups{gap:20px}
  .faq-groups h2{position:static}
  .shop-photo{display:none}
  .cta-grid{grid-template-columns:1fr}
  .cta-grid .btns{flex-direction:row;align-items:center;justify-self:start;max-width:none;width:auto}
  .hero{grid-template-columns:1fr}
  .hero-text{padding:48px var(--gutter) 56px;max-width:none}
  .hero-inner{padding-left:0}
  .page-head .wrap{grid-template-columns:1fr;gap:32px}
  .page-head figure{max-width:640px}
  .qs{grid-template-columns:1fr;gap:24px}
  .who{grid-template-columns:repeat(2,minmax(0,1fr))}
  .photo-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .photo-row figure:nth-child(3){display:none}
}
@media (max-width:900px){
  .top .btn{display:none}
}
@media (max-width:640px){
  :root{--gutter:16px;--head-h:64px}
  body{font-size:16px;padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px))}
  section{padding:64px 0}
  h2{font-size:clamp(36px,10vw,44px)}
  .lead{font-size:18px}
  .hide-m{display:none}
  .logo{width:150px}
  .top-phone{display:none}
  .menu-btn{padding:0 12px}
  .hero-text{padding:26px var(--gutter) 30px}
  .hero-text h1{font-size:40px;margin-bottom:14px}
  .hero-text h1 .l{display:inline;white-space:normal}
  .hero-text h1 .l:first-child{display:block}
  .hero-text .lead{font-size:17px;margin-bottom:20px}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hero-actions .btn{min-height:48px;padding:0 10px;font-size:15px}
  .page-head{margin-bottom:24px}
  .page-head + .contact-sec,.page-head + .calc-sec{margin-top:-24px;padding-top:88px}
  .scroll-hint{display:block}
  .page-head .wrap{padding-top:28px;padding-bottom:40px;gap:24px}
  .page-head h1{font-size:44px;margin-bottom:14px}
  .page-head .lead{font-size:17px}
  .page-head figure{order:-1}
  .page-head figure img{aspect-ratio:16/9}
  .page-head figcaption{display:none}
  .crumbs{margin-bottom:12px}
  .band{padding:24px 0 30px}
  .args{gap:16px}
  .args strong{font-size:31px;margin-bottom:4px}
  .args span{font-size:13px;line-height:1.35}
  .tech li{grid-template-columns:1fr;gap:6px}
  .segs{grid-template-columns:1fr;gap:32px}
  .who{grid-template-columns:1fr;gap:28px}
  .steps{grid-template-columns:1fr;gap:26px}
  .steps h3{min-height:0}
  .prices{grid-template-columns:1fr}
  .prices li,.prices li + li{padding:18px 0;border-left:0}
  .prices li + li{border-top:1px solid var(--line)}
  .prices b{font-size:38px}
  .pricelist{grid-template-columns:1fr;margin-top:28px}
  .pricelist ul+ul{border-top:0}
  .pl-p{font-size:26px}
  .shop-foot .btn{width:100%}
  .calc-form,.form,.ok,.calc-out{padding:22px 18px}
  .row{grid-template-columns:1fr;gap:0}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}
  .gal .wide{grid-column:span 2}
  .tile{padding:16px;gap:12px;min-height:0}
  .tile p{font-size:28px}
  .tile .btn{align-self:stretch;min-height:44px;padding:0 8px;font-size:14px}
  .clients{font-size:16px}
  .tdet{padding:48px 0}
  .spec{grid-template-columns:1fr;gap:2px}
  .spec dd{margin-bottom:10px}
  .faq summary{font-size:22px;padding-right:36px}
  .cta{padding:64px 0}
  .cta-grid .btns{flex-direction:column;align-items:stretch;width:100%}
  .foot{grid-template-columns:1fr;gap:28px}
  .photo-row{grid-template-columns:1fr 1fr;gap:12px}
  .err404{padding:72px 0}
  .bar{display:grid;grid-template-columns:1fr 1.2fr 1.1fr;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--ink);padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));gap:6px;border-top:1px solid rgba(255,255,255,.12)}
  .bar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:6px;color:#fff;text-decoration:none;font-weight:600;font-size:15px;background:rgba(255,255,255,.08)}
  .bar a.primary{background:var(--red)}
  .bar svg{width:18px;height:18px;flex:none}
}
@media (max-width:360px){
  .logo{width:132px}
  .hero-actions{grid-template-columns:1fr}
  .bar a{font-size:14px;gap:6px}
}

/* ===== Víc fotek: dílna, pás zakázek, mozaika ===== */
/* zaoblené fotky a barevný rám posunutý za fotkou */
.photo img,.seg img,.photo-row img{border-radius:12px}
.photo.offset{margin:0 16px 16px 0}
.photo.offset img{box-shadow:16px 16px 0 var(--yellow)}
.photo.offset figcaption{padding-top:26px}

/* popisek přes fotku */
.story-photos figcaption,.strip figcaption,.bento figcaption{position:absolute;left:12px;bottom:12px;right:12px;width:max-content;max-width:calc(100% - 24px);background:rgba(15,39,72,.82);color:#fff;font-size:13px;line-height:1.35;font-weight:500;padding:6px 10px;border-radius:6px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* velké fotky se při najetí nezvětšují, v Safari to trhalo; jen zesytí */
/* dílna: text na modré, fotky až k okraji */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:0;background:var(--ink);color:#fff}
.story-text{padding:96px 64px 96px max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.kicker{display:inline-block;background:var(--yellow);color:var(--ink);font:600 14px/1 var(--body);padding:9px 14px;border-radius:999px;margin-bottom:18px;letter-spacing:.02em}
.story h2{color:#fff;margin-bottom:22px;max-width:16ch}
.story .lead{color:rgba(255,255,255,.88);margin-bottom:8px}
.story-quote{font-family:var(--display);font-weight:800;font-size:clamp(28px,2.6vw,36px);line-height:1.1;color:var(--yellow);margin:24px 0 32px;max-width:26ch;padding-left:20px;border-left:4px solid var(--red)}
.story-quote span{display:block;font:500 15px/1.4 var(--body);color:rgba(255,255,255,.75);margin-top:10px}
.story :focus-visible{outline-color:var(--yellow)}
.story-photos{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1.35fr) minmax(0,1fr);gap:6px;min-height:680px}
.story-photos figure{position:relative;overflow:hidden;min-height:0}
.story-photos .sp-a{grid-column:1/-1}
.story-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .3s}
.story-photos figure:hover img{filter:saturate(1.08) brightness(1.03)}

/* pás hotových zakázek: bez skriptu se posouvá rukou, se skriptem pomalu jede */
.strip{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:0 var(--gutter) 10px;scrollbar-width:thin}
.strip-track{display:flex;gap:14px;width:max-content}
.strip li{flex:none;scroll-snap-align:start}
.strip figure{position:relative;width:270px;height:340px;border-radius:12px;overflow:hidden;background:var(--plane)}
.strip img{width:100%;height:100%;object-fit:cover}
.strip.is-running{overflow:hidden;padding:0 0 10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.strip.is-running .strip-track{animation:strip-run 70s linear infinite}
/* pás se při najetí myší nezastavuje, jen při klávesovém fokusu */
.strip.is-running:focus-within .strip-track{animation-play-state:paused}
@keyframes strip-run{to{transform:translateX(calc(-50% - 7px))}}

/* postup s fotkami */
.steps.photos li{display:flex;flex-direction:column;border-top:0;padding-top:0}
.steps.photos img{order:-1;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin-bottom:18px}

/* mozaika fotek z dílny */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:230px;gap:12px;margin-top:56px}
.bento figure{position:relative;overflow:hidden;border-radius:12px;background:var(--plane)}
.bento img{width:100%;height:100%;object-fit:cover;transition:filter .3s}
.bento figure:hover img{filter:saturate(1.08) brightness(1.03)}
.bento .b-big{grid-column:span 2;grid-row:span 2}
.bento .b-wide{grid-column:span 2}

@media (max-width:1024px){
  .story{grid-template-columns:1fr}
  .story-text{padding:72px var(--gutter)}
  .story-photos{min-height:560px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:200px}
}
@media (max-width:640px){
  .story-text{padding:56px var(--gutter)}
  .story-photos{min-height:440px}
  .strip figure{width:220px;height:280px}
  .bento{grid-auto-rows:150px;gap:8px;margin-top:40px}
  .bento figcaption{display:none}
  .photo.offset{margin:0 10px 10px 0}
  .photo.offset img{box-shadow:10px 10px 0 var(--yellow)}
}
@media (prefers-reduced-motion:reduce){
  .story-photos img,.bento img{transition:none}
}
.grav-feature .photo figcaption{color:var(--ink)}

/* ===== Modernizace: zaoblená tlačítka, jemné animace při najetí, zarovnání ===== */
:root{--ease:cubic-bezier(.2,.75,.2,1);--sh-sm:0 6px 16px -8px rgba(15,39,72,.28);--sh-md:0 18px 40px -16px rgba(15,39,72,.32);--radius:16px}

/* tlačítka: pilulka, při najetí se lehce nadzvedne a dostane stín */
.btn,.top .btn,.menu-btn,.konf-mini-btn,.konf-btn,.tile .btn,.file-btn{border-radius:999px}
.btn{padding:0 28px;transition:background .2s,color .2s,border-color .2s,transform .28s var(--ease),box-shadow .28s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn:active{transform:translateY(0);box-shadow:var(--sh-sm);transition-duration:.08s}
.btn-red:hover{box-shadow:0 16px 32px -14px rgba(219,47,50,.6)}
.btn-yellow:hover{box-shadow:0 16px 32px -14px rgba(255,209,19,.7)}
.btn-white:hover{box-shadow:0 16px 32px -14px rgba(0,0,0,.35)}
.btn-line-w:hover{box-shadow:0 16px 32px -14px rgba(0,0,0,.35)}
.btn-ink:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
.btn.btn-arrow::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);transition:transform .28s var(--ease);flex:none}
.btn.btn-arrow:hover::after{transform:rotate(45deg) translate(2px,-2px)}
.more{position:relative;text-decoration:none;padding-bottom:2px;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 2px;transition:background-size .3s var(--ease),color .2s}
.more:hover{background-size:0 2px}
.chips button{transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.chips button:hover{transform:translateY(-1px)}

/* hlavní menu: podtržení se vysune zleva */
.nav > a{position:relative;border-bottom-color:transparent}
.nav > a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav > a:hover,.nav > a[aria-current="page"]{border-bottom-color:transparent}
.nav > a:hover::after,.nav > a[aria-current="page"]::after{transform:scaleX(1)}
.nav-toggle{transition:color .2s}
.sub{transform-origin:top left;animation:sub-in .22s var(--ease) both}
@keyframes sub-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.util-list a{transition:color .2s}

/* karty: nadzvednutí se stínem, u obrázků jemné přiblížení (jen malé obrázky, velké fotky v Safari trhaly) */
.pack,.card,.kat-item,.vs > div,.shop-item .ph,.side-note,.notice,.calc-form,.calc-out,.form,.ok,.konf-hint,.brief,.tile,.faq details{transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s}
.pack,.card,.kat-item{position:relative;z-index:0}
.pack:hover,.card:hover,.kat-item:hover{transform:translateY(-6px);box-shadow:var(--sh-md);border-color:var(--line-strong)}
.pack.hi:hover{border-color:var(--red);box-shadow:0 24px 48px -18px rgba(225,50,53,.35)}
.card:hover{border-left-width:4px}
.card h3{transition:color .2s}
.card:hover h3{color:var(--blue-dark)}
.card:nth-child(3n+2):hover h3{color:var(--ink)}
.card:nth-child(3n+3):hover h3{color:var(--orange)}
.pack .btn{align-self:stretch}
.shop-item .ph{transform:translateZ(0)}
.shop-item .ph img{transition:transform .6s var(--ease)}
.shop-item:hover .ph{box-shadow:var(--sh-md)}
.shop-item:hover .ph img{transform:scale(1.06)}
.prod{transition:transform .32s var(--ease),border-color .32s}
.prod-img img{transition:transform .5s var(--ease)}
a.prod:hover{transform:translateY(-6px);border-color:var(--line-strong)}
a.prod:hover .prod-img img{transform:scale(1.06) translateY(-2px)}
.seg{transition:transform .32s var(--ease)}
.seg img{transition:filter .3s,box-shadow .32s var(--ease)}
.seg:hover{transform:translateY(-4px)}
.seg:hover img{box-shadow:var(--sh-md)}
.seg h3{transition:color .2s}
.tech li{transition:padding-left .3s var(--ease)}
.tech li:hover{padding-left:8px}
.tech b a{transition:color .2s}
.prices li{transition:transform .3s var(--ease)}
.prices li:hover b{color:var(--red-dark)}
.prices b{transition:color .2s}
.steps.photos img{transition:transform .5s var(--ease),box-shadow .4s var(--ease)}
.steps.photos li:hover img{transform:translateY(-4px);box-shadow:var(--sh-md)}
.rev{transition:border-color .3s,transform .3s var(--ease)}
.rev:hover{border-color:var(--yellow);transform:translateX(4px)}
.logos img{transition:filter .3s,opacity .3s,transform .3s var(--ease)}
.logos img:hover{transform:translateY(-3px)}
.pill-list li,.tags li{transition:background .2s,color .2s,border-color .2s}
.gal .ph{border-radius:12px}
.gal .ph img{transition:transform .6s var(--ease)}
.gal .ph:hover img{transform:scale(1.04)}

/* zaoblené bloky, ať spolu ladí s kartami */
.side-note,.notice,.calc-form,.calc-out,.form,.ok,.konf-hint,.brief,.tile,.gal .tile,.kat-more img{border-radius:var(--radius)}
.konf-hint,.brief{border-radius:0 var(--radius) var(--radius) 0}
.side-note{padding:32px}
.kicker,.pack-kick,.grav-feature .kicker{letter-spacing:.03em}

/* kalkulačka: formulář i výsledek stejně vysoké */
.calc{align-items:stretch}
.calc-out{justify-content:flex-start}

/* gravírování na žlutém pozadí: karty bez žlutého závoje, jen bílá do světle šedé */
.grav-feature .prod .prod-img,.grav-feature .prod:nth-child(4n+2) .prod-img,.grav-feature .prod:nth-child(4n+3) .prod-img,.grav-feature .prod:nth-child(4n+4) .prod-img{background:radial-gradient(70% 70% at 50% 45%,#fff 0%,#F4F6F9 100%)}
.grav-feature .prod{border-color:transparent;box-shadow:0 10px 24px -14px rgba(15,39,72,.25)}
.grav-feature .prod-img img{filter:drop-shadow(0 12px 14px rgba(15,39,72,.22))}

/* časté dotazy: nadpis vedle seznamu začíná na stejné lince, znaménko se otočí, odpověď se plynule vysune */
.faq-groups h2{border-top:1px solid var(--ink);padding-top:20px;margin:0}
.faq-groups > h2 + .faq{margin:0}
.faq summary{transition:color .2s,padding-left .3s var(--ease)}
.faq summary::after{content:"+";transition:transform .3s var(--ease),color .2s}
.faq details[open] summary::after{content:"+";transform:rotate(45deg)}
.faq details[open] summary{color:var(--red-dark)}
@media (prefers-reduced-motion:no-preference){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow-y:clip;transition:content-visibility .35s allow-discrete,block-size .35s var(--ease)}
  .faq details[open]::details-content{block-size:auto}
}
@media (max-width:1180px){
  .nav > a::after{display:none}
  .nav > a:hover,.nav > a[aria-current="page"]{border-bottom-color:var(--line)}
  .sub{animation:none}
}
@media (max-width:1024px){
  .faq-groups h2{border-top:0;padding-top:0}
}
@media (prefers-reduced-motion:reduce){
  .btn,.pack,.card,.kat-item,.prod,.prod-img img,.seg,.seg img,.shop-item .ph img,.tech li,.rev,.logos img,.steps.photos img,.gal .ph img,.nav > a::after,.more,.faq summary::after{transition:none}
  .btn:hover,.pack:hover,.card:hover,.kat-item:hover,a.prod:hover,.seg:hover,.rev:hover,.tech li:hover{transform:none}
  .sub{animation:none}
}

/* ===== Hero na celou obrazovku: text vlevo, živá ukázka konfigurátoru v kartě vpravo ===== */
.hero{min-height:calc(100svh - var(--head-h) - 40px);grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
.hero-text{padding:72px 64px 96px 0;max-width:700px}
.hero-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 22px;font:600 13px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--sky)}
.hero-eyebrow::before{content:"";width:28px;height:2px;border-radius:1px;background:var(--yellow)}
.hero-text h1{font-size:clamp(54px,5.4vw,86px);line-height:.95;margin-bottom:26px}
.hero-text .lead{font-size:19px;max-width:54ch}
.hero-actions .btn{min-height:56px;padding:0 30px}
.hero-stage{padding:56px 0 96px 24px;padding-right:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));align-items:center;min-height:0}
.hero-card{position:relative;width:100%;max-width:560px;border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);box-shadow:0 50px 100px -50px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hero-card::before{content:"";position:absolute;left:28px;right:28px;top:-1px;height:4px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--red) 0 25%,var(--orange) 25% 50%,var(--yellow) 50% 75%,var(--sky) 75% 100%);z-index:2}
.hero-card::after{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.6px);background-size:24px 24px;-webkit-mask-image:radial-gradient(70% 70% at 50% 40%,#000 30%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 40%,#000 30%,transparent 100%)}
.hero-card #konf-mini{position:relative;z-index:1;min-height:560px}
.hero-card .konf-mini,.hero-card .konf-fallback{border-radius:24px;background:radial-gradient(70% 55% at 50% 40%,rgba(29,67,120,.95) 0%,rgba(21,51,94,0) 72%)}
.hero-card .konf-mini{min-height:560px}
/* při otevřeném konfigurátoru rozmazání za kartou vypnout, ať přechod neškube */
.konf-lock .hero-card{-webkit-backdrop-filter:none;backdrop-filter:none}
/* křížky v rozích jako značky tiskové plochy */
.hm{position:absolute;left:14px;right:14px;height:14px;z-index:2;pointer-events:none}
.hm-t{top:14px}.hm-b{bottom:14px}
.hm::before,.hm::after{content:"";position:absolute;top:0;width:14px;height:14px;background:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45)) no-repeat 0 50%/100% 1px,linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45)) no-repeat 50% 0/1px 100%}
.hm::before{left:0}.hm::after{right:0}
/* plovoucí štítky s cenou a termínem */
.hero-badge{position:absolute;z-index:3;display:flex;flex-direction:column;gap:3px;padding:12px 18px 13px;border-radius:16px;background:rgba(255,255,255,.94);color:var(--ink);font:500 13px/1.25 var(--body);box-shadow:0 20px 44px -18px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap}
.hero-badge b{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;color:var(--red)}
.hb-1{left:-28px;bottom:118px}
.hb-2{right:-24px;top:64px}
.hb-2 b{color:var(--blue)}
.hero-scroll{position:absolute;left:50%;bottom:58px;z-index:2;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.7);font:600 11px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;text-decoration:none}
.hero-scroll:hover{color:#fff}
.hero-scroll span{position:relative;width:1px;height:40px;background:rgba(255,255,255,.28);overflow:hidden}
.hero-scroll span::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--yellow)}
@media (prefers-reduced-motion:no-preference){
  .hero-scroll span::after{animation:scroll-line 1.9s cubic-bezier(.65,0,.35,1) infinite}
  .hero-badge{animation:hero-up .8s .9s var(--ease) both,badge-float 6s 1.7s ease-in-out infinite}
  .hb-2{animation-delay:1.05s,2.2s}
  .hero-scroll{animation:hero-fade 1s 1.2s ease-out both}
}
@keyframes scroll-line{to{top:100%}}
@keyframes badge-float{50%{transform:translateY(-6px)}}
@media (max-width:1180px){
  .hero-text h1{font-size:clamp(48px,5.4vw,72px)}
  .hb-1{left:-12px}.hb-2{right:-12px}
}
@media (max-width:1024px){
  .hero{min-height:0;grid-template-columns:1fr}
  .hero-text{padding:56px var(--gutter) 24px;max-width:none}
  .hero-stage{padding:8px var(--gutter) 72px}
  .hero-card{max-width:560px;margin:0 auto}
  .hb-1{left:12px;bottom:110px}.hb-2{right:12px;top:52px}
  .hero-scroll{display:none}
}
@media (max-width:640px){
  .hero-text{padding:32px var(--gutter) 16px}
  .hero-eyebrow{margin-bottom:14px;font-size:12px}
  .hero-text .lead{font-size:17px}
  .hero-stage{padding:0 var(--gutter) 56px}
  .hero-card #konf-mini,.hero-card .konf-mini{min-height:460px}
  .hero-badge{padding:9px 13px;border-radius:12px;font-size:12px}
  .hero-badge b{font-size:24px}
  .hb-1{left:8px;bottom:96px}.hb-2{right:8px;top:40px}
  .hm{display:none}
}

/* tisk: odkrýt vše, co čeká na animaci při posouvání, a schovat ovládání */
@media print{
  .reveal-on [data-reveal]{opacity:1!important;transform:none!important}
  .top,.bar,.proposal,.skip,.cta .btns,.hero-stage,.konf-band,.strip,.ink-edge{display:none!important}
  .strip-track{animation:none!important}
  body{padding-bottom:0}
  section{padding:32px 0}
  .hero,.story,.page-head,.band,.cta,footer{background:#fff!important;color:#000!important}
  .hero h1,.story h2,.page-head h1,.band strong,.band span,.cta h2,.cta p,footer *{color:#000!important}
  a{color:#000}
}

/* ===== Klidná verze (26. 9. 2026): méně ozdob, světlý úvod, hlavička jako plovoucí pilulka =====
   Vzor: simonweby.cz a hodise-folklor.cz. Barvy zůstávají, jen se používají střídměji:
   tmavě modrá a červená nesou web, žlutá, nebeská a oranžová jsou jen v detailech. */
:root{--paper:#F5F8FC}

/* hlavička: nahoře splývá s úvodem, po posunutí se složí do pilulky a ukáže telefon */
.top{background:var(--paper);border-bottom:0;transition:background .35s var(--ease)}
.top .wrap{transition:max-width .45s var(--ease),padding .45s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease),margin .45s var(--ease),min-height .45s var(--ease);border:1px solid transparent}
.logo{transition:width .45s var(--ease)}
.top-phone{display:inline-flex;align-items:center;gap:8px;font-size:15px;max-width:0;overflow:hidden;opacity:0;transition:max-width .45s var(--ease),opacity .3s}
.top-phone svg{width:16px;height:16px;flex:none}
@media (min-width:1181px){
  .top.scrolled{background:transparent}
  .top.scrolled .wrap{max-width:min(calc(var(--max) - 48px),calc(100% - 24px));min-height:60px;margin-top:10px;padding:0 10px 0 22px;background:rgba(255,255,255,.95);border-color:var(--line);border-radius:999px;box-shadow:var(--sh-md)}
  .top.scrolled .logo{width:150px}
  .top.scrolled .top-phone{max-width:160px;opacity:1}
  .top.scrolled .btn{min-height:42px}
}
@media (max-width:1180px){
  .top{background:#fff;box-shadow:0 1px 0 var(--line)}
  .top-phone{display:none}
}

/* nadpisy sekcí bez čtyřbarevného proužku */
.sec-head::after{display:none}
.sec-head{margin-bottom:32px}

/* úvod: světlý, text tmavě modrý, konfigurátor v tmavé kartě */
.hero{background:var(--paper);color:var(--text);min-height:calc(100svh - var(--head-h))}
.hero-text h1{color:var(--ink)}
.hero-text h1 em{color:var(--red)}
.hero-eyebrow{color:var(--blue-dark)}
.hero-eyebrow::before{background:var(--red)}
.hero-text .lead{color:var(--text)}
.hero :focus-visible,.page-head :focus-visible{outline-color:var(--red)}
.hero-card{background:var(--navy);border:0;box-shadow:0 40px 80px -40px rgba(15,39,72,.55);-webkit-backdrop-filter:none;backdrop-filter:none}
.hero-card::after{opacity:.6}
.hero-badge{box-shadow:0 18px 40px -18px rgba(15,39,72,.45)}

/* záhlaví podstránek: stejně světlé jako úvod */
.page-head{background:var(--paper);color:var(--text)}
.page-head h1{color:var(--ink)}
.page-head .lead{color:var(--text)}
.page-head .lead a{color:var(--red-dark)}
.page-head figure img{border-radius:var(--radius)}
.page-head figcaption{color:var(--muted)}
.crumbs{color:var(--muted)}
.crumbs a{color:var(--ink)}
.crumbs a:hover{color:var(--red-dark)}

/* gravírování: světlá plocha místo žluté se skvrnou */
.grav-feature{background:var(--plane)}
.grav-feature::before{display:none}

/* výzva dole: zaoblený červený panel, ne pruh přes celou šířku */
.cta{background:transparent;padding:0 0 96px;margin:0}
.cta::after{display:none}
.cta .wrap.cta-grid{background:var(--red);border-radius:28px;padding:clamp(32px,5vw,64px);max-width:calc(var(--max) - 2 * var(--gutter));margin-inline:auto}
.cta + footer{margin-top:0}
@media (max-width:1248px){.cta .wrap.cta-grid{margin-inline:var(--gutter)}}

/* ceny: odkaz na e-shop pod řádkem cen */
.prices-note{margin:18px 0 0;font-size:15px;color:var(--muted)}

/* mobilní lišta s kontakty: až po posunutí pod úvod */
@media (max-width:1024px){
  .bar{transform:translateY(110%);transition:transform .35s var(--ease)}
  .bar.show{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .top,.top .wrap,.logo,.top-phone,.bar{transition:none}
}
@media (max-width:640px){.cta{padding-bottom:64px}.cta .wrap.cta-grid{border-radius:20px}}
.hero-card .konf-mini,.hero-card .konf-fallback{background:radial-gradient(58% 48% at 50% 42%,rgba(66,180,232,.28) 0%,rgba(21,51,94,0) 72%)}
@media (max-width:640px){.hero-actions{gap:10px}.hero-actions .btn{padding:0 18px;white-space:nowrap;flex:1 1 auto}}
/* dlaždice výrobků: jedna světlá barva místo čtyř pastelových */
.prod:nth-child(4n+2) .prod-img,.prod:nth-child(4n+3) .prod-img,.prod:nth-child(4n+4) .prod-img{background:radial-gradient(70% 70% at 50% 45%,#fff 0%,var(--plane) 100%)}
/* pruh s výzvou na podstránkách: světlý, bez skvrn, ať se nepere s červenou výzvou dole */
.konf-band{background:var(--plane);color:var(--text)}
.konf-band::before,.konf-band::after{display:none}
.konf-band h2{color:var(--ink)}
.konf-band p{color:var(--text)}
.konf-band :focus-visible{outline-color:var(--red)}

/* Plynulé posouvání (26. 9. 2026): v úvodu se nic nesmí překreslovat v každém snímku.
   1) hlavička se mění bez animace šířky a okrajů (ty přepočítávaly layout na začátku posouvání)
   2) štítek s cenou bez rozmazaného pozadí a bez nekonečného vznášení
   3) tričko v ukázce má vlastní vrstvu, jeho přebarvení nepřekresluje zbytek stránky */
.top .wrap{transition:background .3s,box-shadow .3s,border-color .3s}
.logo,.top-phone{transition:none}
.hero-badge{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
@media (prefers-reduced-motion:no-preference){
  .hero-badge{animation:hero-up .8s .9s var(--ease) both}
}
.konf-mini-fig{will-change:transform}
/* pilulka musí zůstat na jednom řádku; telefon se v ní ukáže jen tam, kde se vejde (hranice změřená) */
@media (min-width:1181px){
  .top.scrolled .wrap{flex-wrap:nowrap;column-gap:18px}
  .top.scrolled .nav{gap:14px}
  .top.scrolled .logo{width:132px}
}
/* řádkování nadpisů: úzké písmo s českou diakritikou potřebuje víc než 1, jinak se ocásky g, j, y dotýkají čárek a háčků na dalším řádku */
h1,h2{line-height:1.08}
.hero-text h1{line-height:1.04}
.page-head h1,.grav-feature h2,.story h2,.cta h2,.konf-band h2{line-height:1.08}
/* krátký seznam výhod v záhlaví podstránek (katalog, gravírování) */
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin:24px 0 0;padding:0;font-size:15px;color:var(--ink);font-weight:500}
.hero-meta li{display:flex;align-items:center;gap:8px}
.hero-meta li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);flex:none}

/* ===== Plynulé animace (27. 9. 2026): při najetí a posouvání se animuje jen průhlednost a posun,
   které zvládne grafická karta bez překreslování. Stín se nepřekresluje, jen se prolne. ===== */
/* tlačítka: stín na pseudoprvku ::before (::after už používá šipka) */
.btn{position:relative;isolation:isolate;transition:background .2s,color .2s,border-color .2s,transform .28s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:var(--sh-md);opacity:0;transition:opacity .28s var(--ease);pointer-events:none}
.btn:hover,.btn-red:hover,.btn-yellow:hover,.btn-white:hover,.btn-line-w:hover{box-shadow:none}
.btn:hover::before{opacity:1}
.btn-red::before{box-shadow:0 16px 32px -14px rgba(219,47,50,.6)}
.btn-yellow::before{box-shadow:0 16px 32px -14px rgba(255,209,19,.7)}
.btn:active::before{opacity:.5}
/* balíčky a karty: stejný princip */
.pack,.card{transition:transform .32s var(--ease),border-color .32s}
.pack::after,.card::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;box-shadow:var(--sh-md);opacity:0;transition:opacity .32s var(--ease);pointer-events:none}
.pack.hi::after{box-shadow:0 24px 48px -18px rgba(225,50,53,.35)}
.pack:hover,.card:hover,.pack.hi:hover{box-shadow:none}
.pack.hi{box-shadow:0 14px 34px rgba(225,50,53,.12)}
.pack:hover::after,.card:hover::after{opacity:1}
/* katalog a fotky: jen nadzvednutí, stín se při najetí nemění */
.kat-item{transition:transform .32s var(--ease),border-color .32s}
.kat-item:hover{box-shadow:none}
.shop-item:hover .ph,.seg:hover img,.steps.photos li:hover img{box-shadow:none}
.seg img{transition:filter .3s}
.steps.photos img{transition:transform .5s var(--ease)}
/* seznam technologií: posun obsahu přes transform, ne přes odsazení */
.tech li,.tech li:hover{padding-left:0;transition:none}
.tech li > *{transition:transform .3s var(--ease)}
.tech li:hover > *{transform:translateX(8px)}
@media (prefers-reduced-motion:reduce){
  .btn::before,.pack::after,.card::after,.tech li > *{transition:none}
  .tech li:hover > *{transform:none}
}
/* fotky: místo filtru (drahé překreslení velké fotky) jen jemné přiblížení */
.story-photos img,.bento img{filter:none;transition:transform .6s var(--ease)}
.seg img,.seg:hover img{filter:none}
.story-photos figure:hover img,.bento figure:hover img{transform:scale(1.03)}
.story-photos figure,.bento figure{overflow:hidden}
@media (prefers-reduced-motion:reduce){.story-photos img,.bento img{transition:none}.story-photos figure:hover img,.bento figure:hover img{transform:none}}
/* pilulka byla přecpaná: telefon z ní pryč (je v úvodu, na kontaktu, v patičce i na mobilní liště), víc vzduchu */
@media (min-width:1181px){
  .top.scrolled .top-phone{display:none}
  .top.scrolled .wrap{column-gap:28px;padding:0 10px 0 26px}
  .top.scrolled .nav{gap:22px}
  .top.scrolled .logo{width:156px}
}

/* ===== Barevná verze úvodu (27. 9. 2026): prodávají fotky a barvy, ne ozdoby.
   Vzor: starý web barevnystyl.cz (dlaždice, zeď zakázek, pás fólií). Struktura a písmo zůstávají klidné. ===== */
:root{--green:#1E7A3C;--pink:#C2266B}

/* hero: mozaika skutečných zakázek místo kreslené karty */
.hero-photos .hero-stage{padding-top:40px;padding-bottom:56px}
.hero-mosaic{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1.35fr) minmax(0,1fr);gap:12px;width:100%;height:min(640px,calc(100svh - var(--head-h) - 110px));min-height:460px}
.hero-mosaic figure{position:relative;overflow:hidden;border-radius:18px;background:var(--plane)}
.hero-mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-mosaic .hm-a{grid-column:1/3}
.hero-photos .hb-1{left:-24px;bottom:auto;top:calc(57% - 44px)}
@media (max-width:1024px){
  .hero-mosaic{height:auto;min-height:0;grid-template-rows:260px 170px}
  .hero-photos .hb-1{left:12px;top:auto;bottom:182px}
}
@media (max-width:640px){
  .hero-mosaic{gap:8px;grid-template-rows:200px 118px}
  .hero-mosaic figure{border-radius:12px}
  .hero-photos .hb-1{bottom:136px;padding:9px 13px}
  .hero-photos .hb-1 b{font-size:24px}
}

/* dlaždice služeb: fotka a barevný popisek */
.svcs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.svc{position:relative;isolation:isolate;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;text-decoration:none;transition:transform .32s var(--ease)}
.svc::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:var(--sh-md);opacity:0;transition:opacity .32s var(--ease);pointer-events:none}
.svc:hover{transform:translateY(-4px)}
.svc:hover::after{opacity:1}
.svc img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#fff}
.svc-t{flex:1;display:block;padding:18px 20px 22px;font-size:15px;line-height:1.4}
.svc-t b{display:block;font-family:var(--display);font-weight:800;font-size:28px;line-height:1.05;margin-bottom:6px}
.t-red .svc-t{background:var(--red);color:#fff}
.t-yellow .svc-t{background:var(--yellow);color:var(--ink)}
.t-sky .svc-t{background:var(--sky);color:var(--ink)}
.t-blue .svc-t{background:var(--blue);color:#fff}
.svcs-note{margin-top:24px}
@media (max-width:1024px){.svcs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .svcs{gap:12px}
  .svc{border-radius:14px}
  .svc img{aspect-ratio:1/1}
  .svc-t{padding:12px 12px 14px;font-size:13px}
  .svc-t b{font-size:21px}
}

/* zeď zakázek přes celou šířku */
.wall-sec .head-row{margin-bottom:20px}
.for-chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 32px;padding:0}
.for-chips a{display:inline-block;padding:10px 18px;border-radius:999px;font-weight:600;font-size:16px;line-height:1.2;text-decoration:none;color:#fff;transition:transform .25s var(--ease)}
.for-chips a:hover{transform:translateY(-2px);color:#fff}
.for-chips .c-blue{background:var(--blue)}
.for-chips .c-green{background:var(--green)}
.for-chips .c-red{background:var(--red)}
.for-chips .c-pink{background:var(--pink)}
.for-chips .c-sky{background:var(--sky);color:var(--ink)}
.for-chips .c-orange{background:var(--orange);color:var(--ink)}
.for-chips .c-sky:hover,.for-chips .c-orange:hover{color:var(--ink)}
.wall{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.wall figure{position:relative;overflow:hidden;aspect-ratio:1/1;background:var(--plane)}
.wall img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.wall figcaption{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);background:rgba(15,39,72,.85);color:#fff;font-size:13px;line-height:1.3;font-weight:500;padding:5px 9px;border-radius:6px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--ease)}
.wall figure:hover img{transform:scale(1.04)}
.wall figure:hover figcaption{opacity:1;transform:none}
.wall-more{display:flex;justify-content:center;margin-top:36px}
@media (max-width:1024px){.wall{grid-template-columns:repeat(4,minmax(0,1fr))}.wall figure:nth-child(n+17){display:none}}
@media (max-width:640px){
  .wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
  .wall figure:nth-child(n+13){display:none}
  .for-chips{gap:8px;margin-bottom:24px}
  .for-chips a{padding:8px 14px;font-size:15px}
}

/* fólie s efektem */
.fx-sec{background:var(--plane)}
.fx-sec .lead{margin:0}
.fx{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.fx figure{border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.fx img{width:100%;aspect-ratio:1/1;object-fit:cover}
.fx figcaption{flex:1;padding:14px 16px 16px;font-size:14px;line-height:1.35}
.fx figcaption b{display:block;font-family:var(--display);font-weight:800;font-size:24px;line-height:1.05;margin-bottom:4px}
.fx-orange figcaption{background:var(--orange);color:var(--ink)}
.fx-pink figcaption{background:var(--pink);color:#fff}
.fx-red figcaption{background:var(--red);color:#fff}
.fx-yellow figcaption{background:var(--yellow);color:var(--ink)}
.fx-ink figcaption{background:var(--ink);color:#fff}
@media (max-width:1024px){.fx{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.fx{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.fx figure{border-radius:14px}.fx figcaption b{font-size:21px}.fx figure:last-child{grid-column:1/-1}.fx figure:last-child img{aspect-ratio:2/1}}

/* konfigurátor: vlastní blok s živou ukázkou */
.konf-feature .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}
.konf-feature h2{font-size:clamp(40px,4vw,60px);margin-bottom:20px}
.konf-feature .lead{margin-bottom:28px}
.konf-feature .hero-card{justify-self:end}
@media (max-width:1024px){.konf-feature .wrap{grid-template-columns:1fr;gap:36px}.konf-feature .hero-card{justify-self:center}}
@media (max-width:640px){.konf-feature .hero-card #konf-mini,.konf-feature .hero-card .konf-mini{min-height:440px}}

/* dárky */
.gifts h2{font-size:clamp(40px,4vw,60px);margin-bottom:20px}
.gifts .grav-list{margin:24px 0 32px}
.gift-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gift-photos figure{border-radius:18px;overflow:hidden;background:var(--plane)}
.gift-photos img{width:100%;aspect-ratio:1/1;object-fit:cover}

/* ===== Menu na mobilu a tabletu (27. 9. 2026): panel přes celou obrazovku místo pruhu, pod kterým prosvítala stránka ===== */
.nav-foot{display:none}
@media (max-width:1180px){
  .menu-open,.menu-open body{overflow:hidden}
  .top.open .nav{position:fixed;left:0;right:0;top:var(--menu-top,72px);bottom:0;z-index:45;margin:0;padding:8px var(--gutter) calc(28px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .nav > a,.nav-toggle{position:relative;font:800 30px/1.1 var(--display);letter-spacing:.005em;padding:22px 0 22px 22px;color:var(--ink)}
  .nav > a::before,.nav-toggle::before{content:"";position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--c,var(--red))}
  .nav > a::after{display:none}
  .nav-item > .nav-toggle{--c:var(--red)}
  .nav > a:nth-of-type(1){--c:var(--orange)}
  .nav > a:nth-of-type(2){--c:var(--yellow)}
  .nav > a:nth-of-type(3){--c:var(--sky)}
  .nav > a:nth-of-type(4){--c:var(--blue)}
  .nav > a:nth-of-type(5){--c:var(--green)}
  .nav > a:nth-of-type(6){--c:var(--pink)}
  .nav-toggle::after{width:10px;height:10px}
  .sub{padding:0 0 12px 22px}
  .sub-head{display:block;font:600 13px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:14px 12px 4px}
  .sub a b{font-size:17px}
  .nav-foot{display:flex;flex-direction:column;gap:10px;margin-top:28px}
  .top .nav-foot .btn{display:inline-flex;width:100%;justify-content:center;min-height:52px;padding:0 20px;font-size:17px}
  /* overflow:hidden na stránce ruší sticky, hlavička proto při otevřeném menu drží pevně nahoře */
  .menu-open .top{position:fixed;left:0;right:0;top:0}
  .nav-foot-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .nav-foot p{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--muted);text-align:center}
  .menu-open .bar{transform:translateY(110%)}
  @media (prefers-reduced-motion:no-preference){
    .top.open .nav{animation:menu-in .28s var(--ease) both}
    .top.open .nav > *{animation:hero-up .45s var(--ease) both}
    .top.open .nav > :nth-child(2){animation-delay:.03s}
    .top.open .nav > :nth-child(3){animation-delay:.06s}
    .top.open .nav > :nth-child(4){animation-delay:.09s}
    .top.open .nav > :nth-child(5){animation-delay:.12s}
    .top.open .nav > :nth-child(6){animation-delay:.15s}
    .top.open .nav > :nth-child(7){animation-delay:.18s}
    .top.open .nav > :nth-child(8){animation-delay:.21s}
  }
}
@keyframes menu-in{from{opacity:0}to{opacity:1}}
@media (max-width:640px){
  .nav > a,.nav-toggle{font-size:28px;padding:20px 0 20px 22px}
}

/* ===== Patička srovnaná (27. 9. 2026) =====
   Všechny sloupce mají stejný rytmus řádků (24 px text + 6 px mezera), nadpisy sloupců
   začínají na stejné lince jako logo a text pod logem se láme do úhledného bloku. */
.foot{align-items:start}
.foot li,.foot p{line-height:24px;margin:0 0 6px}
.foot b{line-height:24px;margin-bottom:12px}
.foot .logo{margin-top:0;margin-bottom:20px}
.foot > div:first-child p{max-width:34ch;color:rgba(255,255,255,.72)}
.foot-dilna li{color:rgba(255,255,255,.72)}
.foot-dilna li:has(a){color:#fff}
.foot-dilna li:nth-child(5){margin-top:14px}
.foot-links{gap:10px 28px}
.copy{align-items:center}

/* ===== Dlaždice služeb: výraznější najetí (27. 9. 2026) =====
   Karta se zvedne, fotka se pomalu přiblíží a k nadpisu vyjede šipka. Jen transform a opacity. */
.svc{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.svc::after{transition:opacity .6s cubic-bezier(.22,1,.36,1)}
.svc img{transition:transform .9s cubic-bezier(.22,1,.36,1)}
.svc-t{position:relative;z-index:1}
.svc-t b::after{content:"\2192";display:inline-block;margin-left:.35em;opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .5s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){
  .svc:hover{transform:translateY(-10px)}
  .svc:hover img{transform:scale(1.07)}
  .svc:hover .svc-t b::after{opacity:1;transform:none}
}
.svc:active{transform:translateY(-4px) scale(.99);transition-duration:.15s}

/* ===== Prohlížeč fotek zakázek (27. 9. 2026, site.js lightbox) ===== */
.wall figure,.gal figure[data-item]{cursor:zoom-in}
.wall figure:focus-visible,.gal figure[data-item]:focus-visible{outline:3px solid var(--red);outline-offset:2px}
html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:24px;background:rgba(10,24,45,.94);opacity:0;transition:opacity .25s}
.lb.is-on{opacity:1}
.lb[hidden]{display:none}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:0}
.lb-img{max-width:100%;max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);object-fit:contain;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.45);transform:scale(.97);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.lb.is-on .lb-img{transform:none}
.lb-cap{display:flex;gap:16px;justify-content:space-between;align-items:baseline;width:min(100%,900px);margin-top:14px;color:#fff;font-size:15px}
.lb-num{color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-nav,.lb-close{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;transition:background .2s,transform .2s}
.lb-nav:hover,.lb-close:hover{background:rgba(255,255,255,.24)}
.lb-nav:active,.lb-close:active{transform:scale(.94)}
.lb-nav[hidden]{visibility:hidden;display:grid}
.lb svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lb-close{position:absolute;top:16px;right:16px}
.lb :focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
@keyframes lb-from-r{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes lb-from-l{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
.lb-img.lb-in-r{animation:lb-from-r .4s cubic-bezier(.22,1,.36,1)}
.lb-img.lb-in-l{animation:lb-from-l .4s cubic-bezier(.22,1,.36,1)}
@media (max-width:640px){
  .lb{grid-template-columns:1fr;padding:64px 10px 16px}
  .lb-nav{position:absolute;bottom:16px;width:48px;height:48px}
  .lb-prev{left:16px}.lb-next{right:16px}
  .lb-img{max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px)}
  .lb-cap{padding:0 64px;flex-direction:column;align-items:center;gap:4px;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .svc,.svc img,.svc-t b::after,.lb,.lb-img{transition:none}
  .svc:hover,.svc:hover img{transform:none}
  .lb-img.lb-in-r,.lb-img.lb-in-l{animation:none}
}

/* ===== Vzdušnost (27. 9. 2026, audit „nic nesmí být namačkané“) =====
   Změřeno na všech 21 stránkách ve třech šířkách: víceřádkové podnadpisy měly řádkování 1,
   popisek pod nadpisem sekce ležel přímo na něm a v kartách byl název nalepený na podtitulek. */
h3{line-height:1.12}
.svc-t b,.fx figcaption b{line-height:1.1}
.svc-t b{margin-bottom:8px}
.fx figcaption b{margin-bottom:6px}
.tile p{line-height:1.08}
.head-row .sec-head + p,.head-row .sec-head + .lead{margin-top:12px}
.prod-t p{margin-top:7px}
/* loga zákazníků ležela hned pod recenzemi, řádek s cenou se tlačil na název */
.reviews + .logos{margin-top:44px}
.grav-list{column-gap:36px}
.grav-list li{gap:18px;align-items:baseline;padding:11px 0}
.grav-list li span{text-align:right}
.clients{margin-top:32px}

/* spodní odkazy patičky a řádek s copyrightem na střed (27. 9. 2026) */
.foot-links{justify-content:center}
.copy{justify-content:center;text-align:center;column-gap:28px}

/* ===== Vyšperkování (28. 9. 2026) =====
   Deset efektů z rešerše: fólie předvedou materiál, plynulé přechody mezi stránkami, běžící pruh,
   duhový rámeček konfigurátoru, zakázky vyjíždějí při posouvání, skleněná karta v hero,
   magnetická tlačítka, zvýrazňovač, zrno na plných plochách a naklonění dlaždic služeb.
   Všechno jen transform a opacity, při „omezit pohyb“ se nic nehýbe. */

/* 2) plynulé přechody mezi stránkami (Chrome, Edge, Safari 18.2+, ostatní prostě přejdou) */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
.top{view-transition-name:top}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(ph-img),::view-transition-new(ph-img){height:100%;object-fit:cover;overflow:clip}
.page-head figure img{view-transition-name:ph-img}
/* když fotka přiletí z dlaždice, nesmí se ještě jednou zatmívat */
.vt-in .page-head figure{animation:none}

/* 1) fólie předvedou svůj materiál */
.fx-img{position:relative;display:block;overflow:hidden;isolation:isolate}
.fx-img img{display:block;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.fx-img::before,.fx-img::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0}
/* metalický: přes fotku přejede lesklý pruh */
.fx-yellow .fx-img::after{opacity:1;inset:-10% -60%;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.15) 44%,rgba(255,250,220,.75) 50%,rgba(255,255,255,.15) 56%,transparent 62%);transform:translateX(-70%)}
/* glitter: třpytky, které se rozblikají */
.fx-pink .fx-img::after{background:
  radial-gradient(circle at 18% 22%,#fff 0 1.5px,transparent 2.5px),
  radial-gradient(circle at 72% 30%,#fff 0 2px,transparent 3px),
  radial-gradient(circle at 44% 64%,#fff 0 1.5px,transparent 2.5px),
  radial-gradient(circle at 82% 76%,#fff 0 2px,transparent 3px),
  radial-gradient(circle at 28% 84%,#fff 0 1.5px,transparent 2.5px),
  radial-gradient(circle at 58% 12%,#fff 0 1.5px,transparent 2.5px);
  filter:drop-shadow(0 0 3px rgba(255,255,255,.9))}
.fx-pink .fx-img::before{background:
  radial-gradient(circle at 34% 40%,#fff 0 1.5px,transparent 2.5px),
  radial-gradient(circle at 64% 52%,#fff 0 2px,transparent 3px),
  radial-gradient(circle at 12% 60%,#fff 0 1.5px,transparent 2.5px),
  radial-gradient(circle at 88% 44%,#fff 0 1.5px,transparent 2.5px),
  radial-gradient(circle at 50% 90%,#fff 0 2px,transparent 3px);
  filter:drop-shadow(0 0 3px rgba(255,255,255,.9));z-index:1}
/* flock: sametové zrno */
.fx-red .fx-img::after{background-image:var(--noise);background-size:180px;mix-blend-mode:overlay}
/* reflexní: záblesk jako od světla auta */
.fx-ink .fx-img::after{background:radial-gradient(60% 60% at 50% 45%,rgba(255,255,255,.95),rgba(255,255,255,.35) 45%,transparent 75%);mix-blend-mode:screen}

@media (prefers-reduced-motion:no-preference){
  .fx-orange:is(:hover,.fx-go) img{animation:fx-puff .9s cubic-bezier(.34,1.56,.64,1) both}
  .fx-pink:is(:hover,.fx-go) .fx-img::after{animation:fx-twinkle 1.1s ease-in-out 2}
  .fx-pink:is(:hover,.fx-go) .fx-img::before{animation:fx-twinkle 1.1s .35s ease-in-out 2}
  .fx-red:is(:hover,.fx-go) .fx-img::after{animation:fx-velvet 1.4s ease-out both}
  .fx-red:is(:hover,.fx-go) img{transform:scale(1.04)}
  .fx-yellow:is(:hover,.fx-go) .fx-img::after{animation:fx-sheen 1.1s cubic-bezier(.4,0,.2,1)}
  .fx-yellow:is(:hover,.fx-go) img{transform:scale(1.03)}
  .fx-ink:is(:hover,.fx-go) .fx-img::after{animation:fx-flash .9s ease-out}
}
@keyframes fx-puff{0%{transform:scale(1)}45%{transform:scale(1.1)}70%{transform:scale(1.06)}100%{transform:scale(1.07)}}
@keyframes fx-twinkle{0%,100%{opacity:0;transform:scale(.96)}50%{opacity:1;transform:scale(1)}}
@keyframes fx-velvet{from{opacity:0}to{opacity:.55}}
@keyframes fx-sheen{from{transform:translateX(-70%)}to{transform:translateX(70%)}}
@keyframes fx-flash{0%{opacity:0}12%{opacity:1}30%{opacity:.25}42%{opacity:.8}100%{opacity:0}}

/* 3) běžící pruh pod hero */
.marquee{overflow:hidden;background:var(--navy);padding:20px 0;display:flex}
.marquee-track{list-style:none;display:flex;flex:none;margin:0;padding:0;gap:0}
.marquee li{display:flex;align-items:center;white-space:nowrap;font:800 clamp(28px,3vw,40px)/1 var(--display);letter-spacing:.01em;text-transform:uppercase}
.marquee li::after{content:"";width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.35);margin:0 clamp(20px,2.4vw,34px)}
.marquee .m-red{color:#FF6B6E}
.marquee .m-orange{color:var(--orange)}
.marquee .m-yellow{color:var(--yellow)}
.marquee .m-sky{color:var(--sky)}
@media (prefers-reduced-motion:no-preference){
  .marquee-track{animation:marquee 38s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
}
@keyframes marquee{to{transform:translateX(-25%)}}
@media (max-width:640px){.marquee{padding:14px 0}}

/* 4) duhový rámeček kolem konfigurátoru */
@property --ring{syntax:"<angle>";inherits:false;initial-value:0deg}
.konf-feature .hero-card::before{left:-3px;right:-3px;top:-3px;bottom:-3px;height:auto;z-index:0;border-radius:27px;padding:3px;
  background:conic-gradient(from var(--ring),var(--red),var(--orange),var(--yellow),var(--sky),var(--blue),var(--red));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media (prefers-reduced-motion:no-preference){
  .konf-feature .hero-card::before{animation:ring 7s linear infinite;animation-play-state:paused}
  .konf-feature .hero-card.is-vis::before{animation-play-state:running}
}
@keyframes ring{to{--ring:360deg}}

/* 5) zakázky ve zdi vyjíždějí při posouvání (výpočet mimo hlavní vlákno) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .wall figure{animation:wall-in linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
    .wall figure:nth-child(even){animation-range:entry 10% entry 90%}
  }
}
@keyframes wall-in{from{opacity:0;transform:translateY(40px) scale(.92)}to{opacity:1;transform:none}}

/* 6) skleněná karta přes mozaiku (jen na počítači, na menších šířkách zůstává štítek s cenou) */
.hero-glass{position:absolute;z-index:3;left:-32px;top:calc(57% - 40px);display:flex;flex-direction:column;gap:16px;width:300px;padding:20px 22px 22px;border-radius:20px;
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.75);box-shadow:0 30px 60px -28px rgba(15,39,72,.55);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);color:var(--ink)}
.hero-glass ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.hero-glass li{position:relative;padding-left:26px;font-size:15px;line-height:1.35;font-weight:500}
.hero-glass li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.hero-glass li b{font-family:var(--display);font-weight:800;font-size:22px;line-height:1;color:var(--red)}
.hero-glass .btn{min-height:48px;width:100%}
.hero-photos .hb-1{display:none}
@media (prefers-reduced-motion:no-preference){.hero-glass{animation:hero-up .8s .8s var(--ease) both}}
@media (max-width:1024px){
  .hero-glass{display:none}
  .hero-photos .hb-1{display:flex}
}

/* 7) magnetická tlačítka: posun počítá site.js, vlastnost translate se skládá s transform při najetí */
.btn-mag{translate:var(--mx,0) var(--my,0);transition:background .2s,color .2s,border-color .2s,transform .28s var(--ease),translate .35s cubic-bezier(.22,1,.36,1)}
.btn-mag.is-pulled{transition:background .2s,color .2s,border-color .2s,transform .28s var(--ease),translate .12s linear}

/* 8) zvýrazňovač pod „Od 1 kusu“ */
.hero-text h1 em{position:relative;z-index:0;font-style:normal}
.hero-text h1 em::after{content:"";position:absolute;z-index:-1;left:-.06em;right:.22em;bottom:.04em;height:.32em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 9c30-5 70-7 110-6s62 2 84 4c3 1 3 7-1 8-40 2-80 1-120 2S20 18 5 16c-4-1-5-6-2-7z' fill='%23FFD113'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  transform-origin:left center}
@media (prefers-reduced-motion:no-preference){
  .hero-text h1 em::after{transform:scaleX(0);animation:marker .75s 1.05s cubic-bezier(.65,0,.25,1) forwards}
}
@keyframes marker{to{transform:none}}

/* 9) jemné zrno na tmavomodrém bloku o dílně a na červené výzvě */
.story-text{position:relative;isolation:isolate}
.story-text::before,.cta .wrap.cta-grid::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--noise);background-size:240px;border-radius:inherit}
.story-text::before{opacity:.16;mix-blend-mode:soft-light}
.cta .wrap.cta-grid{position:relative;isolation:isolate}
.cta .wrap.cta-grid::before{opacity:.2;mix-blend-mode:multiply}

/* 10) naklonění dlaždic služeb s odleskem (jen myš, úhel počítá site.js) */
.svc::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.34),transparent 55%)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .svc:hover{transform:perspective(900px) translateY(-10px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
  .svc.is-tilt{transition-duration:.25s}
  .svc:hover::before{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .btn-mag{translate:none}
  .fx-img img{transition:none}
}

/* ===== Audit 28. 9. 2026 (kompatibilita) =====
   Na dotyku se hover „přilepí“ po klepnutí a iOS může kvůli odhalovanému popisku chtít dvojí klepnutí:
   efekty zdi zakázek a zastavení pruhu jen pro myš. Duhový rámeček bez @property zůstane stát. */
@media (hover:none){
  .wall figure:hover img{transform:none}
  .wall figure:hover figcaption{opacity:0;transform:translateY(6px)}
  .marquee:hover .marquee-track{animation-play-state:running}
}
.konf-feature .hero-card::before{--ring:0deg}
/* audit 28. 9. (mobil): katalog po jednom sloupci na úzkých telefonech, tabulka jde otevřít ve větší velikosti,
   dotykové cíle aspoň 44 px (padding se záporným okrajem nemění rozvržení) */
.kat-zoom{display:block;cursor:zoom-in;text-decoration:none;color:var(--red-dark);font-size:14px;font-weight:600}
.kat-zoom span{display:inline-block;margin-top:6px;text-decoration:underline;text-underline-offset:3px}
@media (max-width:480px){.kat{grid-template-columns:minmax(0,1fr)}}
@media (pointer:coarse){
  .kat-more summary{min-height:44px}
  .foot a,.foot-links a,.copy a,.crumbs a,.more,.kat-cta,.table th a,.sluzby h3 a{display:inline-block;padding-top:11px;padding-bottom:11px;margin-top:-11px;margin-bottom:-11px}
  .for-chips a{padding-top:13px;padding-bottom:13px}
}
/* audit 28. 9. (mobil B): místo pro spodní lištu nese patička, ne body (jinak pod ní zůstal bílý pruh,
   když se lišta u patičky schová). Na telefonu naležato je lišta rychlého kontaktu taky. */
@media (max-width:640px){
  body{padding-bottom:0}
  footer::after{content:"";display:block;height:calc(var(--bar-h) + env(safe-area-inset-bottom,0px))}
}
@media (min-width:641px) and (max-width:1180px) and (max-height:500px) and (orientation:landscape){
  .bar{display:grid;grid-template-columns:1fr 1.2fr 1.1fr;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--ink);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));gap:6px;border-top:1px solid rgba(255,255,255,.12)}
  .bar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:6px;color:#fff;text-decoration:none;font-weight:600;font-size:15px;background:rgba(255,255,255,.08)}
  .bar a.primary{background:var(--red)}
  .bar svg{width:18px;height:18px;flex:none}
  footer::after{content:"";display:block;height:58px}
}
.form > .form-err{margin:0 0 18px}
@media (pointer:coarse){.small,.info-block p a{display:inline-block;padding-top:11px;padding-bottom:11px;margin-top:-11px;margin-bottom:-11px}}
/* audit 28. 9. (tablet a počítač) */
/* nadpis úvodu se nesmí zalamovat, proto písmo roste jen tak, aby se řádek vešel do sloupce */
.hero-text h1{font-size:clamp(46px,4.6vw,74px)}
/* třída .hm-b patřila dřív značkám tiskové plochy (bottom:14px) a posouvala fotku mozaiky */
.hero-mosaic .hm-b{bottom:auto}
/* skleněná karta až od 1181 px, do té doby je mozaika na kartu moc úzká */
@media (max-width:1180px){.hero-glass{display:none}.hero-photos .hb-1{display:flex}}
@media (max-width:1024px){.hero{min-height:0}}
/* hlavička po posunutí: odsazení pilulky přes padding, okraj by propadl rodičem */
@media (min-width:1181px){.top.scrolled{padding-top:10px}.top.scrolled .wrap{margin-top:0}}
/* tablet: fotky vedle textu nesmí být vyšší než obrazovka, tři kroky vedle sebe, fólie bez sirotků */
@media (min-width:641px) and (max-width:1024px){
  .photo img{aspect-ratio:16/10}
  .svc img{aspect-ratio:4/3}
  .steps.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fx{grid-template-columns:repeat(6,minmax(0,1fr))}
  .fx figure{grid-column:span 2}
  .fx figure:nth-child(4){grid-column:2/span 2}
}
.gal figcaption{overflow-wrap:anywhere}

/* ===== Lubošův návrh 30. 9. 2026: červená lišta, modré plochy, pohyblivé pásy, plakátové karty =====
   Vrstva přebíjí „Klidnou verzi“ i „Barevnou verzi úvodu“. Zadání: WEB_uprava_30_9.pdf od klienta. */
:root{--head-h:76px}
/* hlavička: červená lišta, bílé menu, vpravo visící modrá záložka Navrhnout tričko */
.top.top-red,.top.top-red.scrolled{background:var(--red);box-shadow:0 2px 0 rgba(0,0,0,.06)}
.top.top-red .wrap,.top.top-red.scrolled .wrap{max-width:none;margin:0;padding:0 190px 0 max(var(--gutter),calc((100% - 1320px)/2));min-height:var(--head-h);background:none;border:0;border-radius:0;box-shadow:none;column-gap:28px;flex-wrap:nowrap}
.top.top-red .logo,.top.top-red.scrolled .logo{width:168px;background:#fff;border-radius:999px;padding:5px 12px;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.top.top-red .nav{gap:24px;margin-left:auto;margin-right:auto}
.top.top-red .nav > a,.top.top-red .nav-toggle{color:#fff;font:700 16px/1.2 var(--body)}
.top.top-red .nav > a::after{background:#fff}
.top.top-red .nav > a:hover,.top.top-red .nav-toggle:hover{color:#fff}
.top.top-red .nav-toggle::after{border-color:#fff}
.top.top-red .top-phone{display:none}
.top-tab{position:absolute;right:0;top:0;min-width:170px;height:calc(var(--head-h) + 14px);display:flex;align-items:center;justify-content:center;text-align:center;background:var(--navy);color:#fff;text-decoration:none;font:800 24px/1 var(--display);letter-spacing:.02em;text-transform:uppercase;padding:0 22px;border-bottom-left-radius:28px;box-shadow:0 8px 20px -8px rgba(15,39,72,.6);transition:background .2s,height .25s var(--ease)}
.top-tab:hover,.top-tab:focus-visible{background:var(--navy-deep);color:#fff;height:calc(var(--head-h) + 20px)}
.top.top-red :focus-visible{outline-color:var(--yellow)}
.top.top-red .menu-btn{background:#fff;border-color:#fff}
@media (max-width:1180px){
  .top.top-red .wrap{padding:0 var(--gutter)}
  .top-tab{display:none}
  .top.top-red .logo{width:150px}
  .top.top-red .nav > a,.top.top-red .nav-toggle{color:var(--ink);font:800 30px/1.1 var(--display)}
}
/* upozornění na dovolenou (zapíná se v administraci) */
.vac{background:var(--yellow);color:var(--ink);font-weight:600;font-size:15px;line-height:1.4;text-align:center;padding:10px var(--gutter)}
.vac b{font-weight:800}

/* hero: bílé, vlevo text, vpravo trička s kruhem do konfigurátoru */
.lhero{background:#fff;padding:56px 0 48px;min-height:0}
.lhero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 56px;align-items:center}
.lhero h1{font-size:clamp(46px,5.4vw,78px);line-height:1.02;color:var(--ink)}
.lhero-sub{display:block;margin-top:10px;font-size:clamp(30px,3.2vw,46px);color:var(--ink)}
.lhero-sub em{font-style:normal;color:var(--red);background:linear-gradient(transparent 78%,var(--yellow) 78%,var(--yellow) 92%,transparent 92%);padding:0 2px}
.lhero-small{font-size:15px;font-weight:600;color:var(--ink);margin:14px 0 18px}
.lhero .lead{margin-bottom:28px}
.lhero .btns .btn{min-height:50px}
.lhero-art{position:relative}
.lhero-art img{width:100%;max-width:640px;margin-left:auto;filter:drop-shadow(0 26px 30px rgba(15,39,72,.22))}
.konf-ring{position:absolute;left:18%;top:36%;width:clamp(110px,11vw,150px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;color:#fff;text-decoration:none;font:800 clamp(20px,1.9vw,26px)/1 var(--display);letter-spacing:.01em;background:rgba(15,39,72,.28);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);transition:transform .3s var(--ease),background .3s}
.konf-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.konf-ring circle{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-dasharray:340;stroke-dashoffset:0}
.konf-ring span{position:relative}
.konf-ring:hover{transform:scale(1.06);background:rgba(219,47,50,.85);color:#fff}
@media (prefers-reduced-motion:no-preference){
  .konf-ring circle{animation:ring-draw 1.6s .5s var(--ease) both}
  .konf-ring span{animation:ring-text .6s 1.6s both}
}
@keyframes ring-draw{from{stroke-dashoffset:340}to{stroke-dashoffset:0}}
@keyframes ring-text{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@media (max-width:900px){.lhero-grid{grid-template-columns:1fr}.lhero-art img{margin:0 auto;max-width:520px}.konf-ring{left:14%}}
@media (max-width:640px){.lhero{padding:32px 0}.lhero .btns{flex-direction:column;align-items:stretch}}

/* pohyblivé pásy: loga zákazníků (modrá) a výhody (modrá s ikonami) */
.logo-strip,.perk-strip{overflow:hidden;display:flex;background:var(--navy);padding:22px 0}
.logo-track,.perk-track{display:flex;flex:none;align-items:center;gap:0;margin:0;padding:0}
.logo-track li{flex:none;padding:0 clamp(24px,3vw,44px)}
.logo-track img{height:clamp(40px,4.4vw,62px);width:auto;max-width:220px;object-fit:contain}
.perk-strip{background:var(--blue);padding:18px 0}
.perk-track li{flex:none;display:flex;align-items:center;gap:12px;color:#fff;font:800 clamp(20px,2vw,26px)/1 var(--display);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;padding:0 clamp(28px,3.4vw,52px)}
.perk-track svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media (prefers-reduced-motion:no-preference){
  .is-moving .logo-track,.is-moving .perk-track{animation:marquee var(--dur,40s) linear infinite}
}

/* plakátové karty na červené ploše (Trička na různé akce, školy, firmy) */
.poster-sec{background:var(--red);color:#fff;padding:72px 0;position:relative;isolation:isolate}
.poster-sec::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--noise);background-size:240px;opacity:.14;mix-blend-mode:multiply;pointer-events:none}
.poster-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,9fr);gap:40px;align-items:center}
.poster-intro h2{color:#fff;font-size:clamp(40px,4.4vw,60px);text-transform:uppercase;margin-bottom:14px}
.poster-intro p{font:800 clamp(22px,2vw,28px)/1.15 var(--display);text-transform:uppercase;letter-spacing:.01em;margin-bottom:24px}
.poster-intro .btns{flex-direction:column;align-items:flex-start}
.btn-ink{background:var(--navy);border-color:var(--navy);color:#fff}
.poster-sec .btn-ink:hover{background:#fff;border-color:#fff;color:var(--navy)}
.posters{display:grid;gap:22px}
.posters.p3{grid-template-columns:repeat(3,minmax(0,1fr))}
.posters.p4{grid-template-columns:repeat(4,minmax(0,1fr))}
.poster{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:14px 14px 20px;border:2px solid rgba(255,255,255,.85);border-radius:6px;color:#fff;text-decoration:none;background:rgba(0,0,0,.08);transition:transform .3s var(--ease),background .3s}
.poster:hover{transform:translateY(-6px);background:rgba(0,0,0,.16);color:#fff}
.poster-img{display:block;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:#fff}
.poster-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.poster:hover .poster-img img{transform:scale(1.04)}
.poster b{font:800 clamp(22px,1.8vw,26px)/1.05 var(--display);text-transform:uppercase;letter-spacing:.01em;margin-top:4px}
.poster > span:not(.poster-img):not(.poster-btn){font-size:14px;line-height:1.45;opacity:.95}
.poster-btn{margin-top:auto;display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:4px;background:var(--navy);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.03em}
.poster:hover .poster-btn{background:#fff;color:var(--navy)}
@media (max-width:1024px){.poster-grid{grid-template-columns:1fr}.poster-intro .btns{flex-direction:row}.posters.p4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.posters.p3,.posters.p4{grid-template-columns:1fr 1fr;gap:12px}.poster{padding:10px 10px 14px}.poster > span:not(.poster-img):not(.poster-btn){display:none}}

/* ceník od 1 kusu: karty výrobků jako v e-shopu */
.shop-sec{padding:80px 0}
.shop-head{text-align:center;font-size:clamp(34px,3.6vw,50px);text-transform:uppercase;margin-bottom:34px}
.shop-head span{display:block;font-size:.55em;color:var(--red);margin-top:8px}
.shop-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.shop-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 16px 18px;box-shadow:var(--sh-sm);transition:transform .3s var(--ease),box-shadow .3s}
.shop-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
.shop-badge{position:absolute;left:12px;top:12px;background:var(--red);color:#fff;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px}
.shop-ph{width:100%;aspect-ratio:1;display:grid;place-items:center;padding:10px}
.shop-ph img{max-height:100%;width:auto;object-fit:contain}
.shop-card h3{font-size:24px;margin:8px 0 4px}
.shop-price{margin:0 0 10px;font-size:15px}
.shop-price b{font:800 30px/1 var(--display);color:var(--red-dark)}
.shop-dots{display:flex;gap:6px;justify-content:center;margin:0 0 16px}
.shop-dots i{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.2)}
.shop-dots i.more-c{background:conic-gradient(#e13235,#ffd113,#42b4e8,#306eb5,#e13235)}
.shop-card .btn{width:100%;margin-top:auto}
.shop-more{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;margin:34px 0 0}
@media (max-width:1024px){.shop-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.shop-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 calc(-1 * var(--gutter));padding:4px var(--gutter) 16px}.shop-card{flex:0 0 76%;scroll-snap-align:center}}

/* technologie: panel s textem a fotkou (záložky jsou ve vrstvě „Technologie jako záložky“) */
.tech-sec{padding:80px 0;background:var(--paper)}
.tech-panels{background:#fff;border-radius:18px;box-shadow:var(--sh-md);padding:clamp(22px,3vw,36px)}
.tp{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:center}
.tp[hidden]{display:none}
.tp h3{color:var(--red);text-transform:uppercase;margin-bottom:12px}
.tp p,.tp li{font-size:16px}
.tp .btn{margin-top:6px}
.tp figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px}
.tp figure img[src$=".png"],.tp figure img[src*="p138"]{object-fit:contain;background:var(--paper)}
@media (prefers-reduced-motion:no-preference){.tp:not([hidden]){animation:tp-in .4s var(--ease)}}
@keyframes tp-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:640px){.tp{grid-template-columns:1fr}.tp figure{order:-1}.tp figure img{aspect-ratio:16/10}}

/* recenze na tmavě modré */
.rev-sec{background:var(--navy);padding:80px 0}
.rev-sec .sec-head{color:#fff}
.rev-sec .rev{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.rev-sec .rev blockquote,.rev-sec .rev figcaption,.rev-sec .rev b{color:#fff}
.rev-sec .note{color:rgba(255,255,255,.7)}

/* výzva dole přes celou šířku (klient: „zkusit udělat celoplošnou barvu“) */
.cta{background:var(--red);padding:72px 0;margin:0}
.cta .wrap.cta-grid{background:none;border-radius:0;padding-block:0;max-width:var(--max);margin-inline:auto}
.cta .wrap.cta-grid::before{display:none}
.cta::after{display:block;opacity:.14}
@media (max-width:1248px){.cta .wrap.cta-grid{margin-inline:auto}}
@media (max-width:640px){.cta{padding:56px 0}.cta .wrap.cta-grid{border-radius:0}}
.posters.p3 .poster-img{aspect-ratio:986/1371}
.top-tab{line-height:1.12;padding-top:4px}
.lhero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.shop-ph{height:220px;aspect-ratio:auto}
.shop-ph img{height:100%;width:100%;object-fit:contain}
@media (max-width:640px){.shop-ph{height:180px}}

/* modré plochy u sekcí (Luboš: „barevné pozadí modré“) */
.sec-navy{background:var(--navy);color:#DCE6F3;padding:88px 0;position:relative;isolation:isolate}
.sec-navy + .sec-navy{padding-top:0}
.sec-navy .sec-head,.sec-navy h2,.sec-navy .lead,.sec-navy .lead-2{color:#fff}
.sec-navy .sec-head::after{background:var(--red)}
.sec-navy .checks li{color:#fff;border-color:rgba(255,255,255,.18)}
.sec-navy .checks li small{color:#C9D6E6}
.sec-navy .checks li::before{color:var(--yellow);border-color:var(--yellow)}
.sec-navy a:not(.btn){color:var(--yellow)}
.sec-navy .side-note{background:#fff;color:var(--text)}
.sec-navy .side-note a:not(.btn){color:var(--red-dark)}
.sec-navy .table th,.sec-navy .table td{color:#fff;border-color:rgba(255,255,255,.18)}
.sec-navy .note-sm{color:#C9D6E6}
.sec-navy :focus-visible{outline-color:var(--yellow)}
.steps .btn-sm{min-height:40px;padding:0 16px;font-size:14px;margin-top:10px}

/* kontakt: kontakty na červené ploše, mapa */
.info.info-red{background:var(--red);color:#fff;border-radius:22px;padding:30px 28px;position:relative;isolation:isolate}
.info.info-red .info-block{border-color:rgba(255,255,255,.28)}
.info.info-red .info-block b,.info.info-red .info-block p,.info.info-red .big-link{color:#fff}
.info.info-red .info-block b{opacity:.85;text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.info.info-red a:not(.btn),.info.info-red .small{color:#fff}
.info.info-red .big-link:hover,.info.info-red a:hover{color:var(--yellow)}
.info.info-red .social a{color:#fff;border-color:rgba(255,255,255,.6)}
.info.info-red :focus-visible{outline-color:var(--yellow)}
.map-box{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:32px;align-items:center;margin-top:64px}
.map{width:100%;height:420px;border:0;border-radius:20px;box-shadow:var(--sh-md);background:var(--plane)}
@media (max-width:900px){.map-box{grid-template-columns:1fr}.map{height:320px}}

/* katalog: bílé pozadí karet (Luboš: „zkusit nechat bíle“), filtr musí schovávat */
.kat-item[hidden]{display:none!important}
.kat-item .kat-img,.kat-item:nth-child(n) .kat-img{background:#fff;border-bottom:1px solid var(--line)}
.kat-img img{filter:none}
.rozc{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.rozc-card{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:center;gap:20px;padding:22px;border:1px solid var(--line);border-radius:18px;background:#fff;text-decoration:none;color:var(--text);box-shadow:var(--sh-sm);transition:transform .3s var(--ease),box-shadow .3s}
.rozc-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);color:var(--text)}
.rozc-img{display:grid;place-items:center;aspect-ratio:1;background:var(--paper);border-radius:14px;padding:12px}
.rozc-img img{max-height:100%;width:auto;object-fit:contain}
.rozc-logos{gap:16px;padding:22px}
.rozc-t{display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:1.5}
.rozc-t b{font:800 32px/1.05 var(--display);color:var(--ink)}
.suppliers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:28px}
.supplier{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;text-decoration:none;color:var(--ink);transition:transform .3s var(--ease),box-shadow .3s}
.supplier:hover{transform:translateY(-5px);box-shadow:var(--sh-md);color:var(--ink)}
.sup-logo{display:grid;place-items:center;height:130px;padding:20px;background:var(--paper)}
.sup-logo img{max-height:80px;width:auto;object-fit:contain}
.sup-t{display:flex;flex-direction:column;gap:6px;padding:16px 18px 20px}
.sup-t em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#B8860B}
.sup-t b{font:800 24px/1.1 var(--display)}
.stock-list li{position:relative;padding:10px 0 10px 26px;border-bottom:1px solid var(--line)}
.stock-list li::before{content:"";position:absolute;left:4px;top:19px;width:9px;height:9px;border-radius:50%;background:var(--red)}
.stack{display:flex;flex-direction:column;gap:18px}
.red-band{background:var(--red);color:#fff;border-radius:18px;padding:26px 28px;font-weight:600;font-size:18px;line-height:1.45}
.red-band p{margin:0 0 14px}
.red-band p:last-child{margin:0}
.size-cmp{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.size-cmp img{border-radius:14px;border:1px solid var(--line)}
.size-cmp figcaption{font-size:14px;color:var(--muted);margin-top:8px}
.size-table caption{text-align:left;font-weight:700;color:var(--ink);padding-bottom:8px}
.size-table td,.size-table th{white-space:nowrap}
@media (max-width:1024px){.suppliers{grid-template-columns:1fr 1fr}.rozc{grid-template-columns:1fr}}
@media (max-width:640px){.rozc-card{grid-template-columns:1fr}.size-cmp{grid-template-columns:1fr}.suppliers{grid-template-columns:1fr}}

/* gravírování: karty předmětů z administrace (název, cena, popis) */
.products .prod-t{flex-wrap:wrap}
.products .prod-t .prod-p{font-family:var(--display);font-weight:800;font-size:24px;color:var(--red-dark);white-space:nowrap}
.products .prod-t p{flex:0 0 100%;margin:0;font-size:14px;color:var(--muted)}
.products .prod .prod-img,.products .prod:nth-child(n) .prod-img{background:#fff}
.products .prod-img img[src*="p27"]{width:100%;height:100%;object-fit:cover;filter:none}

/* gravírování */
.poster-sec-navy{background:var(--navy)}
.not-found{display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex-wrap:wrap;margin-top:32px;padding:22px 26px;border-radius:18px;background:var(--paper);border:1px solid var(--line)}
.not-found p{margin:0;font-size:18px;color:var(--ink)}
.sec-red{background:var(--red);color:#fff;padding:88px 0;position:relative;isolation:isolate}
.sec-red h2,.sec-red .lead,.sec-red .kicker{color:#fff}
.sec-red .checks li{color:#fff;border-color:rgba(255,255,255,.3)}
.sec-red .checks li small{color:#FFE3E3}
.sec-red .checks li::before{border-color:#fff}
.sec-red :focus-visible{outline-color:var(--yellow)}
.medal-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.medal-photos img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px}
.medal-photos .mp-wide{grid-column:1/-1}
.medal-photos .mp-wide img{aspect-ratio:16/7}
.medal-photos figcaption{font-size:13px;color:#FFE3E3;margin-top:6px}

/* služby: technologie jako u konkurence, vpravo „Proč si vybrat právě nás?“ */
.tech-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start}
.tech-item{padding-bottom:48px;margin-bottom:48px;border-bottom:1px solid var(--line)}
.tech-item h2{font-size:clamp(34px,3.4vw,46px);margin-bottom:14px}
.tech-item .tick{margin:0 0 22px}
.gal.gal-tech{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.gal.gal-tech figure{position:relative;aspect-ratio:1;overflow:hidden;border-radius:10px;background:var(--plane)}
.gal.gal-tech img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.gal.gal-tech figure:hover img{transform:scale(1.05)}
.gal.gal-tech figcaption{position:absolute;left:6px;right:6px;bottom:6px;font-size:12px;line-height:1.25;background:rgba(15,39,72,.85);color:#fff;padding:4px 7px;border-radius:6px;opacity:0;transition:opacity .2s}
.gal.gal-tech figcaption b{font-weight:600}
.gal.gal-tech figure:hover figcaption{opacity:1}
.tech-links{display:flex;gap:10px 24px;flex-wrap:wrap;margin:18px 0 0}
.why{position:sticky;top:calc(var(--head-h) + 24px);background:var(--navy);color:#DCE6F3;border-radius:20px;padding:28px 26px}
.why h2{color:#fff;font-size:30px;margin-bottom:16px}
.why li{position:relative;padding:9px 0 9px 26px;border-bottom:1px solid rgba(255,255,255,.14);font-size:15px;line-height:1.45}
.why li::before{content:"";position:absolute;left:2px;top:15px;width:12px;height:7px;border-left:2px solid var(--yellow);border-bottom:2px solid var(--yellow);transform:rotate(-45deg)}
.why-contact{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.why-contact .btn{min-height:46px}
.why :focus-visible{outline-color:var(--yellow)}
@media (max-width:1024px){.tech-layout{grid-template-columns:1fr}.why{position:static}.gal.gal-tech{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.gal.gal-tech{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* podrobný poptávkový formulář */
.form-sec{padding-top:24px}
.form-card{max-width:880px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(22px,4vw,44px);box-shadow:var(--sh-md)}
.form-card .lead-2{margin-bottom:24px}
.checks-row{border:0;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:8px 18px}
.checks-row legend{font-weight:600;color:var(--ink);font-size:15px;margin-bottom:8px;padding:0}
.checks-row label{display:inline-flex;align-items:center;gap:8px;font-size:15px;cursor:pointer}
.checks-row input{width:18px;height:18px;accent-color:var(--red)}
.form-big input[type=date],.form-big input[type=url]{width:100%}
.banner-sec{padding:0 0 24px;background:var(--paper)}
.banner-img{width:100%;border-radius:20px;box-shadow:var(--sh-md)}
.gal.gal-firmy{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:640px){.gal.gal-firmy{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* obrázek v okně */
.zoom-dlg{padding:0;border:0;border-radius:16px;max-width:min(94vw,1100px);background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.zoom-dlg::backdrop{background:rgba(15,39,72,.72)}
.zoom-dlg img{display:block;max-height:86vh;width:auto;max-width:100%}
.zoom-x{position:absolute;right:10px;top:10px;width:44px;height:44px;border-radius:50%;border:0;background:var(--navy);color:#fff;font-size:28px;line-height:1;cursor:pointer}
/* galerie 4 v řadě přes celou šířku (na počkání) */
.gal.gal-wall4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:8px}
.gal.gal-wall4 figure{position:relative;aspect-ratio:1;overflow:hidden;background:var(--plane)}
.gal.gal-wall4 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gal.gal-wall4 figure:hover img{transform:scale(1.04)}
.gal.gal-wall4 figcaption{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);background:rgba(15,39,72,.85);color:#fff;font-size:13px;padding:5px 9px;border-radius:6px;opacity:0;transition:opacity .25s}
.gal.gal-wall4 figure:hover figcaption{opacity:1}
@media (max-width:640px){.gal.gal-wall4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.photo-cta{position:relative;padding:96px 0;text-align:center;color:#fff;background:linear-gradient(rgba(15,39,72,.72),rgba(15,39,72,.72)),url("/img/p241-1600.webp") center/cover}
.photo-cta h2{color:#fff;max-width:20ch;margin:0 auto 26px}
.photo-cta .btns{justify-content:center}

/* školní trička: fotky, vzorníky a tabulky velikostí */
.school-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.school-photos img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px}
.order-band{background:var(--red);color:#fff;padding:48px 0}
.order-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px 40px;flex-wrap:wrap}
.order-band h2{color:#fff;font-size:clamp(34px,3.6vw,50px);margin-bottom:6px}
.order-band p{margin:0;font-size:18px}
.order-band :focus-visible{outline-color:var(--yellow)}
.chart{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;transition:box-shadow .25s}
.chart:hover{box-shadow:var(--sh-md)}
.chart img{width:100%}
.charts-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.charts-col{display:flex;flex-direction:column;gap:18px}
.charts-col figure img{border-radius:14px}
.sec-navy .gal-motivy figcaption{color:#fff}
@media (max-width:900px){.charts-2{grid-template-columns:1fr}}
/* galerie hotových motivů */
.gal.gal-motivy{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:18px}
.gal.gal-motivy figure{background:#fff;border-radius:12px;overflow:hidden}
.gal.gal-motivy img{width:100%;aspect-ratio:1;object-fit:cover}
.gal.gal-motivy figcaption{padding:8px 10px;font-size:13px;color:var(--ink)}
.gal.gal-motivy figcaption b{font-weight:600}
@media (max-width:1024px){.gal.gal-motivy{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.gal.gal-motivy{grid-template-columns:repeat(2,minmax(0,1fr))}}
.photo-row.gal-row figure:nth-child(n){display:block}
.photo-row.gal-row figcaption b{font-weight:500}
.banner-full{padding:0;background:none}
.banner-full .banner-img{border-radius:0;box-shadow:none;width:100%;max-height:520px;object-fit:cover}

/* ceník: produkty jako karty (vzor: nabízené balíčky u konkurence), fotky z e-shopu */
.pks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:8px}
.pk{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;align-items:start;padding:16px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--sh-sm);transition:transform .3s var(--ease),box-shadow .3s}
.pk:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.pk[hidden]{display:none!important}
.pk-img{aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--paper)}
.pk-img img{width:100%;height:100%;object-fit:cover}
.pk h3{font-size:26px;color:var(--blue-dark);margin-bottom:8px}
.pk dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0 0 10px;font-size:14px}
.pk dt{color:var(--muted)}
.pk dd{margin:0;color:var(--ink)}
.pk-p{margin:0 0 10px}
.pk-p b{font:800 28px/1 var(--display);color:var(--red-dark)}
.pk .btn{min-height:42px;padding:0 20px;font-size:15px}
@media (max-width:1024px){.pks{grid-template-columns:1fr}}
@media (max-width:520px){.pk{grid-template-columns:110px minmax(0,1fr);gap:12px}.pk h3{font-size:22px}}

/* obchodní podmínky */
.legal{max-width:860px}
.legal h2{font-size:clamp(26px,2.4vw,32px);margin:36px 0 12px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{font-size:16px}
.legal .tick{margin:0 0 16px}
.terms-form{margin:8px 0 20px}
.terms-form td{min-width:180px;border-bottom:1px solid var(--line-strong)}

/* blog */
.blog-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.blog-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;text-decoration:none;color:var(--text);box-shadow:var(--sh-sm);transition:transform .3s var(--ease),box-shadow .3s}
.blog-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);color:var(--text)}
.blog-img{display:block;aspect-ratio:16/10;background:var(--paper);overflow:hidden}
.blog-img img{width:100%;height:100%;object-fit:cover}
.blog-t{display:flex;flex-direction:column;gap:8px;padding:18px 20px 22px;font-size:15px;line-height:1.5}
.blog-t time{font-size:13px;color:var(--muted)}
.blog-t b{font:800 26px/1.08 var(--display);color:var(--ink)}
.blog-art{padding:48px 0 32px}
.blog-head{max-width:860px}
.blog-head h1{font-size:clamp(40px,5vw,64px);margin:12px 0}
.blog-head time{display:block;color:var(--muted);font-size:14px;margin-bottom:12px}
.blog-hero{max-width:1100px;margin-top:28px}
.blog-hero img{width:100%;max-height:560px;object-fit:cover;border-radius:20px}
.blog-body{max-width:760px;margin-top:36px}
.blog-body h2{font-size:clamp(28px,2.6vw,36px);margin:34px 0 12px}
.blog-body p,.blog-body li{font-size:18px;line-height:1.65}
.blog-body .tick{margin:0 0 18px}
@media (max-width:1024px){.blog-list{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.blog-list{grid-template-columns:1fr}}

/* odrážky s fajfkou (texty technologií, blog, obchodní podmínky) */
.tick{list-style:none;margin:0;padding:0}
.tick li{position:relative;padding:5px 0 5px 28px}
.tick li::before{content:"";position:absolute;left:3px;top:13px;width:12px;height:7px;border-left:2.5px solid var(--red);border-bottom:2.5px solid var(--red);transform:rotate(-45deg)}
.sec-navy .tick li::before{border-color:var(--yellow)}
.pk .btn,.steps .btn-sm{min-height:44px}

/* ceník na úvodu: fotka výrobku pevně ve svém rámečku, nikdy nepřeteče přes název a cenu (1. 10. 2026) */
.shop-card{overflow:hidden}
.shop-ph{position:relative;display:block;width:100%;height:auto;aspect-ratio:1/1;padding:0;margin-bottom:6px}
.shop-ph img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);max-height:none;object-fit:contain}
.shop-card h3{position:relative;z-index:1;min-height:2.2em;display:flex;align-items:center;justify-content:center}

/* vlastní služby z administrace (1. 10. 2026) */
.svc-extra:not(:has(.svc-card)){display:none}
.sub-svcs{display:contents}
.svc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:22px}
.svc-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;text-decoration:none;color:var(--text);box-shadow:var(--sh-sm);transition:transform .3s var(--ease),box-shadow .3s}
.svc-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);color:var(--text)}
.svc-card-img{display:block;aspect-ratio:16/10;background:var(--paper);overflow:hidden}
.svc-card-img img{width:100%;height:100%;object-fit:cover}
.svc-card-t{display:flex;flex-direction:column;gap:8px;padding:18px 20px 22px;font-size:15px;line-height:1.5}
.svc-card-t b{font:800 26px/1.08 var(--display);color:var(--ink)}
.svc-body{margin-top:0}
.gal.gal-svc{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1024px){.svc-cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.svc-cards{grid-template-columns:1fr}.gal.gal-svc{grid-template-columns:1fr 1fr}}

/* ===== Audit 2. 10. 2026 ===== */
/* sekce .tight hned za barevnou plochou potřebuje odstup nahoře */
.sec-navy + .tight,.sec-red + .tight,.order-band + .tight,.poster-sec + .tight,.banner-sec + .tight,.sec-navy + section:not([class]),.sec-red + section:not([class]){padding-top:88px}
/* poslední neúplná řada karet na střed */
.products.p3[data-coll]{display:flex;flex-wrap:wrap;justify-content:center}
.products.p3[data-coll] > .prod{flex:0 0 calc((100% - 2 * 20px) / 3)}
.gal.gal-motivy{display:flex;flex-wrap:wrap;justify-content:center}
.gal.gal-motivy > figure{flex:0 0 calc((100% - 4 * 12px) / 5)}
@media (max-width:1024px){.products.p3[data-coll] > .prod{flex-basis:calc((100% - 20px) / 2)}.gal.gal-motivy > figure{flex-basis:calc((100% - 2 * 12px) / 3)}}
@media (max-width:640px){.gal.gal-motivy > figure{flex-basis:calc((100% - 12px) / 2)}}
.blog-list{grid-template-columns:repeat(2,minmax(0,1fr));max-width:980px}
@media (max-width:640px){.blog-list{grid-template-columns:1fr}}
.blog-art{padding-bottom:96px}
/* formulář: zaškrtávací pole do mřížky */
.checks-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 16px}
.checks-row legend{grid-column:1/-1}
@media (max-width:768px){.checks-row{grid-template-columns:1fr 1fr}}
/* karty katalogu: odkazy dole v jedné linii */
.kat-item{display:flex;flex-direction:column}
.kat-body{display:flex;flex-direction:column;flex:1}
.kat-body .kat-more{margin-top:auto}
/* kroky: nadpisy na dva řádky, ať text začíná ve stejné výšce */
@media (min-width:1025px){.steps h3{min-height:2.2em}}
/* dodavatelé: štítek „Top dodavatel“ neodsouvá nadpis */
.sup-t{position:relative;padding-top:32px}
.sup-t em{position:absolute;left:18px;top:12px}
/* patička: logo v bílé pilulce jako v hlavičce */
.foot .logo{background:#fff;border-radius:999px;padding:6px 14px;width:220px}
/* hlavní obrázek záhlaví na tabletu na střed */
@media (max-width:1024px){.page-head figure{margin-inline:auto}}

/* ===== Audit mobilu 2. 10. 2026 ===== */
/* gravírování: popis v kartě nesmí na mobilu utéct do druhého sloupce */
@media (max-width:640px){.products .prod-t{flex-wrap:nowrap}.products .prod-t p{flex:none}}
/* hlavička po posunu na telefonu a tabletu: stejná šířka loga a odsazení jako před posunem */
@media (max-width:1180px){
  .top.top-red.scrolled .wrap{padding:0 var(--gutter)}
  .top.top-red.scrolled .logo,.top.top-red .logo{width:150px}
  .top.top-red .nav > a:hover,.top.top-red .nav-toggle:hover{color:var(--red-dark)}
  .top.top-red .nav-toggle::after{border-color:currentColor}
}
/* hero na úvodu se pod 900 px skládá pod sebe */
@media (max-width:900px){
  .lhero-grid{grid-template-columns:1fr}
  .lhero-art{max-width:460px;margin:0 auto}
  .konf-ring span{animation-delay:.2s}
}
/* kontakt: větší dotykové plochy */
.info-block .big-link{display:inline-block;padding:4px 0}
.social a{display:inline-flex;align-items:center;min-height:44px}
/* formulář: na telefonu dvě zaškrtávací pole vedle sebe */
@media (max-width:640px){.checks-row{grid-template-columns:1fr 1fr}}
/* blog: světlá fotka na bílé kartě */
.blog-img{background:var(--plane)}
.blog-img img[src*="p138"]{object-fit:contain;padding:12px}

/* ===== Interakce úvodu 3. 10. 2026 ===== */
/* karty ceníku na úvodu: klikací celá karta */
.shop-card{cursor:pointer}
.shop-card:hover .shop-ph img{transform:scale(1.05)}
.shop-ph img{transition:transform .5s var(--ease)}
.shop-card:hover h3{color:var(--red-dark)}
/* loga zákazníků: zvýraznění a odkaz na web firmy */
.logo-track a,.logo-track .logo-nolink{display:block;padding:6px 4px;border-radius:10px;transition:transform .3s var(--ease),background .3s}
.logo-track img{opacity:.82;transition:opacity .3s,filter .3s}
.logo-track a:hover,.logo-track a:focus-visible{transform:translateY(-3px) scale(1.12);background:rgba(255,255,255,.08)}
.logo-track a:hover img,.logo-track a:focus-visible img{opacity:1;filter:drop-shadow(0 6px 14px rgba(255,255,255,.25))}
.logo-strip:hover .logo-track,.logo-strip:focus-within .logo-track{animation-play-state:paused}
.logo-strip :focus-visible{outline-color:var(--yellow)}

/* ---- Opravy podle Lubošova návrhu, 3. 10. 2026 ---- */
.motivy-sub{color:#fff;font-size:clamp(22px,2vw,28px);margin:44px 0 0}
.products .prod-t .prod-p.prod-p-ask{font-size:16px;font-weight:700}
.poster-sec-navy .posters.p3 .poster-img{aspect-ratio:4/5}
.rev-sec .note a{color:#fff}

/* ---- Bloky v textu článku a služby (tabulka, tlačítko, otázky, rámeček), 3. 10. 2026 ---- */
.blog-body h3{font-size:clamp(22px,2vw,26px);margin:26px 0 10px}
.txt-table-wrap{overflow-x:auto;margin:8px 0 24px;border:1px solid var(--line);border-radius:12px}
.txt-table{width:100%;border-collapse:collapse;font-size:17px;line-height:1.4}
.txt-table th,.txt-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}
.txt-table th{background:var(--navy);color:#fff;font-weight:600}
.txt-table tbody tr:last-child td{border-bottom:0}
.txt-table tbody tr:nth-child(even) td{background:var(--paper)}
.txt-table td:last-child,.txt-table th:last-child{white-space:nowrap}
.blog-body .txt-btn{margin:8px 0 24px}
.blog-body .txt-box{margin:8px 0 24px;padding:16px 20px;border-left:4px solid var(--red);background:var(--paper);border-radius:0 12px 12px 0}
.blog-body .txt-faq{margin:8px 0 24px}

/* ===== Kříž technologií (původní podoba, vráceno 9. 10. 2026 na pokyn Jakuba) ===== */
.tech-kicker{text-align:center;font:800 clamp(30px,3.4vw,46px)/1 var(--display);color:var(--ink);margin:0 0 4px;text-transform:lowercase}
.tech-head{text-align:center;font-size:clamp(34px,3.8vw,52px);color:#4B5563;text-transform:uppercase;margin-bottom:40px}
.tech-head span{background:var(--red);color:#fff;padding:0 10px}
.tech-box{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:40px;align-items:center}
.tech-x{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;width:min(100%,400px);aspect-ratio:1;margin:0 auto;transform:rotate(45deg);gap:14px}
.tech-x::before,.tech-x::after{content:"";position:absolute;left:50%;top:-6%;width:12px;height:112%;margin-left:-6px;background:#4B5563;border-radius:6px;z-index:0}
.tech-x::after{transform:rotate(90deg)}
.tx{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:0;border-radius:14px;background:#fff;color:var(--ink);cursor:pointer;box-shadow:var(--sh-sm);transition:background .25s,color .25s,box-shadow .25s}
.tx > *{transform:rotate(-45deg)}
.tx svg{width:38px;height:38px;fill:none;stroke:var(--red);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tx span{font:700 14px/1.15 var(--body);text-transform:uppercase;max-width:9em;text-align:center}
.tx:hover{box-shadow:var(--sh-md)}
.tx[aria-selected="true"]{background:var(--red);color:#fff}
.tx[aria-selected="true"] svg{stroke:#fff}
@media (max-width:1024px){.tech-box{grid-template-columns:1fr}.tech-x{width:min(80vw,320px)}}
@media (max-width:640px){.tx span{font-size:11px}.tx svg{width:28px;height:28px}}
.tech-x{width:min(100%,330px)}
.tech-x::before,.tech-x::after{width:10px;margin-left:-5px}
@media (max-width:1024px){.tech-x{width:min(62vw,300px);margin:40px auto}}
@media (max-width:640px){.tech-x{width:min(60vw,250px);margin:36px auto 44px}}
.tx{gap:4px;padding:10px}
.tx svg{flex:none}
.tx span{font-size:12.5px;line-height:1.1}
@media (max-width:640px){.tx span{font-size:12px}}
.tx > *{transform:none}
.tx > .tx-in{transform:rotate(-45deg);display:flex;flex-direction:column;align-items:center;gap:6px}
.tx{transition:background .25s,color .25s,box-shadow .3s,transform .35s var(--ease);will-change:transform}
.tx svg{transition:transform .45s var(--ease)}
.tx:hover,.tx:focus-visible{transform:scale(1.07);box-shadow:0 18px 36px -14px rgba(219,47,50,.5);z-index:2}
.tx:not([aria-selected="true"]):hover{background:#FFF1F1}
.tx:hover svg{transform:translateY(-3px) scale(1.15) rotate(-6deg)}
.tx:active{transform:scale(.97)}
.tx[aria-selected="true"]{box-shadow:0 16px 34px -12px rgba(219,47,50,.6)}
@media (prefers-reduced-motion:no-preference){
  .tech-x:not(:hover) .tx[aria-selected="true"]{animation:tx-pulse 2.4s ease-in-out infinite}
}
@keyframes tx-pulse{0%,100%{box-shadow:0 16px 34px -12px rgba(219,47,50,.6)}50%{box-shadow:0 0 0 8px rgba(219,47,50,.14),0 16px 34px -12px rgba(219,47,50,.6)}}
@media (max-width:640px){.txt-table{font-size:15px}.txt-table th,.txt-table td{padding:10px 12px}}

/* ===== Úpravy podle Luboše, 8. 10. 2026 (PDF „web 8_10_úprava“) ===== */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* hlavička: nové bílé logo přímo na červené, bez bílé pilulky; v menu přibyla Poptávka */
.top.top-red .logo,.top.top-red.scrolled .logo{width:178px;background:none;border-radius:0;padding:0;box-shadow:none}
.top.top-red .nav{gap:20px}
.top.top-red .nav > a,.top.top-red .nav-toggle{font-size:15.5px}
@media (max-width:1320px) and (min-width:1181px){.top.top-red .nav{gap:14px}.top.top-red .nav > a,.top.top-red .nav-toggle{font-size:14.5px}.top.top-red .logo,.top.top-red.scrolled .logo{width:150px}.top.top-red .wrap,.top.top-red.scrolled .wrap{column-gap:16px}}
@media (max-width:1180px){.top.top-red .logo,.top.top-red.scrolled .logo{width:150px}}
.foot .logo{background:none;border-radius:0;padding:0;width:230px}
/* rozbalovací nabídka: čtyři položky v levém sloupci */
.sub-mega .sub-svcs{display:contents}

/* výzva dole: první tlačítko „Poptat nezávazně potisk“ */
.cta .btns .btn-poptat{font-size:18px;min-height:54px;border-width:2px}

/* záhlaví podstránek: fotka na výšku 4 : 5 (Luboš má podklady 1080 × 1350 px) */
.page-head figure{max-width:440px;justify-self:end;width:100%}
.page-head figure img{aspect-ratio:4/5}
@media (max-width:1024px){.page-head figure{max-width:380px;justify-self:center}.page-head figure img{aspect-ratio:4/5}}

/* popisek fotky při najetí: tmavý štítek s bílým textem, ať se dá přečíst */
.gal figure:hover figcaption,.gal figure:hover figcaption b{color:var(--ink)}
.wall figcaption,.gal.gal-tech figcaption,.gal.gal-wall4 figcaption{background:rgba(11,27,51,.92);color:#fff;font-weight:600;text-shadow:none}
.wall figcaption b,.gal.gal-tech figcaption b,.gal.gal-wall4 figcaption b,.gal.gal-tech figure:hover figcaption b,.gal.gal-wall4 figure:hover figcaption b,.gal.gal-tech figure:hover figcaption,.gal.gal-wall4 figure:hover figcaption{color:#fff}
/* bílé tlačítko na tmavě modré při najetí nemizí */
.sec-navy .btn-white:hover,.mid-cta .btn-white:hover,.photo-cta .btn-white:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}

/* ---- úvod: hero ---- */
.lhero-eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 14px;font:700 14px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.lhero-eyebrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lhero-sub em{background:none;padding:0;position:relative;white-space:nowrap}
.lhero-sub em::after{content:"";position:absolute;left:-2%;right:-4%;bottom:-.12em;height:.16em;border-radius:999px;background:var(--red);transform:rotate(-1.6deg);transform-origin:left}
.lhero-fast{display:flex;align-items:flex-start;gap:12px;margin:22px 0 14px;font-size:15.5px;line-height:1.4;color:var(--ink)}
.lhero-fast svg{flex:none;width:34px;height:34px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lhero-fast b{display:block;font-size:19px;font-weight:700}
.btn.btn-ico svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn.btn-ico{gap:10px}

/* ---- úvod: pruh s výhodami a logy zákazníků ---- */
.stat-strip{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.stat-wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px;align-items:center}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,auto);gap:14px 26px;justify-content:space-between}
.stats li{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:13px;line-height:1.25}
.stats svg{flex:none;width:30px;height:30px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.stats b{display:block;font-size:17px;font-weight:700;line-height:1.2}
.stats span{display:block;max-width:15ch}
.stat-strip .logo-strip{background:none;padding:0 0 0 28px;border-left:2px solid var(--ink);min-width:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.stat-strip .logo-track li{padding:0 18px}
.stat-strip .logo-track img{height:36px;max-width:150px;filter:brightness(0);opacity:.5}
.stat-strip .logo-track a:hover,.stat-strip .logo-track a:focus-visible{background:none;transform:translateY(-2px)}
.stat-strip .logo-track a:hover img,.stat-strip .logo-track a:focus-visible img{filter:brightness(0);opacity:.85}
.stat-strip .logo-strip :focus-visible{outline-color:var(--blue)}
@media (max-width:1100px){.stat-wrap{grid-template-columns:1fr}.stat-strip .logo-strip{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px}}
@media (max-width:640px){.stats{grid-template-columns:1fr 1fr;justify-content:start}.stats b{font-size:16px}.stats svg{width:26px;height:26px}}

/* ---- úvod: Trička na různé akce, čtyři karty ---- */
.eyebrow{margin:0 0 12px;font:700 14px/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.akce-sec{background:var(--paper);padding:72px 0}
.akce-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px;align-items:center}
.akce-intro h2{font-size:clamp(44px,5vw,72px);line-height:1.02;margin-bottom:18px}
.akce-intro p:not(.eyebrow){font-size:18px;margin-bottom:24px;max-width:30ch}
.akce-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.akce-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:0 0 16px;background:#fff;border:1.5px solid var(--navy);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .3s var(--ease),box-shadow .3s}
.akce-card:hover{transform:translateY(-6px);box-shadow:var(--sh-md);color:var(--ink)}
.akce-img{display:block;aspect-ratio:986/1371;overflow:hidden;background:var(--plane)}
.akce-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.akce-card:hover .akce-img img{transform:scale(1.05)}
.akce-card b{padding:0 14px;font:700 18px/1.2 var(--body);color:var(--navy);min-height:2.4em}
.akce-go{margin:auto 14px 0;width:38px;height:38px;border:1.5px solid var(--navy);border-radius:50%;display:grid;place-items:center;transition:background .25s,color .25s}
.akce-go::before{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:translateX(-2px) rotate(45deg)}
.akce-card:hover .akce-go{background:var(--navy);color:#fff}
@media (max-width:1024px){.akce-grid{grid-template-columns:1fr;gap:28px}.akce-intro p:not(.eyebrow){max-width:none}}
@media (max-width:640px){.akce-sec{padding:48px 0}.akce-cards{grid-template-columns:1fr 1fr;gap:10px}.akce-card b{font-size:15px;padding:0 10px}.akce-go{margin:auto 10px 0;width:32px;height:32px}.akce-card{padding-bottom:12px;gap:8px}}

/* ---- úvod: ceník na telefonu po dvou vedle sebe (vzor vytvorsipotisk.cz) ---- */
@media (max-width:640px){
  .shop-sec{padding:48px 0}
  .shop-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;overflow:visible}
  .shop-card{flex:none;padding:10px 10px 12px}
  .shop-card h3{font-size:17px;min-height:2.3em}
  .shop-card .btn{min-height:44px;padding:0 8px;font-size:13.5px}
  .shop-badge{font-size:11px}
}

/* ---- úvod: červený pruh pod ceníkem ---- */
.mid-cta{background:var(--red);color:#fff;text-align:center;padding:34px 0 38px}
.mid-cta h2{color:#fff;font:500 clamp(30px,3.6vw,48px)/1.1 var(--body);margin:0 0 8px;text-transform:none;letter-spacing:0}
.mid-cta p{margin:0 0 20px;font-size:18px}
.mid-cta .btns{justify-content:center}
.mid-cta .btn{min-width:250px;min-height:50px}
.mid-cta :focus-visible{outline-color:var(--yellow)}
@media (max-width:640px){.mid-cta .btns{flex-direction:column;align-items:stretch}.mid-cta .btn{min-width:0}}

/* ---- úvod: realizace ---- */
.wall-sec .head-row .lead-2{margin:10px 0 0}
.wall-sec .head-row{align-items:center}

/* ---- recenze: zaoblené karty, hvězdičky, výrazný autor ---- */
.reviews{gap:22px;align-items:stretch}
.rev,.rev-sec .rev{display:flex;flex-direction:column;gap:14px;margin:0;padding:24px 24px 22px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);box-shadow:var(--sh-sm)}
.rev-sec .rev{border-color:transparent}
.rev:hover{transform:translateY(-4px);border-color:var(--line)}
.rev-stars{color:#F5B301;font-size:22px;letter-spacing:3px;line-height:1}
.rev blockquote,.rev-sec .rev blockquote{margin:0;font-size:17px;line-height:1.5;color:var(--ink)}
.rev figcaption,.rev-sec .rev figcaption{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.rev figcaption b,.rev-sec .rev figcaption b{display:block;font-size:18px;font-weight:700;color:var(--navy);margin-bottom:2px}
.rev figcaption span{display:block}
.rev-sec .sec-head{text-align:center;max-width:none}
.rev-sec .note{text-align:center}

/* ---- ceník: filtry hned pod záhlavím ---- */
.eshop-top{padding-top:48px}

/* ---- katalog textilu: dodavatelé ---- */
.suppliers{gap:14px}
.sup-logo{height:150px;padding:18px}
.sup-logo img{max-height:104px;max-width:100%;min-width:62%}
.sup-t{padding:34px 14px 18px}
.sup-t em{left:14px}
.sup-logo img[alt="Cotton Classics"]{transform:scale(1.9)}
.sup-t b{font-size:21px;white-space:nowrap}
.sup-t .more{margin-top:auto}
.supplier .sup-t{flex:1}
@media (max-width:1180px) and (min-width:1025px){.sup-t b{font-size:18px}}
@media (max-width:1024px){.sup-t b{white-space:normal}}
/* oblíbený textil: odkaz na katalog dodavatele, zvětšení porovnání velikostí */
.kat-link{margin-top:10px;align-self:flex-start;font-weight:600;font-size:14px;color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.kat-link::after{content:" ↗"}
.kat-link:hover{color:var(--navy)}
.zoomable{display:block;position:relative;cursor:zoom-in}
.zoomable::after{content:"Zvětšit";position:absolute;right:10px;bottom:10px;background:rgba(11,27,51,.9);color:#fff;font:600 13px/1 var(--body);padding:8px 12px;border-radius:999px}

/* ---- gravírování ---- */
.hero-meta li > span{display:inline}
.products .prod-t{flex-wrap:wrap}
.prod-cta{flex-basis:100%;margin-top:10px;display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-height:40px;padding:0 20px;border-radius:999px;background:var(--red);color:#fff;font-weight:600;font-size:15px;text-decoration:none;max-width:max-content;transition:background .25s,transform .25s var(--ease)}
.prod-cta:hover{background:var(--red-dark);color:#fff;transform:translateY(-2px)}
.grav-note{margin:26px 0 0;padding:14px 18px;border-left:4px solid var(--yellow);background:var(--paper);border-radius:0 12px 12px 0;font-size:15.5px;color:var(--ink)}
.sec-medaile .kicker{color:var(--ink)}
.sec-medaile .medal-photos figcaption{color:#C9D6E6}
.medal-photos .mp-wide{grid-column:1;grid-row:1 / span 2}
.medal-photos .mp-wide img{aspect-ratio:3/4;height:100%}
.medal-photos .mp-chart img{aspect-ratio:1/1;object-fit:contain;background:#fff}

/* ---- blog: karty na střed ---- */
.blog-list{margin-inline:auto}

/* ---- kontakt podle makety ---- */
.kontakt-sec .wrap{max-width:1160px}
.kontakt-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:center}
.kontakt-info h2{font-size:clamp(36px,3.6vw,48px);margin-bottom:4px}
.kontakt-adr{font:700 clamp(20px,2vw,26px)/1.25 var(--body);color:var(--navy);margin:0 0 20px}
.kontakt-info h3{font:700 20px/1.3 var(--body);color:var(--navy);margin:18px 0 4px;text-transform:none;letter-spacing:0}
.hours{margin:0;font:700 20px/1.5 var(--body);color:var(--navy)}
.hours div{display:flex;gap:12px}
.hours dt{width:2.2em;text-transform:uppercase}
.hours dd{margin:0}
.kontakt-note{margin:16px 0 0;font-weight:700;color:var(--navy);font-size:16px;line-height:1.5}
.kontakt-fa{margin:0 0 22px;color:var(--navy);font-size:17px;line-height:1.45}
.kontakt-photo{margin:0}
.kontakt-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:20px;box-shadow:var(--sh-md)}
.kontakt-sec .map-box{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;margin-top:56px}
.kontakt-form{max-width:640px;margin:72px auto 0}
.kontakt-form > .sec-head{text-align:center;max-width:none;margin-bottom:24px}
@media (max-width:900px){.kontakt-top,.kontakt-sec .map-box{grid-template-columns:1fr;gap:28px}.kontakt-photo{order:-1}.kontakt-form{margin-top:48px}}
@media (max-width:640px){.products .prod-t{flex-wrap:nowrap}.prod-cta{flex-basis:auto;min-height:38px;padding:0 16px}}
.prod-cta{position:relative}

/* ===== Audit 9. 10. 2026 (telefon, počítač, konfigurátor) ===== */
/* názvy fotek v galerii na tmavě modré musí být vidět */
.sec-navy .gal figcaption{color:rgba(255,255,255,.85)}
.sec-navy .gal figcaption b{color:#fff}
/* štítek „Od 1 kusu“ nad fotkou výrobku, ne pod ní */
.shop-badge{z-index:2}
/* pruh log a hned pod ním sekce bez horního okraje */
.logo-strip + section.tight{padding-top:72px}
/* záhlaví podstránky navazuje na barevný blok bez bílého proužku */
.page-head:has(+ .poster-sec),.page-head:has(+ .banner-sec){margin-bottom:0}
/* formulář: zaškrtávátka se nesmršťují, skupiny nepřetékají */
#inq fieldset{min-width:0}
.checks-row label input{flex:0 0 18px;width:18px;height:18px}
.checks-row label{min-width:0}
/* gravírování: tlačítka Poptat v řadě ve stejné výšce, medaile s mezerami */
.products .prod{display:flex;flex-direction:column}
.products .prod-t{flex:1;align-content:flex-start}
.prod-cta{margin-top:auto;min-height:44px}
#medaile h2{margin-bottom:14px}
#medaile .btns{margin-top:22px}
/* katalog: odkazy v kartě se nelepí, šipka neosiří */
.kat-link{display:inline-block;padding:8px 0 4px;margin-top:6px}
.kat-link::after{content:"\00a0↗"}
.kat-cta{margin-top:10px}
.supplier .sup-t{padding-bottom:24px}
/* ceník: náhledy výrobků celé, bez ořezu */
.pk-img img{object-fit:contain}
/* nadpisy bez osamoceného slova */
h1{text-wrap:balance}
/* odkazy v kartě „Kudy nám to poslat“ s větší dotykovou plochou */
.side-list a{display:inline-block;padding:10px 0;margin:-10px 0}
/* čtvercové grafiky s textem se neořezávají do formátu na výšku */
.page-head figure img[src*="p506"],.two.mid figure.photo img[src*="p535"]{aspect-ratio:1/1}
.page-head figure img[src*="p242"]{object-position:40% 50%}
/* galerie s popisky při najetí: na dotyku jsou popisky vidět pořád */
@media (hover:none){.gal.gal-tech figcaption,.gal.gal-wall4 figcaption{opacity:1;font-size:13px}}
@media (max-width:640px){
  .logo-strip + section.tight{padding-top:56px}
  .form-card #inq.form-big{border:0;padding:0;border-radius:0;box-shadow:none}
  .tech-links{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
  .tech-links .more{margin:0}
  .kontakt-sec{padding-top:48px}
  .photo-cta .btns{flex-direction:column;align-items:center}
  .photo-cta .btn{width:100%;max-width:326px}
  /* lichá fotka v řadě po dvou: na střed, ne s dírou vedle */
  .photo-row > figure:last-of-type:nth-of-type(odd),.posters.p3 > :last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 6px);justify-self:center}
  .poster-btn{white-space:nowrap;font-size:13px;padding:0 12px}
}
@media (max-width:360px){
  .checks-row{grid-template-columns:1fr}
  .form-card{padding:18px 14px}
  .pk{grid-template-columns:76px minmax(0,1fr);gap:12px}
  .pk dl{grid-template-columns:1fr;gap:0}
  .pk dt{margin-top:5px}
  .pk-p b{font-size:24px;white-space:nowrap}
  .stats{grid-template-columns:1fr}
  .shop-card .btn{font-size:12.5px;padding:0 4px;white-space:nowrap}
  .cta h2{font-size:36px}
  .cta .btns .btn-poptat{font-size:16px;padding:0 14px}
  .bar a{font-size:13px;gap:4px}
  .bar svg{width:16px;height:16px}
  .nav-foot-row .btn{font-size:15px;padding:0 8px;white-space:nowrap}
}

/* --- nálezy z počítače a tabletu --- */
.perk-strip + section.tight{padding-top:72px}
.page-head:has(+ .sec-navy){margin-bottom:0}
/* hlavička po odrolování neposkočí, logo lícuje s okrajem obsahu */
@media (min-width:1181px){
  .top.top-red.scrolled{padding-top:0}
  .top.top-red .wrap,.top.top-red.scrolled .wrap{padding-left:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)))}
}
.sub-mega{align-items:start}
/* loga zákazníků v pruhu pod úvodem: vyrovnané velikosti; logo s plným kulatým podkladem by po obarvení byl jen kotouč */
.stat-strip .logo-track img{height:auto;max-height:44px;max-width:130px;min-height:30px}
.stat-strip .logo-track li:has(img[alt^="Smyslohraní"]){display:none}
/* formulář: přepínače převzetí ve dvou sloupcích, ať se text neláme */
.checks-row:has(input[type="radio"]){grid-template-columns:repeat(2,minmax(0,max-content));gap:8px 32px}
/* právní stránky stejně široké a na střed */
.wrap.prose,.wrap.legal{max-width:860px;margin-inline:auto}
/* ceník: tlačítka „To chci“ v řadě ve stejné výšce */
.pk-img{align-self:start;width:100%}
.pk-b{align-self:stretch}
.pk-b{display:flex;flex-direction:column}
.pk-b .btn{margin-top:auto;align-self:flex-start}
.kontakt-sec .wrap{max-width:var(--max)}
/* tablet na šířku: karty vedle sebe jako na počítači, ne pod sebou jako na telefonu */
@media (min-width:769px) and (max-width:1024px){
  .shop-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .reviews{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .packs{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .pks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rev,.rev-sec .rev{padding:18px}
}
/* zvětšený obrázek: stránka pod ním se neposouvá */
html:has(dialog.zoom-dlg[open]){overflow:hidden}

/* ===== Pruh pod úvodem a kříž technologií, 9. 10. 2026 večer ===== */
/* pruh přesně podle Lubošovy makety: čtyři výhody v rovnoměrných rozestupech, svislá čára, vpravo šedá loga */
.stat-wrap{display:flex;align-items:center;gap:0}
.stats{display:flex;flex:none;align-items:center;justify-content:flex-start;gap:clamp(22px,2.6vw,44px);grid-template-columns:none}
.stats li{flex:none;gap:10px;font-size:12.5px;line-height:1.25;white-space:nowrap}
.stats span{max-width:none}
.stats b{font-size:17px}
.stats li:first-child svg{width:36px;height:36px}
.stats li:first-child b{font-size:18px;line-height:1.15}
.stat-strip .logo-strip{flex:1 1 0;min-width:0;margin-left:clamp(22px,2.6vw,44px);padding:4px 0 4px clamp(18px,2vw,32px);border-left:2px solid var(--ink)}
.stat-strip .logo-track li{padding:0 22px}
.stat-strip .logo-track img{height:40px;max-height:40px;min-height:0;width:auto;max-width:170px;opacity:.55}
/* pruhy log se při najetí myší nezastavují, na loga jde dál kliknout */
.logo-strip:hover .logo-track,.logo-strip:focus-within .logo-track{animation-play-state:running}
@media (max-width:1180px){
  .stat-wrap{flex-direction:column;align-items:stretch;gap:14px}
  .stats{justify-content:space-between;flex-wrap:wrap;gap:12px 24px}
  .stat-strip .logo-strip{margin-left:0;padding:14px 0 0;border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:640px){
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
  .stats li{white-space:normal}
  .stats li:first-child svg{width:26px;height:26px}
  .stats li:first-child b,.stats b{font-size:16px}
}
@media (max-width:360px){.stats{grid-template-columns:1fr}}

/* kříž technologií: dlaždice se při najetí nezvětšuje do čar kříže; čáry jsou vždy navrchu */
.tech-x::before,.tech-x::after{z-index:3;pointer-events:none}
.tx:hover,.tx:focus-visible{transform:none;z-index:1;box-shadow:var(--sh-md)}
.tx:active{transform:none}
.tx:not([aria-selected="true"]):hover{background:#FFE9E9}
.tx:hover svg{transform:translateY(-4px) scale(1.18)}
.tx[aria-selected="true"]{box-shadow:var(--sh-md)}
.tech-x:not(:hover) .tx[aria-selected="true"]{animation:none}
/* čára mezi výhodami a logy patří k výhodám (maska pruhu log by ji ztlumila); loga mají víc místa */
.stats{gap:clamp(18px,2vw,34px);padding-right:clamp(18px,2vw,34px);border-right:2px solid var(--ink)}
.stat-strip .logo-strip{margin-left:0;padding:4px 0;border-left:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.stat-strip .logo-track li{padding:0 18px}
@media (max-width:1180px){
  .stats{padding-right:0;border-right:0}
  .stat-strip .logo-strip{flex:none;padding:14px 0 2px;border-top:1px solid var(--line)}
}
/* úvod: menší mezera pod zdí zakázek */
.wall-sec{padding-bottom:56px}
.wall-more{margin-top:28px}
/* kruh „navrhnout tričko“ na prsou černého trička */
.konf-ring{top:23%}
/* přepínání technologií: všechny panely leží v jedné buňce, výška je podle nejvyššího a stránka při přepnutí neposkočí */
.tech-panels{display:grid}
.tech-panels > .tp{grid-area:1 / 1}
.tech-panels > .tp[hidden]{display:grid;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.tech-panels > .tp[hidden]{animation:none}}
/* ---------- Rozbalovací nabídka: najetí na položku (10. 10. 2026) ---------- */
@media (min-width:1181px){
  .sub a{position:relative;overflow:hidden;transition:background .28s var(--ease)}
  .sub a b,.sub a span{transition:transform .32s var(--ease),color .2s}
  /* červený proužek vyroste u levého okraje */
  .sub a::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--red);transform:scaleY(0);transition:transform .32s var(--ease)}
  /* šipka přijede zleva */
  .sub a::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;margin-top:-5px;border-top:2px solid var(--red-dark);border-right:2px solid var(--red-dark);opacity:0;transform:translateX(-10px) rotate(45deg);transition:opacity .25s,transform .32s var(--ease)}
  .sub a:hover b,.sub a:hover span,.sub a:focus-visible b,.sub a:focus-visible span{transform:translateX(6px)}
  .sub a:hover span,.sub a:focus-visible span{transition-delay:.04s}
  .sub a:hover::before,.sub a:focus-visible::before,.sub a[aria-current="page"]::before{transform:scaleY(1)}
  .sub a:hover::after,.sub a:focus-visible::after{opacity:1;transform:rotate(45deg)}
  .sub a:active{background:#E4EAF3}
  /* položky po otevření naskočí postupně */
  .nav-toggle[aria-expanded="true"] + .sub a{animation:sub-item .38s var(--ease) both}
  .sub-col > a:nth-child(3),.sub-col > .sub-svcs > a:nth-child(1){animation-delay:.03s}
  .sub-col > a:nth-child(4),.sub-col > .sub-svcs > a:nth-child(2){animation-delay:.06s}
  .sub-col > a:nth-child(5),.sub-col > .sub-svcs > a:nth-child(3){animation-delay:.09s}
  .sub-col > a:nth-child(6),.sub-col > .sub-svcs > a:nth-child(4){animation-delay:.12s}
  .sub-col > a:nth-child(7),.sub-col > .sub-svcs > a:nth-child(n+5){animation-delay:.15s}
}
@keyframes sub-item{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .sub a,.sub a b,.sub a span,.sub a::before,.sub a::after{transition:none}
  .sub a:hover b,.sub a:hover span,.sub a:focus-visible b,.sub a:focus-visible span{transform:none}
  .nav-toggle[aria-expanded="true"] + .sub a{animation:none}
}
/* ---------- Recenze z Googlu: všechny (10. 10. 2026) ---------- */
.rev-who,.rev-sec .rev .rev-who{display:flex;align-items:center;gap:12px}
.rev-who img{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--plane)}
.rev-who > span{min-width:0}
.rev-who b{overflow-wrap:anywhere}
/* úvod: posuvný pás */
.rev-strip{overflow-x:auto;padding:10px 0 26px;scrollbar-width:none}
.rev-strip::-webkit-scrollbar{display:none}
.rev-strip:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.rev-track{display:flex;width:max-content;padding-left:22px}
.rev-track .rev{flex:none;width:clamp(280px,30vw,384px);margin-right:22px}
.rev-track .rev blockquote{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;line-clamp:8;overflow:hidden}
.rev-strip.is-moving{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rev-strip.is-moving .rev-track{padding-left:0;animation:rev-run var(--dur,300s) linear infinite}
@keyframes rev-run{to{transform:translateX(var(--shift,-50%))}}
@media (max-width:700px){.rev-track .rev{width:82vw;margin-right:14px}}
/* Reference: všechny recenze ve sloupcích */
.reviews.rev-all{display:block;columns:3 300px;column-gap:22px}
.rev-all .rev{break-inside:avoid;margin:0 0 22px}

/* ---------- Kontrola podle Lubošova PDF z 8. 10. (10. 10. 2026) ---------- */
/* hotové motivy mají bílou kartu: název tmavě, ať je vidět i bez najetí myší */
.sec-navy .gal.gal-motivy figcaption,.sec-navy .gal.gal-motivy figcaption b,.sec-navy .gal.gal-motivy figure:hover figcaption,.sec-navy .gal.gal-motivy figure:hover figcaption b{color:var(--ink)}
/* galerie na tmavě modré bez bílé karty: popisek při najetí nesmí zmodrat do pozadí */
.sec-navy .gal:not(.gal-motivy) figure:hover figcaption,.sec-navy .gal:not(.gal-motivy) figure:hover figcaption b{color:#fff}
/* Reference: pás log je hned pod galerií, text „Tiskli jsme pro“ až pod ním */
.clients-sec{padding:26px 0 34px}
.clients-sec .clients{margin:0;padding-top:0;border-top:0}
/* úvod: ceník na telefonu po jednom výrobku se šipkami (vzor vytvorsipotisk.cz), stránka je kratší */
.shop-slider{position:relative}
.shop-arrow{display:none}
@media (max-width:640px){
  .shop-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding:4px 0 6px}
  .shop-row::-webkit-scrollbar{display:none}
  .shop-card{flex:0 0 100%;scroll-snap-align:center;padding:14px 16px 16px}
  .shop-slider .shop-card{padding-left:44px;padding-right:44px}
  .shop-ph{aspect-ratio:auto;height:210px}
  .shop-card h3{font-size:22px;min-height:0}
  .shop-card .btn{font-size:15px;white-space:normal}
  .shop-arrow{display:grid;place-items:center;position:absolute;top:50%;z-index:2;width:44px;height:64px;margin-top:-32px;border:0;background:none;color:var(--red);cursor:pointer}
  .shop-arrow svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
  .shop-arrow.prev{left:0}.shop-arrow.next{right:0}
  .shop-arrow:disabled{opacity:.25;cursor:default}
}
/* Reference: červená dlaždice „Sem patří vaše tričko“ je stejně velká jako fotky, nenatahuje se o výšku popisku */
.gal .tile{aspect-ratio:1;align-self:start;min-height:0}

/* ===== Rozpohybované ikony (10. 10. 2026): po najetí myší se ikona jednou „zahraje“ =====
   Tužka přejede zleva doprava a skočí zpět, nůžky střihnou, tričko se zhoupne, obrázek se vykreslí,
   gravírování nakreslí čáru. Jen pro lidi, kteří nemají vypnuté animace. */
.ia{overflow:visible}
@media (prefers-reduced-motion:no-preference){
  .btn:hover .ia-pen g,.btn:focus-visible .ia-pen g{animation:ia-write .9s cubic-bezier(.4,0,.2,1)}
  .btn:hover .ia-tel path,.btn:focus-visible .ia-tel path{transform-origin:12px 12px;animation:ia-ring .8s ease-in-out}
  .tx:hover .ia-shirt path,.tx:focus-visible .ia-shirt path{transform-origin:12px 3px;animation:ia-swing 1.1s ease-in-out}
  .tx:hover .ia-cut .a,.tx:focus-visible .ia-cut .a{transform-origin:12px 12px;animation:ia-snip-a .8s ease-in-out}
  .tx:hover .ia-cut .b,.tx:focus-visible .ia-cut .b{transform-origin:12px 12px;animation:ia-snip-b .8s ease-in-out}
  .tx:hover .ia-pic circle,.tx:focus-visible .ia-pic circle{transform-origin:9px 10px;animation:ia-pop .9s cubic-bezier(.34,1.56,.64,1)}
  .tx:hover .ia-pic path,.tx:focus-visible .ia-pic path{stroke-dasharray:1;animation:ia-draw .9s ease-out}
  .tx:hover .ia-grav g,.tx:focus-visible .ia-grav g{animation:ia-engrave 1.1s cubic-bezier(.4,0,.2,1)}
  .tx:hover .ia-grav .l,.tx:focus-visible .ia-grav .l{stroke-dasharray:1;animation:ia-line 1.1s cubic-bezier(.4,0,.2,1)}
}
@keyframes ia-write{0%{transform:none}15%{transform:translate(-4px,0)}32%{transform:translate(-1px,-1.5px)}48%{transform:translate(1.5px,0)}64%{transform:translate(4px,-1.5px)}80%{transform:translate(6px,0)}100%{transform:none}}
@keyframes ia-ring{0%,100%{transform:none}15%{transform:rotate(-14deg)}30%{transform:rotate(12deg)}45%{transform:rotate(-10deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
@keyframes ia-swing{0%,100%{transform:none}20%{transform:rotate(-12deg)}45%{transform:rotate(9deg)}65%{transform:rotate(-6deg)}85%{transform:rotate(3deg)}}
@keyframes ia-snip-a{0%,50%,100%{transform:none}25%,75%{transform:rotate(16deg)}}
@keyframes ia-snip-b{0%,50%,100%{transform:none}25%,75%{transform:rotate(-16deg)}}
@keyframes ia-pop{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:none}}
@keyframes ia-draw{0%,15%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
@keyframes ia-engrave{0%{transform:none}12%{transform:translate(-1px,0)}70%{transform:translate(12px,0)}82%{transform:translate(12px,-2px)}100%{transform:none}}
@keyframes ia-line{0%,12%{stroke-dashoffset:1}70%,100%{stroke-dashoffset:0}}

/* Medaile (10. 10. 2026, přání Luboše): dvě fotky medailí a jeden vzorník stuh, ne vzorník dvakrát */
.medal-photos .mp-med img{aspect-ratio:1/1;object-fit:cover}
.medal-photos figure{cursor:zoom-in}
.medal-photos figure:focus-visible{outline:3px solid var(--yellow,#FFD23F);outline-offset:3px;border-radius:14px}

/* ===== Fotka v záhlaví stránky se ukazuje celá (11. 10. 2026) =====
   Luboš má fotky většinou 1080 × 1350 px a nechtěl zbytečné ořezy. Rámeček se proto řídí tvarem fotky:
   čtvercová je čtverec, instagramová 4:5 je 4:5. Nic se neořízne, ani starší fotky na šířku. */
.page-head figure img,.page-head figure img[src]{aspect-ratio:auto;height:auto;object-fit:contain}
@media (max-width:1024px){.page-head figure img,.page-head figure img[src]{aspect-ratio:auto}}

/* ===== Lubošovy finální úpravy, 11. 10. 2026 ===== */
/* pruh pod úvodem: výhody menší a blíž u sebe, loga zasahují dál doleva */
@media (min-width:1181px){
  .stats{gap:clamp(12px,1.2vw,20px);padding-right:clamp(12px,1.2vw,20px)}
  .stats li{gap:8px;font-size:11.5px;line-height:1.2;white-space:normal}
  .stats span{max-width:17ch}
  .stats b{font-size:15px;white-space:nowrap}
  .stats svg{width:26px;height:26px}
  .stats li:first-child svg{width:30px;height:30px}
  .stats li:first-child b{font-size:15.5px}
}
/* Gravírování, medaile podle Lubošovy makety: vlevo text, vpravo jedna fotka; pod tím dva vzorníky stuh; pak tři realizace */
.medal-photos.mp-one{display:block}
.medal-photos.mp-one img{aspect-ratio:4/5;height:auto;object-fit:cover}
.medal-charts-sec{padding:44px 0;background:var(--bg-soft,#F6F8FB)}
.medal-photos.mp-charts{grid-template-columns:3fr 2fr;gap:clamp(16px,3vw,44px);align-items:stretch;background:#fff;border-radius:18px;padding:clamp(14px,2.4vw,34px);box-shadow:var(--sh-sm,0 2px 10px rgba(15,39,72,.06))}
.medal-photos.mp-charts img{aspect-ratio:auto;width:100%;height:100%;object-fit:contain;border-radius:10px;background:#fff}
.medal-photos.mp-charts .mp-vz img{aspect-ratio:3/2;height:auto}
.medal-photos.mp-charts .mp-chart img{aspect-ratio:auto}
.sec-real{padding-top:56px;padding-bottom:64px}
.sec-real .sec-head{margin-bottom:22px}
.medal-photos.mp-real{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2.4vw,36px);max-width:900px}
.medal-photos.mp-real img{aspect-ratio:7/8;height:auto;object-fit:cover;border-radius:6px}
@media (max-width:900px){
  .medal-photos.mp-charts{grid-template-columns:1fr}
  .medal-photos.mp-charts .mp-chart img{max-height:70vw}
}
@media (max-width:560px){.medal-photos.mp-real{gap:8px}}
/* menu na telefonu: větší písmo a položky blíž u sebe */
@media (max-width:1180px){
  .top.top-red.open .nav{gap:0}
  .top.top-red .nav > a,.top.top-red .nav-toggle{font-size:25px;padding:13px 0 13px 24px}
}

/* ===== Rozpohybované ikony na všech stránkách (12. 10. 2026) =====
   Tlačítka Zavolat, poptávka a konfigurátor mají ikonu všude (doplňuje sestavení), k tomu telefon v hlavičce,
   pruh výhod a spodní lišta na telefonu. */
@media (prefers-reduced-motion:no-preference){
  .btn:hover .ia-shirt path,.btn:focus-visible .ia-shirt path{transform-origin:12px 3px;animation:ia-swing 1.1s ease-in-out}
  .top-phone:hover svg path,.top-phone:focus-visible svg path{transform-origin:12px 12px;animation:ia-ring .8s ease-in-out}
  .stats li:hover svg{animation:ia-bounce .7s cubic-bezier(.34,1.56,.64,1)}
  .bar a:active svg{animation:ia-bounce .5s cubic-bezier(.34,1.56,.64,1)}
  .foot a:hover > svg{animation:ia-bounce .6s cubic-bezier(.34,1.56,.64,1)}
}
@keyframes ia-bounce{0%,100%{transform:none}35%{transform:translateY(-4px) scale(1.12)}70%{transform:translateY(1px)}}

/* ===== Lubošovy úpravy 12. 10. 2026 ===== */
/* pruh pod úvodem: stejné mezery mezi výhodami (text se láme na pevném místě, položka je široká jen jako její text) */
@media (min-width:1181px){
  .stats li{white-space:nowrap}
  .stats span{max-width:none}
}
/* hotové motivy: šedomodré pozadí karty, ať je vidět i bílý motiv s průhledným pozadím; obrázek se neořezává */
.gal.gal-motivy img{background:#93A0B2}
/* kruh „navrhnout tričko“ na telefonu: velikost podle obrázku, ať sedí celý na černém tričku */
@media (max-width:900px){
  .konf-ring{left:15.5%;top:24%;width:24%;font-size:clamp(10.5px,3.5vw,17px);line-height:1.05}
  .konf-ring circle{stroke-width:6}
}
/* Gravírování: realizace medailí je galerie z administrace (Luboš 12. 10. 2026), fotek může být libovolně */
.gal.gal-medaile{max-width:980px}
/* sekce hotových motivů bez jediného motivu se schová (např. Trička na vodu, než Luboš nahraje nové) */
section:has(> .wrap > [data-gallery-cat]):not(:has([data-gallery-cat] figure)){display:none}

/* ---------- Cookie lišta a mapa na souhlas (13. 10. 2026) ---------- */
.ck{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:980px;margin:0 auto;background:var(--navy);color:#fff;border-radius:20px;box-shadow:0 24px 60px -18px rgba(10,25,50,.6);padding:20px 24px}
.ck-in{display:flex;align-items:center;gap:24px}
.ck-t{flex:1;min-width:0}
.ck-t b{display:block;font-size:18px;margin-bottom:4px}
.ck-t p{margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.86)}
.ck-t a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ck-b{display:flex;gap:10px;flex:none}
.ck .btn{min-height:48px;padding:0 22px;border:2px solid #fff;background:transparent;color:#fff;white-space:nowrap}
.ck .btn:hover,.ck .btn:focus-visible{background:#fff;color:var(--navy)}
@media (max-width:760px){.ck{left:10px;right:10px;bottom:10px;padding:18px}.ck-in{flex-direction:column;align-items:stretch;gap:14px}.ck-b{flex-direction:column}.ck .btn{width:100%;justify-content:center}}
.map-consent{position:relative;min-height:420px;border-radius:20px;background:var(--plane,#EEF2F7);box-shadow:var(--sh-md);overflow:hidden;display:grid;place-items:center}
.map-consent .map{position:absolute;inset:0;height:100%;border-radius:0;box-shadow:none}
.map-consent.is-on .map-ask{display:none}
.map-ask{max-width:380px;padding:28px;text-align:center}
.map-ask b{display:block;font-size:20px;color:var(--navy);margin-bottom:8px}
.map-ask p{margin:0 0 18px;font-size:16px;line-height:1.5;color:var(--muted,#55637A)}
@media (max-width:900px){.map-consent{min-height:320px}}
.copy a[data-cookies]{margin-left:14px}
.rev-who .rev-av{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:20px;line-height:1}
.rev-sec .rev .rev-who .rev-av{color:#fff}
@media print{.ck{display:none}}

/* ---------- Audit mobilu 13. 10. 2026 ---------- */
/* kruh „navrhnout tričko“: levým okrajem přesahoval z těla černého trička na rukáv; teď je na středu hrudi */
.konf-ring{left:20%}
@media (max-width:900px){.konf-ring{left:19.5%}}
/* kruh je vždy kruh, i v prohlížeči bez aspect-ratio */
.konf-ring::before{content:"";grid-area:1/1;padding-top:100%}
.konf-ring span{grid-area:1/1}
/* obrázek triček si drží místo už před načtením (stránka neposkočí) a kruh se ukáže až na načteném tričku */
.lhero-art{width:100%}
.lhero-art img{height:auto}
.lhero-art[data-wait] .konf-ring{visibility:hidden}
/* katalog: odkazy pod výrobkem pohodlně na prst */
@media (max-width:900px){.kat-zoom,.kat-link{min-height:44px;display:flex;align-items:center}}
/* plakátové karty (Gravírování): na úzkém telefonu druhá karta přetékala z obrazovky, sloupce se teď smí zúžit */
@media (max-width:640px){.posters.p3,.posters.p4{grid-template-columns:repeat(2,minmax(0,1fr))}.poster{min-width:0}.poster b{overflow-wrap:break-word;max-width:100%}}
@media (max-width:380px){
  .poster b{font-size:19px}
  .poster-btn{width:100%;justify-content:center;font-size:12px;letter-spacing:0;padding:0 6px}
}
/* popisky fotek se nelámou uprostřed slova (Cybernaut/ica), jen když se slovo opravdu nevejde */
.gal figcaption{overflow-wrap:break-word;hyphens:auto}
@media (max-width:360px){.gal.gal-tech figcaption,.gal.gal-wall4 figcaption{font-size:12px;line-height:1.25}}
/* závěrečná výzva: telefon na tlačítku zůstane na jednom řádku i na 320 px */
@media (max-width:380px){.cta .btns .btn,.mid-cta .btn,.photo-cta .btn{white-space:nowrap;font-size:15px;padding-left:12px;padding-right:12px}}
/* formuláře v obchodních podmínkách: popisek má na telefonu víc místa */
@media (max-width:520px){.terms-form th[scope="row"]{width:58%}.terms-form td{min-width:0}}
/* malé tlačítko v krocích objednávky pohodlně na prst */
@media (max-width:900px){.steps .btn-sm{min-height:46px}}
/* spodní odkazy patičky dál od sebe */
@media (max-width:640px){.copy{row-gap:10px;font-size:14px}.copy a[data-cookies]{margin-left:18px}}
.legal .tick + p,.tick + p{margin-top:16px}
/* logo dodavatele (zvětšené Cotton Classics) nepřeteče z karty */
.sup-logo{overflow:hidden}
/* dělit jen opravdu dlouhá slova (Cybernautica), krátká nechat celá */
.gal figcaption{hyphenate-limit-chars:11 5 4;-webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:4}
/* cookie lišta na telefonu: tlačítka vedle sebe a menší text, ať nezabere půl obrazovky */
@media (max-width:760px){.ck{padding:14px 16px}.ck-in{gap:12px}.ck-t b{font-size:16px;margin-bottom:2px}.ck-t p{font-size:14px;line-height:1.4}.ck-b{flex-direction:row}.ck .btn{flex:1;width:auto;padding:0 8px;font-size:15px}}
@media (max-width:1024px){.sup-logo img[alt="Cotton Classics"]{transform:scale(1.2)}}
/* kruh „navrhnout tričko“ na ose černého trička (13. 10. večer, Jakub z telefonu): dřív byl na středu viditelné černé plochy,
   takže proti límci seděl vlevo. Je o kus níž, kde modré tričko nepřekáží, a velikost má podle obrázku i na počítači. */
.konf-ring{left:22%;top:25%;width:25%}
@media (max-width:900px){.konf-ring{left:22.5%;top:26%;width:24%}}
.konf-ring{font-size:clamp(17px,1.6vw,22px)}
@media (max-width:900px){.konf-ring{font-size:clamp(10.5px,3.5vw,17px)}}

/* ============ Vlastní kalendář v poptávce (13. 10. 2026) ============ */
.dp-wrap{position:relative;display:block}
.field .dp-input{cursor:pointer;padding-right:46px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315335E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat right 14px center/20px}
.dp-pop{position:absolute;z-index:40;top:calc(100% + 8px);left:0;width:100%;min-width:272px;max-width:340px;background:#fff;border:1px solid var(--line-strong);border-radius:16px;box-shadow:0 18px 40px -16px rgba(15,39,72,.45);padding:14px}
.dp-pop[hidden]{display:none}
.dp-pop.dp-up{top:auto;bottom:calc(100% + 8px)}
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.dp-title{font-weight:700;color:var(--ink);font-size:16px}
.dp-nav{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--paper);color:var(--ink);cursor:pointer;display:grid;place-items:center;padding:0;transition:background .2s}
.dp-nav::before{content:"";width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateX(2px) rotate(45deg)}
.dp-next::before{transform:translateX(-2px) rotate(-135deg)}
.dp-nav:hover:not(:disabled){background:#e3ebf5}
.dp-nav:disabled{opacity:.35;cursor:default}
.dp-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.dp-dow{font-size:12px;font-weight:600;color:var(--muted);text-align:center;padding:6px 0}
.dp-day{aspect-ratio:1;min-width:0;border:0;padding:0;background:none;border-radius:50%;font:inherit;font-size:15px;color:var(--ink);cursor:pointer;transition:background .15s}
.dp-day:hover:not(:disabled){background:var(--paper)}
.dp-day.is-today{box-shadow:inset 0 0 0 1.5px var(--blue)}
.dp-day[aria-pressed="true"],.dp-day[aria-pressed="true"]:hover{background:var(--red);color:#fff;font-weight:700;box-shadow:none}
.dp-day:disabled{color:#b3bac6;cursor:default}
.dp-foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:6px;border-top:1px solid var(--line-strong)}
.dp-link{border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--blue-dark);cursor:pointer;min-height:40px;padding:0 6px;border-radius:6px}
.dp-link:hover:not(:disabled){text-decoration:underline}
.dp-link:disabled{color:#b3bac6;cursor:default}
.dp-nav:focus-visible,.dp-day:focus-visible,.dp-link:focus-visible{outline:2px solid var(--red);outline-offset:1px}