/*
Theme Name: WebShop Child
Theme URI: https://themegrill.com
Template: webshop
Author: ThemeGrill
Author URI: https://themegrill.com
Description: The webShop is a WordPress theme with full WooCommerce Support developed by an experienced team from ThemeGrill. Fast, mobile-first design, highly customizable from colors to typography, SEO friendly, translation-ready, clean code, flexible widget areas, Gutenberg-based theme, and much more features that boost your eCommerce site. Check the demo at: https://themegrilldemos.com/webshop
Tags: one-column,custom-background,custom-colors,custom-menu,custom-logo,featured-images,footer-widgets,full-width-template,theme-options,threaded-comments,translation-ready,rtl-language-support
Version: 1.0.1650363252
Updated: 2022-04-19 12:14:12

*/

/* =========================================================
   JN-NAILS – TOP BANNER
   ========================================================= */

.jn-top-banner {
  background: #f8f7f5;
  color: #555;
  padding: 6px 20px;
  font-size: 12px;
  letter-spacing: 0.03em;
  border-bottom: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  transition: transform 0.3s ease;
}

.jn-top-banner.hidden {
  transform: translateY(-100%);
}

/* WooCommerce "lagt till i varukorg" panel - placera under menyn */
.ws-sticky-panel {
  top: calc(var(--jn-banner-height, 31px) + var(--jn-header-height, 70px)) !important;
  z-index: 998 !important;
}

body.banner-hidden .ws-sticky-panel {
  top: var(--jn-header-height, 70px) !important;
}

.jn-top-banner__inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 18px;
}

.jn-top-banner__item {
  display: flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  opacity: 0;
  animation: jn-banner-fade 12s infinite;
  white-space: nowrap;
}

.jn-top-banner__item:nth-child(1) {
  animation-delay: 0s;
}

.jn-top-banner__item:nth-child(2) {
  animation-delay: 4s;
}

.jn-top-banner__item:nth-child(3) {
  animation-delay: 8s;
}

@keyframes jn-banner-fade {
  0% { opacity: 0; transform: translateY(4px); }
  2%, 31% { opacity: 1; transform: translateY(0); }
  33%, 100% { opacity: 0; transform: translateY(-4px); }
}

.jn-top-banner__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* =========================================================
   JN-NAILS – GLOBALT / TYPOGRAFI
   ========================================================= */

html,
body{
  overflow-x: hidden;
}

.site-content{
  background-color: #fff !important;
}

.site{
  background-color: #F2E6E6 !important;
}

a{
  font-family: deva-ideal, sans-serif !important;
}

h1, h2, h3, h4, h5, h6{
  font-family: deva-ideal, sans-serif !important;
}

h2{
  font-weight: 400;
  color: #505050 !important;
}

.wp-block-cover{
  font-family: deva-ideal, sans-serif;
}

.wc-block-grid__product-title{
  font-family: deva-ideal, sans-serif !important;
  font-weight: 400 !important;
}

/* WooCommerce Blocks: Konsekvent layout för produktkort */
.wc-block-grid__product{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.wc-block-grid__product-image{
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.wc-block-grid__product-image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.wc-block-grid__product-title{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  min-height: calc(1.25em * 2) !important;
}

.wc-block-grid__product-price{
  margin-top: auto !important;
}

.wc-block-grid__products{
  align-items: stretch !important;
}

.wp-block-heading{
	font-weight:300;
}
.woocommerce-noreviews{
	color:white;
}

/* =========================================================
   FOOTER / CONTAINERS
   ========================================================= */

.ws-container{
  padding: 5px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}



.ws-page-header{
  background-color: #fff;
}

.ws-footer-cols{
  margin-top: 0px;
	padding-top:20px;
	padding-bottom:50px;
  background-color: #fff;
  border: 0.1px #C0C0C0 solid;
}

.ws-footer-bar{
	padding-bottom:6px;
	padding-top:6px;
}

.ws-footer-cols--4{
  margin-bottom: -80px;
}

/* =========================================================
   ACCESSIBILITY: Förbättrad kontrast
   ========================================================= */

/* Footer text - minst 4.5:1 kontrast */
.ws-footer-cols,
.ws-footer-cols a,
.ws-footer-cols p,
.ws-footer-cols li,
.ws-footer-cols .widget-title,
.ws-footer-cols .widgettitle{
  color: #333 !important;
}

.ws-footer-cols a:hover{
  color: #111 !important;
}

/* Footer bar - bättre kontrast */
.ws-footer-bar,
.ws-footer-bar a,
.ws-footer-bar p{
  color: #444 !important;
}

/* Fineprint och small text - tillgänglig kontrast */
.fineprint,
small,
.small-text,
.text-muted{
  color: #595959 !important; /* 4.5:1 mot vit */
}

/* Screen reader only class */
.screen-reader-text,
.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

div.textwidget{
  font-weight: 100 !important;
  font-family: deva-ideal, sans-serif !important;
  font-size: 24px !important;
}

/* Override random inline bg */
div [style^="background-color:#ebebec"]{
  background-color: #fff !important;
}


/* =========================================================
   BUTTONS / HOVERS (WP blocks)
   ========================================================= */

.wp-block-button:hover{
  background-color: transparent;
  transition: 0.7s;
}


/* =========================================================
   NOTIS TEXT
   ========================================================= */

.njt-nofi-padding-text{
  font-family: deva-ideal, sans-serif;
  word-spacing: 6px;
  letter-spacing: 1px;
  font-weight: 100;
  padding: 1px;
}


/* =========================================================
   FEATURED CATEGORY (Woo Blocks)
   ========================================================= */

.wc-block-featured-category{
  width: 100%;
  transition: 0.3s all ease-in-out;
}

.wc-block-featured-category:hover{
  transform: scale(1.1);
}


/* =========================================================
   DELMONT (liten widget)
   ========================================================= */

div.delmont-powered-by{
  margin: 0 !important;
  border-radius: 0 !important;
  width: 1px !important;
  padding: 1px 1px !important;
  bottom: 1px !important;
  left: 1px !important;
}


/* =========================================================
   HVRBOX (hover-bild overlay)
   ========================================================= */

.hvrbox,
.hvrbox *{
  box-sizing: border-box;
}

.hvrbox{
  position: relative;
  display: inline-block;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}

.hvrbox img{
  max-width: 100%;
}

.hvrbox .hvrbox-layer_bottom{
  display: block;
}

.hvrbox .hvrbox-layer_top{
  opacity: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 15px;
  transition: all 0.4s ease-in-out 0s;
}

.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top{
  opacity: 0.6;
}

.hvrbox .hvrbox-text{
  text-align: center;
  font-family: deva-ideal, sans-serif !important;
  font-weight: 100;
  font-size: 38px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hvrbox .hvrbox-text_mobile{
  font-size: 15px;
  border-top: 1px solid rgba(179,179,179,0.7);
  margin-top: 5px;
  padding-top: 2px;
  display: none;
}

.hvrbox.active .hvrbox-text_mobile{
  display: block;
}


/* =========================================================
   Woo layered nav color dots
   ========================================================= */

.wc-layered-nav-term-color{
  border-radius: 50%;
}


/* =========================================================
   IMAGE + OVERLAY BUTTON (äldre bannerknapp)
   ========================================================= */

.image-container{
  position: relative;
  display: inline-block;
}

.image-container img{
  display: block;
  width: 100%;
}

/* Anpassa dessa värden efter bilden */
.overlay-button{
  position: absolute;
  top: 310px;
  left: 68px;
  width: 160px;
  height: 54px;
  border-radius: 3pc;
  background-color: #374250;
  border: none;
}


/* =========================================================
   COS-CARD (produktkort)
   ========================================================= */

.cos-card{
  width: min(380px, 100%);
  padding-top: 30px;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

.cos-card__link{
  position: relative;
  display: block;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  transform: translateZ(0);
}

.cos-card__img{
  width: 100%;
  height: 320px;
  object-fit: contain;
  background: #fff;
  display: block;
  transform: scale(1.02);
  transition: transform .45s ease;
  filter: saturate(1.02) contrast(1.02);
}

.cos-card__overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 20% 20%, rgba(255,255,255,.15), transparent 60%),
    linear-gradient(to top, rgba(55,66,80,.75), rgba(55,66,80,0) 55%);
  opacity: .5;
  transition: opacity .45s ease;
}

.cos-card__content{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  color: #fff;
}

.cos-card__title{
  font-family: ui-serif, "EB Garamond", "Georgia", serif;
  font-size: 26px;
  letter-spacing: .2px;
  line-height: 1.1;
}

.cos-card__cta{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .45s ease, transform .45s ease;
}

.cos-card__link:hover .cos-card__img{
  transform: scale(1.08);
}

.cos-card__link:hover .cos-card__overlay{
  opacity: 1;
}

.cos-card__link:hover .cos-card__cta{
  background: rgba(255,255,255,.26);
  transform: translateY(-2px);
}

.cos-card__link:focus-visible{
  outline: 3px solid rgba(55,66,80,.35);
  outline-offset: 4px;
}


/* =========================================================
   HERO IMAGE + CTA BUTTON (äldre)
   ========================================================= */

.hero-image--cta{
  position: relative;
}

.jn-btn--onimage{
  position: absolute;
  left: 758px;
  bottom: 88px;
  z-index: 2;
}

.jn-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: #374250;
  color: #fff;
  text-decoration: none;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 12px 26px rgba(55,66,80,.25);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.jn-btn::after{
  content: "→";
}

.jn-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(55,66,80,.32);
}

.jn-btn:focus-visible{
  outline: 3px solid rgba(55,66,80,.35);
  outline-offset: 4px;
}

@media (max-width: 600px){
  .jn-btn--onimage{
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
  }
  .jn-btn{
    padding: 12px 18px;
  }
}

/* Hero wrapper */
.hero-image{
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

.hero-image img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: #fff;
}

.hero-image:hover{
  transform: translateY(-2px);
  transition: transform .25s ease;
}


/* ==========================================================
   JN – BANNER STATISK HERO (HTML) – fullbredd, UTAN bakgrundsbild
   (LJUS / BEAUTY)
   ========================================================== */

/* Split Hero - Text vänster, Bild höger */
.jn-hero{
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  min-height: clamp(400px, 45vw, 580px) !important;
  overflow: hidden;

  /* Mjuk bakgrund */
  background: linear-gradient(135deg, #faf9f7 0%, #f5f4f2 100%);
}

/* Bilddelen - höger sida */
.jn-hero__media{
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;

  /* BILD HÄR - byt ut URL:en till din bild */
  background-image: url('https://www.jn-nails.se/wp-content/uploads/2025/12/IMG_5497-1.jpg');
  background-size: cover;
  background-position: center;

  /* Mjuk kant mot texten */
  mask-image: linear-gradient(to right, transparent 0%, black 15%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%);
}

/* Mjuk overlay på bilden */
.jn-hero::before{
  content:"";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(250,249,247,1) 0%,
    rgba(250,249,247,0.3) 30%,
    transparent 60%
  );
  pointer-events: none;
}

/* Subtil textur */
.jn-hero::after{
  content:"";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 60% 50% at 25% 50%, rgba(255,255,255,.5), transparent 60%);
  pointer-events: none;
}

/* Inner wrapper */
.jn-hero__inner{
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(28px, 4.2vw, 72px) 24px;
  box-sizing: border-box;

  min-height: inherit;
  display: flex;
  align-items: center;
}

/* Textkort – flyttbar med variabler */
.jn-hero__card{
  --jn-card-max: 640px;
  --jn-card-x: 0px;
  --jn-card-y: 0px;

  max-width: var(--jn-card-max);
  transform: translate(var(--jn-card-x), var(--jn-card-y));

  /* mörk text för ljus layout */
  color: #111;
  text-shadow: none;
}

/* Logo */
.jn-hero__logo{
  width: clamp(92px, 10vw, 138px);
  height: auto;
  display: block;
  margin: 0 0 14px;

  /* mjuk skugga funkar även på ljust */
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.12));
}

/* Rubrik + text */
.jn-hero__title{
  margin: 0 0 10px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: .01em;
  font-size: clamp(28px, 3.2vw, 48px);

  color: #374250;
}

.jn-hero__lead{
  margin: 0 0 18px;
  max-width: 62ch;
  line-height: 1.55;
  font-size: clamp(14px, 1.15vw, 16px);

  color: rgba(17,17,17,.74);
}

/* Knappar */
.jn-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.jn-hero__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 46px;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;

  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;

  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease;
  box-sizing: border-box;
}

/* Primär knapp (mörk elegant) */
.jn-hero__btn--primary{
  background: #374250;
  color: #fff !important;
  border: 1px solid rgba(55,66,80,.22);
  box-shadow: 0 14px 34px rgba(55,66,80,.20);
}

.jn-hero__btn--primary::after{
  content:"→";
  opacity: .9;
}

/* Sekundär “glass” (ljus) */
.jn-hero__btn--ghost{
  background: rgba(255,255,255,.72);
  color: #374250 !important;
  border: 1px solid rgba(55,66,80,.18);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (hover:hover){
  .jn-hero__btn:hover{
    transform: translateY(-2px);
    opacity: .98;
  }

  .jn-hero__btn--primary:hover{
    box-shadow: 0 18px 42px rgba(55,66,80,.22);
  }

  .jn-hero__btn--ghost:hover{
    border-color: rgba(55,66,80,.26);
    box-shadow: 0 14px 30px rgba(0,0,0,.10);
  }
}

/* Mobil - bild ovanför text */
@media (max-width: 900px){
  .jn-hero{
    min-height: auto !important;
    display: flex;
    flex-direction: column;
  }

  .jn-hero__media{
    position: relative;
    width: 100%;
    height: 280px;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .jn-hero::before{
    width: 100%;
    height: 280px;
    background: linear-gradient(
      180deg,
      transparent 50%,
      rgba(250,249,247,0.5) 80%,
      rgba(250,249,247,1) 100%
    );
  }

  .jn-hero__inner{
    align-items: flex-start;
    padding: 24px 18px 36px;
  }

  .jn-hero__card{
    --jn-card-max: 100%;
    --jn-card-x: 0px;
    --jn-card-y: 0px;
  }

  .jn-hero__btn{
    width: 100%;
  }
}


/* =========================================================
   Woo Blocks – 2 produkter per rad på mobil (Product New)
   ========================================================= */

@media (max-width: 768px){
  .wp-block-woocommerce-product-new .wc-block-grid__products{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .wp-block-woocommerce-product-new .wc-block-grid__product{
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .wp-block-woocommerce-product-new .wc-block-grid__product-image img{
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 16px;
  }
}


/* =========================================================
   WooCommerce – "Slut i lager" Badge (Classic + Blocks)
   ========================================================= */

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
  position: relative !important;
  display: block !important;
}

.wc-block-grid__product,
.wc-block-grid__product-link,
.wc-block-components-product-image,
.wc-block-components-product-image__wrapper,
.wc-block-components-product-image__link,
.wc-block-components-product-image__placeholder{
  position: relative !important;
  display: block !important;
}

.wc-block-components-product-image__wrapper{
  overflow: visible !important;
}

.jn-badge.jn-badge--oos{
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 10 !important;

  padding: 9px 12px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(255,255,255,.95) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  color: #374250 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;

  box-shadow: 0 12px 26px rgba(0,0,0,.12) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.35) !important;

  pointer-events: none !important;
}

.jn-badge.jn-badge--oos::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 999px !important;
  background: radial-gradient(120% 120% at 20% 15%, rgba(255,255,255,.55), transparent 60%) !important;
  opacity: .9 !important;
  pointer-events: none !important;
}

@media (max-width: 480px){
  .jn-badge.jn-badge--oos{
    top: 10px !important;
    left: 10px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
}


/* =========================================================
   MOBIL-FIX: knappar i produktkort (Classic + Blocks)
   ========================================================= */

@media (max-width: 768px){
  /* Classic */
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product a.button,
  .woocommerce ul.products li.product .added_to_cart{
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 44px !important;
    line-height: 1.2 !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    text-align: center !important;
    max-width: 100% !important;
  }

  /* Blocks */
  .wc-block-grid__product .wp-block-button__link,
  .wc-block-grid__product .button,
  .wc-block-grid__product a.button,
  .wc-block-grid__product .wc-block-components-button{
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 44px !important;
    line-height: 1.2 !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    text-align: center !important;
    max-width: 100% !important;
  }

  /* Safety: om wrapper klipper */
  .woocommerce ul.products li.product,
  .wc-block-grid__product{
    overflow: visible !important;
  }
}


/* =========================================================
   DÖLJ "visa lösenord"
   ========================================================= */

.show-password-input{
  display: none;
}


/* =========================================================
   JN – BIAB / RUBBER (Layout + “ingen lucka” i grid)
   ========================================================= */

.jn-biab-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px 42px;
}

.jn-biab-hero{
  display: grid;
  grid-template-columns: 4fr 1fr;
  gap: 18px;
  align-items: stretch;
  border-radius: 18px;
  padding: 26px 18px;
  border: 1px solid rgba(55,66,80,.10);
  margin-bottom: 18px;
}
.jn-biab-hero__text{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.jn-biab-hero__products{
  background: #fff;
  border: 1px solid rgba(55,66,80,.12);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.jn-biab-hero__products h3{
  margin: 0;
  font-size: 16px;
}

.jn-biab-title{
  margin: 0 0 8px;
  line-height: 1.1;
}

.jn-biab-lead{
  margin: 0;
  font-size: 16px;
  opacity: .92;
  max-width: 68ch;
}

.jn-biab-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 26px;
  align-items: start;
}

.jn-biab-grid > .jn-biab-aside{
  display: contents;
}

.jn-biab-card{
  background: #fff;
  border: 1px solid rgba(55,66,80,.12);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.jn-biab-card--soft{
  background: rgba(255,255,255,.92);
}

.jn-biab-grid > .jn-biab-card{
  grid-column: 1;
}

.jn-biab-grid .jn-biab-card--soft{
  grid-column: 1 / -1;
  margin-top: -6px;
}

.jn-biab-figure{
  grid-column: 2;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(55,66,80,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.jn-biab-figure img{
  width: 100%;
  height: auto;
  display: block;
}

.jn-biab-figure figcaption{
  padding: 10px 12px;
  font-size: 13px;
  opacity: .85;
}

.jn-biab-highlight{
  margin-top: 14px;
  padding: 14px 14px 10px;
  border-radius: 16px;
  background: rgba(55,66,80,.06);
  border: 1px solid rgba(55,66,80,.10);
}

.jn-biab-highlight h3{
  margin: 0 0 8px;
  font-size: 16px;
}

.jn-biab-highlight ul{
  margin: 0;
  padding-left: 18px;
}

.jn-biab-check{
  margin: 10px 0 0;
  padding-left: 0;
  list-style: none;
}

.jn-biab-check li{
  margin: 8px 0;
  padding-left: 26px;
  position: relative;
}

.jn-biab-check li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  opacity: .85;
}

.jn-biab-section{
  margin-top: 18px;
}

.jn-biab-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.jn-biab-mini{
  background: #fff;
  border: 1px solid rgba(55,66,80,.12);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.jn-biab-mini h3{
  margin: 0 0 6px;
  font-size: 16px;
}

.jn-biab-mini p{
  margin: 0;
  opacity: .9;
}

.jn-biab-faq details{
  background: #fff;
  border: 1px solid rgba(55,66,80,.12);
  border-radius: 16px;
  padding: 12px 14px;
  margin: 10px 0;
}

.jn-biab-faq summary{
  cursor: pointer;
  font-weight: 600;
}

.jn-biab-cta{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(55,66,80,.06);
  border: 1px solid rgba(55,66,80,.10);
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.jn-biab-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  background: #374250;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(55,66,80,.20);
}

.jn-biab-btn:hover{
  opacity: .92;
  color: #fff !important;
}

@media (max-width: 900px){
  .jn-biab-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .jn-biab-grid > .jn-biab-card,
  .jn-biab-figure,
  .jn-biab-grid .jn-biab-card--soft{
    grid-column: 1 / -1;
  }

  .jn-biab-cards{
    grid-template-columns: 1fr;
  }
  .jn-biab-hero{
  grid-template-columns: 1fr;
}
}


/* =========================================================
   JN – Kurs-sida: Manikyrutbildning (Naturliga Naglar)
   ========================================================= */

.jn-course{
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 16px 46px;
}

.jn-course__hero{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
}

.jn-course__heroText{
  background: #fff;
  border: 1px solid rgba(55,66,80,.12);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.jn-course__kicker{
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .75;
}

.jn-course__title{
  margin: 0 0 10px;
  line-height: 1.05;
}

.jn-course__lead{
  margin: 0 0 14px;
  opacity: .92;
  max-width: 70ch;
}

.jn-course__meta{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.jn-course__metaItem{
  border: 1px solid rgba(55,66,80,.12);
  border-radius: 16px;
  padding: 12px 12px 10px;
  background: rgba(55,66,80,.03);
}

.jn-course__metaLabel{
  display: block;
  font-size: 12px;
  opacity: .72;
  margin-bottom: 4px;
}

.jn-course__metaValue{
  display: block;
  font-weight: 700;
  letter-spacing: .01em;
}

.jn-course__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.jn-course__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(55,66,80,.18);
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
  min-height: 44px;
  box-sizing: border-box;
}

.jn-course__btn--primary{
  background: #374250;
  color: #fff;
  box-shadow: 0 10px 22px rgba(55,66,80,.18);
}

.jn-course__btn--primary:hover{
  color: #fff;
}

.jn-course__btn--ghost{
  background: #fff;
  color: #374250;
}

.jn-course__btn:hover{
  opacity: .95;
  transform: translateY(-1px);
}

.jn-course__heroMedia{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(55,66,80,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  display: grid;
  grid-template-rows: 1fr auto;
}

.jn-course__heroMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jn-course__heroMedia figcaption{
  padding: 10px 12px;
  font-size: 13px;
  opacity: .85;
}

.jn-course__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.jn-course__card{
  background: #fff;
  border: 1px solid rgba(55,66,80,.12);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.jn-course__card--soft{
  background: rgba(55,66,80,.03);
}

.jn-course__card h2{
  margin: 0 0 10px;
  font-size: 18px;
}

.jn-course__list{
  margin: 10px 0 0;
  padding-left: 18px;
}

.jn-course__note{
  margin-top: 14px;
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: rgba(55,66,80,.06);
  border: 1px solid rgba(55,66,80,.10);
  opacity: .95;
}

.jn-course__pillRow{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.jn-course__pill{
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(55,66,80,.12);
  font-size: 13px;
}

.jn-course__card--price .jn-course__price{
  margin: 6px 0 10px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .01em;
}

.jn-course__card--price .jn-course__price span{
  font-size: 14px;
  font-weight: 600;
  opacity: .75;
}

.jn-course__cta{
  margin-top: 16px;
  border-radius: 18px;
  background: rgba(55,66,80,.06);
  border: 1px solid rgba(55,66,80,.10);
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.jn-course__ctaText h2{
  margin: 0 0 6px;
  font-size: 18px;
}

.jn-course__ctaText p{
  margin: 0;
  opacity: .9;
  max-width: 75ch;
}

.jn-course__ctaActions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 980px){
  .jn-course__hero{
    grid-template-columns: 1fr;
  }
  .jn-course__meta{
    grid-template-columns: 1fr;
  }
  .jn-course__grid{
    grid-template-columns: 1fr;
  }
  .jn-course__heroMedia img{
    height: auto;
  }
}


/* =========================================================
   Små overrides du hade längst ner
   ========================================================= */

.ws-page-header-title{
  display: none;
}
.ws-page-header{
  padding: 0;
  padding-bottom: 0;
}

.site-content{
  padding-top: 0;
}

.jn-course__hero{
  align-items: start !important;
}

.jn-course__heroMedia{
  grid-template-rows: auto auto !important;
}

.jn-course__heroMedia img{
  height: auto !important;
}

.text-box-boka{
  margin-bottom: 0;
}

/* Bilden ska få plats i boxen utan beskärning */
.jn-course__heroMedia img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

.jn-course__heroMedia{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (min-width: 901px){
  .jn-course__heroMedia img{
    max-height: 345px !important;
  }
}


/* =========================================================
   JN – OM OSS (om-sidan)
   ========================================================= */

.jn-about{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px 44px;
}

.jn-about__hero{
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.jn-about__eyebrow{
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .7;
}

.jn-about__title{
  margin: 0 0 10px;
  line-height: 1.1;
}

.jn-about__lead{
  margin: 0;
  font-size: 16px;
  opacity: .92;
  max-width: 70ch;
}

.jn-about__card{
  background: #fff;
  border: 1px solid rgba(55,66,80,.12);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.jn-about__heroCard h3{
  margin: 0 0 10px;
}

.jn-about__check{
  margin: 0;
  padding: 0;
  list-style: none;
}

.jn-about__check li{
  margin: 10px 0;
  padding-left: 26px;
  position: relative;
}

.jn-about__check li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  opacity: .85;
}

.jn-about__ctaRow{
  margin-top: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.jn-about__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  background: #374250;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(55,66,80,.20);
  box-shadow: 0 10px 22px rgba(55,66,80,.18);
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}

.jn-about__btn:hover{
  opacity: .95;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(55,66,80,.22);
  color: #fff !important;
}

.jn-about__btn--ghost{
  background: rgba(55,66,80,.06);
  color: #374250;
  box-shadow: none;
}

.jn-about__sub{
  font-size: 13px;
  opacity: .8;
}

.jn-about__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.jn-about__soft{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(55,66,80,.06);
  border: 1px solid rgba(55,66,80,.10);
}

.jn-about__note{
  margin-top: 12px;
  opacity: .9;
}

.jn-about__card--wide{
  margin-bottom: 18px;
}

.jn-about__mapWrap{
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 18px;
  align-items: stretch;
}

.jn-about__mapCard{
  background: rgba(55,66,80,.06);
  border: 1px solid rgba(55,66,80,.10);
  border-radius: 18px;
  padding: 18px;
}

.jn-about__map{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(55,66,80,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  background: #fff;
  min-height: 320px;
}

.jn-about__map iframe{
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  display: block;
}

.jn-about__footer{
  margin-top: 18px;
  text-align: center;
  background: rgba(55,66,80,.06);
  border: 1px solid rgba(55,66,80,.10);
  border-radius: 18px;
  padding: 18px;
}

.jn-about__footer h2{
  margin: 0 0 8px;
}

@media (max-width: 900px){
  .jn-about__hero,
  .jn-about__grid,
  .jn-about__mapWrap{
    grid-template-columns: 1fr;
  }
}

.jn-about__card--wide h2{
  display: flex;
  align-items: center;
  gap: 10px;
}

.jn-about__card--brows h2{
  display: flex;
  align-items: center;
  gap: 10px;
}

.jn-about__card--brows h2::after{
  content: "NYHET";
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(55,66,80,.06);
  border: 1px solid rgba(55,66,80,.10);
  color: #374250;
}

.jn-about__card--stack,
.jn-about__mapCard--stack{
  display: flex;
  flex-direction: column;
}

.jn-about__card--stack .jn-about__btn,
.jn-about__mapCard--stack .jn-about__btn{
  margin-top: auto;
}


/* =========================================================
   JN COURSE – Bild i hero (utan text, utan vita kanter)
   ========================================================= */

.jn-course__heroMedia{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(55,66,80,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  display: block !important;
}

@media (min-width: 981px){
  .jn-course__heroMedia{
    height: 345px;
  }
}

@media (max-width: 980px){
  .jn-course__heroMedia{
    height: auto;
  }
}

.jn-course__heroMedia img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}


/* =========================================================
   Mobil: håll undermenyn på en rad
   ========================================================= */

@media (max-width: 782px){
  ul.sub-menu > li > a{
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}


/* =========================================================
   Produktkatalog – kort (ws-product--style-1)
   ========================================================= */

:root{
  --jn-pad: 14px;
  --jn-radius: 18px;
  --jn-thumb-radius: 16px;

  --jn-border: rgba(17,17,17,.10);
  --jn-border-hover: rgba(17,17,17,.18);

  --jn-shadow: 0 18px 50px rgba(0,0,0,.10);

  --jn-text: #111;
  --jn-muted: rgba(17,17,17,.70);

  --jn-btn-bg: rgba(17,17,17,.92);
  --jn-btn-bg-hover: #111;
  --jn-btn-text: #fff;
  --jn-btn-border: rgba(255,255,255,.14);
}

.woocommerce ul.products li.ws-product--style-1{
  position: relative !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid var(--jn-border) !important;
  border-radius: var(--jn-radius) !important;
  padding: var(--jn-pad) !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.woocommerce ul.products li.ws-product--style-1,
.woocommerce ul.products li.ws-product--style-1:hover,
.woocommerce ul.products li.ws-product--style-1 .product__thumbnail,
.woocommerce ul.products li.ws-product--style-1 .product__content,
.woocommerce ul.products li.ws-product--style-1 .product__thumbnail a,
.woocommerce ul.products li.ws-product--style-1 .product__thumbnail img,
.woocommerce ul.products li.ws-product--style-1 .woocommerce-LoopProduct-link{
  transform: none !important;
}

.woocommerce ul.products li.ws-product--style-1 .product__thumbnail{
  position: relative;
  overflow: hidden !important;
  border-radius: var(--jn-thumb-radius) !important;
}

.woocommerce ul.products li.ws-product--style-1 .product__thumbnail a{
  display: block;
}

.woocommerce ul.products li.ws-product--style-1 .product__thumbnail img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center !important;
  transform-origin: center center !important;
  transition: transform .28s ease, filter .28s ease;
}

.woocommerce ul.products li.ws-product--style-1 .product__content{
  position: relative !important;
  padding-top: 12px !important;
}

.woocommerce ul.products li.ws-product--style-1 a.woocommerce-LoopProduct-link{
  text-decoration: none;
}

.woocommerce ul.products li.ws-product--style-1 .woocommerce-loop-product__title{
  color: var(--jn-text);
  font-weight: 450;
  letter-spacing: .01em;
  line-height: 1.25;
  margin: 0 0 6px;
}

.woocommerce ul.products li.ws-product--style-1 .price{
  color: var(--jn-muted);
  font-weight: 650;
  margin: 0;
}

.woocommerce ul.products li.ws-product--style-1 .product__content > a.button{
  position: absolute !important;
  left: var(--jn-pad) !important;
  right: var(--jn-pad) !important;
  bottom: var(--jn-pad) !important;
  z-index: 20 !important;

  top: auto !important;
  margin: 0 !important;

  box-sizing: border-box !important;
  border-radius: 999px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 44px !important;
  padding: 0 14px !important;

  background: var(--jn-btn-bg) !important;
  color: var(--jn-btn-text) !important;
  border: 1px solid var(--jn-btn-border) !important;

  font-weight: 600 !important;
  letter-spacing: .02em;
  text-transform: none !important;
  line-height: 1.1 !important;

  box-shadow: 0 10px 22px rgba(0,0,0,.18);

  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(10px) !important;
  pointer-events: none !important;

  transition: opacity .20s ease, transform .20s ease, box-shadow .20s ease, background .20s ease;
}

.woocommerce ul.products li.ws-product--style-1 .added_to_cart{
  display: none !important;
}

@media (hover:hover){
  .woocommerce ul.products li.ws-product--style-1:hover{
    transform: translateY(-6px) !important;
    box-shadow: var(--jn-shadow) !important;
    border-color: var(--jn-border-hover) !important;
  }

  .woocommerce ul.products li.ws-product--style-1:hover .product__thumbnail img{
    transform: scale(1.02) !important;
    filter: saturate(1.03);
  }

  .woocommerce ul.products li.ws-product--style-1:hover .product__content > a.button{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(5px) !important;
    pointer-events: auto !important;
  }

  .woocommerce ul.products li.ws-product--style-1 .product__content > a.button:hover{
    background: var(--jn-btn-bg-hover) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.22);
  }
}

@media (hover:none){
  .woocommerce ul.products li.ws-product--style-1{
    overflow: visible !important;
  }

  .woocommerce ul.products li.ws-product--style-1 .product__content > a.button{
    position: static !important;
    margin-top: 12px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }
}

.woocommerce ul.products li.ws-product--style-1 span.onsale{
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* =========================================================
   PRODUKTGRID: Konsekvent layout för namn & pris
   ========================================================= */

/* Gör produktkortet till flexbox för jämn höjd */
.woocommerce ul.products li.ws-product--style-1{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Fast aspect-ratio på bilderna för konsekvent höjd */
.woocommerce ul.products li.ws-product--style-1 .product__thumbnail{
  aspect-ratio: 3 / 4 !important;
  flex-shrink: 0 !important;
}

/* Content-area fyller resterande utrymme */
.woocommerce ul.products li.ws-product--style-1 .product__content{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* Titeln begränsas till 2 rader med ellipsis */
.woocommerce ul.products li.ws-product--style-1 .woocommerce-loop-product__title{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
  min-height: calc(1.25em * 2) !important;
}

/* Priset pushas till botten av content-arean */
.woocommerce ul.products li.ws-product--style-1 .price{
  margin-top: auto !important;
}

/* Säkerställ att gridet sträcker korten */
.woocommerce ul.products{
  align-items: stretch !important;
}

/* WooCommerce felruta: gör texten vit */
.woocommerce-error,
.woocommerce-error li,
.woocommerce-error li a{
  color: #fff !important;
}


/* =========================================================
   Latest products – små äldre regler (rensade för syntax)
   ========================================================= */

.jn-latest-products .jn-content{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.jn-latest-products .jn-title{
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

@media (hover:hover){
  .jn-latest-products .jn-product-card:hover .jn-btn{
    transform: translateY(5px) !important; /* (du hade !imortant) */
  }
}

.jn-product-card{
  margin-top: 20px;
  margin-bottom: 20px;
}


/* ==========================================================
   JN LATEST PRODUCTS – KOMPLETT & STABIL (endast latest)
   ========================================================== */

.jn-latest-products{
  --jn-pad: 14px;
  --jn-radius: 18px;
  --jn-thumb-radius: 16px;

  --jn-border: rgba(17,17,17,.10);
  --jn-border-hover: rgba(17,17,17,.18);
  --jn-shadow: 0 18px 50px rgba(0,0,0,.10);

  --jn-text: #111;
  --jn-muted: rgba(17,17,17,.70);

  --jn-btn-bg: rgba(17,17,17,.92);
  --jn-btn-bg-hover: #111;
  --jn-btn-text: #fff;
  --jn-btn-border: rgba(255,255,255,.14);

  --jn-thumb-ratio: 3 / 4;
  --jn-lift: 52px;
}

.jn-latest-products .jn-products-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px !important;

  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;

  align-items: stretch !important;
}

@media (max-width: 900px){
  .jn-latest-products .jn-products-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 10px !important;
  }
}

.jn-latest-products .jn-product-card{
  position: relative !important;
  box-sizing: border-box !important;

  background: #fff !important;
  border: 1px solid var(--jn-border) !important;
  border-radius: var(--jn-radius) !important;
  padding: var(--jn-pad) !important;

  overflow: hidden !important;

  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;

  margin: 0 !important;

  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.jn-latest-products .jn-thumb{
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--jn-thumb-radius) !important;
  aspect-ratio: var(--jn-thumb-ratio) !important;
}

.jn-latest-products .jn-thumb img{
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center !important;

  display: block !important;

  transform-origin: center center !important;
  transition: transform .28s ease, filter .28s ease;
}

.jn-latest-products .jn-content{
  position: relative !important;
  padding-top: 12px !important;
  flex: 1 1 auto !important;
  transition: transform .22s ease;
}

.jn-latest-products .jn-title{
  margin: 0 0 2px !important;
  color: var(--jn-text) !important;
  font-weight: 450 !important;
  line-height: 1.25 !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;

  min-height: calc(1.25em * 2) !important;
}

.jn-latest-products .jn-price{
  margin: 0 !important;
  color: var(--jn-muted) !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

.jn-latest-products .jn-btn{
  position: absolute !important;
  left: var(--jn-pad) !important;
  right: var(--jn-pad) !important;
  bottom: var(--jn-pad) !important;
  z-index: 10 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;

  background: var(--jn-btn-bg) !important;
  color: var(--jn-btn-text) !important;
  border: 1px solid var(--jn-btn-border) !important;

  font-weight: 600 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;

  box-shadow: 0 10px 22px rgba(0,0,0,.18) !important;

  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(12px) !important;
  pointer-events: none !important;

  transition: opacity .20s ease, transform .20s ease, box-shadow .20s ease, background .20s ease;
}

@media (hover:hover){
  .jn-latest-products .jn-product-card:hover{
    transform: translateY(-6px) !important;
    box-shadow: var(--jn-shadow) !important;
    border-color: var(--jn-border-hover) !important;
  }

  .jn-latest-products .jn-product-card:hover .jn-thumb img{
    transform: scale(1.02) !important;
    filter: saturate(1.03);
  }

  .jn-latest-products .jn-product-card:hover .jn-content{
    transform: translateY(calc(-1 * var(--jn-lift))) !important;
  }

  .jn-latest-products .jn-product-card:hover .jn-btn{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(5px) !important;
    pointer-events: auto !important;
  }

  .jn-latest-products .jn-btn:hover{
    background: var(--jn-btn-bg-hover) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.22) !important;
    color: #fff !important;
  }
}

@media (hover:none){
  .jn-latest-products .jn-btn{
    position: static !important;
    margin-top: 12px !important;

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .jn-latest-products .jn-product-card{
    overflow: visible !important;
  }
}

.jn-latest-products .jn-btn{
  font-weight: 500 !important;
}

/* Latest: tajtare mellan produktnamn och pris */
.jn-latest-products .jn-content .jn-title{
  margin: 0 0 2px !important;
  padding: 0 !important;
  line-height: 1.15 !important;
}

.jn-latest-products .jn-content .jn-price{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.15 !important;
}

.jn-latest-products .jn-content .jn-price small{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: inline !important;
}

.jn-latest-products a.jn-btn.button{
  font-weight: 400 !important;
}

@media (max-width: 900px){
  .jn-latest-products a.jn-btn.button{
    font-weight: 400 !important;
  }
}


/* =========================================================
   KATALOG (mobil): jämna ut titel+pris när namn är långt
   ========================================================= */

@media (max-width: 768px){
  .woocommerce ul.products li.ws-product--style-1 .woocommerce-loop-product__title{
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;

    line-height: 1.2 !important;
    margin: 0 0 4px !important;

    min-height: calc(1.2em * 2) !important;
  }

  .woocommerce ul.products li.ws-product--style-1 .price{
    margin: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .woocommerce ul.products li.ws-product--style-1 .price small{
    display: inline !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
}


/* ==========================================================
   JN – Bredda sajten generellt (desktop)
   ========================================================== */

@media (min-width: 992px){
  :root{
    --jn-site-width: 1320px;
    --jn-side-pad: 24px;
  }

  .ws-container{
    max-width: var(--jn-site-width) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--jn-side-pad) !important;
    padding-right: var(--jn-side-pad) !important;
    box-sizing: border-box !important;
  }

  .site-content{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}



/* ==========================================================
   Fullbreddssektion “Våra produkter är…”
   ========================================================== */

.jn-values--full{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  padding: 54px 0;
  background: rgba(55,66,80,.06);
  border-top: 1px solid rgba(55,66,80,.10);
  border-bottom: 1px solid rgba(55,66,80,.10);
}

.jn-values__inner{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.jn-values__head{
  text-align: center;
  margin-bottom: 18px;
}

.jn-values__title{
  margin: 0 0 6px;
  font-weight: 450;
  letter-spacing: .01em;
  color: #505050;
}

.jn-values__sub{
  margin: 0;
  opacity: .85;
}

.jn-values__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.jn-value{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(55,66,80,.12);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 14px;
  align-items: start;
}

.jn-value__icon{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(55,66,80,.06);
  border: 1px solid rgba(55,66,80,.10);
  color: #374250;
}

.jn-value__icon svg{
  width: 26px;
  height: 26px;
}

.jn-value__title{
  margin: 2px 0 4px;
  font-weight: 500;
  color: #111;
}

.jn-value__text{
  margin: 0;
  color: rgba(17,17,17,.72);
  line-height: 1.35;
}

@media (max-width: 900px){
  .jn-values__grid{
    grid-template-columns: 1fr;
  }
  .jn-values--full{
    padding: 38px 0;
  }
}

/* FIX: låt texten ligga i kolumn 2 (inte under ikonen) */
.jn-values .jn-value__icon{
  grid-row: 1 / span 2;
  grid-column: 1;
}

.jn-values .jn-value__title,
.jn-values .jn-value__text{
  grid-column: 2;
}


/* ==========================================================
   Startsida “Om oss” (Skinelle-inspirerad)
   ========================================================== */

.jn-home-about{
  padding: 72px 0;
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(55,66,80,.08), transparent 55%),
    rgba(55,66,80,.04);
  border-top: 1px solid rgba(55,66,80,.10);
  border-bottom: 1px solid rgba(55,66,80,.10);
}

.jn-home-about__inner{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 26px;
  align-items: center;
  box-sizing: border-box;
}

.jn-home-about__kicker{
  margin: 0 0 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .75;
}

.jn-home-about__title{
  margin: 0 0 22px;
  line-height: 1.08;
  font-weight: 450;
  color: #505050;
}

.jn-home-about__lead{
  margin: 0 0 38px!important;
  line-height: 1.55;
  opacity: .9;
  max-width: 70ch;
}

.jn-home-about__badges{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 22px;
}

.jn-badgeCard{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(55,66,80,.12);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 76px;
}

.jn-badgeCard__icon{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(55,66,80,.06);
  border: 1px solid rgba(55,66,80,.10);
  color: #374250;
  font-weight: 700;
  flex: 0 0 auto;
}

.jn-badgeCard__icon svg{
  width: 22px;
  height: 22px;
  display: block;
}

.jn-badgeCard__title{
  font-weight: 500;
  line-height: 1.2;
  margin-top: 2px;
}

.jn-badgeCard__text{
  opacity: .8;
  font-size: 13px;
  line-height: 1.25;
  margin-top: 4px;
}

.jn-home-about__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.jn-home-about__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid rgba(55,66,80,.18);
  min-height: 44px;
  box-sizing: border-box;
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}

.jn-home-about__btn--primary{
  background: #374250;
  color: #fff;
  box-shadow: 0 10px 22px rgba(55,66,80,.18);
}

.jn-home-about__btn--primary:hover{
  color: #fff;
  transform: translateY(-1px);
}

.jn-home-about__btn--ghost{
  background: #fff;
  color: #374250;
}

.jn-home-about__btn--ghost:hover{
  transform: translateY(-1px);
}

.jn-home-about__media{
  position: relative;
}

.jn-photoGrid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 12px;
  align-items: stretch;
}

.jn-photo{
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(55,66,80,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  position: relative;
}

.jn-photo img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.jn-photo--big{
  grid-row: 1 / span 2;
  min-height: 420px;
}

.jn-photo:not(.jn-photo--big){
  min-height: 204px;
}

@media (hover:hover){
  .jn-photo img{
    transition: transform .5s ease;
  }
  .jn-photo:hover img{
    transform: scale(1.03);
  }
}

@media (max-width: 980px){
  .jn-home-about__inner{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .jn-home-about__badges{
    grid-template-columns: 1fr;
  }

  .jn-photo--big{
    min-height: 320px;
  }

  .jn-photo:not(.jn-photo--big){
    min-height: 180px;
  }
}

@media (max-width: 600px){
  .jn-home-about{
    padding: 54px 0;
  }

  .jn-photoGrid{
    grid-template-columns: 1fr;
  }

  .jn-photo--big{
    grid-row: auto;
  }
}


/* ==========================================================
   Startsida “Manikyrutbildning” (fullbredd)
   ========================================================== */

.jn-home-course--full{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  padding: 64px 0;
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(55,66,80,.08), transparent 55%),
    rgba(55,66,80,.04);
  border-top: 1px solid rgba(55,66,80,.10);
  border-bottom: 1px solid rgba(55,66,80,.10);
}

.jn-home-course__inner{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: 22px;
  align-items: center;
}

.jn-home-course__kicker{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .75;
}

.jn-home-course__title{
  margin: 0 0 10px;
  line-height: 1.08;
  font-weight: 450;
  color: #505050;
}

.jn-home-course__lead{
  margin: 0 0 16px;
  line-height: 1.55;
  opacity: .9;
  max-width: 62ch;
}

.jn-home-course__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
}

.jn-chip{
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(55,66,80,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  font-size: 13px;
  opacity: .95;
}

.jn-home-course__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 999px;
  background: #374250;
  color: #fff !important;
  text-decoration: none;
  border: 1px solid rgba(55,66,80,.20);
  box-shadow: 0 10px 22px rgba(55,66,80,.18);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

@media (hover:hover){
  .jn-home-course__btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(55,66,80,.22);
    opacity: .98;
  }
}

.jn-home-course__media{
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(55,66,80,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  min-height: 360px;
}

.jn-home-course__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (hover:hover){
  .jn-home-course__media img{
    transition: transform .6s ease;
  }
  .jn-home-course__media:hover img{
    transform: scale(1.03);
  }
}

@media (max-width: 980px){
  .jn-home-course__inner{
    grid-template-columns: 1fr;
  }
  .jn-home-course__media{
    min-height: 300px;
  }
}

@media (max-width: 600px){
  .jn-home-course--full{
    padding: 48px 0;
  }
}


/* ==========================================================
   OVERRIDE: Halvera höjd + halvera bildens visuella höjd
   ========================================================== */

section.jn-home-course{
  padding: 32px 0 !important;
}

section.jn-home-course .jn-home-course__inner{
  gap: 14px !important;
}

section.jn-home-course .jn-home-course__lead{
  margin: 0 0 30px !important;
}

section.jn-home-course .jn-home-course__chips{
  margin: 0 0 12px !important;
}

section.jn-home-course .jn-home-course__media{
  height: 350px !important;
  min-height: 0 !important;
  max-height: 350px !important;
}

section.jn-home-course .jn-home-course__media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

@media (max-width: 980px){
  section.jn-home-course{
    padding: 24px 0 !important;
  }
  section.jn-home-course .jn-home-course__media{
    height: 180px !important;
    max-height: 180px !important;
		display:none;
  }
}

/* Visa mer av ÖVRE delen av bilden */
section.jn-home-course .jn-home-course__media img{
  object-position: center 55% !important;
}


/* ==========================================================
   JN – OM OSS (jn-home-about) – fullbredd + reducerad höjd
   ========================================================== */

section.jn-home-about{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 18px 0;
}

section.jn-home-about .jn-home-about__inner{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  gap: 10px;
}

section.jn-home-about .jn-home-about__title,
section.jn-home-about .jn-home-about__lead,
section.jn-home-about .jn-home-about__badges{
  margin-top: 0;
}

section.jn-home-about .jn-home-about__lead{
  margin-bottom: 8px;
}

section.jn-home-about .jn-home-about__badges{
  margin: 8px 0 10px;
  gap: 10px;
}

/* Bildcollage */
section.jn-home-about .jn-photo{
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
}

section.jn-home-about .jn-photo--big{
  height: 610px;
}

section.jn-home-about .jn-photo:not(.jn-photo--big){
  height: 300px;
}

section.jn-home-about .jn-photo img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

@media (max-width: 600px){
  section.jn-home-about{
    padding: 14px 0;
  }

  section.jn-home-about .jn-home-about__inner{
    padding: 0 18px;
		
  }

  section.jn-home-about .jn-photo--big{
    height: 390px;
		
  }

  section.jn-home-about .jn-photo:not(.jn-photo--big){
    height: 390px;
		
		
  }
}



/* =========================
   JN – Utvalda arbeten (vit bakgrund + bred)
   ========================= */

.jn-works{
  background: #fff;
  padding: 28px 0;
}

/* Bryt ut ur tema-container men lämna snygg marginal */
.jn-works{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.jn-works__inner{
  /* Bredare på riktigt men inte kant-till-kant */
  width: min(1680px, calc(100vw - 64px));
  margin: 0 auto;
  box-sizing: border-box;
}

@media (max-width: 600px){
  .jn-works__inner{
    width: min(1680px, calc(100vw - 36px));
  }
}

.jn-works__title{
  margin: 0 0 14px;
  font-family: deva-ideal, sans-serif;
  font-weight: 450;
  letter-spacing: .01em;
  color: #505050;
  line-height: 1.15;
}

/* =========================
   Rad + pilar
   ========================= */

.jn-works__rail{
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  gap: 12px;
  align-items: center;
}

/* Scrollrad: snap gör att första/sista aldrig “skärs” */
.jn-works__row{
  display: flex;
  gap: 12px;

  overflow-x: auto;          /* behövs för snap */
  overflow-y: hidden;

  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 8px;
  scroll-padding-right: 8px;

  padding: 8px;              /* ger luft så första/sista syns helt */
  border-radius: 18px;

  /* Dölj scrollbar (de flesta browsers) */
  scrollbar-width: none;
}
.jn-works__row::-webkit-scrollbar{ display:none; }

/* Thumb: ingen fast “box” => inga vita rutor */
.jn-works__thumb{
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;

  flex: 0 0 auto;
  scroll-snap-align: start;

  height: 170px;             /* samma höjd för enhetlig rad */
  width: auto;

  border-radius: 18px;
  overflow: hidden;

  box-shadow: 0 12px 26px rgba(0,0,0,.08);
  transform: translateZ(0);
}

/* Själva bilden bestämmer bredden → inga sidobars */
.jn-works__thumb img{
  height: 100%;
  width: auto;
  display: block;

  /* Viktigt: hela bilden syns, ingen crop */
  object-fit: contain;

  /* Ingen “vit ram” från CSS: */
  background: transparent;
}

/* Om en bild råkar bli för bred (landscape), begränsa bredden lite */
.jn-works__thumb{
  max-width: 280px;
}
.jn-works__thumb img{
  max-width: 280px;
}

/* Nav-knappar: gråa med vita pilar (centrerade) */
.jn-works__nav{
  width: 52px;
  height: 52px;
  border-radius: 999px;

  border: 1px solid rgba(55,66,80,.16);
  background: rgba(55,66,80,.38);
  color: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  box-shadow: 0 12px 24px rgba(0,0,0,.10);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease;
}

.jn-works__nav span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 26px;
  transform: translateY(-1px);
}

@media (hover:hover){
  .jn-works__nav:hover{
    transform: translateY(-1px);
    background: rgba(55,66,80,.56);
    border-color: rgba(55,66,80,.24);
  }
}

@media (max-width: 600px){
  .jn-works__rail{ grid-template-columns: 44px 1fr 44px; }
  .jn-works__nav{ width: 44px; height: 44px; }
  .jn-works__nav span{
    font-size: 22px;
    transform: none; /* FIX: centrerad pil på mobil */
  }

  .jn-works__thumb{
    height: 150px;
    max-width: 240px;
  }
  .jn-works__thumb img{ max-width: 240px; }
}

/* =========================
   Lightbox – fungerar bra på mobil + centrerad på desktop
   ========================= */

.jn-worksLightbox{
  position: fixed;
  inset: 0;
  z-index: 999999;

  display: none;
  align-items: center;   /* FIX: alltid mitt i höjd */
  justify-content: center;

  background: rgba(15,17,20,.78);
  padding: 18px;
  box-sizing: border-box;
}

.jn-worksLightbox.is-open{ display: flex; }

.jn-worksLightbox__stage{
  margin: 0;
  width: min(1180px, 92vw);
  height: min(82vh, 820px);

  display: grid;
  place-items: center;
}

.jn-worksLightbox__img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* alltid hela bilden */
  display: block;
}

.jn-worksLightbox__close{
  position: absolute;
  top: 16px;
  right: 16px;

  width: 46px;
  height: 46px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.14);
  color: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 26px;
  cursor: pointer;
}
/* Desktop-only: låt bilden styra höjden och centreras på riktigt */
@media (min-width: 900px) {
  .jn-worksLightbox__stage{
    height: auto;                 /* viktig: ta bort fast höjd på desktop */
    max-height: min(82vh, 820px); /* behåll begränsningen */
  }

  .jn-worksLightbox__img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(82vh, 820px);
    object-fit: contain;
    object-position: 50% 50%;
  }
}

.jn-worksLightbox__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 54px;
  height: 54px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.14);
  color: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 30px;
  cursor: pointer;
}

.jn-worksLightbox__nav--prev{ left: 16px; }
.jn-worksLightbox__nav--next{ right: 16px; }

@media (max-width: 600px){
  .jn-worksLightbox__nav{
    width: 46px;
    height: 46px;
    font-size: 26px;
  }
}
/* ===== JN WORKS – justeringar ===== */

/* 1) Rubrik: centrerad på desktop + weight 400 */
@media (min-width: 901px){
  .jn-works__title{
    text-align: center !important;
    font-weight: 300 !important;
		

  }
}

/* 2) Desktop: ta bort pilar + jämnt mellanrum + inga extra paddings som stör */
@media (min-width: 901px){
  .jn-works__rail{
    grid-template-columns: 1fr !important; /* bara raden */
  }

  .jn-works__nav{
    display: none !important; /* inga knappar på desktop */
  }

  .jn-works__row{
    justify-content: space-between !important; /* jämnar ut mellanrummen */
    gap: 0 !important;                         /* vi använder space-between istället */
    padding: 0 !important;                     /* bort med extra “ram” */
  }

  .jn-works__thumb{
    flex: 0 0 auto !important;
  }
}

/* 3) Mobil: visa 1 hel bild åt gången (ingen avklippning) */
@media (max-width: 900px){
  .jn-works__row{
    gap: 12px !important;
    padding: 8px !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 8px !important;
    scroll-padding-right: 8px !important;
  }

  /* gör varje “slide” = (nästan) hela bredden i scrollraden */
  .jn-works__thumb{
    height: 170px !important;
    width: calc(100% - 12px) !important;  /* 1 per gång */
    max-width: none !important;
    scroll-snap-align: center !important;
  }

  /* bilden ska aldrig croppas */
  .jn-works__thumb img{
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* pilarna får gärna vara kvar på mobil */
  .jn-works__nav{
    display: inline-flex !important;
  }
}

/* MOBIL: fyll rutan (ingen vit kant) – men kan cropa lite */
@media (max-width: 900px){
  .jn-works__thumb{
    background: transparent !important;
    overflow: hidden !important;
  }

  .jn-works__thumb img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;         /* <-- tar bort vita kanter */
    object-position: center center !important;
    display: block !important;
  }
}

/* =========================================================
   JN – PMU (städat, inga dubletter)
   Inkl: GRID2 + Före/Efter + knappar + mobil
   (OBS: denna kod ersätter din tidigare PMU-sektion helt)
   ========================================================= */

/* Wrapper */
.jn-pmu-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px 42px;
}

/* HERO */
.jn-pmu-hero{
  border-radius: 18px;
  padding: 26px 18px;
  border: 1px solid rgba(55,66,80,.10);
  background: rgba(255,255,255,.85);
  box-shadow: 0 12px 30px rgba(0,0,0,.05);
  margin-bottom: 18px;
}

.jn-pmu-eyebrow{
  margin: 0 0 6px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .75;
}

.jn-pmu-title{
  margin: 0 0 10px;
  line-height: 1.1;
}

.jn-pmu-lead{
  margin: 0;
  font-size: 16px;
  opacity: .92;
  max-width: 75ch;
}

/* CARD */
.jn-pmu-card{
  background: #fff;
  border: 1px solid rgba(55,66,80,.12);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.jn-pmu-card--soft{
  background: rgba(255,255,255,.92);
}

/* Highlight */
.jn-pmu-highlight{
  margin-top: 14px;
  padding: 14px 14px 10px;
  border-radius: 16px;
  background: rgba(55,66,80,.06);
  border: 1px solid rgba(55,66,80,.10);
}

.jn-pmu-highlight h3{
  margin: 0 0 8px;
  font-size: 16px;
}

/* Checklist */
.jn-pmu-check{
  margin: 10px 0 0;
  padding-left: 0;
  list-style: none;
}

.jn-pmu-check li{
  margin: 8px 0;
  padding-left: 26px;
  position: relative;
}

.jn-pmu-check li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  opacity: .85;
}

/* Sections */
.jn-pmu-section{ margin-top: 18px; }

.jn-pmu-steps{
  margin: 10px 0 0;
  padding-left: 18px;
}

.jn-pmu-steps li{
  margin: 8px 0;
  line-height: 1.4;
}

.jn-pmu-note{
  margin-top: 12px;
  opacity: .9;
}

/* Mini cards (Form/Färg/Finish) */
.jn-pmu-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.jn-pmu-mini{
  background: #fff;
  border: 1px solid rgba(55,66,80,.12);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.04);
}

.jn-pmu-mini h3{
  margin: 0 0 6px;
  font-size: 16px;
}

.jn-pmu-mini p{
  margin: 0;
  opacity: .9;
}

/* =========================================================
   PMU GRID2 (2 rader + swap)
   ========================================================= */

.jn-pmu-grid2{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  grid-template-areas:
    "natural image"
    "process important";
  gap: 26px;
  align-items: stretch;
}

.jn-pmu-area-natural{ grid-area: natural; }
.jn-pmu-area-image{ grid-area: image; }
.jn-pmu-area-important{ grid-area: important; }
.jn-pmu-area-process{ grid-area: process; }

/* =========================================================
   Före/Efter (2 rutor, höjd matchar vänster på desktop)
   - Zoom: --pmu-zoom
   - Pan:  --pmu-pan-x / --pmu-pan-y  (px eller %)
   ========================================================= */

/* Högerspalt fyller gridcellen */
.jn-pmu-area-image{
  align-self: stretch;
  height: 100%;
  min-height: 0;
  display: flex;

  /* om du vill “korta ner” hela bildblocket, slå på denna: */
  /* max-height: 400px; */
}

/* Två rutor delar ytan */
.jn-pmu-beforeafter{
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
}

/* Varje ruta */
.jn-pmu-shot{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(55,66,80,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Text ovanför bild */
.jn-pmu-shot-label{
  padding: 10px 12px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .75;
  border-bottom: 1px solid rgba(55,66,80,.10);
  background: rgba(255,255,255,.85);
  position: relative;
  z-index: 2;
}

/* Bild-yta (frame) */
.jn-pmu-shot-media{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* Bilden (fyller frame, påverkar aldrig höjd) */
.jn-pmu-shot-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: var(--pmu-pos-x, 50%) var(--pmu-pos-y, 50%);

  transform: scale(var(--pmu-zoom, 1));
  transform-origin: center;
  will-change: transform;
}


/* ======= ÄNDRA HÄR: Före ======= */
.jn-pmu-img--before{
  --pmu-zoom: 2.12;
  --pmu-pan-x: 0px;   /* vänster/höger */
  --pmu-pan-y: 20px;  /* + visar mer TOPP, - visar mer BOTTEN */
}

/* ======= ÄNDRA HÄR: Efter ======= */
.jn-pmu-img--after{
  --pmu-zoom: 2.08;
  --pmu-pan-x: 0px;
  --pmu-pan-y: 10px;
}

.jn-pmu-shot-media img.jn-pmu-img--before{
  object-position: 50% 25% !important;  /* topp */
}
.jn-pmu-shot-media img.jn-pmu-img--after{
  object-position: 50% 30% !important; /* botten */
}

/* =========================================================
   CTA + knappar (snyggare, utan dubletter)
   ========================================================= */

.jn-pmu-cta{
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(55,66,80,.06);
  border: 1px solid rgba(55,66,80,.10);
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.jn-pmu-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, background-color .18s ease, border-color .18s ease;
  box-sizing: border-box;
  min-height: 46px;
}

.jn-pmu-btn--primary{
  background: #374250;
  color: #fff;
  border: 1px solid rgba(55,66,80,.20);
  box-shadow: 0 12px 26px rgba(55,66,80,.18);
  font-weight: 300;
}

.jn-pmu-btn--primary::after{
  content: "→";
  opacity: .9;
}

.jn-pmu-btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(55,66,80,.24);
  opacity: .98;
  color: #fff;
}

.jn-pmu-btn--ghost{
  background: rgba(255,255,255,.75);
  color: #374250;
  border: 1px solid rgba(55,66,80,.18);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 300;
}

.jn-pmu-btn--ghost::before{
  content: "✦";
  opacity: .8;
}

.jn-pmu-btn--ghost:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  border-color: rgba(55,66,80,.28);
  color: #374250;
}

@media (max-width: 600px){
  .jn-pmu-btn{ width: 100%; }
  .jn-pmu-cta{ justify-content: stretch; }
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 900px){
  .jn-pmu-grid2{
    grid-template-columns: 1fr;
    grid-template-areas:
      "natural"
      "image"
      "important"
      "process";
    gap: 18px;
  }

  .jn-pmu-cards{
    grid-template-columns: 1fr;
  }

  .jn-pmu-area-image{
    height: auto;
    display: block;
    max-height: none;
  }

  .jn-pmu-beforeafter{
    height: auto;
    grid-template-rows: auto auto;
  }

  /* På mobil: ge en liggande “ram” */
  .jn-pmu-shot-media{
    aspect-ratio: 3 / 1;
    flex: 0 0 auto;
  }
}



/* ==========================================
   JN NAILS - UNIFIED HEADER MED PROFFSIG MOBILMENY
   ========================================== */

/* Dölj gamla element */
#masthead-lvl2,
.ws-masthead-lvl2 {
  display: none !important;
}

/* ==========================================
   HEADER
   ========================================== */
/* Banner höjd variabel */
:root {
  --jn-banner-height: 31px;
}

.ws-masthead-unified {
  background: #fff;
  border-bottom: 1px solid rgba(55,66,80,.1);
  position: sticky;
  top: var(--jn-banner-height);
  z-index: 1000;
  transition: box-shadow 0.3s, top 0.3s ease;
}

/* När bannern är gömd, flytta menyn till toppen */
body.banner-hidden .ws-masthead-unified {
  top: 0 !important;
}

/* På mobil: fixed header under bannern */
@media (max-width: 900px) {
  .ws-masthead-unified {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--jn-banner-height);
  }

  body {
    padding-top: calc(var(--jn-header-height, 70px) + var(--jn-banner-height, 31px));
  }

  body.banner-hidden {
    padding-top: var(--jn-header-height, 70px);
  }
}

@media (min-width: 901px) {
  .ws-masthead-unified {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--jn-banner-height);
  }

  body {
    padding-top: calc(var(--jn-header-height, 0) + var(--jn-banner-height));
  }

  body.home {
    padding-top: calc(var(--jn-header-height, 0) + var(--jn-banner-height) - 32px);
  }

  body.banner-hidden .ws-masthead-unified {
    top: 0 !important;
  }
}

.ws-masthead-unified.scrolled {
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.ws-masthead-unified .ws-container {
  max-width: 1400px;
}

/* ==========================================
   LAYOUT
   ========================================== */
.ws-unified-row {
  display: flex;
  align-items: center;
  padding: 7px 0;
  gap: 40px;
  position: relative;
}

.ws-unified-logo {
  flex-shrink: 0;
}

.ws-unified-logo .custom-logo {
  height: 50px;
  width: auto;
}

.ws-unified-nav {
  flex: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s, visibility 0.3s;
}

.ws-unified-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* ==========================================
   NAVIGATION (DESKTOP)
   ========================================== */
.ws-unified-nav ul {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ws-unified-nav a {
  display: block;
  padding: 8px 12px;
  color: #374250;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.2s;
  position: relative;
}

.ws-unified-nav a:hover {
  color: #111;
}

.ws-unified-nav a::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: #374250;
  transition: width 0.3s;
  box-shadow: 0 2px 4px rgba(55,66,80,.2);
}

.ws-unified-nav a:hover::after,
.ws-unified-nav .current-menu-item > a::after,
.ws-unified-nav .current_page_item > a::after {
  width: 70%;
}

.ws-unified-nav .menu-item-has-children {
  position: relative;
}

.ws-unified-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(-10px);
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  border-radius: 8px;
  padding: 12px 0;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  margin-top: 12px;
  z-index: 100;
  list-style: none;
}

.ws-unified-nav .menu-item-has-children:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ws-unified-nav .sub-menu a {
  padding: 12px 20px;
  text-transform: none;
  font-weight: 400;
  white-space: nowrap;
}

.ws-unified-nav .sub-menu a:hover {
  background: rgba(55,66,80,.06);
}

.ws-unified-nav .sub-menu a::after {
  display: none;
}

.ws-unified-nav .sub-menu .menu-item-has-children > .sub-menu {
  left: 0;
  top: 100%;
  margin-left: 0;
  margin-top: 12px;
}

.ws-unified-nav .ws-submenu-toggle {
  display: none;
}

/* ==========================================
   SEARCH BAR (DESKTOP)
   ========================================== */
.ws-search-bar {
  position: absolute;
  left: 200px;
  right: 240px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 10;
}

.ws-unified-row.search-active .ws-search-bar {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.ws-unified-row.search-active .ws-unified-nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ws-unified-row.search-active .ws-search-toggle {
  opacity: 0;
  pointer-events: none;
}

.ws-search-inner {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid rgba(55,66,80,.2);
  border-radius: 30px;
  padding: 10px 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

.ws-search-bar input[type="search"],
.ws-search-bar .dgwt-wcas-search-input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  padding: 8px 12px !important;
  font-size: 15px !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
}

.ws-search-bar .dgwt-wcas-search-submit {
  display: none !important;
}

.ws-search-close {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 28px;
  color: #374250;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-left: 8px;
  border-radius: 50%;
}

.ws-search-close:hover {
  background: rgba(55,66,80,.1);
  color: #374250;
}

/* ==========================================
   ACTIONS
   ========================================== */
.ws-search-toggle,
.ws-action-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374250;
  transition: all 0.2s;
  border-radius: 50%;
}

.ws-search-toggle:hover,
.ws-action-icon:hover {
  background: rgba(55,66,80,.1);
  color: #111;
}

.ws-search-toggle svg,
.ws-action-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Cart */
.site-header-cart {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
}

.site-header-cart li {
  list-style: none !important;
}

.site-header-cart li::before {
  display: none !important;
}

/* Fix: varukorg dropdown hover-gap */
@media screen and (min-width: 48em) {
  .site-header-cart:hover .widget_shopping_cart,
  .site-header-cart.focus .widget_shopping_cart {
    margin-top: 20px !important;
  }

  /* Osynligt brygga mellan ikon och dropdown */
  .site-header-cart .widget_shopping_cart::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
  }
}

.cart-contents {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #374250;
}

.cart-contents:hover {
  color: #374250;
}

.cart-icon-holder {
  position: relative;
}

.cart-icon-holder .count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #374250;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* ==========================================
   MOBILMENY - PROFFSIG & DISKRET
   ========================================== */

/* Mobile toggle */
.jn-mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
  position: relative;
  z-index: 10002;
}

.jn-mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #374250;
  transition: all 0.3s;
}

.jn-mobile-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(7px, 7px);
  background: #374250;
}

.jn-mobile-toggle.active span:nth-child(2) {
  opacity: 0;
}

.jn-mobile-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
  background: #374250;
}

/* Mobile menu */
.jn-mobile-menu {
  position: fixed;
  top: var(--jn-banner-height, 31px);
  left: -100%;
  width: 320px;
  max-width: 86vw;
  height: calc(100vh - var(--jn-banner-height, 31px));
  height: calc(100dvh - var(--jn-banner-height, 31px));
  background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%);
  border-right: 1px solid rgba(55,66,80,.08);
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
  z-index: 10001;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 4px 0 24px rgba(0,0,0,.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.banner-hidden .jn-mobile-menu {
  top: 0;
  height: 100vh;
  height: 100dvh;
}

.jn-mobile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 6px;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
}

.jn-mobile-title {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(55,66,80,.6);
  font-weight: 600;
}

.jn-mobile-close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(55,66,80,.12);
  background: #fff;
  color: #374250;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.jn-mobile-close:hover {
  background: #f1f3f5;
  transform: translateY(-1px);
}

.jn-mobile-menu.active {
  left: 0;
}

.jn-mobile-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0 24px;
  -webkit-overflow-scrolling: touch;
}

.jn-mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jn-mobile-menu > .jn-mobile-content > ul > li {
  border-bottom: 1px solid rgba(55,66,80,.06);
  padding: 4px 0;
  margin: 0 12px;
}

.jn-mobile-menu .menu-item-has-children {
  position: relative;
  display: flex;
  flex-direction: column;
}

.jn-mobile-menu .menu-item-has-children > a {
  flex: 1;
  padding-right: 60px;
}

.jn-mobile-menu a {
  display: block;
  padding: 12px 14px;
  margin: 0 6px;
  color: #374250;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: all 0.2s;
  border-radius: 12px;
}

.jn-mobile-menu a:hover {
  background: rgba(55,66,80,.05);
  color: #111;
}

.jn-mobile-menu .current-menu-item > a {
  color: #111;
  font-weight: 600;
  background: rgba(55,66,80,.08);
}

/* Dölj temats original pil */
.jn-mobile-menu .ws-submenu-toggle {
  display: none !important;
}

/* Submenu toggle knapp - Bara ›› */
.jn-submenu-toggle {
  position: absolute;
  right: 12px;
  top: 8px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #f2f4f6;
  border: 1px solid rgba(55,66,80,.12);
  color: #374250;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s;
  opacity: 0.75;
  font-weight: 400;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jn-submenu-toggle:hover {
  opacity: 1;
  background: #374250;
  color: #fff;
}

.jn-submenu-toggle:active {
  opacity: 1;
  background: #1a2028;
  color: #fff;
}

.submenu-open > .jn-submenu-toggle {
  transform: rotate(90deg);
  opacity: 1;
  background: #374250;
  color: #fff;
}

/* Submenus */
.jn-mobile-menu .sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: #f3f5f7;
  border-radius: 12px;
  padding: 0;
  margin: 0 12px;
}

.jn-mobile-menu .submenu-open > .sub-menu {
  max-height: 1000px;
  padding: 6px 0;
  margin: 6px 12px 10px;
}

.jn-mobile-menu .sub-menu a {
  padding: 10px 16px 10px 32px;
  font-size: 14px;
  font-weight: 400;
}

.jn-mobile-menu .sub-menu .sub-menu a {
  padding-left: 46px;
  font-size: 13px;
}

/* Footer med account */
.jn-mobile-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(55,66,80,.1);
  background: #f5f6f8;
}

.jn-mobile-account {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid rgba(55,66,80,.15);
  border-radius: 8px;
  text-decoration: none;
  color: #374250;
  font-weight: 500;
  font-size: 15px;
  transition: all 0.2s;
}

.jn-mobile-account:hover {
  background: rgba(55,66,80,.05);
  color: #111;
  border-color: #374250;
}

.jn-mobile-account svg {
  fill: currentColor;
}

/* Overlay */
.jn-mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.jn-mobile-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ==========================================
   RESPONSIVE - MENY VÄNSTER, LOGGA MITTEN, VARUKORG HÖGER
   ========================================== */
@media (max-width: 900px) {
  /* Dölj desktop element */
  .ws-unified-nav,
  .ws-search-bar,
  .ws-desktop-only {
    display: none !important;
  }
  
  /* Visa mobile element */
  .jn-mobile-toggle {
    display: flex !important;
  }
  
  /* GRID LAYOUT: Meny | Logga | Varukorg */
  .ws-unified-row {
    display: grid !important;
    grid-template-columns: 60px 1fr 60px !important;
    grid-template-areas: "menu logo cart" !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 7px 0 !important;
  }
  
  /* Meny till VÄNSTER */
  .jn-mobile-toggle {
    grid-area: menu !important;
    justify-self: start !important;
  }
  
  /* Logga CENTRERAD */
  .ws-unified-logo {
    grid-area: logo !important;
    justify-self: center !important;
  }
  
  .ws-unified-logo .custom-logo {
    height: 45px;
  }
  
  /* Varukorg till HÖGER */
  .ws-unified-actions {
    grid-area: cart !important;
    justify-self: end !important;
    gap: 0 !important;
  }
  
  /* Dölj temats pil */
  .jn-mobile-menu .ws-submenu-toggle {
    display: none !important;
  }
}


/* FIX: Visa mobile toggle och fixa ordning */
/* ULTIMATE FIX: Mobil layout */
@media (max-width: 900px) {
  .ws-unified-nav,
  .ws-search-bar,
  .ws-desktop-only {
    display: none !important;
  }
  
  .jn-mobile-toggle {
    display: flex !important;
    order: 1 !important;
  }
  
  .ws-unified-logo {
    order: 2 !important;
    margin: 0 auto !important;
  }
  
  .ws-unified-actions {
    order: 3 !important;
  }
  
  .ws-unified-logo .custom-logo {
    height: 45px;
  }
}
/* FIX: Ljusare hover på mobil header */
@media (max-width: 900px) {
  .jn-mobile-toggle:hover,
  .jn-mobile-toggle:active,
  .jn-mobile-toggle:focus {
    background: rgba(55,66,80,.08) !important;
    border-radius: 8px;
  }

  .jn-mobile-toggle span {
    background: #374250 !important;
  }
}

/* Sökfält i mobilmeny */
.jn-mobile-search {
  padding: 12px 16px;
  background: #f8f8f8;
  border-bottom: 1px solid rgba(55,66,80,.1);
}

.jn-mobile-search input[type="search"],
.jn-mobile-search .dgwt-wcas-search-input {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(55,66,80,.2) !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  outline: none !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: border-color 0.2s !important;
}

.jn-mobile-search input[type="search"]:focus,
.jn-mobile-search .dgwt-wcas-search-input:focus {
  border-color: #374250 !important;
}

.jn-mobile-search .dgwt-wcas-search-submit {
  display: none !important;
}

/* FIX: Mjukare hover - inspirerat av temat */
@media (max-width: 900px) {
  .jn-mobile-toggle:hover,
  .jn-mobile-toggle:active {
    background: rgba(55,66,80,.06) !important;
    border-radius: 8px;
    transition: background 0.3s ease;
  }

  .jn-mobile-toggle span {
    background: #374250 !important;
  }

  /* Mjuk transition på mobilmeny - som temats */
  .jn-mobile-menu {
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .jn-mobile-overlay {
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
}

/* ==========================================
   404 PAGE
   ========================================== */
.jn-404 {
  padding: 80px 20px;

}

.jn-404-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border-radius: 18px;
  padding: 36px 28px;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}

.jn-404-code {
  font-size: 72px;
  letter-spacing: 0.12em;
  color: rgba(55,66,80,.18);
  margin: 0 0 10px;
  font-weight: 700;
}

.jn-404 .page-title,
.error-404 .page-title,
.error-404 h1.page-title {
  margin: 0 0 8px;
  font-size: 28px !important;
  line-height: 1.3;
}

.jn-404 .page-content {
  margin-top: 18px;
}

.jn-404-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 14px;
}

.jn-404-search .search-form {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
}

.jn-404-search .search-field {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(55,66,80,.2);
  border-radius: 10px;
}

.jn-404-search .search-submit {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #374250;
  background: #374250;
  color: #fff;
  cursor: pointer;
}

@media (max-width: 600px) {
  .jn-404 {
    padding: 60px 16px;
  }

  .jn-404-inner {
    padding: 28px 20px;
  }

  .jn-404-code {
    font-size: 56px;
  }

  .jn-404-search .search-form {
    flex-direction: column;
  }
}


/* Tom varukorg: gör meddelande + knapp snygga och jämnhöga */
body.woocommerce-cart-empty .woocommerce,
.woocommerce-cart .woocommerce { 
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;              /* ändra till 6px om du vill ha ännu tätare */
}

/* Texten "Din varukorg är för närvarande tom." */
body.woocommerce-cart-empty .woocommerce .cart-empty.woocommerce-info,
.woocommerce-cart .woocommerce .cart-empty.woocommerce-info {
  margin: 0 !important;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 400;
  line-height: 1;
  display: inline-flex;
  align-items: center;
	background-color:grey;
}

/* Wrappern runt knappen */
body.woocommerce-cart-empty .woocommerce .return-to-shop,
.woocommerce-cart .woocommerce .return-to-shop {
  margin: 0 !important;
  padding: 0 !important;
}

/* Själva knappen (Return to shop / Gå tillbaka till butiken) */
body.woocommerce-cart-empty .woocommerce .return-to-shop a.button,
body.woocommerce-cart-empty .woocommerce a.button.wc-backward,
.woocommerce-cart .woocommerce .return-to-shop a.button,
.woocommerce-cart .woocommerce a.button.wc-backward {
  margin: 0 !important;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 12px;
  line-height: 1;
  font-weight: 300;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Mobil: stapla istället för att trängas */
@media (max-width: 480px) {
  body.woocommerce-cart-empty .woocommerce,
  .woocommerce-cart .woocommerce {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  body.woocommerce-cart-empty .woocommerce .return-to-shop a.button,
  .woocommerce-cart .woocommerce .return-to-shop a.button {
    width: 100%;
  }
}

/*fixa WORKS ROW*/

#jnWorksRow .jn-works__thumb img{
  transition: transform .2s ease, filter .2s ease;
}
#jnWorksRow .jn-works__thumb:hover img{
  transform: scale(1.02);
  filter: brightness(1.03);
}
#jnWorksRow .jn-works__thumb:active img{
  transform: scale(1.05);
}

#jnWorksRow .jn-works__thumb:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
	 transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
}


.jn-nl__btn {
  display: inline-flex; /* Use flex to align children */
  align-items: center;  /* Vertically centers content */
  justify-content: center; /* Horizontally centers content */
  /* height: 50px; (Optional: set a specific height) */
}


.oc_cb_wrapper{padding-top:5px;
Padding-bottom:5px;
Padding-right:10px;
min-height:60px;}


/* =========================================
   JN – Follow buttons (återanvändbar)
   ========================================= */

.jn-follow{
  margin-top: 50px;
}

.jn-follow__label{
  margin: 0 0 10px;
  font-weight: 500;
  letter-spacing: .02em;
  text-align: center;              /* ✅ Centrerad rubrik */
}

.jn-follow__grid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  justify-content: space-between;  /* ✅ Fördelar jämnt över bredden */
  width: 100%;
}

/* Knapp */
.jn-follow__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;         /* ✅ Centrerad text i knappen */
  gap: 10px;

  padding: 10px 12px;
  border-radius: 14px;

  text-decoration: none;
  color: inherit;

  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;

  flex: 1 1 0;                     /* ✅ Gör att knapparna delar upp ytan */
  min-width: 180px;                /* ✅ Förhindrar att de blir för smala */
}

.jn-follow__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.14);
}

.jn-follow__icon{
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.jn-follow__icon svg{
  width: 22px;
  height: 22px;
  display: block;
}

.jn-follow__text{
  font-weight: 500;
  line-height: 1;
}

/* Mobil: fullbredd */
@media (max-width: 600px){
  .jn-follow__grid{
    gap: 8px;
    justify-content: center;       /* spelar mindre roll när allt är 100% */
  }

  .jn-follow__btn{
    width: 100%;
    flex: 0 0 100%;
    padding: 11px 12px;
    min-width: 0;
  }
}


/* =========================================
   JN – Social dots (endast ikoner)
   ========================================= */

.jn-socialDots{
  display: flex;
  justify-content: space-evenly; /* ✅ jämnt fördelat i blocket */
  align-items: center;
  gap: 15px!important;
  width: 100%;
}

.jn-socialDots__dot{
  width: 34px;
  height: 34px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: inherit;
  text-decoration: none;

  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.jn-socialDots__dot:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.14);
}

.jn-socialDots__icon{
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.jn-socialDots__icon svg{
  width: 22px;
  height: 22px;
  display: block;
}

/* Mobil: lite större tryckyta */
@media (max-width: 600px){
  .jn-socialDots__dot{
    width: 58px;
    height: 58px;
  }
}
.jn-socialDots{
  display: flex;
  justify-content: flex-start; /* ✅ vänster */
  align-items: center;
  gap: 30px;                   /* avstånd mellan cirklarna */
  width: 100%;
}





.jn-pmu-hero{
  border-radius: 18px;
  padding: 26px 18px;
  border: 1px solid rgba(55,66,80,.10);
  background: rgba(255,255,255,.85);
  box-shadow: 0 12px 30px rgba(0,0,0,.05);
  margin-bottom: 18px;
}

/* Split-layout */
.jn-pmu-hero--split{
  display: grid;
  grid-template-columns: 1fr 18px 0.6fr; /* vänster | sep | höger */
  gap: 0;
  align-items: start;
}

/* Kolumner */
.jn-pmu-col{
  min-width: 0; /* för att text inte ska spränga layout */
}

.jn-pmu-col--left{
  padding-right: 18px;
}

.jn-pmu-col--right{
  padding-left: 18px;
}

/* Vertikal separator som inte går hela vägen */
.jn-pmu-sep{
  position: relative;
}

.jn-pmu-sep::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;      /* gör att den inte går hela vägen upp */
  bottom: 14px;   /* gör att den inte går hela vägen ner */
  width: 1px;
  background: rgba(55,66,80,.12);
  transform: translateX(-50%);
  border-radius: 1px;
}

/* Gör kartan snygg i hero */
.jn-pmu-hero .jn-about__map{
  margin-top: 10px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(55,66,80,.10);
  background: #fff;
}

.jn-pmu-hero .jn-about__map iframe{
  width: 100%;
  height: 180px; /* lagom i hero */
  border: 0;
  display: block;
}

/* Om din mapCard inte redan har styling, lägg mild “kort”-känsla */
.jn-pmu-hero .jn-about__mapCard{
  border-radius: 14px;
  border: 1px solid rgba(55,66,80,.10);
  background: rgba(255,255,255,.90);
  padding: 14px;
}

/* Responsive: stapla på mobil, byt separator till horisontell */
@media (max-width: 860px){
  .jn-pmu-hero--split{
    grid-template-columns: 1fr;
  }

  .jn-pmu-col--left{
    padding-right: 0;
    margin-bottom: 14px;
  }

  .jn-pmu-col--right{
    padding-left: 0;
  }

  .jn-pmu-sep{
    height: 1px;
    margin: 12px 0 16px;
  }

  .jn-pmu-sep::before{
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    transform: none;
  }
}

.jn-about__btn:hover{
	background-color:grey;
}
.jn-about__btn{
transition:0.2s}


/* PMU – lista med kryss */
.jn-pmu-cross{
  list-style: none;
  padding-left: 0;
  margin: 10px 0 0;
}

.jn-pmu-cross li{
  position: relative;
  padding-left: 32px;
  margin: 10px 0;
  line-height: 1.5;
}

.jn-pmu-cross li::before{
  content: "✕";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 800;
  /* använder currentColor så den matchar temat */
  color: currentColor;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.55);
}


/* =========================
   BEHANDLINGAR – PMU segment
   Avlånga rutor, staplade
   ========================= */

.jn-treatments{
  width: 100%;
}

.jn-treatments__inner{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 4px;
  box-sizing: border-box;
}

.jn-treatments__title{
  margin: 0 0 10px;
}

/* Listan: staplade rutor */
.jn-treatments__list{
  display: grid;
  gap: 8px;
}

/* Kort (länk) */
.jn-treatmentCard{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(55,66,80,.12);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);

  display: flex;
  gap: 12px;
  align-items: center;

  text-decoration: none;
  color: inherit;

  min-height: 76px;
  width: 100%;
  box-sizing: border-box;

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.jn-treatmentCard:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(0,0,0,.10);
  border-color: rgba(55,66,80,.18);
}

/* Ikon med logga */
.jn-treatmentCard__icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(55,66,80,.06);
  border: 1px solid rgba(55,66,80,.10);
  flex: 0 0 auto;
  overflow: hidden;
}

.jn-treatmentCard__icon img{
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

/* Text */
.jn-treatmentCard__content{
  flex: 1 1 auto;
  min-width: 0;
}

.jn-treatmentCard__title{
  font-weight: 600;
  line-height: 1.2;
}

.jn-treatmentCard__sub{
  font-weight: 500;
  opacity: .75;
}

.jn-treatmentCard__meta{
  opacity: .8;
  font-size: 13px;
  line-height: 1.25;
  margin-top: 4px;
}

/* “Boka” till höger */
.jn-treatmentCard__cta{
  flex: 0 0 auto;
  font-weight: 700;
  opacity: .9;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(55,66,80,.06);
  border: 1px solid rgba(55,66,80,.10);
}

/* Mobil */
@media (max-width: 600px){
  .jn-treatments__inner{
    padding: 0 18px;
  }

  .jn-treatmentCard{
    padding: 12px 12px;
  }

  .jn-treatmentCard__cta{
    padding: 9px 10px;
  }
}







/* Knapp */
.jn-follow__btn1{
  display: inline-flex;
  align-items: center;
  justify-content: center;         /* ✅ Centrerad text i knappen */
  gap: 10px;

  padding: 10px 22px;
  border-radius: 14px;
	margin-bottom:5px;
	display: flex;
  justify-content: center; /* Centers horizontally */

  text-decoration: none;
  color: inherit;

  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;

  flex: 1 1 0;                     /* ✅ Gör att knapparna delar upp ytan */
  min-width: 230px;                /* ✅ Förhindrar att de blir för smala */
}

.jn-follow__btn1:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.14);
}


/* Mobil: fullbredd */
@media (max-width: 600px){
  .jn-follow__btn1{
    width: 100%;
    flex: 0 0 100%;
    padding: 11px 12px;
    min-width: 0;
  }
}

.solidbar11{
	margin-bottom:10px;
	margin-top:10px
}



/* Skärmläsar-text (om du inte redan har den) */
.jn-sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* =========================
   Footer Newsletter (JN)
   ========================= */
.jn-fnl{
  max-width: 520px;
}

.jn-fnl__title{
  margin: 0 0 6px;
  font-weight: 600;
  line-height: 1.2;
}

.jn-fnl__text{
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.45;
  opacity: .8;
}

.jn-fnl__form{
  display: grid;
  gap: 10px;
}

.jn-fnl__row{
  display: flex;
  gap: 10px;
  align-items: center;
}

.jn-fnl__input{
  flex: 1 1 auto;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(17,17,17,.14);
  background: rgba(255,255,255,.92);
  padding: 0 14px;
  outline: none;
  box-sizing: border-box;
}

.jn-fnl__input:focus{
  border-color: rgba(55,66,80,.40);
  box-shadow: 0 0 0 4px rgba(55,66,80,.12);
}

.jn-fnl__btn{
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(55,66,80,.18);
  background: #374250;
  color: #fff;
  font-weight: 400;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(55,66,80,.18);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.jn-fnl__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(55,66,80,.22);
  opacity: .98;
}

.jn-fnl__consent{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.35;
  opacity: .85;
}

.jn-fnl__consent input{
  margin-top: 3px;
}

.jn-fnl__fineprint{
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: #595959; /* Förbättrad kontrast (4.5:1 ratio mot vit bakgrund) */
}



/* Mobil: stapla input + knapp */
@media (max-width: 600px){
  .jn-fnl__row{
    flex-direction: column;
    align-items: stretch;
  }
  .jn-fnl__btn{
    width: 100%;
  }
}
.jn-fnl__row{
  display: flex;
  flex-direction: column;   /* ✅ gör att knappen hamnar under */
  gap: 10px;
  align-items: stretch;     /* ✅ fullbredd */
}

.jn-fnl__btn{
  width: 100%;              /* ✅ knappen under, fullbredd */
}



.mailchimp-newsletter{
	display:none!important;
}

#mailchimp-gdpr-fields > p {
  display: none !important;
}


.woocommerce ul.products li.ws-product--style-1 .product__content > a.button{
	font-weight:400!important;
	border-radius:6px!important;
}







.jn-treat-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px 42px;
}

.jn-treat-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 900px){
  .jn-treat-grid{ grid-template-columns: 1fr; }
}

/* Card */
.jn-treat-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(55,66,80,.12);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.jn-treat-eyebrow{
  margin: 0 0 6px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .75;
}

.jn-treat-title{
  margin: 0 0 10px;
  line-height: 1.1;
}

.jn-treat-lead{
  margin: 0;
  font-size: 16px;
  opacity: .92;
  max-width: 75ch;
}

.jn-treat-meta{
  margin-top: 12px;
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: white;
  border: 1px solid rgba(55,66,80,.10);
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}
.jn-treat-metaName{
	color:black;

}

.jn-treat-meta strong{ font-weight: 700; }
.jn-treat-meta span{ opacity: .9; }

/* CTA */
.jn-treat-cta{
  margin-top: 14px;
  padding: 7px;
  border-radius: 18px;
  background: rgba(55,66,80,.06);
  border: 1px solid rgba(55,66,80,.10);
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.jn-treat-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, background-color .18s ease, border-color .18s ease;
  box-sizing: border-box;
  min-height: 46px;
  white-space: nowrap;
}

/* BokaDirekt (mörk) */
.jn-treat-btn--book{
  color: black;
  border: 1px solid rgba(55,66,80,.20);
  box-shadow: 0 12px 26px rgba(55,66,80,.18);
  font-weight: 300;
}
.jn-treat-btn--book:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(55,66,80,.24);
  opacity: .98;
  color: grey;
}
.jn-treat-btn--book::after{
  content: "→";
  opacity: .9;
}

/* Logo i knappen */
.jn-treat-btn__logo{
  width: 22px;
  height: 22px;
  display: inline-block;
  flex: 0 0 auto;
  border-radius: 6px;
}

/* Liten text i CTA */
.jn-treat-cta small{
  opacity: .9;
  line-height: 1.35;
  max-width: 42ch;
}

/* Mobil: knappen fullbredd */
@media (max-width: 600px){
  .jn-treat-btn{ width: 100%; }
  .jn-treat-cta{ justify-content: stretch; }
  .jn-treat-cta small{ max-width: none; }
}

.jn-treat-ctaText{
  margin: 0;
  opacity: 1;
  font-size: 14px;
  line-height: 1.5;
  color: #374250;
  font-weight: 600;
}

   
.jn-treat-ctaPrice{
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: #374250;
  opacity: .9;
  font-weight: 400;
}

/* Textlänkar under beskrivningen */
.jn-miniLinks{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.jn-miniLink{
  text-decoration: none;
  font-weight: 600;
  color: #374250;
  opacity: .92;
  transition: opacity .18s ease, transform .18s ease;
}

.jn-miniLink:hover{
  opacity: 1;
  transform: translateY(-1px);
}

/* Vertikal separator */
.jn-miniSep{
  width: 1px;
  height: 18px;
  background: rgba(55,66,80,.28);
  display: inline-block;
}

.jn-badgeCard__text{
	color:black;
}

.jn-biab-hero__products{
	background-color:#3742500f;
	font-weight:300;
}
.jn-biab-btn{
	background-color:white;
color:black;

}
.jn-biab-btn:hover{
	color:grey!important;
}
.ws-unified-nav .sub-menu{
	margin-top:9px!important;
}
.ws-unified-nav .sub-menu .menu-item-has-children > .sub-menu{
	margin-top:11px;
}

.ws-sticky-panel-add-to-cart {
	display:none;
}

.additional_information_tab{
	display:none!important;
}

/* Borttagen - skapade gap i sticky panel */

/* ==========================================
   Brand visning på produktsida
   ========================================== */
.product-brands {
  display: block !important;
  margin-bottom: 15px;
  font-size: 14px;
}

.product-brands .brand-label {
  font-weight: 600;
  color: #333;
}

.product-brands a {
  color: #0073aa;
  text-decoration: none;
  transition: color 0.2s ease;
}

.product-brands a:hover {
  color: #005177;
  text-decoration: underline;
}

/* ==========================================
   Kategoribeskrivning - Säljande/Informativ stil
   ========================================== */
.woocommerce-products-header__description,
.term-description,
.page-description {
  background: #ffffff;
  border: 2px solid #e0e0e0;
  padding: 30px;
  margin: 30px 0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  line-height: 1.8;
  font-size: 15px;
  color: #333;
  position: relative;
}

.woocommerce-products-header__description::before,
.term-description::before {
  content: "ℹ️";
  font-size: 24px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 25px;
}

.woocommerce-products-header__description,
.term-description {
  padding-left: 65px;
}

.woocommerce-products-header__description p,
.term-description p {
  margin: 0 0 15px 0;
}

.woocommerce-products-header__description p:last-child,
.term-description p:last-child {
  margin-bottom: 0;
}

.woocommerce-products-header__description strong,
.term-description strong {
  color: #0073aa;
  font-weight: 600;
}

.woocommerce-products-header__description a,
.term-description a {
  color: #0073aa;
  text-decoration: none;
  transition: all 0.2s ease;
}

.woocommerce-products-header__description a:hover,
.term-description a:hover {
  color: #005177;
  text-decoration: underline;
}

/* Läs mer-knapp styling */
.category-read-more {
  display: inline-block;
  margin-top: 0px;
  padding: 12px 30px;
  background: #374250;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 115, 170, 0.3);
  font-weight: 300!important;
}

.category-read-more:hover {
  background: #e4e4e4;
  color: black!important;
  
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 115, 170, 0.4);
  text-decoration: none !important;
}

.category-read-more::after {
  content: " →";
  margin-left: 8px;
  transition: margin-left 0.3s ease;
}

.category-read-more:hover::after {
  margin-left: 12px;
}

/* Responsiv styling för mobil */
@media (max-width: 768px) {
  .woocommerce-products-header__description,
  .term-description {
    padding: 20px 20px 20px 55px;
    margin: 20px 0;
    font-size: 14px;
  }

  .woocommerce-products-header__description::before,
  .term-description::before {
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    font-size: 20px;
  }

  .category-read-more {
    display: block;
    text-align: center;
    padding: 10px 20px;
  }
}


.ws-filter-sidebar.toggled{
  margin-top:40px;
}

/* ==========================================
   JN NAILS - Anpassad Sticky Panel
   ========================================== */

/* Övergripande panel-styling */
.jn-sticky-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: unset !important;
  transform: translateY(100%);
  background: #fff;
  border-top: 1px solid var(--jn-border, rgba(17,17,17,.10));
  box-shadow: 0 -8px 30px rgba(0,0,0,.08);
  padding: 20px 0;
  z-index: 998;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.35s;
  visibility: hidden;
}

.jn-sticky-panel.show {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0s;
  border-bottom: 1px solid #111 !important;
}

/* Säkerställ att det finns utrymme mellan innehåll och header */
.jn-sticky-panel .ws-container {
  margin-top: 0 !important;
}

/* Inner container */
.jn-sticky-panel .jn-sticky-panel__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Fortsätt handla - länk */
.jn-sticky-panel__continue {
  display: flex;
  align-items: center;
}

.jn-sticky-panel__continue a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--jn-muted, rgba(17,17,17,.70));
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.jn-sticky-panel__continue a:hover {
  color: var(--jn-text, #111);
  background: rgba(17,17,17,.04);
}

.jn-sticky-panel__icon {
  flex-shrink: 0;
}

/* Info-sektion (meddelande + summa) */
.jn-sticky-panel__info {
  flex: 1;
  min-width: 200px;
  text-align: center;
}

.jn-sticky-panel__message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--jn-text, #111);
  margin-bottom: 4px;
}

.jn-sticky-panel__check {
  color: #22c55e;
  flex-shrink: 0;
}

/* Varukorgsdata */
.jn-sticky-panel__cart-data {
  font-size: 13px;
  color: var(--jn-muted, rgba(17,17,17,.70));
}

.jn-sticky-panel__cart-data .amount {
  font-weight: 600;
  color: var(--jn-text, #111) !important;
}

.jn-sticky-panel__separator {
  margin: 0 6px;
  opacity: 0.5;
}

/* Checkout-knapp */
.jn-sticky-panel__checkout {
  display: flex;
}

.jn-sticky-panel__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--jn-btn-bg, rgba(17,17,17,.92)) !important;
  color: var(--jn-btn-text, #fff) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  padding: 12px 24px !important;
  border-radius: 10px !important;
  border: 1px solid var(--jn-btn-border, rgba(255,255,255,.14)) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  white-space: nowrap;
}

.jn-sticky-panel__btn:hover {
  background: var(--jn-btn-bg-hover, #111) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.jn-sticky-panel__arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.jn-sticky-panel__btn:hover .jn-sticky-panel__arrow {
  transform: translateX(3px);
}

/* Add-to-cart panel (produktsida) */
.jn-sticky-panel.ws-sticky-panel-add-to-cart {
  display: none; /* Dold som standard enligt befintlig regel */
}

.jn-sticky-panel__image img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--jn-border, rgba(17,17,17,.10));
}

.jn-sticky-panel__title {
  font-weight: 500;
  font-size: 14px;
  color: var(--jn-text, #111);
  flex: 1;
  min-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jn-sticky-panel__price {
  font-size: 15px;
  font-weight: 600;
  color: var(--jn-text, #111);
}

.jn-sticky-panel__price .price {
  margin: 0;
}

/* Responsiv design - mobil */
@media (max-width: 600px) {
  .jn-sticky-panel {
    padding: 12px 0;
  }

  .jn-sticky-panel .jn-sticky-panel__inner {
    padding: 0 16px;
    gap: 12px;
  }

  .jn-sticky-panel__continue {
    display: none;
  }

  .jn-sticky-panel__info {
    text-align: left;
    min-width: auto;
    flex: 1;
  }

  .jn-sticky-panel__message {
    font-size: 14px;
    justify-content: flex-start;
  }

  .jn-sticky-panel__cart-data {
    font-size: 12px;
  }

  .jn-sticky-panel__btn {
    padding: 10px 18px !important;
    font-size: 13px !important;
  }
}

/* Tablet */
@media (min-width: 601px) and (max-width: 900px) {
  .jn-sticky-panel__message {
    font-size: 14px;
  }

  .jn-sticky-panel__continue a {
    font-size: 13px;
  }
}