/* Paul Mitchell Signature Salon – Stockholm & Karlshamn */

:root {
  --pink: #e5007f;
  --pink-hover: #f864b6;
  --pink-soft: #e66e95;
  --pink-line: rgba(229, 0, 127, 0.32);
  --dark: #252122;
  --dark-2: #252525;
  --text: #717171;
  --heading: #252525;
  --body-copy: #606060;
  --staff-copy: #3e3e3e;
  --white: #fff;
  --font-heading: "Jura", sans-serif;
  --font-body: "Questrial", sans-serif;
  --font-nav: "Abel", sans-serif;
  --font-base: "Roboto", sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2em;
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.bg-dark-page {
  background-image: url(/assets/img/bakgrund-mork.jpg);
  background-image: image-set(url(/assets/img/bakgrund-mork.webp) type("image/webp"), url(/assets/img/bakgrund-mork.jpg) type("image/jpeg"));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 100%;
}

body.bg-dark-page-top {
  background-image: url(/assets/img/bakgrund-mork.jpg);
  background-image: image-set(url(/assets/img/bakgrund-mork.webp) type("image/webp"), url(/assets/img/bakgrund-mork.jpg) type("image/jpeg"));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 0%;
}

img { max-width: 100%; height: auto; display: block; border: 0; }
picture { display: block; }
a { text-decoration: none; color: var(--pink); transition: color .2s linear; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--pink); color: #fff; padding: 10px 15px;
}
.skip-link:focus { left: 10px; top: 10px; }

/* ---------- Grid ---------- */

.row {
  padding: 60px 30px 20px;
  background-color: var(--white);
}
.row.transparent { background-color: transparent; }

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.container-fixed { width: 100%; }

@media (min-width: 1200px) {
  .container-fixed { max-width: 1170px; margin: 0 auto; }
}

.col { width: 100%; padding: 0 15px; }

@media (min-width: 768px) {
  .col-2 { width: 16.6667%; }
  .col-3 { width: 25%; }
  .col-4 { width: 33.3333%; }
  .col-5 { width: 41.6667%; }
  .col-6 { width: 50%; }
  .col-7 { width: 58.3333%; }
  .col-8 { width: 66.6667%; }
  .col-9 { width: 75%; }
}

/* ---------- Typography ---------- */

.spottext {
  font-family: var(--font-heading);
  font-size: 59px;
  font-weight: 300;
  line-height: 1em;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-align: center;
  color: var(--dark);
}
.spottext.white { color: #fff; }
.spottext strong { font-weight: 700; }

.subtitle {
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.5em;
  letter-spacing: -0.08em;
  text-align: center;
  color: var(--heading);
}
.subtitle.white { color: #fff; }
.subtitle.left { text-align: left; }

.bodytext {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6em;
  text-align: center;
  color: var(--body-copy);
}
.bodytext p { margin-bottom: 5px; }
.bodytext a { color: var(--pink); }
.bodytext a:hover { color: var(--pink-hover); }
.bodytext.white { color: #fff; }

.custom1 {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7em;
  text-align: left;
  color: var(--staff-copy);
}

.custom2 {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8em;
  text-align: left;
  color: #fff;
}

/* ---------- Modules ---------- */

.text { margin-bottom: 40px; }
.image { margin-bottom: 40px; }

.divider {
  display: block;
  width: 100%;
  margin: 0 auto;
  border: 0;
  border-top: 1px solid #ccc;
  height: 0;
}
.divider.pink-short {
  width: 6%;
  border-top: 3px solid var(--pink);
  margin-bottom: 20px;
}
.divider.pink-mid {
  width: 15%;
  border-top: 3px solid var(--pink);
  margin-bottom: 20px;
}
.divider.pink-line { border-top-color: var(--pink-line); }

.button {
  display: table;
  width: 100%;
  margin: 0 auto 40px;
  padding: 17px 25px;
  border: 0;
  border-radius: 100px;
  background-color: var(--pink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 34px;
  font-weight: 400;
  line-height: 19.2px;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s linear, color .2s linear;
}
.button:hover,
.button:focus-visible { background-color: #353535; color: #fff; }

/* ---------- Header ---------- */

.site-header { position: relative; z-index: 50; }

.header-row {
  padding: 20px 15px;
  background-color: var(--dark);
}
.header-row .container { align-items: flex-start; }

.header-logo-col { width: 33.3333%; }
.header-nav-col { width: 66.6667%; padding-top: 10px; }

.header-logo {
  display: block;
  max-width: 73%;
  margin: 0 auto;
}
.header-logo img { width: 100%; }

.main-nav { text-align: right; }
.main-nav > ul { display: block; font-size: 0; }
.main-nav > ul > li {
  display: inline-block;
  position: relative;
  vertical-align: top;
}
.main-nav a {
  display: block;
  margin: 0 35px;
  padding: 5px 0;
  color: #fff;
  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: 300;
  line-height: 19.2px;
  text-transform: uppercase;
  text-align: center;
  transition: all .25s linear;
}
.main-nav a:hover,
.main-nav li.active > a { color: var(--pink); }

.main-nav .has-sub > a { display: inline-flex; align-items: center; gap: 1px; }
.main-nav .chevron { width: 10px; height: 10px; fill: currentColor; margin-top: 1px; }

.main-nav .sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 185px;
  text-align: left;
  z-index: 60;
}
.main-nav li:hover > .sub,
.main-nav li:focus-within > .sub,
.main-nav li.open > .sub { display: block; }
.main-nav .sub a {
  margin: 0;
  padding: 10px 15px;
  background-color: var(--dark-2);
  text-align: center;
}
.main-nav .sub li.active > a { color: var(--pink); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  color: #fff;
  cursor: pointer;
  line-height: 1;
}
.nav-toggle svg { width: 34px; height: 30px; fill: currentColor; display: block; }
.nav-close {
  display: none;
  position: absolute;
  top: 18px;
  right: 20px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Footer ---------- */

.site-footer .row {
  padding: 30px 30px 24px;
  background-color: var(--pink);
  background-image: url(/assets/img/footer-bakgrund.jpg);
  background-image: image-set(url(/assets/img/footer-bakgrund.webp) type("image/webp"), url(/assets/img/footer-bakgrund.jpg) type("image/jpeg"));
  background-size: cover;
}
.footer-logo { display: block; max-width: 77%; }
.footer-logo img { width: 100%; }

.footer-salon .custom2 {
  font-style: italic;
  text-align: center;
}
.footer-karlshamn { padding-left: 0; padding-right: 10px; }

.social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 0 44px 29px 0;
  line-height: 1;
}
.social a { color: #fff; display: block; }
.social a:hover { color: rgba(255, 255, 255, .5); }
.social svg { height: 36px; width: auto; fill: currentColor; display: block; }

/* ---------- Home ---------- */

.home-hero {
  padding-top: 170px;
  padding-bottom: 500px;
  background-image: url(/assets/img/hero-hem.jpg);
  background-image: image-set(url(/assets/img/hero-hem.webp) type("image/webp"), url(/assets/img/hero-hem.jpg) type("image/jpeg"));
  background-size: cover;
  background-position: 50% 50%;
}
.home-hero h1 { margin-bottom: 100px; }
.home-hero .salon-logo {
  display: block;
  max-width: 55%;
  margin: 0 auto 28px;
}
.home-hero .spacer { height: 447px; }

.no-animal-row {
  padding: 32px 0 20px;
  background-color: #000;
}
.no-animal-row img {
  max-width: 49%;
  margin: 0 auto;
}

/* ---------- Salon pages ---------- */

.salon-hero {
  padding-top: 704px;
  padding-bottom: 80px;
  background-color: rgba(0, 0, 0, .098);
  background-size: cover;
  background-position: 50% 0%;
}
.salon-hero.stockholm {
  background-image: url(/assets/img/hero-stockholm.jpg);
  background-image: image-set(url(/assets/img/hero-stockholm.webp) type("image/webp"), url(/assets/img/hero-stockholm.jpg) type("image/jpeg"));
}
.salon-hero.karlshamn {
  background-image: url(/assets/img/hero-karlshamn.jpg);
  background-image: image-set(url(/assets/img/hero-karlshamn.webp) type("image/webp"), url(/assets/img/hero-karlshamn.jpg) type("image/jpeg"));
}
.salon-hero .button { width: 50%; }

.salon-intro {
  background-color: var(--dark);
  background-image: url(/assets/img/bakgrund-mork.jpg);
  background-image: image-set(url(/assets/img/bakgrund-mork.webp) type("image/webp"), url(/assets/img/bakgrund-mork.jpg) type("image/jpeg"));
  background-size: cover;
  background-position: 50% 50%;
  border-bottom: 1px solid rgba(229, 0, 127, .16);
}
.salon-intro.karlshamn {
  background: transparent;
  border-bottom: 0;
  padding-bottom: 0;
}
.salon-intro .intro-text { padding: 0 190px; }
.salon-intro .button.pricelist-btn {
  width: 65%;
  font-size: 27px;
}

.intro-text p + p { margin-top: 14px; }

.line-row .divider { margin: 0; }

.team-photo-row {
  background: transparent;
  padding-top: 30px;
  padding-bottom: 30px;
  border-bottom: 2px solid #f684b1;
}
.team-photo {
  max-width: 80%;
  margin: 0 0 40px 100px;
  box-shadow: 0 0 15px 0 #515151;
}

.staff-row .staff-img-col img { max-width: 84%; }
.staff-row .staff-text-col { padding-left: 0; padding-top: 40px; }
.staff-row .staff-text-col.no-top { padding-top: 0; }
.staff-row .staff-copy { padding-right: 50px; }
.staff-row .bokadirekt {
  display: block;
  max-width: 36%;
  margin: 0 auto 40px 0;
}
.staff-row .staff-divider { margin: 50px 0; }
.staff-row.tight { padding-top: 0; }
.staff-row.spaced { padding-top: 0; padding-bottom: 100px; }
.staff-row .img-mb { margin-bottom: 40px; }
.staff-row em { font-style: italic; }

/* Instagram tiles */
.insta-row.dark {
  background-color: var(--dark-2);
  padding-top: 160px;
  padding-bottom: 160px;
}
.insta-grid {
  padding-bottom: 13px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  width: 100%;
}
.insta-grid a {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border: 1px solid #ddd;
  background: #fff;
  color: #d0d0d0;
  transition: border-color .2s;
}
.insta-grid a:hover { border-color: var(--pink); }
.insta-grid a img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s linear; }
.insta-grid a:hover img { opacity: .85; }
.insta-row.dark .insta-grid a { background: #5f5f5f; border-color: #5f5f5f; color: #777; }
.insta-grid svg { width: 48px; height: 48px; fill: currentColor; }

/* ---------- Price list ---------- */

.price-hero {
  padding-top: 120px;
  padding-bottom: 80px;
  background-color: rgba(0, 0, 0, .098);
  background-image: url(/assets/img/hero-prislista.jpg);
  background-image: image-set(url(/assets/img/hero-prislista.webp) type("image/webp"), url(/assets/img/hero-prislista.jpg) type("image/jpeg"));
  background-size: auto;
  background-position: 0% 50%;
}

.price-body {
  padding-top: 78px;
  background-color: var(--dark);
}
.price-body.with-bg {
  background-image: url(/assets/img/bakgrund-mork.jpg);
  background-image: image-set(url(/assets/img/bakgrund-mork.webp) type("image/webp"), url(/assets/img/bakgrund-mork.jpg) type("image/jpeg"));
  background-size: cover;
}
.price-body .subtitle { margin-bottom: 15px; }
.price-body .note { margin-bottom: 40px; }
.price-body .book-btn {
  width: 35%;
  font-size: 25px;
  margin-bottom: 0;
}

.price-cat {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6em;
  color: var(--pink);
  text-align: left;
  margin-bottom: 40px;
}

.price-list { width: 100%; }
.price-item {
  display: flex;
  align-items: flex-start;
  margin: 0 -15px 40px;
}
.price-item > * { padding: 0 15px; }
.price-item .name { width: 33.3333%; }
.price-item .line { width: 41.6667%; padding-top: 10px; }
.price-item .line::before {
  content: "";
  display: block;
  border-top: 1px solid var(--pink-line);
}
.price-item .price { width: 25%; }

/* Karlshamn price layout variants */
.price-list.k .price-item .name { width: 33.3333%; }
.price-list.k .price-item .price { width: 66.6667%; }
.price-list.k-wide .price-item .name { width: 50%; }
.price-list.k-wide .price-item .price { width: 50%; }
.price-list.k-wide { padding-top: 10px; padding-bottom: 20px; }
.price-list.k-wide .price-item + .price-item { padding-top: 10px; }
.price-item.mb45 { margin-bottom: 45px; }
.price-item.mb20 { margin-bottom: 20px; }
.price-list.k-half .price-item .name { width: 41.6667%; }
.price-list.k-half .price-item .price { width: 58.3333%; }

.dotted {
  border: 0;
  border-top: 1px dotted var(--pink-soft);
  margin: 0;
}
.dotted.pb40 { margin-bottom: 40px; }
.dotted.pb10 { margin-bottom: 10px; }
.dotted.pb60 { margin-bottom: 60px; }

.package {
  margin-bottom: 36px;
}
.package .pink { color: var(--pink-soft); }
.package em { font-style: italic; }

.price-section-dark { background-color: var(--dark); }

.contact-btn {
  width: 206px;
  max-width: 45%;
  font-size: 17px;
  padding-top: 6px;
  padding-bottom: 5px;
  margin-left: 0;
}

/* ---------- Contact ---------- */

.contact-hero {
  padding-top: 200px;
  padding-bottom: 200px;
  background-size: cover;
}
.contact-hero.stockholm {
  background-image: url(/assets/img/hero-kontakt-stockholm.png);
  background-image: image-set(url(/assets/img/hero-kontakt-stockholm.webp) type("image/webp"), url(/assets/img/hero-kontakt-stockholm.png) type("image/png"));
  background-position: 0% 50%;
}
.contact-hero.stockholm .spacer { height: 283px; }
.contact-hero.karlshamn {
  background-image: url(/assets/img/hero-kontakt-karlshamn.jpg);
  background-image: image-set(url(/assets/img/hero-kontakt-karlshamn.webp) type("image/webp"), url(/assets/img/hero-kontakt-karlshamn.jpg) type("image/jpeg"));
  background-position: 50% 0%;
}

.contact-info {
  padding-top: 40px;
  background-color: var(--dark);
  background-image: url(/assets/img/bakgrund-mork.jpg);
  background-image: image-set(url(/assets/img/bakgrund-mork.webp) type("image/webp"), url(/assets/img/bakgrund-mork.jpg) type("image/jpeg"));
  background-position: 100% 50%;
  background-size: auto;
}
.contact-info .subtitle { margin-bottom: 13px; }
.contact-info .bodytext { color: #fff; }

.contact-gallery img { width: 100%; }

.map-form-row { padding: 0; }
.map-col { padding: 0; }
.form-col { padding-top: 50px; padding-bottom: 20px; }
@media (min-width: 768px) {
  .form-col { padding-left: 60px; padding-right: 60px; }
  .contact-form { max-width: 520px; margin: 0 auto; }
}
.form-col .subtitle { margin-bottom: 13px; }
.form-col .divider.pink-mid { margin-bottom: 20px; }

.contact-form label {
  display: block;
  margin: 0 0 2px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.2em;
  color: var(--text);
}
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea {
  display: block;
  width: 100%;
  margin: 0 0 5px;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  color: #454545;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 19px;
}
.contact-form textarea { height: 100px; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--pink); }
.contact-form .hp { position: absolute; left: -9999px; }
.contact-form .button {
  display: block;
  width: auto;
  margin: 5px auto 0;
  padding: 8px 25px;
  font-size: 18px;
  line-height: 18px;
}
.contact-form .req { color: var(--pink); }
.contact-form .consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0 12px;
  font-size: 13px;
  line-height: 1.5em;
  color: var(--staff-copy);
  cursor: pointer;
}
.contact-form .consent input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--pink);
  cursor: pointer;
}
.contact-form .consent a { color: var(--pink); }
.contact-form [aria-invalid="true"] { border-color: #c4006c; box-shadow: 0 0 0 1px #c4006c; }
.contact-form .consent.invalid { color: #c4006c; }
.contact-form .consent.invalid input { outline: 2px solid #c4006c; outline-offset: 1px; }
.form-note {
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.5em;
  text-align: center;
  color: #8a8a8a;
}
.form-note a { color: var(--pink); }
.form-status:empty { display: none; }
.form-status {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  text-align: center;
  color: var(--staff-copy);
}
.form-status.form-status--success { color: #2e7d4f; }
.form-status.form-status--error { color: #c4006c; }

/* ---------- Map (click-to-load) ---------- */

.map-embed {
  position: relative;
  width: 100%;
  height: 500px;
  background: #e9e6e7;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.map-embed .map-placeholder { padding: 24px; max-width: 360px; }
.map-embed .map-address {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6em;
  color: var(--staff-copy);
  margin-bottom: 16px;
}
.map-embed .map-address strong { display: block; font-family: var(--font-heading); font-size: 22px; font-weight: 400; color: var(--heading); margin-bottom: 4px; }
.map-embed .map-load {
  display: inline-block;
  width: auto;
  margin: 0 0 10px;
  padding: 10px 24px;
  border-radius: 100px;
  font-size: 15px;
  line-height: 1.2;
}
.map-embed .map-note { font-family: var(--font-body); font-size: 12px; color: #8a8a8a; }
.map-embed .map-note a { color: var(--pink); }

/* ---------- Footer legal ---------- */

.footer-legal {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.8em;
  color: rgba(255, 255, 255, .85);
}
.footer-legal a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { color: rgba(255, 255, 255, .7); }

/* ---------- Legal pages ---------- */

.legal-hero {
  padding-top: 120px;
  padding-bottom: 80px;
  background-color: var(--dark);
  background-image: url(/assets/img/bakgrund-mork.jpg);
  background-image: image-set(url(/assets/img/bakgrund-mork.webp) type("image/webp"), url(/assets/img/bakgrund-mork.jpg) type("image/jpeg"));
  background-size: cover;
}
.legal { padding-top: 60px; padding-bottom: 90px; }
.legal .col > * { max-width: 820px; }
.legal { font-family: var(--font-body); color: var(--staff-copy); font-size: 17px; line-height: 1.75em; }
.legal .legal__lead { font-size: 19px; line-height: 1.7em; }
.legal h2 { font-family: var(--font-heading); font-size: 30px; line-height: 1.3; letter-spacing: -0.04em; color: var(--heading); margin: 48px 0 14px; }
.legal h3 { font-family: var(--font-heading); font-size: 21px; line-height: 1.35; color: var(--heading); margin: 28px 0 8px; }
.legal p, .legal ul { margin: 0 0 16px; }
.legal ul { padding-left: 22px; list-style: disc; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--pink); text-decoration: underline; text-underline-offset: 2px; }
.legal__toc { background: #f6f3f4; border-left: 3px solid var(--pink); padding: 22px 28px; margin: 28px 0 8px; }
.legal__toc ol { margin: 0; padding-left: 20px; }
.legal__toc li { margin: 0 0 6px; }
.legal__updated { margin-top: 44px; font-size: 15px; color: #8a8a8a; }

.notfound { padding-top: 140px; padding-bottom: 160px; text-align: center; }
.notfound .bodytext { margin: 20px auto 40px; max-width: 560px; }
.notfound .button { width: auto; display: inline-block; font-size: 20px; margin: 0 8px 16px; }

/* ---------- Cookie consent ---------- */

.cookie-consent {
  position: fixed;
  left: 50%;
  bottom: clamp(16px, 3vw, 28px);
  transform: translateX(-50%);
  z-index: 1200;
  width: min(680px, calc(100vw - 32px));
  background: var(--dark);
  border: 1px solid rgba(229, 0, 127, .35);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  padding: 22px 26px;
  color: #fff;
  animation: cc-in .4s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes cc-in {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.cookie-consent__inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cookie-consent__text {
  flex: 1 1 300px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
}
.cookie-consent__text a { color: var(--pink-hover); text-decoration: underline; }
.cookie-consent__actions { display: flex; gap: 10px; flex-shrink: 0; }
.cc-btn {
  padding: 11px 20px;
  border: 0;
  border-radius: 100px;
  background: var(--pink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s linear, box-shadow .2s linear;
}
.cc-btn:hover, .cc-btn:focus-visible { background: #c4006c; }
.cc-btn--ghost {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.cc-btn--ghost:hover, .cc-btn--ghost:focus-visible {
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px var(--pink);
}
/* display:flex på klassen slår ut webbläsarens [hidden]-regel. */
.cookie-consent__options[hidden] { display: none; }
.cookie-consent__options {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}
.cc-opt {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .75);
  cursor: pointer;
}
.cc-opt strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.cc-opt input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--pink);
  cursor: pointer;
}
.cc-opt input:disabled { cursor: not-allowed; opacity: .6; }

@media (max-width: 690px) {
  .cookie-consent { padding: 18px 20px; width: calc(100vw - 24px); bottom: 12px; }
  .cookie-consent__actions { width: 100%; flex-wrap: wrap; gap: 8px; }
  .cc-btn { flex: 1 1 auto; padding: 11px 14px; }
}

/* ---------- ≤1199px ---------- */

@media (min-width: 768px) and (max-width: 1440px) {
  .home-hero { background-image: url(/assets/img/hero-hem.jpg); background-image: image-set(url(/assets/img/hero-hem-1440.webp) type("image/webp"), url(/assets/img/hero-hem.jpg) type("image/jpeg")); }
  .salon-hero.stockholm { background-image: url(/assets/img/hero-stockholm.jpg); background-image: image-set(url(/assets/img/hero-stockholm-1440.webp) type("image/webp"), url(/assets/img/hero-stockholm.jpg) type("image/jpeg")); }
  .salon-hero.karlshamn { background-image: url(/assets/img/hero-karlshamn.jpg); background-image: image-set(url(/assets/img/hero-karlshamn-1440.webp) type("image/webp"), url(/assets/img/hero-karlshamn.jpg) type("image/jpeg")); }
}

@media (max-width: 1199px) {
  .header-row { padding-top: 15px; padding-bottom: 15px; }
  .header-logo-col { width: 41.6667%; }
  .header-nav-col { width: 58.3333%; padding-top: 0; }
  .main-nav a { margin: 0 25px 0 2px; }

  .subtitle { font-size: 36px; }
  .bodytext { font-size: 14px; }
  .spottext { font-size: 53px; }
  .custom1 { font-size: 14px; line-height: 1.4em; color: #616161; }
  .custom2 { font-size: 13px; }
  .button { font-size: 18px; }

  .home-hero { padding-top: 150px; padding-bottom: 250px; }
  .home-hero h1 { margin-bottom: 0; }
  .home-hero .spacer { height: 515px; }
  .no-animal-row { padding-top: 30px; padding-bottom: 29px; }

  .salon-hero { padding-top: 640px; }
  .salon-intro .intro-text { padding: 0 10px; }
  .salon-intro .button.pricelist-btn { width: 100%; }

  .staff-row .staff-text-col { padding-top: 57px; }
  .staff-row .staff-text-col.first { padding-top: 40px; }

  .price-body .book-btn { font-size: 25px; }

  .contact-hero { padding-top: 100px; padding-bottom: 100px; }
  .map-embed { height: 600px; }

  .footer-logo-col { padding: 14px 0 0; }
  .footer-karlshamn .social,
  .footer-salon .social { padding-right: 0; }
}

/* ---------- ≤767px ---------- */

@media (max-width: 767px) {
  .home-hero { background-image: url(/assets/img/hero-hem.jpg); background-image: image-set(url(/assets/img/hero-hem-800.webp) type("image/webp"), url(/assets/img/hero-hem.jpg) type("image/jpeg")); }
  .salon-hero.stockholm { background-image: url(/assets/img/hero-stockholm.jpg); background-image: image-set(url(/assets/img/hero-stockholm-800.webp) type("image/webp"), url(/assets/img/hero-stockholm.jpg) type("image/jpeg")); }
  .salon-hero.karlshamn { background-image: url(/assets/img/hero-karlshamn.jpg); background-image: image-set(url(/assets/img/hero-karlshamn-800.webp) type("image/webp"), url(/assets/img/hero-karlshamn.jpg) type("image/jpeg")); }
  .contact-hero.karlshamn { background-image: url(/assets/img/hero-kontakt-karlshamn.jpg); background-image: image-set(url(/assets/img/hero-kontakt-karlshamn-800.webp) type("image/webp"), url(/assets/img/hero-kontakt-karlshamn.jpg) type("image/jpeg")); }
  .site-footer .row { background-image: url(/assets/img/footer-bakgrund.jpg); background-image: image-set(url(/assets/img/footer-bakgrund-800.webp) type("image/webp"), url(/assets/img/footer-bakgrund.jpg) type("image/jpeg")); }
  .salon-intro:not(.karlshamn), .price-body.with-bg, .legal-hero { background-image: url(/assets/img/bakgrund-mork.jpg); background-image: image-set(url(/assets/img/bakgrund-mork-1000.webp) type("image/webp"), url(/assets/img/bakgrund-mork.jpg) type("image/jpeg")); }
  .legal { font-size: 15px; padding-top: 30px; }
  .legal h2 { font-size: 23px; margin-top: 36px; }
  .legal h3 { font-size: 18px; }
  .footer-legal { text-align: center; }
  .row { padding: 40px 0 20px; }
  .col { padding-bottom: 20px; }
  .text { margin-bottom: 20px; }
  .image { margin-bottom: 20px; }

  .header-row { padding: 0 0 2px; min-height: 63px; }
  .header-row .container { align-items: center; min-height: 61px; }
  .header-logo-col { width: 66.6667%; padding-top: 7px; padding-bottom: 0; }
  .header-nav-col { width: 33.3333%; padding: 0 20px 7px 0; }
  .header-logo { max-width: 100%; margin: 0; }

  .nav-toggle { display: inline-block; }
  .main-nav > ul { display: none; }
  .main-nav.open > ul {
    display: block;
    position: fixed;
    inset: 0;
    overflow-y: auto;
    padding: 68px 0 40px 11px;
    background-color: var(--dark);
    text-align: left;
    z-index: 100;
  }
  .main-nav.open .nav-close { display: block; z-index: 101; position: fixed; }
  .main-nav.open > ul > li { display: block; }
  .main-nav a {
    margin: 0;
    padding: 30px 10px 10px;
    font-size: 22px;
    text-align: left;
  }
  .main-nav .sub {
    display: block;
    position: static;
    width: auto;
    padding-left: 20px;
  }
  .main-nav .sub a {
    background: transparent;
    font-size: 20px;
    text-align: left;
  }

  .subtitle { font-size: 22px; }
  .bodytext { font-size: 14px; line-height: 1.5em; }
  .spottext { font-size: 24px; margin-bottom: 0; }
  .custom1 { font-size: 15px; line-height: 1.7em; color: #4e4e4e; }
  .custom2 { font-size: 15px; line-height: 1.6em; }
  .button {
    font-size: 16px;
    margin-bottom: 0;
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .home-hero { padding-top: 45px; }
  .home-hero h1 { margin-bottom: 25px; }
  .home-hero .salon-logo { max-width: 75%; }
  .home-hero .spacer { height: 650px; }
  .no-animal-row { padding-top: 42px; padding-bottom: 8px; }
  .no-animal-row img { max-width: 87%; }

  .salon-hero { padding-top: 354px; padding-bottom: 60px; background-position: 50% 50%; }
  .salon-intro .intro-text { padding: 0 5px; }
  .salon-intro .button.pricelist-btn { font-size: 18px; }
  .bodytext { font-size: 16px; }

  .line-row { padding-top: 0; padding-bottom: 0; }
  .line-row .col { padding-bottom: 0; }
  .line-row .divider { margin: 20px 0; }

  .team-photo { margin: 0 0 0 30px; }

  .staff-row { padding-bottom: 20px; }
  .staff-row.spaced { padding-bottom: 20px; }
  .staff-row .staff-img-col img { margin-left: auto; margin-right: auto; }
  .staff-row .staff-text-col,
  .staff-row .staff-text-col.first,
  .staff-row .staff-text-col.no-top { padding: 0 15px; }
  .staff-row .subtitle.sub-last { padding-bottom: 15px; }
  .staff-row .staff-copy { padding: 0 15px; }
  .staff-row .staff-divider-col { padding: 0; }
  .staff-row .staff-divider { margin: 20px 0; }

  .insta-row.dark { padding-top: 80px; padding-bottom: 80px; }
  .insta-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .price-hero { padding-top: 100px; padding-bottom: 60px; background-position: 50% 50%; }
  .price-body { padding-top: 19px; }
  .price-body .subtitle { margin-bottom: 10px; }
  .price-body .divider.pink-short { width: 17%; margin-bottom: 10px; }
  .price-body .note { margin-bottom: 10px; }
  .price-body .book-btn { width: 70%; font-size: 16px; }
  .price-body .note { margin-bottom: 20px; }
  .price-cat { font-size: 18px; margin-bottom: 12px; }
  .price-body .container-fixed > .col:nth-child(2) { padding-top: 30px; }
  .price-item { margin-bottom: 20px; }
  .price-list .price-item.mb45,
  .price-list .price-item.mb20 { margin-bottom: 20px; }
  .price-item .line { display: none; }
  .price-body .price-list .price-item .name { width: 62%; }
  .price-body .price-list .price-item .price { width: 38%; padding-left: 0; text-align: right; }
  .price-body .price-list .price-item.long { flex-wrap: wrap; }
  .price-body .price-list .price-item.long .name,
  .price-body .price-list .price-item.long .price { width: 100%; text-align: left; }
  .price-body .price-list .price-item.long .price { padding-left: 15px; color: rgba(255, 255, 255, .8); }
  .contact-btn { width: 80%; }

  .contact-hero { padding-top: 50px; padding-bottom: 50px; }
  .contact-hero.stockholm .spacer { height: 150px; }
  .map-embed { height: 320px; }

  .site-footer .row { padding-top: 14px; padding-bottom: 4px; background-position: 50% 0%; }
  .footer-logo { max-width: 73%; margin: 0 auto; }
  .social { padding: 0; gap: 60px; }
  .social svg { height: 40px; }
  .footer-karlshamn { padding: 0 15px 20px; }
  .footer-salon .custom2 { font-size: 13px; }
}