/* SmartHomeCZ custom styles
   v1.0 — DNAKE landing + Homepage framework
   2026-09-11
*/

/* =========================================================
   DNAKE LANDING
========================================================= */
.dnake-page{--i:#101114;--m:#60656d;--l:#e2e6ea;--b:#1769e0;--d:#111318;width:100%;margin:18px 0 60px;color:var(--i);font-family:inherit}
.dnake-page *{box-sizing:border-box}
.dnake-page h2,.dnake-page h3,.dnake-page p{margin-top:0}
.dnake-page a{text-decoration:none}
.dnake-hero{display:grid;grid-template-columns:1.08fr .92fr;min-height:510px;margin-bottom:28px;overflow:hidden;background:radial-gradient(circle at 82% 18%,#dbe9ff 0,transparent 35%),linear-gradient(135deg,#f8fafc,#eef2f6);border:1px solid var(--l);border-radius:24px}
.dnake-hero__copy{display:flex;flex-direction:column;justify-content:center;padding:64px 28px 64px 60px}
.dnake-kicker{margin-bottom:16px;font-size:12px;font-weight:800;letter-spacing:.17em}
.dnake-hero h2{margin-bottom:22px;font-size:clamp(46px,5vw,70px);line-height:.98;letter-spacing:-.045em;font-weight:600}
.dnake-lead{max-width:620px;margin-bottom:28px;color:var(--m);font-size:18px;line-height:1.6}
.dnake-actions{display:flex;gap:12px;flex-wrap:wrap}
.dnake-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 25px;border-radius:8px;font-weight:700}
.dnake-btn--primary{color:#fff!important;background:var(--d)}
.dnake-btn--secondary{color:var(--i)!important;background:#fff;border:1px solid #ccd2d8}
.dnake-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.dnake-tags span{padding:7px 10px;background:#ffffffb8;border:1px solid #dce1e6;border-radius:20px;font-size:12px;font-weight:700}
.dnake-hero__visual{position:relative;min-height:410px}
.dnake-monitor{position:absolute;width:70%;aspect-ratio:1.55;top:19%;left:4%;padding:10px;background:#fff;border-radius:20px;box-shadow:0 30px 70px #141e322e;transform:rotate(-5deg)}
.dnake-monitor__screen{position:relative;width:100%;height:100%;overflow:hidden;background:linear-gradient(145deg,#151b25,#1f66bc);border-radius:12px}
.dnake-screen-ring{position:absolute;width:90px;height:90px;right:18%;top:23%;border:16px solid #ffffff38;border-radius:50%}
.dnake-screen-label{position:absolute;left:24px;bottom:20px;color:#fff;font-weight:800;letter-spacing:.18em}
.dnake-doorstation{position:absolute;width:108px;height:265px;right:10%;bottom:11%;background:linear-gradient(150deg,#20242a,#08090b);border:5px solid #353b42;border-radius:18px;box-shadow:0 28px 50px #0003}
.dnake-visual-badge{position:absolute;right:12%;top:12%;padding:9px 13px;background:#fff;border-radius:30px;box-shadow:0 10px 30px #141e321f;font-size:12px;font-weight:800}
.dnake-section{padding:44px 0}
.dnake-section-head{max-width:720px;margin-bottom:32px}
.dnake-section-head>span{display:block;margin-bottom:9px;font-size:12px;font-weight:800;letter-spacing:.16em}
.dnake-section-head h2{margin-bottom:12px;font-size:clamp(32px,4vw,46px);line-height:1.08;letter-spacing:-.03em}
.dnake-section-head p{color:var(--m);font-size:16px;line-height:1.6}
.dnake-solution-grid,.dnake-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dnake-card{position:relative;display:flex;flex-direction:column;min-height:220px;padding:25px;color:var(--i)!important;background:#fff;border:1px solid var(--l);border-radius:15px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.dnake-card__number{margin-bottom:34px;color:#9ca3ab;font-size:12px;font-weight:700}
.dnake-card h3{margin-bottom:10px;font-size:21px}
.dnake-card p{flex:1;color:var(--m);line-height:1.5}
.dnake-card-link{position:static;color:var(--i)!important;font-size:13px;font-weight:800}
.dnake-card-link:after{content:"";position:absolute;inset:0;z-index:1}
.dnake-card:hover{transform:translateY(-3px);border-color:#cbd3dc;box-shadow:0 14px 32px #141e3214}
.dnake-tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0 42px}
.dnake-tech{position:relative;display:flex;flex-direction:column;min-height:400px;padding:48px;border-radius:22px;transition:transform .2s ease,box-shadow .2s ease}
.dnake-tech h2{max-width:520px;margin:0 0 20px;font-size:clamp(34px,4vw,48px);line-height:1.04;letter-spacing:-.035em}
.dnake-tech p{max-width:570px;line-height:1.6}
.dnake-tech--dark{color:#fff;background:#17365f}
.dnake-tech--dark h2,.dnake-tech--dark h3{color:#fff!important}
.dnake-tech--dark p{color:#dbe7f5}
.dnake-tech--light{background:#edf3fa;border:1px solid #dbe4ee}
.dnake-feature-list{display:flex;flex-wrap:wrap;gap:8px;margin:25px 0 32px}
.dnake-feature-list span{padding:8px 10px;border:1px solid currentColor;border-radius:20px;font-size:12px;opacity:.8}
.dnake-text-link{position:static;margin-top:auto;color:inherit!important;font-weight:800}
.dnake-text-link:after{content:"";position:absolute;inset:0;z-index:1}
.dnake-tech:hover{transform:translateY(-3px);box-shadow:0 16px 38px #141e321a}
.dnake-benefits{margin:24px 0;border-top:1px solid var(--l);border-bottom:1px solid var(--l);gap:0}
.dnake-benefits div{padding:27px 22px;border-right:1px solid var(--l)}
.dnake-benefits div:last-child{border-right:0}
.dnake-benefits strong,.dnake-benefits span{display:block}
.dnake-benefits strong{margin-bottom:7px}
.dnake-benefits span{color:var(--m);font-size:13px}
.dnake-faq details{padding:18px 0;border-top:1px solid var(--l)}
.dnake-faq details:last-child{border-bottom:1px solid var(--l)}
.dnake-faq summary{cursor:pointer;font-size:17px;font-weight:700}
.dnake-faq details p{max-width:760px;margin:14px 0 0;color:var(--m);line-height:1.6}

/* DNAKE landing-only cleanup */
body.dnake-landing .category-title,
body.dnake-landing .box-topProducts,
body.dnake-landing ul.subcategories.with-image{display:none!important}

@media(max-width:1000px){
  .dnake-hero{grid-template-columns:1fr}
  .dnake-hero__copy{padding:48px}
  .dnake-hero__visual{min-height:340px}
  .dnake-solution-grid,.dnake-benefits{grid-template-columns:repeat(2,1fr)}
  .dnake-tech-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .dnake-page{margin-top:5px}
  .dnake-hero{border-radius:15px}
  .dnake-hero__copy{padding:36px 24px}
  .dnake-hero h2{font-size:41px}
  .dnake-lead{font-size:16px}
  .dnake-actions{display:grid}
  .dnake-btn{width:100%}
  .dnake-hero__visual{min-height:275px}
  .dnake-monitor{width:72%}
  .dnake-doorstation{width:80px;height:205px}
  .dnake-section{padding:34px 0}
  .dnake-solution-grid,.dnake-benefits{grid-template-columns:1fr}
  .dnake-card{min-height:0}
  .dnake-card__number{margin-bottom:22px}
  .dnake-tech{min-height:0;padding:32px 24px}
  .dnake-benefits div{border-right:0;border-bottom:1px solid var(--l)}
}

/* =========================================================
   HOMEPAGE — CLEANUP + CAROUSEL
========================================================= */

/* Hide the old Shoptet homepage title ("O NÁS") above our custom homepage. */
body.smarthome-home #content>h1,
body.smarthome-home .welcome-wrapper>h1,
body.smarthome-home .homepage-box>h1{display:none!important}

/* Keep the carousel wide, but noticeably lower than the original 1400x680 ratio. */
body.smarthome-home #carousel{margin-bottom:42px}
body.smarthome-home #carousel .carousel-inner{min-height:0!important}
body.smarthome-home #carousel .carousel-inner>.item>img,
body.smarthome-home #carousel .carousel-inner>.item>a>img,
body.smarthome-home #carousel .carousel-inner>.item img{
  display:block;
  width:100%!important;
  height:clamp(320px,30vw,440px)!important;
  max-height:440px;
  object-fit:cover;
  object-position:center;
}

/* =========================================================
   HOMEPAGE — FRAMEWORK
========================================================= */
.shc-home{
  --shc-i:#111318;
  --shc-m:#5d6670;
  --shc-l:#dfe4ea;
  --shc-s:#f5f7fa;
  max-width:1320px;
  margin:0 auto 64px;
  padding:0 24px;
  color:var(--shc-i);
}
.shc-home *{box-sizing:border-box}
.shc-home a{text-decoration:none}
.shc-section{margin:0 0 58px}
.shc-section-head{max-width:900px;margin:0 0 30px}
.shc-kicker{display:block;margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.shc-title{margin:0 0 14px;font-size:clamp(32px,4vw,54px);line-height:1.05;font-weight:300;letter-spacing:-.025em}
.shc-lead{max-width:860px;margin:0;color:var(--shc-m);font-size:18px;line-height:1.6}

/* 2x2 solution cards */
.shc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.shc-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(220px,.92fr);
  min-height:350px;
  overflow:hidden;
  background:var(--shc-s);
  border:1px solid var(--shc-l);
  border-radius:26px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.shc-card:hover{transform:translateY(-3px);border-color:#cbd3dc;box-shadow:0 14px 34px #141e3214}
.shc-card__content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:30px 18px 30px 30px;
}
.shc-card__eyebrow{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.shc-card h3{margin:0 0 12px;font-size:clamp(28px,2.55vw,40px);line-height:1.04;font-weight:400;letter-spacing:-.025em}
.shc-card p{margin:0 0 20px;color:var(--shc-m);font-size:16px;line-height:1.55}
.shc-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.shc-tags li{padding:7px 10px;background:#ffffffb8;border:1px solid #d8dee5;border-radius:999px;font-size:12px;font-weight:700}
.shc-card-link{position:static;margin-top:auto;color:var(--shc-i)!important;font-size:15px;font-weight:800}
a.shc-card-link:after{content:"";position:absolute;inset:0;z-index:4}
.shc-card-link--disabled{color:#68727d!important;cursor:default}
.shc-card__visual{position:relative;min-height:100%;overflow:hidden}
.shc-card__visual:before,
.shc-card__visual:after{content:"";position:absolute;border-radius:999px}
.shc-card__visual:before{width:230px;height:230px;right:-40px;top:-35px;background:#ffffff80}
.shc-card__visual:after{width:180px;height:180px;left:8%;bottom:-55px;background:#ffffff66}

/* Temporary graphic placeholders. Later we replace only this visual area with product images. */
.shc-card__placeholder{
  position:absolute;
  inset:auto 24px 28px auto;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(78%,260px);
  aspect-ratio:1;
  padding:18px;
  border:1px solid #dce3ea;
  border-radius:28px;
  background:linear-gradient(145deg,#fff,#e8edf3);
  box-shadow:0 20px 44px #141e3220;
  color:#66717d;
  font-size:13px;
  font-weight:800;
  letter-spacing:.12em;
  line-height:1.35;
  text-align:center;
}
.shc-card--intercom{background:linear-gradient(135deg,#f7f9fc,#e6eef8)}
.shc-card--intercom .shc-card__placeholder{background:linear-gradient(145deg,#183b66,#2c6ab6);border-color:#315f91;color:#fff}
.shc-card--smart{background:linear-gradient(135deg,#fafbfc,#eef2f6)}
.shc-card--smart .shc-card__placeholder{background:linear-gradient(145deg,#ffffff,#e9eef4)}
.shc-card--voip{background:linear-gradient(135deg,#f4f7fa,#e4ebf2)}
.shc-card--voip .shc-card__placeholder{background:linear-gradient(145deg,#2a3037,#111318);border-color:#303840;color:#fff}
.shc-card--video{background:linear-gradient(135deg,#f8f9fb,#e9eef3)}
.shc-card--video .shc-card__placeholder{background:linear-gradient(145deg,#eff3f7,#dce4eb)}

/* About */
.shc-about{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch}
.shc-about__main{padding:32px;border:1px solid var(--shc-l);border-radius:26px;background:#fff}
.shc-about__main .shc-title{text-transform:uppercase}
.shc-about__main p:not(.shc-kicker){margin:0 0 15px;color:var(--shc-m);font-size:17px;line-height:1.7}
.shc-about__main p:last-child{margin-bottom:0}
.shc-about__main strong{color:var(--shc-i)}
.shc-about__points{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.shc-about-point{padding:22px;border:1px solid var(--shc-l);border-radius:20px;background:#f8fafc}
.shc-about-point strong{display:block;margin:0 0 7px;font-size:17px}
.shc-about-point span{display:block;color:var(--shc-m);font-size:14px;line-height:1.55}

/* Benefits */
.shc-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--shc-l);border-bottom:1px solid var(--shc-l)}
.shc-benefit{padding:26px 22px;border-right:1px solid var(--shc-l)}
.shc-benefit:last-child{border-right:0}
.shc-benefit strong{display:block;margin:0 0 8px;font-size:18px}
.shc-benefit p{margin:0;color:var(--shc-m);font-size:14px;line-height:1.6}

/* CTA */
.shc-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:34px;border:1px solid var(--shc-l);border-radius:26px;background:linear-gradient(135deg,#f8fafc,#eef3f8)}
.shc-cta strong{display:block;margin:0 0 8px;font-size:28px;line-height:1.15}
.shc-cta span{display:block;color:var(--shc-m);font-size:16px;line-height:1.55}
.shc-actions{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}
.shc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border-radius:10px;font-weight:700}
.shc-btn--primary{color:#fff!important;background:#111318}
.shc-btn--secondary{color:#111318!important;background:#fff;border:1px solid #ccd2d8}

/* Homepage responsive */
@media(max-width:1100px){
  .shc-card{grid-template-columns:minmax(0,1.15fr) minmax(180px,.85fr)}
  .shc-card__content{padding-right:12px}
}
@media(max-width:1000px){
  body.smarthome-home #carousel .carousel-inner>.item>img,
  body.smarthome-home #carousel .carousel-inner>.item>a>img,
  body.smarthome-home #carousel .carousel-inner>.item img{
    height:auto!important;
    max-height:none;
    aspect-ratio:16/7;
  }
  .shc-home{padding:0 18px;margin-bottom:48px}
  .shc-grid{grid-template-columns:1fr}
  .shc-card{grid-template-columns:minmax(0,1.15fr) minmax(210px,.85fr);min-height:330px}
  .shc-about{grid-template-columns:1fr}
  .shc-benefits{grid-template-columns:repeat(2,1fr)}
  .shc-benefit:nth-child(2){border-right:0}
  .shc-benefit:nth-child(-n+2){border-bottom:1px solid var(--shc-l)}
}
@media(max-width:640px){
  body.smarthome-home #carousel{margin-bottom:32px}
  body.smarthome-home #carousel .carousel-inner>.item>img,
  body.smarthome-home #carousel .carousel-inner>.item>a>img,
  body.smarthome-home #carousel .carousel-inner>.item img{
    height:auto!important;
    aspect-ratio:16/9;
  }
  .shc-home{padding:0 15px;margin-bottom:38px}
  .shc-section{margin-bottom:42px}
  .shc-section-head{margin-bottom:22px}
  .shc-title{font-size:38px}
  .shc-lead{font-size:16px}
  .shc-grid{gap:16px}
  .shc-card{display:block;min-height:455px;border-radius:22px}
  .shc-card__content{padding:26px 24px 205px}
  .shc-card h3{font-size:32px}
  .shc-card__visual{position:absolute;inset:auto 0 0;height:195px;min-height:0}
  .shc-card__placeholder{width:160px;right:24px;bottom:18px;border-radius:22px}
  .shc-about__main{padding:24px;border-radius:22px}
  .shc-about__points{grid-template-columns:1fr}
  .shc-benefits{grid-template-columns:1fr}
  .shc-benefit{border-right:0;border-bottom:1px solid var(--shc-l)}
  .shc-benefit:last-child{border-bottom:0}
  .shc-cta{display:block;padding:26px 24px;border-radius:22px}
  .shc-actions{display:grid;margin-top:22px}
  .shc-btn{width:100%}
}

/* =========================================================
   SMART HOME LANDING
   /smart-home/
========================================================= */

.shl-page{
  --shl-i:#111318;
  --shl-m:#606872;
  --shl-l:#dfe5eb;
  --shl-s:#f5f7fa;
  --shl-blue:#1769e0;
  width:100%;
  margin:20px 0 60px;
  color:var(--shl-i);
  font-family:inherit;
}

.shl-page *{
  box-sizing:border-box;
}

.shl-page h2,
.shl-page h3,
.shl-page p{
  margin-top:0;
}

.shl-page a{
  text-decoration:none;
}


/* =========================================================
   HERO
========================================================= */

.shl-hero{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
  min-height:480px;
  margin:0 0 60px;
  overflow:hidden;
  background:
    radial-gradient(circle at 84% 15%,#dceaff 0,transparent 31%),
    linear-gradient(135deg,#f8fafc,#edf2f7);
  border:1px solid var(--shl-l);
  border-radius:26px;
}

.shl-hero__copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:54px 28px 54px 48px;
}

.shl-kicker{
  display:block;
  margin:0 0 14px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.shl-hero h2{
  max-width:610px;
  margin:0 0 20px;
  font-size:clamp(38px,4.2vw,60px);
  line-height:1;
  font-weight:400;
  letter-spacing:-.04em;
}

.shl-lead{
  max-width:610px;
  margin:0 0 28px;
  color:var(--shl-m);
  font-size:17px;
  line-height:1.65;
}

.shl-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.shl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 21px;
  border-radius:9px;
  font-weight:700;
}

.shl-btn--primary{
  color:#fff!important;
  background:#111318;
}

.shl-btn--secondary{
  color:#111318!important;
  background:#fff;
  border:1px solid #ccd4dc;
}

.shl-hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:28px;
}

.shl-hero-tags span{
  padding:7px 10px;
  background:#ffffffb8;
  border:1px solid #dce2e8;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
}


/* HERO GRAPHIC */

.shl-hero__visual{
  position:relative;
  min-height:420px;
}

.shl-panel{
  position:absolute;
  z-index:2;
  top:17%;
  right:8%;
  width:72%;
  aspect-ratio:1.18;
  padding:24px;
  overflow:hidden;
  color:#fff;
  background:
    linear-gradient(145deg,#18212c,#06080b);
  border:7px solid #2b3138;
  border-radius:22px;
  box-shadow:0 35px 65px #1b243329;
  transform:perspective(800px) rotateY(-8deg);
}

.shl-panel:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,#ffffff24 0,transparent 30%,transparent 72%,#ffffff0c);
}

.shl-panel__time{
  display:block;
  margin:0 0 24px;
  font-size:34px;
  font-weight:300;
}

.shl-panel__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.shl-panel__grid span{
  padding:13px 7px;
  background:#ffffff13;
  border:1px solid #ffffff14;
  border-radius:10px;
  font-size:9px;
  font-weight:700;
  text-align:center;
}

.shl-panel small{
  position:absolute;
  right:20px;
  bottom:15px;
  opacity:.6;
  font-size:9px;
  font-weight:700;
  letter-spacing:.18em;
}

.shl-device{
  position:absolute;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 38px #141e3226;
}

.shl-device--switch{
  left:4%;
  bottom:14%;
  width:112px;
  height:112px;
  color:#7aa9ff;
  background:linear-gradient(145deg,#16191e,#030405);
  border:4px solid #292e34;
  border-radius:14px;
}

.shl-device--switch2{
  left:31%;
  bottom:4%;
  width:124px;
  height:124px;
  color:#6b91dd;
  background:#fff;
  border:1px solid #d8dfe6;
  border-radius:15px;
}

.shl-device--switch i,
.shl-device--switch2 i{
  width:32px;
  height:32px;
  border:3px solid currentColor;
  border-radius:50%;
}

.shl-device--switch2 i+i{
  margin-left:11px;
}

.shl-device--switch span,
.shl-device--switch2 span{
  position:absolute;
  bottom:10px;
  font-size:9px;
  font-weight:800;
}

.shl-device--sensor{
  right:4%;
  bottom:2%;
  width:94px;
  height:94px;
  background:#fff;
  border:1px solid #dbe2e8;
  border-radius:50%;
}

.shl-device--sensor i{
  width:48px;
  height:48px;
  background:
    radial-gradient(circle,#fff 18%,#dfe6ec 19% 35%,#fff 36%);
  border:1px solid #d5dde4;
  border-radius:50%;
}

.shl-device--door{
  right:26%;
  bottom:-3%;
  width:92px;
  height:95px;
  box-shadow:none;
}

.shl-device--door i:first-child{
  width:35px;
  height:88px;
  background:#fff;
  border:1px solid #d9e0e6;
  border-radius:18px;
  box-shadow:0 12px 25px #141e3214;
}

.shl-device--door i:last-child{
  width:21px;
  height:64px;
  margin-left:7px;
  background:#fff;
  border:1px solid #d9e0e6;
  border-radius:12px;
  box-shadow:0 12px 25px #141e3214;
}


/* =========================================================
   SECTIONS
========================================================= */

.shl-section{
  margin:0 0 64px;
}

.shl-section-head{
  max-width:760px;
  margin:0 0 30px;
}

.shl-section-head>span{
  display:block;
  margin:0 0 9px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
}

.shl-section-head h2{
  margin:0 0 13px;
  font-size:clamp(32px,3.7vw,48px);
  line-height:1.06;
  font-weight:400;
  letter-spacing:-.03em;
}

.shl-section-head p{
  margin:0;
  color:var(--shl-m);
  font-size:16px;
  line-height:1.65;
}


/* =========================================================
   CATEGORY CARDS
========================================================= */

.shl-category-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.shl-category{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(170px,.92fr);
  min-height:330px;
  overflow:hidden;
  background:linear-gradient(135deg,#fafbfd,#edf2f7);
  border:1px solid var(--shl-l);
  border-radius:22px;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.shl-category:hover{
  transform:translateY(-3px);
  border-color:#cbd4dd;
  box-shadow:0 16px 38px #141e3213;
}

.shl-category__copy{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  padding:27px 10px 27px 28px;
}

.shl-category__number{
  position:absolute;
  top:24px;
  right:0;
  color:#a4adb6;
  font-size:11px;
  font-weight:700;
}

.shl-category__eyebrow{
  display:block;
  margin:0 0 14px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
}

.shl-category h3{
  margin:0 0 12px;
  font-size:clamp(27px,2.6vw,37px);
  line-height:1.04;
  font-weight:400;
  letter-spacing:-.025em;
}

.shl-category p{
  margin:0 0 18px;
  color:var(--shl-m);
  font-size:14px;
  line-height:1.6;
}

.shl-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:20px;
}

.shl-tags span{
  padding:6px 9px;
  background:#ffffffb8;
  border:1px solid #d8dfe6;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
}

.shl-category-link{
  position:static;
  margin-top:auto;
  color:var(--shl-i)!important;
  font-size:13px;
  font-weight:800;
}

.shl-category-link:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
}

.shl-category__graphic{
  position:relative;
  min-height:100%;
}

.shl-category__graphic:before{
  content:"";
  position:absolute;
  width:210px;
  height:210px;
  top:-35px;
  right:-55px;
  background:#ffffff77;
  border-radius:50%;
}

.shl-category__graphic:after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  left:0;
  bottom:-48px;
  background:#ffffff55;
  border-radius:50%;
}


/* TEMPORARY DEVICE GRAPHICS */

.shl-product-shape{
  position:absolute;
  z-index:2;
  right:22px;
  bottom:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(82%,210px);
  aspect-ratio:1;
  background:#fff;
  border:1px solid #dce3e9;
  box-shadow:0 20px 42px #141e321d;
}

.shl-product-shape--switch{
  color:#6e96df;
  border-radius:19px;
}

.shl-product-shape--switch i{
  width:45px;
  height:45px;
  border:4px solid currentColor;
  border-radius:50%;
}

.shl-product-shape--switch i+i{
  margin-left:14px;
}

.shl-product-shape--dimmer{
  color:#fff;
  background:linear-gradient(145deg,#24272c,#030405);
  border-color:#32363c;
  border-radius:18px;
}

.shl-product-shape--dimmer i{
  width:35px;
  height:35px;
  margin:0 5px;
  border:2px solid #cbd1d8;
  border-radius:50%;
}

.shl-product-shape--socket{
  flex-direction:column;
  border-radius:20px;
}

.shl-product-shape--socket span{
  width:58px;
  height:58px;
  margin-bottom:16px;
  border:3px solid #42474d;
  border-radius:50%;
}

.shl-product-shape--socket i{
  width:55px;
  height:10px;
  margin:4px;
  background:#30353b;
  border-radius:3px;
}

.shl-product-shape--sensor{
  border-radius:50%;
}

.shl-product-shape--sensor span{
  width:105px;
  height:105px;
  border-radius:50%;
  background:
    radial-gradient(circle,#fff 15%,#dfe6ed 16% 32%,#fff 33% 46%,#dce4eb 47%);
  border:1px solid #d8dfe5;
}

.shl-product-shape--thermo{
  flex-direction:column;
  color:#fff;
  background:#111318;
  border-color:#2a2f35;
  border-radius:19px;
}

.shl-product-shape--thermo strong{
  font-size:48px;
  font-weight:300;
}

.shl-product-shape--thermo small{
  margin-top:4px;
  color:#9da7b2;
  font-weight:700;
}

.shl-product-shape--panel{
  aspect-ratio:1.2;
  color:#fff;
  background:linear-gradient(145deg,#181d25,#050608);
  border:7px solid #30363d;
  border-radius:20px;
}

.shl-product-shape--panel div{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  width:70%;
}

.shl-product-shape--panel i{
  aspect-ratio:1;
  background:#ffffff13;
  border:1px solid #ffffff19;
  border-radius:9px;
}


/* =========================================================
   SCENARIOS
========================================================= */

.shl-scenarios{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.shl-scenarios article{
  min-height:215px;
  padding:25px;
  background:#fff;
  border:1px solid var(--shl-l);
  border-radius:19px;
}

.shl-scenarios article>span{
  display:block;
  margin:0 0 34px;
  color:#9ca5ae;
  font-size:11px;
  font-weight:700;
}

.shl-scenarios h3{
  margin:0 0 9px;
  font-size:20px;
}

.shl-scenarios p{
  margin:0;
  color:var(--shl-m);
  font-size:14px;
  line-height:1.6;
}


/* =========================================================
   SECURITY / AUTOMATION
========================================================= */

.shl-security{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
  margin:0 0 64px;
  padding:38px;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(circle at 85% 10%,#326bb2 0,transparent 35%),
    linear-gradient(135deg,#17365f,#101b2b);
  border-radius:24px;
}

.shl-security h2{
  max-width:500px;
  margin:0 0 15px;
  color:#fff!important;
  font-size:clamp(31px,3.5vw,45px);
  line-height:1.06;
  font-weight:400;
}

.shl-security p{
  max-width:590px;
  margin:0;
  color:#d7e4f2;
  font-size:15px;
  line-height:1.7;
}

.shl-security-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:24px;
}

.shl-security-tags span{
  padding:7px 10px;
  border:1px solid #ffffff4a;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
}

.shl-security__automation{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.shl-security__automation>div{
  width:43%;
  min-height:170px;
  padding:22px;
  background:#ffffff12;
  border:1px solid #ffffff21;
  border-radius:17px;
}

.shl-security__automation small,
.shl-security__automation strong{
  display:block;
}

.shl-security__automation small{
  margin:0 0 34px;
  color:#a9bdd4;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
}

.shl-security__automation strong{
  font-size:17px;
  line-height:1.4;
}

.shl-arrow{
  font-size:28px;
}


/* =========================================================
   BENEFITS
========================================================= */

.shl-benefits{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--shl-l);
  border-bottom:1px solid var(--shl-l);
}

.shl-benefits>div{
  padding:25px 20px;
  border-right:1px solid var(--shl-l);
}

.shl-benefits>div:last-child{
  border-right:0;
}

.shl-benefits strong,
.shl-benefits span{
  display:block;
}

.shl-benefits strong{
  margin-bottom:8px;
  font-size:17px;
}

.shl-benefits span{
  color:var(--shl-m);
  font-size:13px;
  line-height:1.6;
}


/* =========================================================
   CTA
========================================================= */

.shl-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:32px;
  background:
    linear-gradient(135deg,#f8fafc,#edf2f7);
  border:1px solid var(--shl-l);
  border-radius:24px;
}

.shl-cta>div:first-child{
  max-width:630px;
}

.shl-cta strong,
.shl-cta span{
  display:block;
}

.shl-cta strong{
  margin-bottom:8px;
  font-size:27px;
  line-height:1.15;
}

.shl-cta span{
  color:var(--shl-m);
  font-size:15px;
  line-height:1.6;
}

.shl-cta__actions{
  display:flex;
  gap:10px;
  flex-shrink:0;
}


/* =========================================================
   SMART HOME RESPONSIVE
========================================================= */

@media(max-width:1150px){

  .shl-hero{
    grid-template-columns:1fr;
  }

  .shl-hero__visual{
    min-height:370px;
  }

  .shl-panel{
    width:52%;
    right:15%;
  }

  .shl-category{
    grid-template-columns:1fr;
    min-height:510px;
  }

  .shl-category__copy{
    padding-right:28px;
    padding-bottom:220px;
  }

  .shl-category__graphic{
    position:absolute;
    inset:auto 0 0;
    height:220px;
    min-height:0;
  }

  .shl-product-shape{
    width:180px;
    right:27px;
    bottom:22px;
  }

  .shl-security{
    grid-template-columns:1fr;
  }
}


@media(max-width:850px){

  .shl-category-grid{
    grid-template-columns:1fr;
  }

  .shl-category{
    min-height:470px;
  }

  .shl-scenarios{
    grid-template-columns:1fr;
  }

  .shl-scenarios article{
    min-height:0;
  }

  .shl-scenarios article>span{
    margin-bottom:20px;
  }

  .shl-benefits{
    grid-template-columns:1fr 1fr;
  }

  .shl-benefits>div:nth-child(2){
    border-right:0;
  }

  .shl-benefits>div:nth-child(-n+2){
    border-bottom:1px solid var(--shl-l);
  }

  .shl-cta{
    display:block;
  }

  .shl-cta__actions{
    margin-top:22px;
  }
}


@media(max-width:640px){

  .shl-page{
    margin-top:8px;
    margin-bottom:40px;
  }

  .shl-hero{
    min-height:0;
    margin-bottom:44px;
    border-radius:20px;
  }

  .shl-hero__copy{
    padding:34px 24px 30px;
  }

  .shl-hero h2{
    font-size:39px;
  }

  .shl-lead{
    font-size:15px;
  }

  .shl-actions{
    display:grid;
  }

  .shl-btn{
    width:100%;
  }

  .shl-hero__visual{
    min-height:315px;
  }

  .shl-panel{
    top:13%;
    right:6%;
    width:68%;
    padding:17px;
    border-width:5px;
    border-radius:17px;
  }

  .shl-panel__time{
    margin-bottom:15px;
    font-size:25px;
  }

  .shl-panel__grid{
    gap:6px;
  }

  .shl-panel__grid span{
    padding:9px 4px;
    font-size:7px;
  }

  .shl-device--switch{
    left:5%;
    width:82px;
    height:82px;
  }

  .shl-device--switch2{
    left:25%;
    width:92px;
    height:92px;
  }

  .shl-device--switch i,
  .shl-device--switch2 i{
    width:23px;
    height:23px;
    border-width:2px;
  }

  .shl-device--sensor{
    width:70px;
    height:70px;
  }

  .shl-device--sensor i{
    width:38px;
    height:38px;
  }

  .shl-device--door{
    right:23%;
    width:65px;
  }

  .shl-device--door i:first-child{
    width:25px;
    height:66px;
  }

  .shl-device--door i:last-child{
    width:15px;
    height:48px;
  }

  .shl-section{
    margin-bottom:45px;
  }

  .shl-section-head{
    margin-bottom:22px;
  }

  .shl-section-head h2{
    font-size:35px;
  }

  .shl-category-grid{
    gap:15px;
  }

  .shl-category{
    min-height:455px;
    border-radius:20px;
  }

  .shl-category__copy{
    padding:25px 23px 200px;
  }

  .shl-category__number{
    right:22px;
  }

  .shl-category h3{
    font-size:31px;
  }

  .shl-category__graphic{
    height:185px;
  }

  .shl-product-shape{
    width:145px;
    right:22px;
    bottom:18px;
  }

  .shl-security{
    padding:29px 23px;
    border-radius:20px;
  }

  .shl-security__automation{
    display:grid;
    margin-top:10px;
  }

  .shl-security__automation>div{
    width:100%;
    min-height:0;
  }

  .shl-security__automation small{
    margin-bottom:15px;
  }

  .shl-arrow{
    transform:rotate(90deg);
    text-align:center;
  }

  .shl-benefits{
    grid-template-columns:1fr;
  }

  .shl-benefits>div{
    border-right:0;
    border-bottom:1px solid var(--shl-l);
  }

  .shl-benefits>div:last-child{
    border-bottom:0;
  }

  .shl-cta{
    padding:26px 22px;
    border-radius:20px;
  }

  .shl-cta strong{
    font-size:25px;
  }

  .shl-cta__actions{
    display:grid;
  }
}
/* =========================================================
   SMART HOME CATEGORY — SHOPTET CLEANUP
   /smart-home/
========================================================= */

/* Hide original category heading above custom landing */
body.type-category:has(.shl-page) #content > h1 {
  display:none!important;
}

/* Hide Shoptet automatic subcategory tiles */
body.type-category:has(.shl-page) ul.subcategories,
body.type-category:has(.shl-page) .subcategories.with-image {
  display:none!important;
}

/* Hide "Produkty teprve připravujeme" empty-category message */
body.type-category:has(.shl-page) .category-perex.empty-content-category {
  display:none!important;
}