/* Passformshjälp (ss-fit.js): redaktionell ruta (guide) och måttrad vid variantvalet.
   --ss-fit-indent sätts av ss-fit.js på måttraden till dropdownens vänsterkant (desktop: efter etiketten "Välj modell"). */
.ss-fit {
  --ss-fit-indent: 0px;
  flex: 0 0 calc(100% - var(--ss-fit-indent));
  width: calc(100% - var(--ss-fit-indent));
  margin: 0 0 16px var(--ss-fit-indent);
  box-sizing: border-box;
  color: var(--base-color1, #141414);
}
details.ss-fit {
  border: 2px solid var(--border-color1, #fbf0e4);
  border-radius: 16px;
  background: var(--base-background2, #fffaf5);
}
.ss-fit-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 16px;
  font-family: BrownLLWeb-Bold, sans-serif;
  font-size: 16px;
  line-height: 1.3;
}
.ss-fit-summary::-webkit-details-marker {
  display: none;
}
.ss-fit-summary::after {
  content: "+";
  font-size: 22px;
  line-height: 1;
  color: #960044;
}
details[open] > .ss-fit-summary::after {
  content: "−";
}
.ss-fit-summary:focus-visible {
  outline: 2px solid #960044;
  outline-offset: 2px;
  border-radius: 14px;
}
.ss-fit-body {
  padding: 0 16px 14px;
  font-size: 14px;
  line-height: 1.45;
}
.ss-fit-body p {
  margin: 0 0 10px;
}
.ss-fit-figure {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 0 8px;
}
.ss-fit-figure .ss-fit-shape {
  fill: #fff;
  stroke: currentColor;
  stroke-width: 2;
}
.ss-fit-figure .ss-fit-zone {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  opacity: 0.45;
}
.ss-fit-figure .ss-fit-arrow {
  fill: none;
  stroke: #960044;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ss-fit-figure .ss-fit-label {
  font-size: 11px;
  fill: #960044;
  font-family: inherit;
}
.ss-fit-rows {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
}
.ss-fit-row-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 14px;
  font-size: 12px;
  opacity: 0.75;
}
.ss-fit .ss-fit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
  width: 100%;
  height: auto;
  min-height: 44px;
  margin: 0;
  padding: 8px 14px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--base-background1, #fff);
  border: 2px solid var(--border-color1, #fbf0e4);
  border-radius: 999px;
  cursor: pointer;
}
.ss-fit .ss-fit-row:hover,
.ss-fit .ss-fit-row:focus-visible {
  border-color: #960044;
}
.ss-fit .ss-fit-row[aria-pressed="true"] {
  border-color: #960044;
  box-shadow: inset 0 0 0 1px #960044;
}
.ss-fit .ss-fit-row:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ss-fit-variant {
  font-family: BrownLLWeb-Bold, sans-serif;
}
/* Guidens steg, grupper, detaljtext, PDF-länkar och sökning i leverantörens tabell. */
.ss-fit-steps {
  margin: 0 0 10px;
  padding-left: 20px;
}
.ss-fit-steps li {
  margin: 0 0 4px;
}
.ss-fit-group {
  margin: 8px 0 2px !important;
  font-family: BrownLLWeb-Bold, sans-serif;
  font-size: 13px;
}
.ss-fit .ss-fit-row {
  border-radius: 16px;
}
.ss-fit-range {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ss-fit-detail {
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.8;
}
.ss-fit-link {
  display: inline-block;
  margin: 0 16px 6px 0;
  color: #960044;
  text-decoration: underline;
}
.ss-fit-lookup {
  margin: 0 0 12px;
}
.ss-fit-lookup .ss-fit-field {
  max-width: 320px;
}
.ss-fit-hits {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.ss-fit-hit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px 6px 14px;
  border: 2px solid var(--border-color1, #fbf0e4);
  border-radius: 14px;
  background: var(--base-background1, #fff);
}
.ss-fit-note {
  font-size: 13px;
  opacity: 0.85;
}
.ss-fit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  margin: 0;
}
.ss-fit-field input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 8px 10px;
  font: inherit;
  font-size: 16px;
  border: 2px solid var(--border-color1, #fbf0e4);
  border-radius: 10px;
  background: #fff;
  color: inherit;
}
.ss-fit-field input:focus-visible {
  outline: 2px solid #960044;
  outline-offset: 1px;
}
.ss-fit-status {
  font-size: 13px;
}
.ss-fit .ss-fit-choose {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-height: 44px;
  margin: 0;
  padding: 8px 16px;
  font: inherit;
  color: #fff;
  background: #960044;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.ss-fit .ss-fit-choose:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Kort rad i mobilens variantpanel (#ss-variant-panel från ss-shopping.js). */
/* Liten måttrad för vald variant (bara när varianterna har olika mått som inte står i namnen). */
.ss-fit.ss-fit-line {
  margin-top: -4px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.85;
}
.ss-variant-panel .ss-fit-panel-hint {
  margin: -8px 0 8px;
  font-size: 13px;
  line-height: 1.4;
}
/* Mobilgalleriets pilot (ss-fit.js): miniatyrer i prickraden (.navigation.only-mobile), samma storlek och
   hörnradie som variantväljarens miniatyrer; rullar vågrätt på en rad när de inte får plats. Aktiv miniatyr markeras som i
   desktopgalleriet (temat: .thumbnail img{border-bottom:3px solid transparent}, .thumbnail.active img
   {background:var(--theme-color1)}) och video som där (mörkad bild, vit play-ikon). Prickarna döljs men finns
   kvar för galleriets egen logik. */
.productzoom-wrapper .navigation.ss-gallery-thumbs {
  flex-wrap: nowrap;
  justify-content: safe center;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  padding: 3px 8px 6px;
  box-sizing: border-box;
}
.productzoom-wrapper .navigation.ss-gallery-thumbs .dot {
  display: none;
}
.productzoom-wrapper .ss-gallery-thumb {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.productzoom-wrapper .ss-gallery-thumb img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: cover;
  box-sizing: content-box;
  border-radius: 6px 0 6px 0;
  border-bottom: 3px solid transparent;
  background-color: var(--base-background4);
}
.productzoom-wrapper .ss-gallery-thumb[aria-current="true"] img {
  background: var(--theme-color1);
}
.productzoom-wrapper .ss-gallery-thumb:focus-visible {
  outline: 2px solid #960044;
  outline-offset: 2px;
}
.productzoom-wrapper .ss-gallery-thumb-video img {
  filter: brightness(0.75);
}
/* Play-glyfen som block med radhöjd 1 så att flex centrerar själva triangeln (FontAwesome :before har annars
   radhöjd och baslinje som förskjuter den nedåt). */
.productzoom-wrapper .ss-gallery-play::before,
#thumbs .thumbnail.media i.fa-play::before {
  display: block;
  line-height: 1;
}
/* Tydlig videomarkering: vit play-ikon på mörk halvgenomskinlig platta + etiketten "Video" (mobil och desktop). */
.productzoom-wrapper .ss-gallery-thumb-video .ss-gallery-play {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  color: #fff;
  transform: none;
  pointer-events: none;
}
/* Desktop: plattan centreras på bilden. Temat: .thumbnail{padding:1em .5em 0}; etiketten under bilden är 16 px hög,
   så bildens mitt ligger (1em − 16px)/2 under rutans mitt. */
#thumbs .thumbnail.media i.fa-play {
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  left: 50%;
  top: calc(50% + (1em - 16px) / 2);
  transform: translate(-50%, -50%);
}
#thumbs .thumbnail.media {
  flex-direction: column;
  align-items: center;
}
#thumbs .thumbnail.media .ss-gallery-video-label {
  display: block;
  height: 14px;
  margin-top: 2px;
  font-size: 12px;
  line-height: 14px;
  font-weight: bold;
  text-align: center;
}
/* Förstorad vy i mobil: vänster/höger-pilarna 12 px under bilden (ss-fit.js mäter bildens yta och sätter
   --ss-zoom-arrows-top), centrerade bredvid varandra med 48 px mellanrum. Bildytan krymps så att det alltid finns plats under bilden;
   pilarnas klick är orörda (bara placering). Utan mätning (reserv): 28 px från skärmens nederkant. */
@media only screen and (max-width: 46.9rem) {
  .popped_img .carousel {
    height: calc(100% - 150px);
    top: 60px;
  }
  .popped_img .expanded-view-controls .carousel-arrow {
    top: var(--ss-zoom-arrows-top, auto);
    bottom: auto;
    transform: none;
    transition: none;
    will-change: auto;
  }
  .popped_img:not([style*="--ss-zoom-arrows-top"])
    .expanded-view-controls
    .carousel-arrow {
    bottom: 28px;
  }
  .popped_img .expanded-view-controls .carousel-arrow.carousel-prev {
    left: auto;
    right: calc(50% + 24px);
  }
  .popped_img .expanded-view-controls .carousel-arrow.carousel-next {
    right: auto;
    left: calc(50% + 24px);
  }
}

/* Lagerstatus läses från Askås variantdata på sidan, utan extra sidladdningar. */

.ss-fit-variant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.productzoom-wrapper .navigation.ss-gallery-thumbs {
  scrollbar-width: none;
  mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
}
.productzoom-wrapper .navigation.ss-gallery-thumbs::-webkit-scrollbar {
  display: none;
}
.productzoom-wrapper .navigation.ss-gallery-thumbs.ss-at-end {
  mask-image: none;
}

.ss-fit-head-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* Explicit variant choices below a size with multiple matching SKUs. */
.ss-fit-choices[hidden] {
  display: none;
}
.ss-fit-choices {
  display: grid;
  gap: 6px;
  padding: 4px 12px 10px;
}
.ss-fit .ss-fit-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: auto;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: 16px;
  background: var(--base-background4, #fbf0e4);
  color: #141414;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ss-fit .ss-fit-choice:hover {
  background: var(--base-background3, #fcf6f0);
  color: #141414;
}
.ss-fit .ss-fit-choice[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px #960044;
}
.ss-fit-choice-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ss-fit .ss-fit-choice:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}