/* Vibben homepage — measured directly from the supplied 1783×882 reference */
body.home{overflow-x:hidden}

.vref-header{display:none}

@media (min-width:850px){
  body.home #header{display:none!important}

  .vref-header{
    display:block;
    width:100%;
    height:102px;
    background:#131313;
    color:#fff;
    font-family:inherit;
    position:relative;
    z-index:40;
  }
  .vref-header__top{
    height:62px;
    background:#131313;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .vref-header__top-inner{
    position:relative;
    width:min(1625px,calc(100% - 80px));
    height:62px;
    margin:0 auto;
  }
  .vref-logo{
    position:absolute;
    left:0;
    top:9px;
    width:80px;
    height:56px;
    display:block;
    z-index:2;
  }
  .vref-logo img{
    display:block;
    width:80px;
    height:56px;
    object-fit:contain;
    object-position:center;
  }

  .vref-search{
    position:absolute;
    left:50%;
    top:17px;
    transform:translateX(-50%);
    width:461px;
    height:35px;
    margin:0!important;
    display:flex;
    align-items:stretch;
    overflow:hidden;
    border:1px solid #3a3943;
    border-radius:6px;
    background:#201f27;
    box-shadow:none;
  }
  .vref-search input[type="search"]{
    flex:1 1 auto;
    min-width:0;
    height:33px!important;
    min-height:33px!important;
    margin:0!important;
    padding:0 14px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#fff!important;
    box-shadow:none!important;
    font-size:13px!important;
    line-height:33px!important;
    font-weight:400!important;
  }
  .vref-search input[type="search"]::placeholder{
    color:#c8c4cc!important;
    opacity:.92!important;
  }
  .vref-search button{
    flex:0 0 38px;
    width:38px!important;
    min-width:38px!important;
    height:33px!important;
    min-height:33px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#10dce8!important;
    box-shadow:none!important;
    display:grid!important;
    place-items:center!important;
    font-size:17px!important;
  }

  .vref-header__actions{
    position:absolute;
    right:0;
    top:18px;
    height:33px;
    display:flex;
    align-items:center;
    gap:23px;
  }
  .vref-action{
    display:flex;
    align-items:center;
    gap:7px;
    height:33px;
    color:#fff!important;
    text-decoration:none!important;
    white-space:nowrap;
  }
  .vref-action__icon{
    position:relative;
    width:33px;
    height:33px;
    display:grid;
    place-items:center;
    border:1px solid #12dbe8;
    border-radius:50%;
    color:#fff;
    font-size:17px;
    line-height:1;
  }
  .vref-action--cart{gap:6px}
  .vref-action--cart .vref-action__icon{font-size:16px}
  .vref-action__icon em{
    position:absolute;
    right:-5px;
    top:-7px;
    min-width:16px;
    height:16px;
    padding:0 4px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:#e83e9c;
    color:#fff;
    font-style:normal;
    font-size:9px;
    line-height:1;
    font-weight:800;
  }
  /* Never display a potentially stale cached cart count.
     Show the badge only after a fresh WooCommerce session check. */
  .vref-action--cart .vref-action__icon em{
    display:none!important;
  }
  .vref-action--cart .vref-action__icon em[data-cart-verified="1"]:not([data-cart-count="0"]){
    display:grid!important;
  }
  .vref-action__label{
    color:#fff;
    font-size:13px;
    line-height:1;
    font-weight:800;
    letter-spacing:.01em;
  }

  .vref-nav{
    height:40px;
    background:#131313;
    border-bottom:1px solid #0edbe6;
  }
  .vref-nav__inner{
    height:39px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:35px;
  }
  .vref-nav__inner>a{
    position:relative;
    display:inline-flex;
    align-items:center;
    height:39px;
    padding:0!important;
    margin:0!important;
    color:#fff!important;
    text-decoration:none!important;
    font-size:13px;
    line-height:1;
    font-weight:600;
    letter-spacing:0;
    white-space:nowrap;
  }
  .vref-caret{
    display:inline-block;
    width:7px;
    height:7px;
    margin-left:7px;
    border-right:1px solid #a9a9ad;
    border-bottom:1px solid #a9a9ad;
    transform:translateY(-2px) rotate(45deg);
  }
}

/* HERO: exact reference geometry at the supplied desktop width */
.vref-hero{
  position:relative;
  width:100%;
  height:376px;
  min-height:376px;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  background:#071725;
}
.vref-hero__photo{
  position:absolute;
  inset:0;
  z-index:-3;
  background-image:url('https://vibben.se/wp-content/uploads/2026/10/Vibben-hero-–-elegant-kvinna-scaled.jpg');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center 24%;
  filter:saturate(1.10) contrast(1.04) brightness(.72);
  transform:scale(1.01);
}
.vref-hero__veil{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 4% 54%,rgba(255,164,87,.42) 0 3%,rgba(255,111,58,.16) 8%,transparent 19%),
    radial-gradient(ellipse at 96% 52%,rgba(255,150,78,.38) 0 3%,rgba(255,99,70,.14) 8%,transparent 18%),
    radial-gradient(circle at 23% 62%,rgba(26,214,231,.18),transparent 23%),
    radial-gradient(circle at 78% 58%,rgba(116,64,225,.20),transparent 26%),
    linear-gradient(90deg,rgba(2,12,22,.58) 0%,rgba(2,21,34,.22) 30%,rgba(3,35,53,.04) 52%,rgba(24,8,46,.10) 75%,rgba(2,12,22,.44) 100%),
    linear-gradient(180deg,rgba(1,8,15,.02),rgba(1,8,16,.22));
}
.vref-hero__inner{
  width:1245px;
  max-width:calc(100% - 48px);
  height:376px;
  min-height:376px;
  margin:0 auto;
  display:grid;
  grid-template-columns:420px 770px;
  column-gap:55px;
  align-items:center;
  transform:translateX(52px);
}
.vref-copy{
  width:420px;
  max-width:420px;
  transform:translateY(10px);
}
.vref-kicker{
  display:block;
  margin:0 0 15px;
  color:#22e9f4;
  font-size:11px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:.25em;
  text-transform:uppercase;
}
.vref-title{
  margin:0 0 15px!important;
  color:#fff!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:65px!important;
  line-height:.94!important;
  letter-spacing:-.035em!important;
  font-weight:700!important;
  text-shadow:0 3px 18px rgba(0,0,0,.22);
}
.vref-lead{
  width:395px;
  max-width:395px;
  margin:0 0 20px!important;
  color:rgba(255,255,255,.96)!important;
  font-size:18px!important;
  line-height:1.45!important;
  font-weight:500!important;
}
.vref-maincta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:265px;
  height:60px;
  padding:0 19px 0 23px;
  border:0;
  border-radius:999px;
  border:1px solid rgba(127,247,255,.78);
  background:rgba(32,240,250,.68);
  color:#04191e!important;
  text-decoration:none!important;
  font-size:15px;
  line-height:1;
  font-weight:900;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  box-shadow:0 0 18px rgba(32,240,250,.24),0 10px 24px rgba(8,72,82,.18);
}
.vref-maincta b{font-size:18px;line-height:1;font-weight:800}

.vref-offers{
  width:770px;
  height:298px;
  display:grid;
  grid-template-columns:repeat(3,246px);
  gap:16px;
  align-items:stretch;
  transform:translateY(11px);
}
.vref-offer{
  position:relative;
  width:246px;
  height:298px;
  min-height:298px;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  padding:16px 16px 17px;
  border:1px solid #14dbe9;
  border-radius:15px;
  color:#fff!important;
  text-decoration:none!important;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}
.vref-offer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(2,14,26,.02) 0%,rgba(2,14,26,.08) 34%,rgba(2,14,28,.45) 67%,rgba(1,9,19,.91) 100%),
    linear-gradient(145deg,rgba(20,174,213,.20),rgba(113,58,220,.24));
}
.vref-offer--1{
  background-image:
    linear-gradient(145deg,rgba(31,126,203,.34),rgba(143,57,215,.34)),
    url('https://vibben.se/wp-content/uploads/2026/09/Vibben-kategori-For-henne-optimeringskopia.png');
  background-blend-mode:color,normal;
  background-position:center;
}
.vref-offer--2{
  background-image:
    linear-gradient(145deg,rgba(16,135,205,.38),rgba(93,61,214,.30)),
    url('https://vibben.se/wp-content/uploads/2026/09/Vibben-kategori-BDSM-optimeringskopia.png');
  background-blend-mode:color,normal;
  background-position:center;
}
.vref-offer--3{
  background-image:
    linear-gradient(145deg,rgba(37,117,203,.34),rgba(151,57,217,.36)),
    url('https://vibben.se/wp-content/uploads/2026/09/Vibben-kategori-Anal-optimeringskopia.png');
  background-blend-mode:color,normal;
  background-position:center;
}
.vref-badge{
  width:max-content;
  height:31px;
  min-height:31px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  border:1px solid #18e6ef;
  border-radius:999px;
  background:rgba(3,27,43,.78);
  color:#fff;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.vref-offer__lower{
  display:block;
  margin-top:auto;
}
.vref-price{
  display:block;
  margin:0 0 6px;
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:38px;
  line-height:1;
  font-weight:400;
  letter-spacing:-.025em;
  white-space:nowrap;
  text-shadow:0 2px 12px rgba(0,0,0,.26);
}
.vref-desc{
  display:block;
  height:17px;
  margin:0 0 10px;
  color:rgba(255,255,255,.96);
  font-size:13px;
  line-height:17px;
  font-weight:600;
}
.vref-cardcta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:202px;
  height:42px;
  margin:0 auto;
  padding:0 13px 0 15px;
  border-radius:999px;
  border:1px solid rgba(127,247,255,.74);
  background:rgba(32,240,250,.66);
  color:#04191e;
  font-size:13px;
  line-height:1;
  font-weight:900;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:0 0 14px rgba(32,240,250,.22),0 8px 18px rgba(8,72,82,.16);
}
.vref-cardcta b{font-size:15px;line-height:1}

/* CATEGORY SECTION: y=478 in the reference, cards start at y=610 */
.vref-cats{
  padding:15px 0 31px;
  background:#fff9fc;
}
.vref-cats__head{
  width:1534px;
  max-width:calc(100% - 48px);
  margin:0 auto 29px;
  text-align:center;
}
.vref-eyebrow{
  margin:0 0 7px;
  color:#cf4c78;
  font-size:10px;
  line-height:11px;
  font-weight:900;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.vref-cats__title{
  margin:0 0 7px!important;
  color:#271019!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:50px!important;
  line-height:48px!important;
  letter-spacing:-.035em!important;
  font-weight:700!important;
}
.vref-cats__sub{
  margin:0!important;
  color:#7f7077!important;
  font-size:11px!important;
  line-height:15px!important;
}
.vref-grid{
  width:1534px;
  max-width:calc(100% - 48px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6,244px);
  gap:14px;
}
.vref-cat{
  position:relative;
  width:244px;
  height:241px;
  min-height:241px;
  overflow:hidden;
  border:1px solid rgba(31,195,204,.16);
  border-radius:11px;
  background:#0a1724;
  color:#fff!important;
  text-decoration:none!important;
  box-shadow:0 8px 20px rgba(6,20,28,.07);
}
.vref-cat img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.72) contrast(.96) brightness(1.20) sepia(.08);
}
.vref-cat--her img{object-position:center 44%}
.vref-cat--him img{object-position:center 43%}
.vref-cat--bdsm img{object-position:center 43%}
.vref-cat--anal img{object-position:center 43%}
.vref-cat--lingerie img{object-position:center 42%}
.vref-cat--care img{object-position:center 42%}
.vref-cat::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,16,28,0) 34%,rgba(4,17,30,.02) 54%,rgba(4,18,32,.25) 76%,rgba(3,13,25,.78) 100%),
    linear-gradient(145deg,rgba(48,155,214,.30),rgba(126,74,224,.34));
}
.vref-cat__copy{
  position:absolute;
  left:20px;
  right:48px;
  bottom:17px;
  z-index:3;
}
.vref-cat__copy strong{
  display:block;
  margin:0 0 5px;
  color:#fff;
  font-family:Georgia,"Times New Roman",serif;
  font-size:23px;
  line-height:1.02;
  font-weight:700;
  text-shadow:0 2px 10px rgba(0,0,0,.22);
}
.vref-cat__copy span{
  display:block;
  color:rgba(255,255,255,.94);
  font-size:10px;
  line-height:1.35;
  font-weight:500;
}
.vref-cat__arrow{
  position:absolute;
  right:14px;
  bottom:14px;
  z-index:4;
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  border:1px solid rgba(255,160,204,.78);
  border-radius:50%;
  background:rgba(48,22,52,.58);
  color:#fff;
  font-size:15px;
  line-height:1;
  font-weight:800;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  box-shadow:0 0 14px rgba(232,62,156,.18),0 7px 16px rgba(12,6,20,.20);
}

/* Preserve the measured composition on large desktop widths */
@media (max-width:1599px) and (min-width:1100px){
  .vref-hero__inner{
    width:min(1245px,calc(100% - 40px));
    grid-template-columns:minmax(330px,420px) minmax(0,770px);
    column-gap:clamp(22px,2.2vw,42px);
    transform:none;
  }
  .vref-title{font-size:clamp(54px,4.4vw,65px)!important}
  .vref-lead{font-size:clamp(15px,1.25vw,18px)!important}
  .vref-offers{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1vw,16px)}
  .vref-offer{width:auto}
  .vref-grid{width:min(1534px,calc(100% - 40px));grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(9px,.8vw,14px)}
  .vref-cat{width:auto}
  .vref-cats__head{width:min(1534px,calc(100% - 40px))}
}
@media (max-width:1099px){
  .vref-header{display:none}
  body.home #header{display:block!important}
  .vref-hero{height:auto;min-height:0;padding:28px 0 30px}
  .vref-hero__inner{
    width:min(760px,calc(100% - 28px));
    max-width:none;
    height:auto;
    min-height:0;
    grid-template-columns:1fr;
    gap:24px;
    transform:none;
  }
  .vref-copy{width:auto;max-width:560px;transform:none}
  .vref-title{font-size:50px!important}
  .vref-lead{max-width:520px}
  .vref-maincta{width:250px;height:54px}
  .vref-offers{width:100%;height:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;transform:none}
  .vref-offer{width:auto;height:auto;min-height:240px;aspect-ratio:246/298;padding:12px}
  .vref-cardcta{width:100%}
  .vref-price{font-size:31px}
  .vref-desc{font-size:11px}
  .vref-cats{padding-top:28px}
  .vref-cats__head,.vref-grid{width:min(760px,calc(100% - 28px));max-width:none}
  .vref-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .vref-cat{width:auto;height:auto;aspect-ratio:244/241}
}
@media (max-width:600px){
  body.home{overflow-x:hidden!important}

  .vref-hero{overflow:hidden}
  .vref-hero__inner{
    width:calc(100% - 32px)!important;
    max-width:100%!important;
    margin:0 auto!important;
  }
  .vref-copy{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .vref-title{
    font-size:42px!important;
    max-width:100%!important;
  }
  .vref-lead{
    width:100%!important;
    max-width:100%!important;
    font-size:15px!important;
    box-sizing:border-box!important;
  }
  .vref-maincta{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  .vref-offers{
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
  }
  .vref-offer{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    aspect-ratio:1.5/1;
    min-height:205px;
    box-sizing:border-box!important;
    background-position:center center!important;
  }
  .vref-cardcta{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  .vref-cats__head,
  .vref-grid{
    width:calc(100% - 28px)!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .vref-cats__title{font-size:38px!important;line-height:1!important}
  .vref-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    align-items:stretch!important;
  }
  .vref-cat{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    aspect-ratio:244/241!important;
    box-sizing:border-box!important;
  }
  .vref-cat img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
  .vref-cat__copy{
    left:12px!important;
    right:42px!important;
    bottom:12px!important;
  }
  .vref-cat__copy strong{
    font-size:18px!important;
    line-height:1.05!important;
  }
  .vref-cat__copy span{
    font-size:9px!important;
    line-height:1.25!important;
  }
  .vref-cat__arrow{
    right:10px!important;
    bottom:10px!important;
    width:31px!important;
    height:31px!important;
  }
}