<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">

@import url("https://use.typekit.net/cqm4tbo.css");

body.newstyle {
background-color:#f8f8f8!important;
}

body.newstyle #main {
width:100%;
max-width:1200px;
margin:0 auto;
background-color:#fff;
}

body.newstyle h1, body.newstyle h2 {
color:#086f77;
text-align:center;
font-family: 'Source Sans Pro', sans-serif;
margin-bottom:0!important;
}

body.newstyle h1 {
font-size: 32px !important;
margin-top: 0 !important;
font-weight:600;
}

body.newstyle h2 {
font-size: 20px !important;
margin-top: 0px !important;
font-weight: 400;
}

body.newstyle .blue {
background-color:#e2f2fa;
}

body.newstyle hr {
color:#086f77;
}

body.newstyle .section {
padding:45px 0;
min-height: 400px;
display: flex;
align-items: center;   
justify-content: center; 
}

body.newstyle .section hr {
background-color:#086f77;
width: 70%;
margin: 20px auto;
}

body.newstyle .inner {
width:100%;
}

body.newstyle .half {
display: inline-flex;
width:49%;
padding: 0 20px;
vertical-align: middle;
}

body.newstyle .hoLogo {
width: 280px;
margin: auto;
}

body.newstyle .login-wrap {
background-color: transparent;
border-color: transparent;
}

body.newstyle .login-wrap hr,
body.newstyle .login-wrap h4 {
display:none;
}

body.newstyle .inner .log-form-group label {
font-size: 13px;
margin-left: 13px;
margin-top: -4px;
margin-bottom: -2px;
letter-spacing: 0.3px;
}

body.newstyle .login-wrap input[type="text"], 
body.newstyle .login-wrap input[type="password"] {
background-color: #fff!important;
border: 1px solid #1d5a79!important;
border-radius: 22px;
}

body.newstyle .inner .login-submit {
margin-top: 0px;
}

body.newstyle #login > div:nth-child(7) {
margin-bottom: -140px;
margin-top: 23px;
padding: 2px !important;
}

body.newstyle .login-wrap a input[type="button"] {
min-width: 100%;
height: 41px !important;
border-radius: 20px !important;
font-size: 16px !important;
}

body.newstyle div.logged-in {
text-align: center;
text-transform: capitalize;
font-size: 20px;
margin-top: 20px;
}

body.newstyle div.logged-in a {
display:none;
}

body.newstyle.logged-in .half.second {
display:inline-block;
}

body.newstyle.launchHattenonline {
display:none;
}

body.newstyle.logged-in .launchHattenonline {
display:block;
}

body.newstyle .launchHattenonline a {
display: block;
width: 200px;
text-align: center;
margin: 0 auto 15px auto;
}

body.newstyle.logged-in .laft {
vertical-align: unset;
}

body.newstyle .serviceBalls {
padding-top: 45px;
text-align: center;
padding-bottom: 10px;
text-align:center;
}

body.newstyle .serviceBalls img {
width: 160px;
margin: 20px;
}

body.newstyle .underSection {
max-width:900px;
margin:20px auto;
border-top: 1px solid #086f77;
padding-top: 20px;
padding-bottom: 10px;
display: flex;
align-items: center;
}

body.newstyle .underSection div {
padding:10px;
text-align: center;
}

body.newstyle .sixty {
width:59.5%;
display:inline-block;
}

body.newstyle .sixty img {
display:block;
Margin:auto;
width:90%;
}

body.newstyle .forty {
width:40%;
display:inline-block;
}

body.newstyle .forty img {
display:block;
Margin:auto;
width: 40%;
margin-bottom: 23px;
}

body.newstyle .hoDemo {
display: block;
background-color: #218F9E !important;
border-radius: 22px;
padding: 6px;
font-size: 15px;
width: 130px;
color: #fff !important;
text-decoration: none;
margin: auto;
padding-top: 10px;
font-weight: 600;
letter-spacing: 0.5px;
margin-top: 10px;
}

body.newstyle .playMovie {
display:block;
cursor:pointer;
display: flex;
align-items: center;
justify-content: center;
margin-top: 16px;
font-weight: 600;
}

body.newstyle .playMovie img {
width: 40px;
margin: 0;
margin-right: 8px;
display: initial;
margin-top: -2px;
}

body.newstyle .modal {
display: none;
position: fixed;
z-index: 9999;
top: 0; left: 0; width: 100%; height: 100%;
min-width: 100%;
}

body.newstyle .modal-backdrop {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.8);
}

body.newstyle .modal-content {
position: relative;
max-width: 80%;
max-height: 80%;
margin: auto;
top: 50%;
transform: translateY(-50%);
z-index: 2;
background: transparent;
}

body.newstyle .video-wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}

body.newstyle .video-wrapper iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}

body.newstyle .close-modal {
position: absolute;
top: -40px;
right: -28px;
font-size: 32px;
color: white;
cursor: pointer;
z-index: 3;
}

body.newstyle .productColumn {
width: 260px;
display: inline-block;
background: #fff;
border-radius: 7px;
text-align: center;
}

body.newstyle .productColumn.oneYear {
margin-left: calc((49.5% - 260px) * 0.7);
margin-right: calc((49.5% - 260px) * 0.3);
}

body.newstyle .productColumn.threeYears {
margin-left: calc((49.5% - 260px) * 0.3);
margin-right: calc((49.5% - 260px) * 0.7);
}

body.newstyle .columnHeader {
display: block;
background: #086f77;
width: 180px;
color: #fff;
font-weight: 600;
font-size: 20px;
height: 32px;
border-radius: 15px;
margin: auto;
Margin-top: -15px;
margin-bottom: 40px;
line-height: 36px;
}

body.newstyle .oneYear .columnHeader {
background: #279192;
}

body.newstyle .userNumber {
color: #086f77;
font-weight: 400;
font-size: 18px;
display: inline-block;
padding: 0px 4px;
border-bottom: 2px solid #086f77;
line-height: 20px;
margin-bottom: 8px;
}

body.newstyle .oneYear .userNumber {
color: #279192;
border-color: #279192;
}

body.newstyle .productColumn .woocommerce ul.products {
margin-bottom: 0;
}

body.newstyle .products img {
display: none !important;
}

body.newstyle .woocommerce-loop-product__title {
display:none;
}

body.newstyle .woocommerce-price-suffix {
display:none;
}

body.newstyle .woocommerce ul.products li.product .price {
font-weight: 400;
font-size: 16px;
color:#086f77;
font-style:italic;
text-align: center;
}

body.newstyle .productColumn.oneYear .woocommerce ul.products li.product .price {
color: #279192;
}

body.newstyle .woocommerce ul.products li.product .price .woocommerce-Price-amount {
font-weight: 600;
font-size: 24px;
display:block;
font-style:normal;
margin-bottom: -8px;
}

body.newstyle .productColumn .woocommerce a.button.add_to_cart_button {
background: #086f77;
padding: 8px 28px;
color: #fff;
border-radius: 16px;
font-size: 0;
padding-top: 9px;
font-weight: 600;
letter-spacing: 0.5px;
margin-top: 5px !important;
padding-left: 20px;
}

body.newstyle .productColumn .woocommerce a.button.add_to_cart_button.added {
display:none;
}

body.newstyle .added_to_cart.wc-forward {
background: #00c29b;
padding: 4px 20px;
color: #fff;
border-radius: 16px;
font-size: 0;
padding-top: 6px !important;
font-weight: 600;
letter-spacing: 0.5px;
margin-top: 5px !important;
}

body.newstyle .added_to_cart.wc-forward::after {
font-size: 16px;
content: "TILL KASSAN";
}

body.newstyle .productColumn.oneYear .woocommerce a.button.add_to_cart_button {
background: #279192;
}

body.newstyle .productColumn .woocommerce a.button.add_to_cart_button::after {
font-size: 16px;
content: "VÄLJ";
}

body.newstyle .productColumn .woocommerce a.button.add_to_cart_button.product_type_variable {
padding-left: 28px;
}

body.newstyle #kontaktaOss {
background: #086f77;
padding: 4px 17px;
color: #fff;
border-radius: 16px;
font-size: 16px;
padding-top: 6px;
font-weight: 600;
letter-spacing: 0.5px;
text-decoration: none;
cursor: pointer;
margin: 0 13px;
}

body.newstyle .guyGlasses,
body.newstyle .girlComputer {
background-image: url('/wp-content/uploads/2025/06/guy-w-glasses.jpg');
background-size:cover;
min-height: 500px;
background-position: right;
position:relative;
}

body.newstyle .girlComputer {
background-image: url('/wp-content/uploads/2025/06/girl-w-computer.jpg');
}

@media (max-width:1200px) {
body.newstyle .guyGlasses,
body.newstyle .girlComputer {
min-height: 44vw;
}
}

body.newstyle .guyGlasses span,
body.newstyle .girlComputer span {
display: inline-block;
background-color: rgba(255, 255, 255, 0.8);
width: 350px;
max-width: 30vw;
font-size: 18px;
position: absolute;
padding: 17px;
font-style: italic;
}

body.newstyle .guyGlasses span {
top: 20%;
left: 7%;
}

body.newstyle .girlComputer span {
top: 20%;
right: 7%;
}

@media (max-width:600px) {
body.newstyle .half, body.newstyle .sixty, body.newstyle .forty {
width:100%;
}
body.newstyle .login-wrap {
max-width: unset;
}
body.newstyle .underSection {
display:block;
padding: 20px;
}
body.newstyle .forty img {
width: 30%;
}
body.newstyle .playMovie img {
width: 8%;
}
body.newstyle .product {
min-width: 100%!important;
}
body.newstyle div.logged-in {
text-align: center;
width: 100%;
padding-top: 25px;
}
}


/* ========= ARCHIVE CATEGORY GRID ========= */

/* Grid: 3 / 2 / 1 kolumn */
.item-list.list-of-categories.grid-3-2-1 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 1200px) {
  .item-list.list-of-categories.grid-3-2-1 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .item-list.list-of-categories.grid-3-2-1 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Säkerställ att tema-HTML inte bråkar */
.item-list.list-of-categories.grid-3-2-1 > li {
  width: auto !important;
  float: none !important;
}
.item-list.list-of-categories.grid-3-2-1 > li > a {
  display: block;
  text-decoration: none;
}

/* Kortets baslayout (piller) */
.cat-card {
  --bg: #e74b78;        /* default (ersätts via nth-child nedan) */
  --accent: #f5a0b6;    /* ringfärg runt bilden (ersätts per item) */

  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 96px;
  padding: 14px;
  border-radius: 9999px;
  background: var(--bg);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Text (vänster) */
.cat-card__label {
  color: #fff;
  line-height: 1.2;
  padding-right: 16px;
  flex: 1 1 auto;
     /* text-align: left; */
    padding-left: 12px;
    font-size: 21px;
font-family: "chaloops", sans-serif;
font-weight: 700;
font-style: normal;
}

/* Bild (höger) */
.cat-card__media {
  --size: 88px;                     /* storleken på cirkeln */
  width: var(--size);
  height: var(--size);
  aspect-ratio: 1 / 1;
  position: relative;
  border-radius: 9999px;
  flex: 0 0 var(--size);
}
.cat-card__media figure {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.cat-card__media img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  border-radius: inherit;
}
/* Ring runt bilden */
.cat-card__media::before,
.cat-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.cat-card__media::before {
  box-shadow: 0 0 0 4px #fff;        /* inner ring */
}
.cat-card__media::after {
  box-shadow: 0 0 0 6px var(--accent); /* outer ring */
}

/* Hover/focus (valfritt, subtilt) */
.item-list.list-of-categories.grid-3-2-1 > li > a:focus .cat-card,
.item-list.list-of-categories.grid-3-2-1 > li > a:hover .cat-card {
  transform: translateY(-1px);
  filter: brightness(1.02);
  transition: transform 120ms ease, filter 120ms ease;
}

/* ========= 5-FÄRGSLOOP (nth-child) ========= */
.item-list.list-of-categories.grid-3-2-1 > li:nth-child(5n+1) .cat-card {
  --bg: #ef4b78;  /* rosa */
  --accent: #f59ab1;
}
.item-list.list-of-categories.grid-3-2-1 > li:nth-child(5n+2) .cat-card {
  --bg: #f07e73;  /* korall */
  --accent: #f6b0a9;
}
.item-list.list-of-categories.grid-3-2-1 > li:nth-child(5n+3) .cat-card {
  --bg: #f6c34f;  /* gul */
  --accent: #fde09b;
  color: #3a2a00;
}
.item-list.list-of-categories.grid-3-2-1 > li:nth-child(5n+4) .cat-card {
  --bg: #5cc3b4;  /* turkos/teal */
  --accent: #a3ddd6;
}
.item-list.list-of-categories.grid-3-2-1 > li:nth-child(5n+5) .cat-card {
  --bg: #3ab6ea;  /* blå */
  --accent: #9ddaf4;
}

/* Om hatten_category_image ibland renderar <i> ikon istället för <img> */
.cat-card__media i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 0 0 10px var(--accent);
  font-size: 36px;
  color: #999;
}

body.category {
    background: none;
}

/* ========= SITE CONTENT BREDD ========= */
body.archive .site-content {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* ========= LIST ITEMS ========= */
/* Gör så att varje kategori "kort" kan växa och använda hela kolumnbredden */
.item-list.list-of-categories.grid-3-2-1 > li {
  max-width: none;          /* ta bort ev. begränsning från temat */
  width: 100%;              /* fyll sin grid-kolumn */
}

/* ========= LIST OF POSTS =========== */
body.category .item-list li {
    max-width: 184px;
    padding: 0 12px 28px;
    width: 184px;
    }
    
body.category .item-list figure {
        width: 160px;
    height: 160px;
}

body.category .item-list figure img {
    object-fit: cover;
    height: 100%;
}

body.category .item-list .item-title {
    color: black!important;
    font-size:21px;
}

body.category {
    background: none;
}


/* ======= Category post-list as grid (6/5/4/3/2 cols) ======= */
body.category ul.item-list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(6, 1fr);  /* ≥ ~1400px */
  gap: 24px 28px;                         /* row / col gap */
  justify-content: start;                 /* vänsterställ sista raden */
}

/* 5 kolumner */
@media (max-width: 1200px) {
  body.category ul.item-list {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* 4 kolumner (≈ din 1200px content-bredd hamnar här) */
@media (max-width: 1050px) {
  body.category ul.item-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 3 kolumner */
@media (max-width: 880px) {
  body.category ul.item-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 2 kolumner */
@media (max-width: 600px) {
  body.category ul.item-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Kortens grundstil */
body.category .item-list li {
  text-align: center;
  /* ta bort gamla flex/gutter-stilar om de finns */
  width: auto;
  max-width: none;
  padding: 0;
  box-sizing: border-box;
}

/* Rek: kvadratiska thumbnails (valfritt, om du inte redan har detta) */
body.category .item-list figure {
  width: 160px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 10px;
  border-radius: 10px;
  overflow: hidden;
}
body.category .item-list figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Header-gradient (kräm → varm gul) */
body.archive #masthead,
body.post-template-default #masthead {
  /* fallback om gradients inte stöds */
  background-color: #fff8dc!important;

  /* själva gradienten */
  background-image: linear-gradient(
    90deg,
    #fffdf7 0%,
    #fff7e6 22%,
    #ffefc4 45%,
    #ffe79e 68%,
    #ffde77 100%
  )!important;

  /* hjälpsamt om temat sätter annat: */
  background-repeat: no-repeat;
  background-size: cover;
}

/* TH logo i headern */
#masthead .site-title img.thLogo {
margin-left: -3px;
  width: 240px;
  margin-top: 2px;
}

/* tillbaka-knapp TH */
#site-navigation.teckenHatten a {
background: #04426e;
  position: fixed;
  top: 150px;
  left: 0;
border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 10px 10px 16px 35px;
}

#site-navigation.teckenHatten a span {
font-size: 0;
}

#site-navigation.teckenHatten img {
width: 45px;
height:auto;
}

/* bakgrundsfärg default */
body.single {
background:#fff;
}