/** Shopify CDN: Minification failed

Line 412:20 Unexpected "--low"

**/
/* HOPE'LESS på Prestige — lag 2 og 3 i én fil.
   Lag 1 (tokens) ligger urørt i hopeless-tokens.css.

   Prestige gjør mye av jobben Dawn ikke gjorde: radius, versaler og
   fargeskjema styres av innstillinger, og seksjonene har egne
   spacing-wrappere. Derfor er dette filen LITEN. Alt som kan løses i
   temaeditoren, er løst der og skal ikke gjenta seg her. */

/* ==========================================================================
   PORTERT: KUTTET — det delte ordet
   Samme konstruksjon som i Dawn-bygget. Streken ligger i flyten mellom
   halvdelene, så den treffer apostrofens plass uansett skriftbredde.
   overflow: clip, ikke hidden: hidden dreper animation-timeline: view().
   ========================================================================== */

.hl-cut {
  position: relative;
  padding-block: clamp(72px, 9vw, 140px);
  overflow: clip;
}

.hl-cut__row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.055em;
  font-size: var(--hl-cut-size, 16.8vw);
  line-height: 0.82;
  /* Egen, strammere luft enn Prestiges container. Ordet skal spenne. */
  padding-inline: clamp(16px, 3vw, 48px);
}

.hl-cut__half {
  display: block;
  font-family: var(--hl-font);
  font-size: 1em;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}

.hl-cut__seam {
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
  width: 1px;
  background: #fff;
  transform: translateY(-0.06em);
}

.hl-cut__seam::before,
.hl-cut__seam::after {
  content: '';
  position: absolute;
  left: 0;
  width: 1px;
  height: 60vh;
  background: rgba(255, 255, 255, 0.22);
}
.hl-cut__seam::before { bottom: 100%; }
.hl-cut__seam::after { top: 100%; }

.hl-cut__meta {
  position: absolute;
  top: calc(100% + clamp(20px, 2.4vw, 34px));
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--hl-meta-size);
  letter-spacing: var(--hl-meta-tracking);
  text-transform: uppercase;
  line-height: 1;
  z-index: 2;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hl-cut__half--a,
    .hl-cut__half--b {
      animation: hl-cut-drift linear both;
      animation-timeline: view();
      animation-range: entry 20% exit 80%;
    }
    .hl-cut__half--b { animation-name: hl-cut-drift-b; }
  }
}
@keyframes hl-cut-drift {
  from { transform: translateX(0.012em); }
  to { transform: translateX(-0.012em); }
}
@keyframes hl-cut-drift-b {
  from { transform: translateX(-0.012em); }
  to { transform: translateX(0.012em); }
}

@media (max-width: 749px) {
  .hl-cut { padding-block: clamp(56px, 14vw, 88px); }
  .hl-cut__seam::before,
  .hl-cut__seam::after { height: 34vh; }
}

/* ==========================================================================
   PORTERT: DROP — ett kort per fargevariant
   Kortene er våre egne, ikke Prestiges product-card: poenget er nettopp at
   Prestige rendrer ett kort per PRODUKT, mens drop-historien trenger ett
   kort per FARGE.
   ========================================================================== */

.hl-drop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.hl-drop-head__sub {
  margin: 6px 0 0;
  color: var(--hl-graphite);
  font-size: var(--hl-body-size);
  max-width: var(--hl-measure);
}

.hl-grid {
  display: grid;
  gap: 1px;
  background: var(--hl-line);
  border-block: var(--hl-hairline);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 750px) { .hl-grid { grid-template-columns: repeat(3, 1fr); } }
.hl-grid > .hl-card { background: var(--hl-white); padding: 0 0 20px; }

.hl-card { position: relative; display: block; }
.hl-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  /* Pakkshotene er friskåret på hvitt: flaten bak dem MÅ være hvit,
     ellers tegner det seg en firkant rundt hvert bilde. */
  background: var(--hl-shot);
  aspect-ratio: 1 / 1;
}
.hl-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--hl-slow) var(--hl-ease);
}
.hl-card:hover .hl-card__media img { transform: scale(1.03); }

/* Kortteksten er en katalogoppføring, ikke et produktkort: statuslinje,
   så navn og pris på samme linje, så fargen. Målt på uvuclub.com. */
.hl-card__info {
  padding: 14px 16px 0;
  display: block;
  color: var(--hl-ink);
  text-decoration: none;
}

/* Statuslinjen holder høyden sin selv når den er tom, så alle kortene i
   raden får bunnlinjene på samme sted. Det er derfor den ikke er :empty. */
.hl-card__status {
  display: block;
  min-height: 1.1em;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: var(--hl-meta-tracking);
  text-transform: uppercase;
  color: var(--hl-graphite);
}

.hl-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.hl-card__title {
  font-size: var(--hl-meta-size);
  letter-spacing: var(--hl-meta-tracking);
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}
.hl-card__price {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.hl-card__colour {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  /* Versalene settes her, ikke i Liquid, så oversettelsen eier ordet og
     designet eier hvordan det ser ut. */
  text-transform: uppercase;
  color: var(--hl-graphite);
}

/* ==========================================================================
   PORTERT: GARDEROBEN — kategorirader med KOMMER-status
   ========================================================================== */

.hl-catrows__head { margin-bottom: 24px; }
.hl-catrows__sub {
  margin: 6px 0 0;
  color: var(--hl-graphite);
  font-size: var(--hl-body-size);
  max-width: var(--hl-measure);
}

.hl-catrows__list { border-top: var(--hl-hairline); }

.hl-catrow {
  display: grid;
  grid-template-columns: 3ch 1fr auto 24px;
  align-items: center;
  gap: 18px;
  padding: 22px 0;
  border-bottom: var(--hl-hairline);
  color: var(--hl-ink);
  text-decoration: none;
}
.hl-catrow__index,
.hl-catrow__status {
  font-size: var(--hl-meta-size);
  letter-spacing: var(--hl-meta-tracking);
  text-transform: uppercase;
  line-height: 1;
  color: var(--hl-graphite);
}
.hl-catrow__name {
  font-family: var(--hl-font);
  font-size: clamp(22px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1;
}
.hl-catrow__arrow { justify-self: end; transition: transform var(--hl-base) var(--hl-ease); }
.hl-catrow--live:hover .hl-catrow__arrow { transform: translateX(4px); }
.hl-catrow--soon { cursor: default; }
.hl-catrow--soon .hl-catrow__name { color: var(--hl-graphite); }

/* ==========================================================================
   OVERSTYRINGER AV PRESTIGE — hold denne blokken TYNN.
   Hver regel her er teknisk gjeld. Kan det løses i temaeditoren, skal det.
   ========================================================================== */

/* Meta-typografien vår i Prestiges underoverskrifter: liten, sperret, rolig.
   Prestiges .h6 brukes som eyebrow i alle seksjonene. */
.h6, .prose .h6 {
  font-size: var(--hl-meta-size);
  letter-spacing: var(--hl-meta-tracking);
  font-weight: 500;
}

/* Salgs- og kampanjefarger finnes ikke i denne identiteten. */
:root {
  --product-on-sale-accent: 19 19 22;
}

/* ==========================================================================
   RØFFERE KANTER
   Etter ny gjennomgang av uvuclub.com 03.08. Det som gjør UVU hard er ikke
   store grep, det er at ALT er små versaler på hårstreker, uten et eneste
   avrundet hjørne eller mykt fall. Under er de fire tingene Prestige gjør
   mykere enn oss, rettet opp.
   ========================================================================== */

/* 1. Ingen skygger noe sted. Prestige legger dem på kort og drawer. */
.product-card,
.product-card__figure,
.card,
.drawer,
.modal__content {
  box-shadow: none;
}

/* 2. Hårstrek mellom seksjoner i stedet for luft alene. Det er dette som
      gjør at siden leser som et oppslagsverk og ikke som en scroll. */
.shopify-section + .shopify-section > .color-scheme:not(.color-scheme--scheme-3) {
  border-top: var(--hl-hairline);
}

/* 3. Trygghetsraden: hårstreker mellom kolonnene, ikke bare mellomrom. */
.text-with-icons {
  --hl-icons-line: var(--hl-line);
}
.text-with-icons__item + .text-with-icons__item {
  border-left: 1px solid var(--hl-icons-line);
}
.text-with-icons__item {
  padding-inline: clamp(12px, 2vw, 28px);
}
@media (max-width: 749px) {
  .text-with-icons__item + .text-with-icons__item {
    border-left: 0;
    border-top: 1px solid var(--hl-icons-line);
  }
}

/* 4. USP-linjene på produktsiden: små versaler, tett, uten pilleform. */
.product-feature-with-icon,
.feature-with-icon {
  border-radius: 0;
  font-size: var(--hl-meta-size);
  letter-spacing: var(--hl-meta-tracking);
  text-transform: uppercase;
}

/* ==========================================================================
   KONVERTERING I MERKETS EGET SPRÅK
   Hele poenget: en trust badge ser påklistret ut fordi den er FARGET og
   RUND i et design som er monokromt og firkantet. Løsningen er ikke å
   fjerne salgselementene, men å tvinge dem inn i samme språk som resten:
   små versaler, hårstreker, null farge, null radius.
   ========================================================================== */

/* Betalingsikonene er det eneste stedet farge sniker seg inn i footeren.
   Visa-blått og Mastercard-oransje på en sort flate ser ut som reklame.
   Gråtone + lav opasitet gjør dem til tekstur: du ser AT det er kort og
   Klarna, uten at de roper. De lyser opp når du peker på dem, så
   informasjonen er der for den som leter etter den. */
.payment-methods svg,
.payment-methods img {
  filter: grayscale(1) brightness(1.6) contrast(0.85);
  opacity: 0.55;
  transition: opacity var(--hl-base) var(--hl-ease);
}
.payment-methods:hover svg,
.payment-methods:hover img {
  opacity: 0.9;
}

/* Fargevalget på produktsiden er miniatyrer av varianten, ikke prikker.
   Prestige setter dem til 3rem, altså 48 px, og da er capsen en flekk.
   72 px gjør at man faktisk ser forskjell på sort, beige og hvit før man
   klikker. Seks farger i én rad blir 6 x 72 + mellomrom, som fint får
   plass i infokolonnen på 34 %.
   Bildene er pakkshots på hvit bakgrunn, så en hårstrek rundt trengs for
   at den hvite capsen ikke skal flyte ut i siden. */
.thumbnail-swatch {
  --swatch-size: 4.5rem;
  border-color: rgba(19, 19, 22, 0.14);
}
:checked + .thumbnail-swatch,
.thumbnail-swatch.is-selected {
  border-color: var(--hl-ink);
}

@media (max-width: 749px) {
  /* På mobil er infokolonnen full bredde, men seks miniatyrer på 72 px
     sprenger den. 60 px holder capsen lesbar og rada på én linje. */
  .thumbnail-swatch {
    --swatch-size: 3.75rem;
  }
}

/* Den avsluttende CTA-en er den eneste tekst-på-foto utenom heroen. Da
   skal den mene det. Prestiges h1 lander på 31 px, som er for spakt til å
   forsvare at det ligger oppå et bilde i full bredde; det leses som en
   standardseksjon. 4,2vw gir rundt 54 px på desktop og skalerer ned til
   28 på mobil.

   Scopet på :has(.button) fordi det er nettopp CTA-en som skal være stor.
   Den andre overlay-seksjonen på forsiden, fargeflaten, er stum med vilje
   og skal ikke plukkes opp av denne regelen om den en dag får tekst. */
.shopify-section--image-with-text-overlay:has(.button) .h1 {
  font-size: clamp(28px, 4.2vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* Fri frakt-baren i kurven: hårstrek, ikke fremdriftsindikator med farge. */
.free-shipping-bar {
  display: block;
  padding: 14px 0;
  border-bottom: var(--hl-hairline);
  font-size: var(--hl-meta-size);
  letter-spacing: var(--hl-meta-tracking);
  text-transform: uppercase;
}
.free-shipping-bar progress,
.free-shipping-bar [role='progressbar'] {
  accent-color: var(--hl-ink);
  height: 1px;
}

/* Lagerstatus: tekst, aldri farget prikk. Prestige legger grønn/oransje
   status som standard. Her er alt blekk, og «få igjen» får kursiv i stedet
   for rødt, fordi rødt finnes ikke i denne identiteten. */
.product-info__inventory,
.inventory,
[class*='inventory-status'] {
  font-size: var(--hl-meta-size);
  letter-spacing: var(--hl-meta-tracking);
  text-transform: uppercase;
  color: var(--hl-ink);
}
.inventory--low,
[class*='inventory']--low {
  color: var(--hl-ink);
  font-style: italic;
}
.inventory__dot,
[class*='inventory'] [class*='dot'] {
  display: none;
}

/* Delbetalingslinja (Klarna) rett under prisen: dempet, liten, i flyten.
   Shopify rendrer den i sin egen komponent, så vi kan bare styre rammen. */
.product-info shopify-payment-terms,
shopify-payment-terms {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--hl-graphite);
}

/* Kryssalget i kurvskuffen: hårstrek over, samme meta-typografi som ellers.
   Det skal se ut som en del av kvitteringen, ikke som en annonse. */
.cart-drawer__cross-sell,
[class*='cross-sell'] {
  border-top: var(--hl-hairline);
  padding-top: 18px;
  margin-top: 18px;
}
[class*='cross-sell'] [class*='title'],
[class*='cross-sell'] .h6 {
  font-size: var(--hl-meta-size);
  letter-spacing: var(--hl-meta-tracking);
  text-transform: uppercase;
  color: var(--hl-graphite);
}

/* ==========================================================================
   MOBIL, QA 03.08
   Alt her er målt i nettleseren på 375 px, ikke antatt. Ingen av reglene
   rører desktop.
   ========================================================================== */
@media (max-width: 749px) {

  /* Ikonene i headeren er 22x22 px. Selve grafikken skal være liten, men
     treffflaten skal ikke være det: et usynlig felt på 44 px rundt hvert
     ikon gjør meny, søk og kurv trygge å treffe med tommelen uten at noe
     flytter seg visuelt. */
  .header__primary-nav > button,
  .header__search-link > a,
  .header__cart-link > a {
    position: relative;
  }
  .header__primary-nav > button::after,
  .header__search-link > a::after,
  .header__cart-link > a::after {
    content: '';
    position: absolute;
    inset: -11px;
  }

  /* Prikkene under heroen og trygghetsraden er 6 px med 8 px usynlig
     margin: 22 px totalt. Doblet til 40 px. */
  .page-dots .tap-area::before {
    inset: -17px;
  }

  /* Trygghetsraden sto som karusell på mobil, altså ett argument om gangen
     med prikker under. En trygghetsrad du må sveipe gjennom er ingen
     trygghetsrad. Stablet i temaet og lagt i 2x2 her, så alle fire
     står synlig samtidig uten å ta mer høyde enn karusellen gjorde. */
  .text-with-icons {
    grid-template-columns: 1fr 1fr;
    gap: 20px 12px;
  }

  /* Mediegridet lå som fem bilder i full bredde under hverandre, 1528 px
     dødt scroll. Prestige tvinger «span 2» på alt under 700 px. Her får de
     smale bildene én kolonne og det brede beholder to, slik at mosaikken
     fra desktop overlever. «dense» fyller hullet som ellers oppstår foran
     det brede bildet. */
  .media-grid {
    grid-auto-flow: dense;
  }
  .media-grid__item[style*='--media-grid-item-column-span: 4'] {
    grid-column: span 1;
  }

  /* Fargevalget på produktsiden var 34 px. Det er det viktigste valget på
     hele siden, og det skal ikke være det minste å treffe. 44 px på
     mobil; desktop beholder 34 fordi der peker man med mus.
     Ikke gjort i produktkortene, der er prikkene ren informasjon. */
  .product-info .color-swatch,
  .variant-picker .color-swatch {
    --swatch-size: 2.75rem;
  }

  /* Mobilmenyen sto med 11 px versaler i en skuff på 756 px: tre små ord
     øverst og resten tomt. Med 28 px fyller de tre lenkene skuffen og leses
     som et valg, ikke som en liste. Samme grep som Represent bruker.
     Rader på 51 px var allerede store nok å treffe; høyden følger nå
     teksten. */
  .header-sidebar__linklist-button {
    font-size: 28px;
    /* 500 er Prestige sin standard for menyen. Resten av siden setter
       overskrifter i 700, og ved 28 px ble forskjellen tydelig: menyen så
       gråere ut enn alt annet selv om fargen er den samme #131316. */
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.1;
    padding-block: 20px;
  }
  .header-sidebar__linklist {
    --divider-color: var(--hl-hairline-color, rgba(19, 19, 22, 0.12));
  }

  /* Fargeprikkene i produktkortene er 22 px, og de er klikkbare: de bytter
     bildet i kortet. 32 px er så stort de kan bli før tre av dem sprenger
     et kort på 171 px. */
  .product-card .color-swatch {
    --swatch-size: 2rem;
  }

  /* Zoom-knappen i galleriet var 36 px. */
  .product-gallery__zoom-button {
    width: 44px;
    height: 44px;
  }

  /* Footerlenkene sto med 15 px linjehøyde og null luft mellom.
     14 px vertikal padding gir 43 px treffflate uten å endre typografien. */
  .accordion__content .link-faded {
    display: inline-block;
    padding-block: 13px;
  }
  .accordion__content .v-stack {
    gap: 0;
  }

  /* Trygghetsraden i to kolonner: ikonet og teksten stod med 24 px luft
     mellom seg, som var riktig da de lå på én rad i full bredde. I 2x2
     blir hvert felt 156 px bredt, og da spiser luften like mye som
     innholdet. Strammes inn her, ikke i temaet, så desktop står urørt. */
  .text-with-icons__item > .v-stack {
    gap: 12px;
  }
  .text-with-icons__item p {
    font-size: 12px;
    line-height: 1.45;
  }
}

/* ==========================================================================
   CAPSENE I BEVEGELSE
   Videobakgrunnen er #ACB0BC og smelter ikke inn i noen flate vi har.
   Da lar vi platene være plater: hvit flate rundt, god luft, meta-linja
   under i samme språk som produktkortene i drop-seksjonen.
   ========================================================================== */
.hl-videogrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 750px) {
  .hl-videogrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

.hl-videocard {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Videoen er 16:9. Fast forhold hindrer at raden hopper mens den laster. */
.hl-videocard__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #acb0bc;
}
.hl-videocard__media video,
.hl-videocard__media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Samme rad som .hl-card: navn til venstre, pris til høyre, felles bunnlinje. */
.hl-videocard__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.hl-videocard__title {
  margin: 0;
  font-size: var(--hl-meta-size);
  letter-spacing: var(--hl-meta-tracking);
  text-transform: uppercase;
  font-weight: 500;
}
.hl-videocard__price {
  font-size: var(--hl-meta-size);
  letter-spacing: var(--hl-meta-tracking);
  color: var(--hl-graphite);
}

/* Overtekst i samme meta-språk som resten av seksjonshodene. */
.hl-eyebrow {
  margin: 0 0 10px;
  font-size: var(--hl-meta-size);
  letter-spacing: var(--hl-meta-tracking);
  text-transform: uppercase;
  color: var(--hl-graphite);
}

/* ==========================================================================
   PRODUKTGALLERIET
   grid_2x_highlighted gir videoen full bredde og resten i to kolonner. Med
   fire medier, altså én video og tre pakkshots, blir det 2 + 1 og ett
   foreldreløst bilde nederst.

   Seks kolonner i stedet for to løser det: videoen spenner alle seks, de
   tre bildene spenner to hver og står på rad. Da leses de som en fargerad
   og gjentar det variantvelgeren sier, i stedet for å se ut som at noe
   mangler.

   Variabelen settes på .product-gallery og ikke på seksjonen, fordi
   nærmeste forfar vinner for CSS-variabler uansett spesifisitet. De to
   span-reglene må derimot ha !important: Prestige scoper dem på
   seksjonens ID, og den kan ingen klasseselektor slå.
   ========================================================================== */
@media (min-width: 1000px) {
  .product-gallery {
    --product-gallery-carousel-grid: auto-flow dense / repeat(6, minmax(0, 1fr));
  }
  .product-gallery .product-gallery__media:not([hidden]) {
    grid-column: span 6 !important;
  }
  .product-gallery .product-gallery__media:not([hidden]) ~ .product-gallery__media {
    grid-column: span 2 !important;
  }
}

/* Videoen er 16:9 og pakkshotene er kvadratiske. Uten dette hopper
   raden mens videoen laster. */
.product-gallery__media video {
  width: 100%;
  height: auto;
  display: block;
}