/* WRAPS by AppleFix — konfigurátor. Vše scopováno pod .wraps-app, ať to nesahá na zbytek webu. */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&display=swap');
@property --angle-1{syntax:"<angle>";inherits:false;initial-value:-75deg}
@property --angle-2{syntax:"<angle>";inherits:false;initial-value:-45deg}
.wraps-app{
  --bg:#000000;--bg-soft:#0a0a0c;--txt:#f5f5f7;--txt-dim:#a1a1a6;
  --line:rgba(255,255,255,0.10);--glass:rgba(255,255,255,0.10);--glass-strong:rgba(255,255,255,0.16);
  --radius:18px;--accent:#2997ff;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;display:block}
.wraps-app *{box-sizing:border-box;margin:0;padding:0}
.wraps-app a{color:inherit;text-decoration:none}
.wraps-app .wrap{max-width:1240px;margin:0 auto;padding:0 28px}

/* LIQUID GLASS BUTTON */
.wraps-app .glass-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 30px;font-size:16px;font-weight:600;
  letter-spacing:.2px;color:#fff;cursor:pointer;border:none;background:rgba(255,255,255,0.08);
  border-radius:16px;backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 2px 2px rgba(255,255,255,0.30),inset 0 -2px 3px rgba(0,0,0,0.22),0 10px 24px rgba(0,0,0,0.45);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,background .35s,--angle-1 .5s ease,--angle-2 .5s ease}
.wraps-app .glass-btn>*{position:relative;z-index:3}
.wraps-app .glass-btn::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(var(--angle-2),rgba(255,255,255,0) 0%,rgba(255,255,255,0.42) 42% 50%,rgba(255,255,255,0) 58%);
  background-size:200% 200%;background-position:0% 50%;background-repeat:no-repeat;mix-blend-mode:screen;
  transition:background-position .55s cubic-bezier(.2,.8,.2,1)}
.wraps-app .glass-btn::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  padding:1.5px;box-sizing:border-box;
  background:conic-gradient(from var(--angle-1) at 50% 50%,rgba(255,255,255,0.9),rgba(255,255,255,0) 5% 40%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0) 60% 95%,rgba(255,255,255,0.9)),linear-gradient(180deg,rgba(255,255,255,0.2),rgba(255,255,255,0.2));
  -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,linear-gradient(#000 0 0);mask-composite:exclude}
.wraps-app .glass-btn:hover{background:rgba(255,255,255,0.14);transform:translateY(-2px);
  box-shadow:inset 0 2px 2px rgba(255,255,255,0.5),inset 0 -2px 3px rgba(0,0,0,0.22),0 18px 36px rgba(41,151,255,0.22)}
.wraps-app .glass-btn:hover::before{background-position:25% 50%}
.wraps-app .glass-btn:hover::after{--angle-1:-125deg}
.wraps-app .glass-btn.pill{border-radius:100px}.wraps-app .glass-btn.small{padding:10px 20px;font-size:14px}
.wraps-app .ghost-btn{background:rgba(255,255,255,0.05)}

/* PROMO + HEADER */
.wraps-app .promo{background:#ffffff;border-bottom:1px solid rgba(0,0,0,0.08);text-align:center;font-size:12.5px;
  letter-spacing:.4px;color:#1d1d1f;padding:9px}.wraps-app .promo b{color:#000;font-weight:700}
.wraps-app .wraps-header{position:sticky;top:0;z-index:50;background:rgba(0,0,0,0.72);backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);border-bottom:1px solid var(--line)}
.wraps-app .hrow{display:flex;align-items:center;gap:26px;height:74px}
.wraps-app .brand{display:flex;align-items:center;flex:1 1 0;justify-content:center;cursor:pointer}
.wraps-app .brand img.logo-img{height:38px;width:auto;display:block}
.wraps-app .wraps-footer .brand img.logo-img{height:30px}
.wraps-app .search{flex:0 1 560px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.06);
  border:1px solid var(--line);border-radius:100px;padding:11px 20px;color:var(--txt-dim);font-size:14px;max-width:560px;margin:0}
.wraps-app .icons{display:flex;align-items:center;gap:22px;flex:1 1 0;justify-content:center;color:var(--txt)}
.wraps-app .icons svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6;cursor:pointer;opacity:.92}
.wraps-app .cart-wrap{position:relative}
.wraps-app .cart-badge{position:absolute;top:-7px;right:-9px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;
  width:17px;height:17px;border-radius:50%;display:grid;place-items:center}
.wraps-app .bnav{border-top:1px solid var(--line)}
.wraps-app .bnav ul{display:flex;justify-content:center;gap:42px;list-style:none;height:50px;align-items:center}
.wraps-app .bnav li{font-size:14px;font-weight:500;color:var(--txt-dim);cursor:pointer;position:relative;transition:color .25s}
.wraps-app .bnav li:hover,.wraps-app .bnav li.active{color:#fff}
.wraps-app .bnav li.active::after{content:"";position:absolute;left:0;right:0;bottom:-17px;height:2px;background:#fff;border-radius:2px}
/* HORNÍ MENU + dropdown (Výběr zařízení) */
.wraps-app .bnav .wraps-menu>li>a{display:inline-flex;align-items:center;gap:5px;color:#f1f1f3;font-weight:600;transition:color .25s,text-shadow .3s}
.wraps-app .bnav .wraps-menu>li:hover>a{color:#fff;text-shadow:0 0 10px rgba(255,255,255,0.55),0 0 22px rgba(255,255,255,0.22)}
.wraps-app .bnav .has-drop{position:relative}
.wraps-app .bnav .caret{font-size:9px;opacity:.7;transition:transform .25s}
.wraps-app .bnav .has-drop:hover .caret{transform:rotate(180deg)}
.wraps-app .bnav .wraps-drop{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);z-index:60;
  min-width:190px;height:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;
  padding:8px;margin-top:14px;
  background:rgba(18,18,21,0.72);backdrop-filter:blur(26px) saturate(1.8);-webkit-backdrop-filter:blur(26px) saturate(1.8);
  border:1px solid rgba(255,255,255,0.12);border-radius:16px;
  box-shadow:0 26px 54px -14px rgba(0,0,0,0.75),inset 0 1px 0 rgba(255,255,255,0.20);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s,transform .28s}
.wraps-app .bnav .wraps-drop::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.wraps-app .bnav .has-drop:hover .wraps-drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.wraps-app .bnav .wraps-drop li{height:auto;font-weight:500}
.wraps-app .bnav .wraps-drop a{display:block;padding:10px 14px;border-radius:10px;font-size:14px;color:var(--txt-dim);white-space:nowrap;transition:background .2s,color .2s}
.wraps-app .bnav .wraps-drop a:hover{background:rgba(255,255,255,0.08);color:#fff}

/* HERO */
.wraps-app .hero{position:relative;padding:96px 0 70px;text-align:center;overflow:hidden}
.wraps-app .hero::before{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:900px;height:700px;
  background:radial-gradient(closest-side,rgba(41,151,255,0.22),transparent 70%);filter:blur(20px);z-index:0}
.wraps-app .hero::after{content:"";position:absolute;bottom:-40%;left:20%;width:600px;height:500px;
  background:radial-gradient(closest-side,rgba(175,82,222,0.16),transparent 70%);z-index:0}
.wraps-app .hero .inner{position:relative;z-index:2}
.wraps-app .eyebrow{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:20px}
.wraps-app .hero h1{font-size:64px;line-height:1.04;font-weight:800;letter-spacing:-1.5px;margin-bottom:22px}
.wraps-app .hero h1 .grad{background:linear-gradient(120deg,#fff,#9fc7ff 60%,#c79bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.wraps-app .hero p{font-size:19px;color:var(--txt-dim);max-width:560px;margin:0 auto 38px}
.wraps-app .hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.wraps-app .montage{position:relative;z-index:2;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;max-width:880px;margin:62px auto 0}
.wraps-app .dev{border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.12);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.wraps-app .dev:hover{transform:translateY(-12px)}
.wraps-app .dev.phone{width:118px;height:236px}.wraps-app .dev.tab{width:172px;height:226px}.wraps-app .dev.phone.lift{transform:translateY(-26px)}
.wraps-app .skin1{background:linear-gradient(150deg,#ff6a3d,#ff2d7e 55%,#7a2bff)}
.wraps-app .skin2{background:linear-gradient(150deg,#11998e,#38ef7d)}
.wraps-app .skin3{background:linear-gradient(150deg,#3a3a3c,#1c1c1e);position:relative}
.wraps-app .skin4{background:linear-gradient(150deg,#f7971e,#ffd200)}
.wraps-app .skin5{background:repeating-linear-gradient(45deg,#222 0 8px,#2c2c2e 8px 16px)}
.wraps-app .carbon::after{content:"";position:absolute;inset:0;border-radius:21px;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.18),transparent 50%)}

/* SPLIT HERO (homepage: text na jedné straně, obrázek do ztracena na druhé) */
.wraps-app .hero-split{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:36px;
  max-width:1240px;margin:0 auto;padding:18px 28px 8px;min-height:clamp(420px,56vh,600px)}
.wraps-app .hero-split .hero-copy{text-align:left}
.wraps-app .hero-split .hero-copy .eyebrow{margin-bottom:18px}
.wraps-app .hero-split .hero-copy h1{font-size:clamp(34px,4.6vw,64px);line-height:1.04;font-weight:800;letter-spacing:-1.2px;margin-bottom:20px}
.wraps-app .hero-split .hero-copy h1 .grad{background:linear-gradient(120deg,#fff,#9fc7ff 60%,#c79bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.wraps-app .hero-split .hero-copy p{font-size:clamp(15px,1.35vw,19px);color:var(--txt-dim);max-width:480px;margin:0 0 34px}
.wraps-app .hero-split .hero-cta{display:flex;gap:16px;justify-content:flex-start;flex-wrap:wrap}
.wraps-app .hero-media{position:relative;height:100%;min-height:clamp(340px,46vh,560px);
  /* spodní fade do ztracena (na kontejneru) — top zůstává u headeru */
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 68%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 68%,transparent 100%)}
.wraps-app .hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  image-rendering:auto;
  /* boční fade do ztracena (na obrázku) — kombinace s kontejnerem = mizí do všech stran kromě vrchu */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%,#000 76%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 24%,#000 76%,transparent 100%)}
/* homepage hero: obrázek přímo k header menu (bez mezery) */
.wraps-app .hero-home{padding:0}
.wraps-app .hero-home .hero-split{padding:0;gap:0;align-items:stretch;min-height:clamp(440px,60vh,640px)}
.wraps-app .hero-home .hero-copy{align-self:center;padding:36px 24px 36px 28px}
.wraps-app .hero-home .hero-media{height:auto;min-height:100%}

/* PRUH DESIGNŮ (homepage) */
.wraps-app .dstrip{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;margin-top:8px}
.wraps-app .dstrip-item{cursor:default}
.wraps-app .dstrip-thumb{aspect-ratio:1/1;border-radius:16px;background-size:cover;background-position:center;
  border:1px solid var(--line);box-shadow:0 10px 26px rgba(0,0,0,0.45);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.wraps-app .dstrip-item:hover .dstrip-thumb{transform:translateY(-6px);border-color:rgba(255,255,255,0.24)}
.wraps-app .dstrip-name{font-size:13.5px;font-weight:600;text-align:center;margin-top:10px;color:var(--txt)}
.wraps-app .dstrip-cta{display:flex;justify-content:center;margin-top:40px}

/* STRÁNKA DESIGNY — střídavé řádky design + text */
.wraps-app .wd-rows{display:flex;flex-direction:column;gap:62px;padding:6px 0 10px}
.wraps-app .wd-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px}
.wraps-app .wd-row.rev .wd-media{order:2}
.wraps-app .wd-skin{aspect-ratio:4/3;border-radius:24px;background-size:cover;background-position:center;
  border:1px solid var(--line);box-shadow:0 26px 60px rgba(0,0,0,0.55)}
.wraps-app .wd-copy h3{font-size:30px;font-weight:800;letter-spacing:-.5px;margin:6px 0 14px}
.wraps-app .wd-copy p{color:var(--txt-dim);font-size:16px;line-height:1.7;margin-bottom:24px;max-width:520px}

/* KONTAKT */
.wraps-app .contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:8px auto 0;max-width:900px}
.wraps-app .contact-card{padding:26px 24px;border-radius:20px;background:rgba(255,255,255,0.03);border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);transition:all .4s cubic-bezier(.2,.8,.2,1)}
.wraps-app .contact-card:hover{background:var(--glass);border-color:rgba(255,255,255,0.22);transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,0,0.5)}
.wraps-app .contact-card h3{font-size:20px;font-weight:700;margin-bottom:6px}
.wraps-app .contact-card .addr{color:var(--txt-dim);font-size:14.5px;margin-bottom:16px;line-height:1.55}
.wraps-app .contact-card .crow{display:flex;align-items:center;gap:10px;font-size:14.5px;margin:8px 0;color:var(--txt)}
.wraps-app .contact-card .crow svg{flex-shrink:0;opacity:.7}
.wraps-app .contact-card .crow a{color:var(--accent)}
.wraps-app .contact-card .crow a:hover{text-decoration:underline}
.wraps-app .contact-card .hours{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;color:var(--txt-dim);line-height:1.9}
.wraps-app .contact-card .hours b{color:#fff;font-weight:600}
.wraps-app .contact-card .contact-map{margin-top:18px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,0.10);line-height:0;box-shadow:0 10px 26px rgba(0,0,0,0.4)}
.wraps-app .contact-card .contact-map iframe{width:100%;height:200px;border:0;display:block;filter:invert(0.92) hue-rotate(180deg) saturate(0.75) brightness(0.95) contrast(0.92)}
@media(max-width:760px){.wraps-app .contact-grid{grid-template-columns:1fr}}

/* SECTIONS */
.wraps-app .block{padding:78px 0;position:relative}
.wraps-app .block.alt{background:linear-gradient(180deg,#000,#08080a)}
.wraps-app .shead{text-align:center;margin-bottom:14px}
.wraps-app .step-tag{display:inline-block;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:14px}
.wraps-app .hero h1,.wraps-app .shead h2,.wraps-app .step-tag,.wraps-app .wd-copy h3{font-family:"Chakra Petch",-apple-system,BlinkMacSystemFont,"Inter",sans-serif}
.wraps-app .shead h2{font-size:38px;font-weight:800;letter-spacing:-.5px}
.wraps-app .shead p{color:var(--txt-dim);font-size:16px;margin-top:10px}
.wraps-app .crumb{text-align:center;color:var(--txt-dim);font-size:13px;margin:18px 0 40px}
.wraps-app .crumb b{color:#fff}.wraps-app .crumb span{cursor:pointer}.wraps-app .crumb span:hover{color:#fff}

/* každý krok = samostatná obrazovka */
.wraps-app .step{display:none}
.wraps-app .step.show{display:block;animation:wraps-rise .5s cubic-bezier(.2,.8,.2,1)}
@keyframes wraps-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* BRAND TILES */
.wraps-app .brands{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:46px}
.wraps-app .brand-cell{position:relative;aspect-ratio:1/1;cursor:pointer}
.wraps-app .brand-glow{position:absolute;z-index:0;border-radius:50%;
  width:var(--gsize,68%);height:var(--gsize,68%);left:var(--gx,50%);top:var(--gy,62%);transform:translate(-50%,-50%);
  background:radial-gradient(circle,var(--glow,transparent),transparent 70%);
  filter:blur(var(--gblur,28px));opacity:var(--gop,0.85);transition:all .5s cubic-bezier(.2,.8,.2,1)}
.wraps-app .brand-cell:hover .brand-glow{opacity:1;filter:blur(calc(var(--gblur,28px) + 8px));transform:translate(-50%,-50%) scale(1.14)}
.wraps-app .brand-tile{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(155deg,rgba(255,255,255,0.16),rgba(255,255,255,0.05) 45%,rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.20);
  backdrop-filter:blur(14px) saturate(190%);-webkit-backdrop-filter:blur(14px) saturate(190%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.42),inset 0 -22px 44px rgba(255,255,255,0.05),0 14px 34px rgba(0,0,0,0.4);
  transition:all .45s cubic-bezier(.2,.8,.2,1)}
.wraps-app .brand-tile::before{content:"";position:absolute;top:0;left:0;right:0;height:55%;
  background:linear-gradient(180deg,rgba(255,255,255,0.22),transparent);opacity:.7;pointer-events:none}
.wraps-app .brand-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 30px rgba(255,255,255,0.05)}
.wraps-app .brand-cell:hover .brand-tile{transform:translateY(-6px);border-color:rgba(255,255,255,0.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.55),0 26px 56px rgba(0,0,0,0.5)}
.wraps-app .brand-tile.sel{border-color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,0.5),0 0 0 1px rgba(255,255,255,0.6),0 18px 44px rgba(0,0,0,0.5)}
.wraps-app .brand-logo{position:relative;z-index:2;width:66%;height:42%;background:#fff;opacity:.97;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.4));transition:opacity .4s,transform .45s cubic-bezier(.2,.8,.2,1)}
.wraps-app .brand-cell:hover .brand-logo{opacity:1;transform:scale(1.05)}

/* TYPE TILES — fotka přes celou buňku + liquid glass přes ni (Petr-Knoll: conic obrys + odlesk). Fotka ostrá. */
.wraps-app .types{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px;margin-top:10px}
.wraps-app .type-tile{display:flex;flex-direction:column;gap:12px;cursor:pointer}
.wraps-app .type-glass{position:relative;z-index:1;--bw:1.5px;aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:#0c0c0e;
  box-shadow:inset 0 2px 2px rgba(0,0,0,0.10),inset 0 -2px 2px rgba(255,255,255,0.28),
    0 8px 16px -6px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.06);
  transition:all 400ms cubic-bezier(0.25,1,0.5,1),--angle-1 500ms ease,--angle-2 500ms ease}
.wraps-app .type-glass>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform 500ms cubic-bezier(0.25,1,0.5,1)}
.wraps-app .type-glass::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;
  background:linear-gradient(var(--angle-2),rgba(255,255,255,0) 0%,rgba(255,255,255,0.30) 42% 50%,rgba(255,255,255,0) 58%);
  background-size:200% 200%;background-position:0% 50%;background-repeat:no-repeat;
  mix-blend-mode:screen;pointer-events:none;
  transition:background-position 520ms cubic-bezier(0.25,1,0.5,1),--angle-2 520ms}
.wraps-app .type-glass::after{content:"";position:absolute;z-index:3;inset:0;border-radius:inherit;
  width:calc(100% + var(--bw));height:calc(100% + var(--bw));top:calc(-1 * var(--bw) / 2);left:calc(-1 * var(--bw) / 2);
  padding:var(--bw);box-sizing:border-box;pointer-events:none;
  background:conic-gradient(from var(--angle-1) at 50% 50%,rgba(255,255,255,0.85),rgba(255,255,255,0) 5% 40%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0) 60% 95%,rgba(255,255,255,0.85)),
    linear-gradient(180deg,rgba(255,255,255,0.18),rgba(255,255,255,0.18));
  -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,linear-gradient(#000 0 0);mask-composite:exclude;
  box-shadow:inset 0 0 0 calc(var(--bw) / 2) rgba(255,255,255,0.28)}
.wraps-app .type-tile:hover .type-glass{transform:translateY(-6px);
  box-shadow:inset 0 2px 2px rgba(0,0,0,0.10),inset 0 -2px 2px rgba(255,255,255,0.45),0 20px 36px -8px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.14)}
.wraps-app .type-tile:hover .type-glass::before{background-position:25% 50%}
.wraps-app .type-tile:hover .type-glass::after{--angle-1:-125deg}
.wraps-app .type-tile:hover .type-glass>img{transform:scale(1.04)}
.wraps-app .type-ph2{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;color:var(--txt-dim);opacity:.4;font-size:36px}
.wraps-app .type-name{font-size:17px;font-weight:600;padding-left:2px}
.wraps-app .type-cnt{font-size:13px;color:var(--txt-dim);padding-left:2px}

/* MODEL GRID — čisté foto, žádné boxy */
.wraps-app .models{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 22px;margin-top:10px}
.wraps-app .model-card{display:flex;flex-direction:column;align-items:center;gap:14px;padding:10px 6px;cursor:pointer;
  background:none;border:none;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.wraps-app .model-card:hover{transform:translateY(-7px)}
.wraps-app .dev-stage{height:200px;width:100%;display:flex;align-items:center;justify-content:center}
.wraps-app .dev-stage img{max-width:82%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,0.6));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.wraps-app .model-card:hover .dev-stage img{transform:scale(1.05)}
.wraps-app .dev-ph{height:200px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--txt-dim);font-size:12.5px;opacity:.45}
.wraps-app .dev-ph span{font-size:30px;opacity:.6}
.wraps-app .model-name{font-size:15px;font-weight:600;text-align:center}.wraps-app .model-meta{font-size:12.5px;color:var(--txt-dim)}

/* DESIGN GRID — Krok 4: design na zvoleném zařízení */
.wraps-app .designs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:10px}
.wraps-app .design-card{display:flex;flex-direction:column;gap:14px;padding:20px 18px 22px;border-radius:20px;cursor:pointer;
  background:rgba(255,255,255,0.03);border:1px solid var(--line);transition:all .4s cubic-bezier(.2,.8,.2,1)}
.wraps-app .design-card:hover{background:var(--glass);transform:translateY(-6px);border-color:rgba(255,255,255,0.24);box-shadow:0 20px 44px rgba(0,0,0,0.5)}
.wraps-app .wrap-prev{position:relative;height:230px;filter:drop-shadow(0 16px 26px rgba(0,0,0,0.55))}
.wraps-app .wrap-prev .layer{position:absolute;inset:0;background-repeat:no-repeat;background-position:center}
.wraps-app .wrap-prev .skin{background-size:cover;-webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.wraps-app .wrap-prev .frame{background-size:contain;mix-blend-mode:overlay}
.wraps-app .design-info{display:flex;justify-content:space-between;align-items:center;gap:8px}
.wraps-app .design-name{font-size:14.5px;font-weight:600}.wraps-app .design-price{font-size:14px;color:var(--txt-dim)}
.wraps-app .design-cta{margin-top:2px}

/* FOOTER */
.wraps-app .wraps-footer{border-top:1px solid var(--line);padding:50px 0 40px;background:#060608;margin-top:30px}
.wraps-app .frow{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.wraps-app .frow .muted{color:var(--txt-dim);font-size:13px}

/* ====== RESPONZIVITA — PC / tablet / mobil ====== */
/* malý desktop / tablet na šířku */
@media(max-width:1100px){
  .wraps-app .hero h1{font-size:52px}
  .wraps-app .brands{grid-template-columns:repeat(4,1fr)}
  .wraps-app .types,.wraps-app .models,.wraps-app .designs{grid-template-columns:repeat(3,1fr)}
  .wraps-app .search{max-width:320px}
}
/* tablet */
@media(max-width:900px){
  .wraps-app .wrap{padding:0 22px}
  .wraps-app .hrow{gap:16px;height:64px}
  .wraps-app .brand img.logo-img{height:32px}
  .wraps-app .search{display:none}
  .wraps-app .brand{flex:0 1 auto;justify-content:flex-start}
  .wraps-app .icons{justify-content:flex-end}
  .wraps-app .hero{padding:66px 0 50px}
  .wraps-app .hero h1{font-size:44px}
  .wraps-app .hero p{font-size:17px}
  .wraps-app .shead h2{font-size:30px}
  .wraps-app .block{padding:56px 0}
  .wraps-app .brands{grid-template-columns:repeat(3,1fr)}
  .wraps-app .types,.wraps-app .models,.wraps-app .designs{grid-template-columns:repeat(2,1fr)}
  .wraps-app .montage{gap:12px;margin-top:44px}
  .wraps-app .dev.phone{width:98px;height:196px}.wraps-app .dev.tab{width:142px;height:188px}
}
/* split hero → na úzko pod sebe (text nahoře, obrázek dole, mizí shora i zdola) */
@media(max-width:760px){
  .wraps-app .hero-split{grid-template-columns:1fr;gap:6px;min-height:0;padding:26px 22px 0;text-align:center}
  .wraps-app .hero-split .hero-copy{text-align:center}
  .wraps-app .hero-split .hero-copy p{margin-left:auto;margin-right:auto}
  .wraps-app .hero-split .hero-cta{justify-content:center}
  .wraps-app .hero-media{height:auto;min-height:0;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 88%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 88%,transparent 100%)}
  .wraps-app .hero-media img{position:relative;height:clamp(240px,52vw,340px);-webkit-mask-image:none;mask-image:none}
  /* Designy: řádky pod sebe, design vždy nahoře */
  .wraps-app .wd-rows{gap:44px}
  .wraps-app .wd-row{grid-template-columns:1fr;gap:22px}
  .wraps-app .wd-row.rev .wd-media{order:0}
  .wraps-app .wd-copy{text-align:center}
  .wraps-app .wd-copy p{margin-left:auto;margin-right:auto}
  .wraps-app .wd-copy h3{font-size:26px}
}
/* mobil */
@media(max-width:600px){
  .wraps-app .wrap{padding:0 16px}
  .wraps-app .icons{gap:16px}
  .wraps-app .icons svg{width:20px;height:20px}
  .wraps-app .bnav ul{gap:20px;font-size:13px;overflow-x:auto;justify-content:flex-start;padding:0 16px;-webkit-overflow-scrolling:touch}
  .wraps-app .bnav li{flex-shrink:0}
  .wraps-app .hero{padding:46px 0 38px}
  .wraps-app .hero h1{font-size:33px;letter-spacing:-.5px}
  .wraps-app .hero p{font-size:15.5px}
  .wraps-app .hero-cta{flex-direction:column;gap:12px}
  .wraps-app .hero-cta .glass-btn{width:100%;justify-content:center}
  .wraps-app .shead h2{font-size:25px}
  .wraps-app .step-tag{font-size:11px}
  .wraps-app .crumb{margin:14px 0 26px;font-size:12px}
  .wraps-app .brands{grid-template-columns:repeat(2,1fr);gap:14px;margin-top:30px}
  .wraps-app .types,.wraps-app .models,.wraps-app .designs{grid-template-columns:repeat(2,1fr);gap:18px 14px}
  .wraps-app .wrap-prev{height:172px}
  .wraps-app .design-card{padding:14px 12px 16px}
  .wraps-app .dev-stage{height:160px}
  .wraps-app .frow{flex-direction:column;text-align:center}
}
/* malý mobil */
@media(max-width:380px){
  .wraps-app .hero h1{font-size:29px}
  .wraps-app .brands{gap:11px}
  .wraps-app .types,.wraps-app .models,.wraps-app .designs{gap:14px 11px}
}

/* ===== KOŠÍK & POKLADNA — Apple Liquid Glass (blokový WooCommerce) ===== */
body.woocommerce-cart,body.woocommerce-checkout{background:#000!important;color:#f5f5f7}
.woocommerce-cart .site-main,.woocommerce-checkout .site-main,.woocommerce-cart .entry-content,.woocommerce-checkout .entry-content,.wc-block-checkout,.wc-block-cart{background:transparent!important;color:#f5f5f7}
body.woocommerce-cart .site-header .site-title,body.woocommerce-cart .site-header .site-title a,body.woocommerce-checkout .site-header .site-title,body.woocommerce-checkout .site-header .site-title a,body.woocommerce-checkout .site-header a,body.woocommerce-cart .site-header a{color:#f5f5f7!important}
.woocommerce-checkout .wc-block-components-title,.woocommerce-cart .wc-block-components-title,.wc-block-components-checkout-step__title,.woocommerce-checkout h1,.woocommerce-cart h1{color:#f5f5f7!important}
.wc-block-components-checkout-step__description,.wc-block-components-text-input label,.wc-block-cart-items__header{color:#a1a1a6!important}
.wc-block-components-checkout-step,.wc-block-checkout__sidebar,.wp-block-woocommerce-checkout-order-summary-block,.wc-block-cart__sidebar,.wp-block-woocommerce-cart-order-summary-block{background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:20px!important;-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 20px 46px rgba(0,0,0,.45)!important;padding:22px 24px!important;margin-bottom:18px}
.wc-block-components-text-input input,.wc-block-components-text-input textarea,.wc-block-components-combobox input,.woocommerce-checkout select,.wc-block-components-address-form input{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:12px!important;color:#f5f5f7!important}
.wc-block-components-text-input input:focus,.wc-block-components-combobox input:focus{border-color:rgba(41,151,255,.7)!important;box-shadow:0 0 0 3px rgba(41,151,255,.18)!important}
.woocommerce-cart .wc-block-components-button:not(.is-link),.woocommerce-checkout .wc-block-components-button:not(.is-link),.wc-block-cart__submit-button{position:relative;overflow:hidden;background:rgba(255,255,255,.10)!important;color:#fff!important;border:none!important;border-radius:100px!important;-webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8);box-shadow:inset 0 2px 2px rgba(255,255,255,.30),inset 0 -2px 3px rgba(0,0,0,.22),0 10px 24px -8px rgba(0,0,0,.6)!important;transition:transform .4s,box-shadow .4s,--angle-1 .5s ease,--angle-2 .5s ease}
.woocommerce-checkout .wc-block-components-button:not(.is-link)::after,.woocommerce-cart .wc-block-components-button:not(.is-link)::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;padding:1.5px;box-sizing:border-box;background:conic-gradient(from var(--angle-1) at 50% 50%,rgba(255,255,255,.9),rgba(255,255,255,0) 5% 40%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 60% 95%,rgba(255,255,255,.9)),linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.2));-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,linear-gradient(#000 0 0);mask-composite:exclude}
.woocommerce-checkout .wc-block-components-button:not(.is-link)::before,.woocommerce-cart .wc-block-components-button:not(.is-link)::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;background:linear-gradient(var(--angle-2),rgba(255,255,255,0) 0%,rgba(255,255,255,.42) 42% 50%,rgba(255,255,255,0) 58%);background-size:200% 200%;background-position:0% 50%;mix-blend-mode:screen;transition:background-position .55s}
.woocommerce-checkout .wc-block-components-button:not(.is-link):hover::after,.woocommerce-cart .wc-block-components-button:not(.is-link):hover::after{--angle-1:-125deg}
.woocommerce-checkout .wc-block-components-button:not(.is-link):hover::before,.woocommerce-cart .wc-block-components-button:not(.is-link):hover::before{background-position:25% 50%}
.wc-block-components-button__text{position:relative;z-index:3}
.wc-block-components-totals-item__value,.wc-block-components-order-summary-item__total,.wc-block-components-product-price__value,.wc-block-formatted-money-amount,.wc-block-components-product-name{color:#f5f5f7!important}
.wc-block-components-totals-item,.wc-block-cart-items__row,.wc-block-components-order-summary-item{border-color:rgba(255,255,255,.08)!important}
.wc-block-checkout__shipping-method-option,.wc-block-components-radio-control__option{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:14px!important;color:#f5f5f7!important;margin-bottom:8px;padding:14px 16px!important}
.wc-block-checkout__shipping-method-option *{color:#f5f5f7!important}
.wc-block-checkout__shipping-method-option--selected,.wc-block-components-radio-control__option-checked,.wc-block-components-radio-control__option--checked-option-highlighted{background:rgba(41,151,255,.12)!important;border-color:rgba(41,151,255,.55)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)!important}
.wc-block-components-quantity-selector{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:10px!important}
.wc-block-components-quantity-selector input,.wc-block-components-quantity-selector__button{color:#f5f5f7!important;background:transparent!important}
.wc-block-checkout a,.wc-block-cart a,.wc-block-components-button.is-link{color:#2997ff!important}


/* ===== DESKTOP SCALE-UP (~30%) + full-width hero (velké obrazovky ≥1100px) ===== */
@media(min-width:1100px){
  .wraps-app .wrap{max-width:1600px}
  .wraps-app .promo{font-size:15px;padding:11px}
  .wraps-app .hrow{height:92px}
  .wraps-app .brand img.logo-img{height:48px}
  .wraps-app .wraps-footer .brand img.logo-img{height:38px}
  .wraps-app .search{font-size:16.5px;padding:15px 26px;flex-basis:700px;max-width:700px}
  .wraps-app .icons{gap:28px}
  .wraps-app .icons svg{width:26px;height:26px}
  .wraps-app .bnav ul{height:62px;gap:54px}
  .wraps-app .bnav li{font-size:17px}
  .wraps-app .eyebrow{font-size:16px;letter-spacing:3.5px;margin-bottom:24px}
  .wraps-app .hero-split .hero-copy h1{font-size:clamp(58px,5vw,88px);margin-bottom:26px}
  .wraps-app .hero-split .hero-copy p{font-size:23px;max-width:600px;margin-bottom:42px}
  .wraps-app .glass-btn{font-size:19px;padding:19px 40px}
  .wraps-app .glass-btn.small{font-size:17px;padding:13px 26px}
  .wraps-app .block{padding:100px 0}
  .wraps-app .shead h2{font-size:50px}
  .wraps-app .shead p{font-size:21px;margin-top:14px}
  .wraps-app .step-tag{font-size:15px}
  .wraps-app .crumb{font-size:16px;margin:24px 0 52px}
  .wraps-app .type-name{font-size:21px}
  .wraps-app .type-cnt{font-size:16px}
  .wraps-app .model-name{font-size:19px}
  .wraps-app .model-meta{font-size:15.5px}
  .wraps-app .dev-stage,.wraps-app .dev-ph{height:260px}
  .wraps-app .design-name{font-size:18px}
  .wraps-app .design-price{font-size:17px}
  .wraps-app .wrap-prev{height:300px}
  .wraps-app .dstrip-name{font-size:16px}
  .wraps-app .contact-card{padding:32px 30px}
  .wraps-app .contact-card h3{font-size:24px}
  .wraps-app .contact-card .addr,.wraps-app .contact-card .crow{font-size:17px}
  .wraps-app .wd-copy h3{font-size:38px}
  .wraps-app .wd-copy p{font-size:19px;max-width:600px}
  .wraps-app .hero-home{padding:0}
  .wraps-app .hero-home .hero-split{max-width:none;width:100%;padding:0;gap:0;grid-template-columns:1fr 1.1fr;align-items:stretch;min-height:clamp(560px,64vh,820px)}
  .wraps-app .hero-home .hero-copy{align-self:center;padding-left:max(28px,calc((100vw - 1600px) / 2 + 28px));padding-right:36px}
  .wraps-app .hero-home .hero-media{height:auto;min-height:100%}
}
.wraps-app .hero-home::after{display:none}