/* Söderslätts Poolservice – Shop Look v2
   Visual layer only. Original main.css is intentionally untouched. */
:root{
  --sl-bg:#f3f6fb;
  --sl-text:#0b1220;
  --sl-muted:#5f6b7a;
  --sl-card:#fff;
  --sl-line:#e6edf5;
  --sl-primary:#15b5ff;
  --sl-primary2:#11cfe5;
  --sl-primary-dark:#0b7fb3;
  --sl-navy:#052b58;
  --sl-navy2:#063c75;
  --sl-shadow:0 8px 28px rgba(11,18,32,.055);
}

html{background:var(--sl-bg)}
body{
  background:var(--sl-bg)!important;
  color:var(--sl-text)!important;
  font:15px/1.5 Arial,sans-serif!important;
}
.container{max-width:1240px!important;padding-left:22px!important;padding-right:22px!important}

/* === SHOP TRUST BAR + WHITE HEADER === */
.topbar{
  position:sticky!important;
  top:0!important;
  z-index:100!important;
  background:#fff!important;
  border-bottom:1px solid #e9eff5!important;
  box-shadow:none!important;
}
.topbar::before{
  content:"✓ Personlig service     ✓ Teknisk poolkompetens     ✓ Service i södra Sverige     ✓ Trygg rådgivning";
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:32px!important;
  padding:5px 22px!important;
  background:linear-gradient(90deg,var(--sl-navy),var(--sl-navy2))!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:.01em!important;
  white-space:pre!important;
  overflow:hidden!important;
}
.nav{
  min-height:94px!important;
  padding:8px 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:24px!important;
}
.brand{
  min-width:230px!important;
  flex:0 0 230px!important;
  font-size:0!important;
  line-height:0!important;
  padding:0!important;
}
.logo{
  display:block!important;
  width:220px!important;
  height:78px!important;
  border-radius:0!important;
  background:url('/images/soderslatts-poolservice-logo.webp') left center/contain no-repeat!important;
  box-shadow:none!important;
  border:0!important;
}
.menu{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:4px 6px!important;
  flex-wrap:wrap!important;
}
.menu a{
  color:#17334f!important;
  background:transparent!important;
  border:1px solid transparent!important;
  border-radius:9px!important;
  font-size:13px!important;
  font-weight:800!important;
  padding:9px 9px!important;
}
.menu a:hover,.menu a[aria-current="page"]{
  color:#0586d8!important;
  background:#f3f9fd!important;
  border-color:#dceaf4!important;
}
.menu .btn-primary,.menu a.btn-primary{
  color:#002b3a!important;
  background:linear-gradient(135deg,var(--sl-primary),var(--sl-primary2))!important;
  border:0!important;
  border-radius:12px!important;
  padding:10px 15px!important;
  font-weight:900!important;
  box-shadow:none!important;
}

/* === LARGE SHOP-LIKE HERO === */
.hero{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 82% 30%,rgba(21,181,255,.22),transparent 28%),
    linear-gradient(135deg,#e9f7ff 0%,#f8fdff 55%,#edf9ff 100%)!important;
  color:var(--sl-text)!important;
  border-bottom:1px solid #deedf6!important;
}
.hero-inner{
  min-height:470px!important;
  padding:58px 0 48px!important;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr)!important;
  gap:40px!important;
  align-items:center!important;
}
.hero-badge{
  display:inline-flex!important;
  background:rgba(255,255,255,.82)!important;
  color:var(--sl-primary-dark)!important;
  border:1px solid rgba(255,255,255,.95)!important;
  border-radius:999px!important;
  box-shadow:0 8px 24px rgba(11,18,32,.07)!important;
  padding:7px 11px!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
}
.hero h1{
  color:#052e62!important;
  font-size:clamp(42px,4.7vw,62px)!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
  margin:14px 0 18px!important;
  max-width:760px!important;
}
.hero p{
  color:#526273!important;
  font-size:17px!important;
  line-height:1.65!important;
  max-width:690px!important;
  margin:0 0 22px!important;
}
.hero-actions{display:flex!important;gap:10px!important;flex-wrap:wrap!important;margin-top:24px!important}
.hero .btn-primary,.hero a.btn-primary{
  background:linear-gradient(135deg,var(--sl-primary),var(--sl-primary2))!important;
  color:#002b3a!important;
  border:0!important;
  border-radius:12px!important;
  padding:12px 18px!important;
  font-weight:900!important;
  box-shadow:0 9px 24px rgba(21,181,255,.20)!important;
}
.hero .btn-ghost,.hero a.btn-ghost{
  background:#fff!important;
  color:#17334f!important;
  border:1px solid #cbdbe7!important;
  border-radius:12px!important;
  padding:12px 18px!important;
  font-weight:800!important;
}
.hero-media{justify-content:center!important}
.hero-media img,.hero-video{
  width:100%!important;
  max-width:500px!important;
  height:330px!important;
  object-fit:cover!important;
  border:10px solid #fff!important;
  border-radius:24px!important;
  box-shadow:0 22px 50px rgba(11,18,32,.14)!important;
}
.hero-dots{opacity:.20!important}
.hero-waves{opacity:.05!important}

/* === SUBPAGE HERO === */
.page-hero{
  background:
    radial-gradient(circle at 86% 25%,rgba(21,181,255,.14),transparent 26%),
    linear-gradient(135deg,#e9f7ff,#f8fdff)!important;
  color:var(--sl-text)!important;
  border-bottom:1px solid #deedf6!important;
  padding:46px 0!important;
}
.page-hero h1{color:#052e62!important;font-size:clamp(34px,4vw,50px)!important;letter-spacing:-.035em!important}
.page-hero p{color:#526273!important;font-size:16px!important;line-height:1.65!important;max-width:780px!important}
.page-hero .btn-ghost{background:#fff!important;color:#17334f!important;border:1px solid #cbdbe7!important;border-radius:12px!important}

/* === CONTENT RHYTHM / PRODUCT-CARD FEEL === */
section{padding:62px 0!important}
section:nth-of-type(even){background:#f8fbfd}
.section-white{background:#fff!important;border-color:#edf1f5!important}
.section-head{
  max-width:none!important;
  text-align:left!important;
  margin:0 0 24px!important;
}
.section-head .tag,.section-head .eyebrow,.tag{
  color:var(--sl-primary-dark)!important;
}
.section-head h2{
  color:#092d58!important;
  font-size:clamp(28px,2.8vw,34px)!important;
  letter-spacing:-.025em!important;
  margin:5px 0 7px!important;
}
.section-head p{color:var(--sl-muted)!important;font-size:15px!important;max-width:760px!important}

.cards,.grid,.pricing-grid,.reviews-grid,.faq-grid{gap:16px!important}
.card,.panel,.mini,.contact-card,.review,.faq-item,.ref-item,.price-card,.package-card{
  background:#fff!important;
  border:1px solid var(--sl-line)!important;
  border-radius:18px!important;
  box-shadow:var(--sl-shadow)!important;
}
.card{padding:18px!important}
.card:hover{transform:translateY(-3px)!important;box-shadow:0 15px 34px rgba(11,18,32,.10)!important}
.card h3,.panel h3{color:#0b2e52!important}
.card p,.panel p,.mini p,.review p{color:var(--sl-muted)!important}
.icon{
  background:#e9f8ff!important;
  border:1px solid #cfeafa!important;
  color:#086b94!important;
  border-radius:13px!important;
}
.card.featured{border-color:#a8e1fb!important;box-shadow:0 10px 30px rgba(21,181,255,.11)!important}
.card.featured .icon{background:linear-gradient(135deg,var(--sl-primary),var(--sl-primary2))!important;color:#003248!important}
.card .badge,.card .tag.tag-corner{background:#e9f8ff!important;border-color:#cfeafa!important;color:#086b94!important}
.card a.cta,.card a.cta-link,.text-link{color:var(--sl-primary-dark)!important;font-weight:800!important}

.internal-boost{background:#fff!important;padding:24px 0!important}
.internal-boost .boost-box{background:#fff!important;border:1px solid var(--sl-line)!important;border-radius:16px!important;box-shadow:var(--sl-shadow)!important}
.internal-boost .pill{background:#f3f6fb!important;border-color:#e1e8ef!important;color:#334252!important;border-radius:999px!important}

/* === FORMS === */
.form-input,.form-select,.form-textarea,input,select,textarea{
  background:#fff!important;
  border:1px solid #d8e2eb!important;
  border-radius:12px!important;
}
.form-input:focus,.form-select:focus,.form-textarea:focus,input:focus,select:focus,textarea:focus{
  outline:2px solid rgba(21,181,255,.15)!important;
  border-color:#8ddfff!important;
}
.form-submit,.contact-form button,.btn-primary{
  background:linear-gradient(135deg,var(--sl-primary),var(--sl-primary2))!important;
  color:#002b3a!important;
  border:0!important;
  border-radius:12px!important;
  font-weight:900!important;
}

/* === REFERENCES === */
.ref-wrap{background:var(--sl-bg)!important}
.ref-hero-card,.ref-cta-card{border-radius:22px!important;box-shadow:var(--sl-shadow)!important}
.filter{border-color:#d7e3ec!important;color:#315675!important;background:#fff!important;border-radius:999px!important}
.filter.is-active{border-color:#8ddfff!important;background:#daf4ff!important;color:#075d83!important;box-shadow:none!important}

/* === SHOP-STYLE DARK FOOTER === */
.site-footer{
  margin-top:0!important;
  background:#071422!important;
  color:#d9e3ed!important;
  border-top:0!important;
  padding:34px 0 25px!important;
}
.site-footer h4,.site-footer strong{color:#fff!important}
.site-footer p,.site-footer .muted{color:#bfcddd!important}
.site-footer a{color:#d9e3ed!important}
.site-footer a:hover{color:#fff!important}
.site-footer .footer-inner{border-color:rgba(255,255,255,.14)!important}

.sticky-contact,.sticky-call,.mobile-cta{
  background:linear-gradient(135deg,var(--sl-primary),var(--sl-primary2))!important;
  color:#002b3a!important;
}

@media(max-width:1080px){
  .nav{align-items:flex-start!important;flex-direction:column!important;gap:4px!important;padding-bottom:10px!important}
  .brand{min-width:0!important;flex-basis:auto!important}
  .menu{width:100%!important;justify-content:flex-start!important;flex-wrap:nowrap!important;overflow-x:auto!important;padding-bottom:3px!important;scrollbar-width:none!important}
  .menu::-webkit-scrollbar{display:none!important}
  .menu a{white-space:nowrap!important}
  .hero-inner{grid-template-columns:1fr .8fr!important}
}
@media(max-width:760px){
  .container{padding-left:16px!important;padding-right:16px!important}
  .topbar::before{justify-content:flex-start!important;min-height:30px!important;padding:5px 14px!important;font-size:11px!important}
  .nav{min-height:auto!important;padding:5px 0 8px!important}
  .brand{width:100%!important;justify-content:center!important}
  .logo{width:190px!important;height:68px!important;background-position:center!important}
  .menu{gap:3px!important;padding:0 0 3px!important}
  .menu a{font-size:12px!important;padding:8px 8px!important}
  .menu .btn-primary{padding:8px 11px!important}
  .hero-inner{grid-template-columns:1fr!important;min-height:0!important;padding:34px 0 38px!important;gap:24px!important}
  .hero h1{font-size:clamp(38px,10vw,46px)!important;line-height:1!important}
  .hero p{font-size:16px!important}
  .hero-media{justify-content:flex-start!important}
  .hero-media img,.hero-video{height:auto!important;max-height:330px!important}
  .hero-actions{display:flex!important;flex-wrap:wrap!important}
  section{padding:50px 0!important}
}
@media(max-width:480px){
  .topbar::before{content:"✓ Personlig service   ✓ Teknisk poolkompetens"}
  .hero-actions .btn,.hero-actions a{width:100%!important}
}