/* incrediwear.no – UU-rettinger i CSS (WCAG 2.2 AA). Lastes av flatsome-child/functions.php, med filtid som versjon.
 * Hver regel sier hvilket axe-brudd den lukker. Målt i butikken 04.10.2026 13:07 (kartlegging/uu.mjs, 6 sidetyper,
 * 390 og 1280 px). Fargene er mørknet så lite som mulig fra Flatsome-innstillingene. */

/* IW-UU-50: designtokens. Alle farger i reglene under kommer herfra, så en fargeendring gjøres ett sted.
   Fargene er Incrediwear sin stilguide (ICW_Style_Guide, oktober 2025, fra Box; Kristian 06.10.2026: «sjekk at vi
   bruker riktige fargekoder»): oransje #F58426, rosa #DF2B58, lys #EDEBEA, grå #B2B8BF og mørk #413A3E. Der en
   stilguidefarge ikke har nok kontrast, er det en mørkere eller lysere tone av samme kulør (målt med WCAG-formelen):
   - tekst #413A3E: 11,1:1 på hvitt, 9,3:1 på #EDEBEA. Også flaten i de mørke delene og bunnteksten (hvitt 11,1:1).
   - tekst-dyp #2E292C (mørkere #413A3E): tekst på oransje (5,6:1; #413A3E gir 4,3:1), kortene i de mørke delene.
   - oransje #F58426: flater (knapper, merker, kanter) med tekst-dyp på; som tekst bare på tekst-dyp (5,6:1).
   - oransje-lys #F79E54: hover, og oransje tekst på #413A3E (5,3:1; #F58426 gir 4,3:1).
   - oransje-tekst #A64F08 (mørkere #F58426): oransje tekst og lenker på lyst, 5,6:1 på hvitt og 4,7:1 på #EDEBEA.
   - rosa #DF2B58: tilbud, hvit tekst 4,5:1. lys #EDEBEA: lyse flater. grå #B2B8BF: bare pynt (2:1 på hvitt).
   - dempet #61575D (lysere #413A3E): 6,9:1 på hvitt, 5,8:1 på #EDEBEA. paa-mork #D9D6D4: 7,6:1 på #413A3E.
   Før 06.10.2026: oransje #ff6a13 (fra incrediwear.com), tekst #1d1d1f, mørke flater #1d1d1f/#2a2a2c, lyse #f7f6f4.
   Flatsome sine farger i databasen (primær, sekundær, tilbud, lenker, tekst, overskrifter, meny) er de samme
   (scripts/farger-stilguide-20261006.php). */
:root {
  --iw-tekst: #413a3e;
  --iw-tekst-dyp: #2e292c;
  --iw-dempet: #61575d;
  --iw-oransje: #f58426;
  --iw-oransje-lys: #f79e54;
  --iw-oransje-tekst: #a64f08;
  --iw-rosa: #df2b58;
  --iw-lys: #edebea;
  --iw-graa: #b2b8bf;
  --iw-paa-mork: #d9d6d4;
  --iw-feil: #b20000;
  --iw-kant: #8c8c8c;
}

/* Skriftstørrelsen (Kristian 07.10.2026: «jeg tror og tekststørrelsene er mye bedre på iterreng.no gjevnt over og at de
   er litt for store på incrediwear.no»). Målt samme natt (Playwright, forside, kategori og produkt, 1280 og 390 px):
   iterreng.no har brødtekst 14,4 px, produktkort 14,4, meny 12,8 (vanlig vekt), overskrifter på forsiden 20–26 og
   41,6 px; incrediwear.no hadde 16, 15,2, 15 (fet), 32 og 51,5 px. Produkttittel (27,2) og pris (24) var like.
   Rotstørrelsen er 93,75 %, altså 15 px med nettleserens standard på 16: alt i rem og em krymper likt, og prosent gjør
   at kundens egen skriftstørrelse i nettleseren fortsatt gjelder (WCAG 1.4.4). Ikke 90 % som iterreng: Helvetica er
   litt større enn Lato i samme px, og ved 90 % ville etikettene på .8125rem havnet under 12 px. Overskriftene er
   strammet i tillegg (iw-sider.css, iw-produkt.css og tekstsidene under), og menyen er 14 px. */
html { font-size: 93.75%; }
/* Skjemafeltene holder 16 px: iOS zoomer inn i felt med mindre skrift når kunden trykker i dem (IW-UU-51). Med
   rotstørrelsen over ble de 15 px (målt 07.10.2026 på /kontakt/, produktsiden og forsiden, 390 px). */
html :is(input:is([type=text], [type=email], [type=tel], [type=number], [type=search], [type=password], [type=url]), select, textarea),
html .quantity input.qty { font-size: max(1rem, 16px); }

/* color-contrast: bunnteksten (.footer-2) var #777777, og teksten der #d6d6d6–#f1f1f1 ga 3,1–4,0:1. #595959 ga
   4,8:1 for den svakeste teksten og 6,2:1 for den vanlige. Fra 06.10.2026 stilguidens mørke #413A3E (9,8:1 for #f1f1f1)
   og den nederste stripa tekst-dyp #2E292C (var Flatsome sin #4d4d4d). */
.footer-2 {
  background-color: var(--iw-tekst) !important;
}
.absolute-footer.dark {
  background-color: var(--iw-tekst-dyp) !important;
}

/* color-contrast: nyhetsbrevfeltet var halvgjennomsiktig hvitt oppå den grå bunnteksten (#929292 bak #f1f1f1, 2,75:1).
   Mørk bakgrunn gir 8,8:1 for teksten og 7,2:1 for plassholderen; kanten er 3,7:1 mot bunnteksten (1.4.11).
   «html body» foran: Flatsome har .dark .form-flat input:not([type=submit]) med !important (målt 13:45). */
html body .footer-2 .wpcf7-form-control:not(.wpcf7-submit) {
  background-color: rgba(0, 0, 0, .25) !important;
  border-color: rgba(255, 255, 255, .6) !important;
  color: #f1f1f1 !important;
}
html body .footer-2 .wpcf7-form-control:not(.wpcf7-submit)::placeholder {
  color: #dcdcdc;
  opacity: 1;
}

/* color-contrast (K1 i UU-OG-UX-PLAN.md, ekstern revisjon IW-06): hvit tekst på den oransje knappefargen #ff6a13 ga
   2,86:1 (fet 15,5 px er ikke stor tekst), og «Legg i handlekurv»/«Fortsett til kassen» var hvitt på gråbrun #858174
   (3,9:1). Etter planens anbefaling (a), som Kristian ba om å kjøre: merkevareoransje #ff6a13 som i logoen, med mørk
   tekst #1d1d1f (5,9:1), på alle fylte handlingsknapper; hover/fokus lysere oransje #ff8a47 (7,2:1) og mørk fokusring.
   (Fra 13:15 til nå var de fylte knappene #c44800 med hvit tekst, alternativ b.) Fra 06.10.2026 stilguidens oransje
   #F58426 med tekst-dyp #2E292C (5,6:1), hover #F79E54 (6,8:1). */
.button.primary:not(.is-outline):not(.is-link):not(.is-underline),
input[type="submit"].button.primary,
.button.alt:not(.is-outline):not(.is-link),
.single_add_to_cart_button,
.checkout-button,
.wpcf7-submit,
.woocommerce-Button.button,
.woocommerce-form-login__submit,
.track_order button[name="track"] {
  background-color: var(--iw-oransje) !important;
  border-color: var(--iw-oransje) !important;
  color: var(--iw-tekst-dyp) !important;
}
.button.primary:not(.is-outline):not(.is-link):not(.is-underline):hover,
.button.alt:not(.is-outline):not(.is-link):hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
.wpcf7-submit:hover,
.woocommerce-Button.button:hover,
.woocommerce-form-login__submit:hover,
.track_order button[name="track"]:hover {
  background-color: var(--iw-oransje-lys) !important;
  border-color: var(--iw-oransje-lys) !important;
  color: var(--iw-tekst-dyp) !important;
}
.button.primary:focus-visible,
.button.alt:focus-visible,
.single_add_to_cart_button:focus-visible,
.checkout-button:focus-visible,
.wpcf7-submit:focus-visible,
.woocommerce-Button.button:focus-visible,
.woocommerce-form-login__submit:focus-visible {
  background-color: var(--iw-oransje-lys) !important;
  outline: 2px solid var(--iw-tekst) !important;
  outline-offset: 2px;
}

/* link-in-text-block: lenker i løpende tekst skilte seg fra teksten bare med farge (#334862 mot #4a4a4a, 1,05:1).
   Stikkordene under produktet og personvernlenken i kassen og på Min konto får understrek. Det samme gjør lenkene i
   tekstsidene med standardmalen (personvern, salgsbetingelser, tilgjengelighet): målt 04.10.2026 på /tilgjengelighet/. */
.product_meta .tagged_as a,
.product_meta .posted_in a,
.woocommerce-privacy-policy-text a,
.woocommerce-privacy-policy-link,
#content.page-wrapper > .row-main > .col > .col-inner > p a:not(.button),
#content.page-wrapper > .row-main > .col > .col-inner > ul a:not(.button),
#content.page-wrapper > .row-main > .col > .col-inner > ol a:not(.button),
.icon-box-text p a:not(.button),   /* forsideboksene: telefonen og ambassadørsiden (fiks-alt, axe i testmiljøet 04.10.2026 23:32) */
.woocommerce-Tabs-panel--description :is(p, li) a:not(.button),   /* produktteksten: lenken til /forskning/ (axe i testmiljøet 05.10.2026 02:19) */
#content > .row > .col > .col-inner > :is(p, ul, ol) a:not(.button),   /* tekstrader i sidebyggeren, f.eks. /om-incrediwear/ (samme måling) */
:is(.woocommerce-info, .woocommerce-message, .woocommerce-error) a:not(.button) {   /* beskjedene fra kurvlenken (iw-ucp.php 1.1): produktnavnet i «Velg farge og størrelse for …» i kassen (axe i butikken 13.10.2026, 390 og 1280 px) */
  text-decoration: underline;
}

/* target-size: lenkene i bunntekstmenyen (Om Incrediwear, Salgsbetingelser …) var 14 px høye. Minst 24 px (2.5.8). */
.footer-nav > li > a {
  display: inline-flex !important;
  align-items: center;
  min-height: 24px !important;
  font-size: .85rem;   /* 12,75 px: Flatsome sine .765 em ble 11,5 px med rotstørrelsen 93,75 % (07.10.2026) */
}
/* «Nullstill» ved størrelsesvalget var 11 px (Flatsome: .variations .reset_variations{font-size:11px}, målt 07.10.2026).
   Minst 12 px, som resten av butikken; table.variations slår Flatsome sin regel. */
table.variations .reset_variations { font-size: .8125rem; }

/* color-contrast: datomerkene på de siste innleggene i bunnteksten (#cdcdcd på #595959, 4,4:1) → #ebebeb, 5,9:1.
   Flatsome demper .badge-inner med opacity 0.7, så den settes til 1 (målt 13:40: uten det ble teksten #bfbfbf). */
.footer-2 .badge.post-date,
.footer-2 .badge.post-date * {
  color: #ebebeb !important;
}
.footer-2 .badge.post-date .badge-inner {
  opacity: 1 !important;
}

/* Tabeller i tekstsidene (personvern m.fl., webhost/scripts/side-*.html): ruller sidelengs på smale skjermer i stedet
   for å presse siden bredere (WCAG 1.4.10). Innpakningen kan få fokus, så den kan rulles med tastatur (2.1.1). */
.iw-tabell {
  overflow-x: auto;
  margin-bottom: 1.5em;
}
.iw-tabell:focus-visible {
  outline: 2px solid var(--iw-tekst);
  outline-offset: 2px;
}
.iw-tabell table {
  min-width: 640px;
}
.iw-tabell th,
.iw-tabell td {
  vertical-align: top;
  text-align: left;
  font-size: .9375rem;   /* .9em på tabellen og .9em på cellene fra Flatsome ga 12,96 px (sider.mjs 04.10.2026) */
}
/* Tabellene i personvernerklæringen som kort når de er smalere enn 880 px (Kristian 05.10.2026: «Litt teit med
   sidescroll på mobil»; målt på alle 14 sidene i 390 px: bare de to her rullet, 846 og 780 px brede i 360). Hver rad blir
   et kort med radoverskriften øverst, og kolonnenavnet (data-label) står over hver celle. Rollene i HTML-en (role="table",
   "row", "cell" …) holder på tabellsemantikken for skjermlesere når display endres. Kolonneoverskriftene er skjult for
   øyet, men leses fortsatt. */
.iw-tabell--kort { container-type: inline-size; }
@container (max-width: 879px) {   /* 768 px (nettbrett) ga en boks på 738 px og tabellene 846 og 780: kort også der */
  .iw-tabell--kort table { min-width: 0; border: 0; }
  .iw-tabell--kort :is(table, tbody, tr, th, td) { display: block; width: auto; }
  .iw-tabell--kort thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .iw-tabell--kort tbody tr { margin: 0 0 .75rem; padding: .8rem 1rem .9rem; border: 1px solid #e3e1de; border-radius: 10px; }
  .iw-tabell--kort tbody :is(th, td) { padding: 0; border: 0; }
  .iw-tabell--kort tbody th { margin: 0 0 .4rem; font-size: 1.0625rem; line-height: 1.35; }
  .iw-tabell--kort tbody td { margin: .5rem 0 0; line-height: 1.5; }
  .iw-tabell--kort tbody td::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: .1rem; font-size: .875rem; font-weight: 700; color: var(--iw-dempet); }
}

/* color-contrast: oransje som tekst på hvitt (#ff6a13, 2,86:1), målt i kurven på «Fortsett å handle»
   (.button-continue-shopping, 04.10.2026). Knapper med omriss eller bare tekst i primærfargen får #c44800 (samme
   kulør, 4,9:1). Fylte knapper beholder #ff6a13 med mørk tekst (over). Fra 06.10.2026 er det oransje-tekst #A64F08
   (5,6:1), en mørkere tone av stilguidens #F58426. */
.button.primary.is-outline,
.button.primary.is-link,
.button.primary.is-underline,
.button-continue-shopping {
  color: var(--iw-oransje-tekst) !important;
  border-color: var(--iw-oransje-tekst) !important;
}
.button.primary.is-outline:hover,
.button-continue-shopping.is-outline:hover {
  background-color: var(--iw-oransje-tekst) !important;
  color: #fff !important;
}

/* 2.4.7/1.4.11 (IW-UU-06): synlig fokus. Målt 04.10.2026 med kartlegging/fokus.mjs (5 sider, 1280 og 390 px,
   579 tabstopp): 530 hadde kontur fra før og røres ikke. Skjemafeltene hadde bare Flatsome sin #ccc-glød (rundt
   1,6:1) eller ingenting (nyhetsbrevfeltet), karusellene og produktbildet hadde ingen markering, og pilene i
   karusellene og «Til toppen» fikk fokus mens de var usynlige (opacity 0 til musa er over). Mørk kontur #1d1d1f
   (16:1 mot hvitt, samme som teksten i knappene); karusellene får den innenfor kanten, så den ikke klippes. */
input:not([type="hidden"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--iw-tekst) !important;
  outline-offset: 1px;
}
.flickity-enabled:focus-visible,
.slider[tabindex]:focus-visible,
.woocommerce-product-gallery__wrapper:focus-visible,
.product-thumbnails:focus-visible,
.woocommerce-product-gallery__image a:focus-visible img {
  outline: 3px solid var(--iw-tekst) !important;
  outline-offset: -3px;
}
/* Lenken rundt produktbildet er en innebygd boks (17 px høy) og har outline: none !important fra Flatsome
   (.product-gallery-slider …, høyere spesifisitet); konturen står derfor på bildet inni (målt etter utrullingen). */
.flickity-prev-next-button:focus-visible {
  opacity: 1 !important;
  outline: 3px solid var(--iw-tekst) !important;
  outline-offset: 2px;
}
.back-to-top:focus-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  outline: 3px solid var(--iw-tekst) !important;
  outline-offset: 2px;
}

/* IW-UU-26: meldingen når størrelse eller farge mangler (iw-uu.js). #b20000 er 7,2:1 mot hvitt. */
.iw-variant-melding:not(:empty) {
  margin: .5em 0 1em;
  color: var(--iw-feil);
  font-weight: 600;
}

/* IW-UU-18 (2.1.1, 2.4.7): «Vis passord» på /my-account/. Flatsome viser knappen bare mens passordfeltet har fokus
   eller musa er over, så når Tab flyttet fokus fra feltet til knappen, ble den skjult og mistet fokuset (målt med
   kartlegging/fokus.mjs: ingen tabstopp mellom passordfeltet og neste felt). Den blir stående så lenge fokus er i
   feltet eller på knappen. */
.password-input:focus-within .show-password-input,
.show-password-input:focus-visible {
  visibility: visible;
}
.show-password-input:focus-visible {
  outline: 3px solid var(--iw-tekst) !important;
  outline-offset: -3px;
}

/* IW-UU-23 (1.4.10): «INCREDIWEAR» i forsidebanneret (h1.h-large, 38,5 px, og 120 % inni) var 352 px bred og ble
   klippet av banneret på 320 px skjermer (målt med en Playwright-kontroll 04.10.2026; 360 px var akkurat på grensen).
   Størrelsen får et tak etter skjermbredden: 30 px på 320, 37 px på 390, som før fra 405 px og opp. */
/* .banner h1 {font-size: 3.5em} fra Flatsome har samme spesifisitet og kommer senere, derfor .banner foran. */
.banner h1.h-large,
h1.h-large {
  font-size: min(38.5px, 9.5vw);
}

/* color-contrast: de runde datomerkene på blogginnleggene (.badge-circle-inside, /rehabilitering/) hadde hvit tekst på
   merkevareoransje #ff6a13 (2,86:1, målt 04.10.2026). Mørk tekst som på knappene. */
.badge.post-date.badge-circle-inside .badge-inner,
.badge.post-date.badge-circle-inside .badge-inner * {
  color: var(--iw-tekst-dyp) !important;
  opacity: 1 !important;
}

/* color-contrast: rolletittelen under ambassadørene (.person-title.op-7 i Flatsome sitt «Team member»-element,
   /ambassadorer/) ble #888 på hvitt, 3,54:1 (målt 04.10.2026). Full dekkevne og #595959, 7:1. */
.person-title.op-7 {
  opacity: 1 !important;
  color: var(--iw-dempet);
}

/* IW-UU-51/52: lesbarhet (UU-OG-UX-PLAN.md, ekstern revisjon IW-13). Målt 04.10.2026 med kartlegging/typografi.mjs
   (6 sider, 390 og 1280 px): brødteksten var 16 px med linjehøyde 1,6 (i orden), men knappene i forsidebanneret
   («Butikk», «Lær mer») var 10,7 px, sitatene og navnene under dem 11 px, små knapper 12,4–13,2 px, kantene på
   skjemafeltene (størrelse, farge, antall, sortering) 1,36:1, og salgsbetingelsene 152–163 tegn per linje på PC. */

/* Knappetekst minst 14 px. Flatsome skalerer teksten i banneret ned på mobil (res-text), og .is-small er 0,8 em. */
.button,
.button.is-small,
.button.is-xsmall,
.button.is-smaller {
  font-size: max(.97em, 14px);
}
.banner .button {
  font-size: max(.97em, 14px) !important;
}

/* Sitatene og navnene på forsiden (Flatsome «Testimonial») var 11 px: 16 px tekst, 14 px navn. */
.testimonial-text,
.testimonial-text p {
  font-size: max(1em, 16px) !important;
  line-height: 1.6;
}
.testimonial-meta,
.testimonial-name,
.testimonial-company {
  font-size: max(.9em, 14px) !important;
}

/* 1.4.11: kanten på skjemafeltene (#ddd, 1,36:1) var for svak til å se hvor feltet er. --iw-kant er 3,4:1.
   Nyhetsbrevfeltet i bunnteksten har sin egen kant (over). */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="url"],
select,
textarea {
  border-color: var(--iw-kant);
}

/* IW-UU-52: linjer på høyst rundt 70 tegn i tekstsidene (standardmalen) og produktbeskrivelsen. I em, ikke ch:
   ch er bredden på sifferet 0, som er 0,612 em i Raleway og 0,556 em i Arial, så 70ch ga 87/97 tegn per linje
   (median/maks) i salgsbetingelsene med Raleway, og spalten skiftet bredde når skriften kom inn (målt 04.10.2026 med
   kartlegging/typografi.mjs og skriftbytte.mjs). 05.10.2026: Helvetica/Arial i stedet for Raleway (functions.php), som er
   4 % smalere, så 34em ga 74/81 tegn mot 71/80 før; 33em gir samme linjelengde som før. */
#content.page-wrapper > .row-main > .col > .col-inner > :is(p, ul, ol, h2, h3, h4),
.woocommerce-Tabs-panel--description :is(p, ul, ol, table) {
  max-width: 33em;
}

/* Gjennomgangen av alle sidene 04.10.2026 kveld (kartlegging/sider.mjs, axe på 40 sider × 2 bredder, skjermbilder). */
/* Produktsiden: «neste produkt»-pila sto alene mellom navnet og prisen på mobil og nettbrett (show-for-medium), med
   pil mot venstre og etiketten «Neste produkt». Brødsmulene og «Relaterte produkter» dekker det samme. */
.product-info .next-prev-thumbs { display: none; }
/* Beskrivelsene: avsnitt inne i listepunkter (limt inn fra et skriveverktøy) ga et tomt avsnitt mellom hvert punkt. */
.woocommerce-Tabs-panel--description li > p { margin-bottom: 0; }
.woocommerce-Tabs-panel--description li { margin-bottom: .35em; }
/* Produktkortene: navn og pris var 13,6 px (Flatsome .85em), og «Hurtigvisning» likeså. */
.product-small .box-text { font-size: .95em; }
.product-small .quick-view { font-size: .875rem; }
/* «Dine personopplysninger brukes …» ved registrering og i kassen: 13,6 px (avsnittet har sin egen størrelse). */
.woocommerce-privacy-policy-text, .woocommerce-privacy-policy-text p { font-size: .875rem; }
/* Produktsiden: varenummer, kategori og stikkord, fanene («Beskrivelse») og «På lager» var 12,8 px. Linja med
   varenummer skjules av iw-uu.js til en variant er valgt; Flatsome sin display:block på .product_meta > span
   overstyrte hidden. flatsome-shop.css og flatsome.css lastes etter dette arket, så like spesifikke regler taper:
   body foran gir én klasse mer (målt med kartlegging: .product_meta {0.8em} og .nav > li > a {0.8em} vant). */
body .product_meta, body .product-tabs > li > a, body .product-info p.stock { font-size: .875rem; }
.product_meta .sku_wrapper[hidden] { display: none !important; }
/* Ambassadørene: tittelen under navnet («Snowboarder») var 10,9 px og navnet 13,6 px. */
body .person-title.is-small { font-size: .875rem; }
body .person-name { font-size: 1rem; }
/* Stikkordskya i bunnteksten («Velg behandling»): 12,8 px. */
.tagcloud a, .tag-cloud-link { font-size: .875rem !important; }
/* 404: det store tallet var grått med opacity .3 (1,6:1). Stor tekst trenger 3:1; kantgrå gir 3,4:1. */
.error-404 .header-font { opacity: 1 !important; color: var(--iw-kant); }
/* Blogginnleggene: datomerket (oransje på hvitt, 2,9:1) og kategorilenkene i teksten (bare farge skilte dem fra teksten). */
.post-date .post-date-day, .post-date .post-date-month { color: var(--iw-oransje-tekst); }
.entry-meta a, .entry-category a { text-decoration: underline; }
/* Produktsiden: «Farge»/«Størrelse» ved valgene og cellene i størrelsestabellen var 12,96 px. */
.variations label, .woocommerce-Tabs-panel--description table :is(td, th) { font-size: .9375rem; }
/* Bannertekst under 14 px (forsiden: 11 px på mobil). */
.banner .text-box p { font-size: max(1em, 14px); }
/* Bannertekst i full bredde gikk helt ut til skjermkanten på mobil (/rehabilitering/: 3 px). */
@media (max-width: 549px) { .banner .text-box .text-inner { padding-left: 16px; padding-right: 16px; } }

/* Inngang etter kroppsdel (K14, IW-UU-36/-37, mu-plugins/iw-kroppsdeler.php): knapper over produktene og på forsiden.
   Valgt kroppsdel er fylt merkevareoransje med mørk tekst (5,9:1), som de andre fylte knappene. Trykkflaten er 44 px. */
.iw-butikk-topp { margin: 0 0 1.25em; }
.iw-butikk-topp__tittel { margin: 0 0 .25em; font-size: 1.75em; }
.iw-butikk-topp__tekst { margin: 0 0 .75em; max-width: 40em; }   /* setningen (75 tegn) på én linje på PC */
.iw-kropp__liste { display: flex; flex-wrap: wrap; gap: .5em; margin: 0; padding: 0; list-style: none; }
.iw-kropp__liste li { margin: 0; list-style: none; }
.iw-kropp__valg {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1em;
  border: 1px solid var(--iw-kant); border-radius: 22px; color: var(--iw-tekst); background: #fff;
  font-size: .9375rem; font-weight: 600; text-decoration: none; line-height: 1.2;
}
.iw-kropp__valg:hover { border-color: var(--iw-tekst); color: var(--iw-tekst); }
.iw-kropp__valg[aria-current="page"] { background: var(--iw-oransje); border-color: var(--iw-oransje); color: var(--iw-tekst-dyp); }
.iw-kropp__valg:focus-visible { outline: 2px solid var(--iw-tekst); outline-offset: 2px; }
.iw-kropp-forside { text-align: center; padding: 2em 15px 1.5em; max-width: 1170px; margin-inline: auto; }   /* står utenfor en row: samme bredde og marg som Flatsome sin .container */
.iw-kropp-forside__tittel { margin: 0 0 .25em; }
.iw-kropp-forside__tekst { margin: 0 auto .9em; }
.iw-kropp-forside .iw-kropp__liste { justify-content: center; max-width: 46rem; margin-inline: auto; }   /* to like rader på PC, ikke 15 + «Bandasje» alene */
/* Bildekortene på forsiden (iw-kroppsdeler.php 1.2, som «Shop by Body Part» på incrediwear.com): 2 kolonner på mobil,
   3 fra 550 px og alle 6 på én rad fra 1000 px. «Alle produkter» er fylt oransje med mørk tekst (5,6:1), som knappene.
   Fokusrammen ligger innenfor kortet, fordi overflow: hidden ellers kutter den. */
.iw-omrader { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: center; }
@media (min-width: 550px) { .iw-omrader { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1000px) { .iw-omrader { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.iw-omrader > .iw-omrade { margin: 0; display: flex; flex-direction: column; background: var(--iw-lys); border-radius: 8px; overflow: hidden; }
.iw-omrade__lenke { display: block; color: var(--iw-tekst); text-decoration: none; }
.iw-omrade__lenke:hover { color: var(--iw-tekst); }
.iw-omrade__lenke:hover .iw-omrade__navn { text-decoration: underline; }
.iw-omrade__lenke:focus-visible { outline: 2px solid var(--iw-tekst); outline-offset: -4px; }
.iw-omrade__bilde { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
body .iw-omrade__navn { margin: 0; padding: .65em .5em .15em; font-size: 1rem; line-height: 1.25; color: var(--iw-tekst); }
.iw-omrade__deler { list-style: none; margin: 0; padding: 0 .4em .6em; display: flex; flex-wrap: wrap; justify-content: center; column-gap: .35em; }
.iw-omrader .iw-omrade__deler li { margin: 0; list-style: none; }
.iw-omrade__del { display: inline-flex; align-items: center; min-height: 32px; padding: 0 .25em; font-size: .9375rem; color: var(--iw-tekst); text-decoration: underline; text-underline-offset: 2px; }
.iw-omrade__del:hover { color: var(--iw-tekst); text-decoration-thickness: 2px; }
.iw-omrade__del:focus-visible { outline: 2px solid var(--iw-tekst); outline-offset: -2px; }
.iw-omrader > .iw-omrade--alle { background: var(--iw-oransje); justify-content: center; }
.iw-omrade--alle .iw-omrade__lenke { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 6em; }
body .iw-omrade--alle .iw-omrade__navn { font-size: 1.25rem; padding: .5em; }
body .iw-omrade--alle :is(.iw-omrade__lenke, .iw-omrade__navn, .iw-omrade__del) { color: var(--iw-tekst-dyp); }   /* på oransje: 5,6:1 */
@media (max-width: 849px) {   /* Flatsome sentrerer tittelfeltet under 850 px (medium-text-center) */
  .iw-butikk-topp .iw-kropp__liste { justify-content: center; }
  .iw-butikk-topp__tekst { margin-inline: auto; }
}

/* «Kjente navn» under toppbanneret på forsiden (sak 12 A, Kristian 05.10.2026: «A»): én linje med Incrediwear sine
   største samarbeidspartnere og en lenke til /ambassadorer/#kjente-navn. Bare navn, ingen logoer (varemerker).
   Flaten er stilguidens lyse #EDEBEA som på de nye sidene: oransje-tekst 4,7:1, tekst 9,3:1. Innholdet ligger i forsiden (side 98),
   lagt inn med scripts/tekster-forside-kjente-navn-20261005.json. */
.iw-kjente-stripe { background: var(--iw-lys); text-align: center; padding: 1.1rem 15px 1.25rem; }
.iw-kjente-stripe p { margin: 0 auto; max-width: 62rem; }   /* én linje på PC (målt i testmiljøet: 46rem ga to) */
.iw-kjente-stripe__etikett { font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--iw-oransje-tekst); }
.iw-kjente-stripe__tekst { margin-top: .25rem !important; font-size: 1.125rem; line-height: 1.5; color: var(--iw-tekst); text-wrap: balance; }
.iw-kjente-stripe__tekst strong { color: var(--iw-tekst); white-space: nowrap; }   /* ikke «Novak / Djokovic» */
.iw-kjente-stripe a { display: inline-block; text-decoration: underline; text-underline-offset: 2px; }

/* Trykkflater (IW-UU-20, WCAG 2.5.8): «Nullstill» ved variantvalget, «Beregn levering» i kurven, ikonene for sosiale
   medier og deling, og −/+ ved antall var under 24 × 24 px. */
.reset_variations, .shipping-calculator-button { display: inline-flex; align-items: center; min-height: 24px; }
.social-icons .icon, .social-icons a.button { min-width: 24px; min-height: 24px; }
.quantity .minus, .quantity .plus { min-width: 24px; min-height: 24px; }

/* Minikurven (revisjonen 05.10.2026, IW-UU-05 og -34): knappene i nedtrekket etter «Legg i handlekurv» var hvitt på
   primærfargen («Vis handlekurv», 2,87:1) og hvitt på gråbrunt («Kasse», 3,9:1), og axe så dem ikke fordi nedtrekket er
   skjult til en vare legges i kurven. «Kasse» er neste steg og blir den fylte knappen (merkevareoransje med mørk tekst,
   5,6:1), «Vis handlekurv» får omriss. Gjelder også kurvpanelet på mobil. */
html body .woocommerce-mini-cart__buttons .button.checkout {
  background-color: var(--iw-oransje) !important;
  border-color: var(--iw-oransje) !important;
  color: var(--iw-tekst-dyp) !important;
}
html body .woocommerce-mini-cart__buttons .button.checkout:hover,
html body .woocommerce-mini-cart__buttons .button.checkout:focus-visible {
  background-color: var(--iw-oransje-lys) !important;
  border-color: var(--iw-oransje-lys) !important;
}
html body .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout) {
  background-color: transparent !important;
  border: 2px solid var(--iw-tekst) !important;
  color: var(--iw-tekst) !important;
}
html body .woocommerce-mini-cart__buttons .button:focus-visible {
  outline: 3px solid var(--iw-tekst) !important;
  outline-offset: 2px;
}

/* Headeren (Kristian 05.10.2026 kveld: «jeg lurer og på om logo burde vært midtstilt og at meny skriften kanskje skulle
   vært mindre, vet heller ikke om de burde være upper case»). Målt 05.10.2026 (Playwright, 850–1440 px):
   - Den faste headeren var hvit med 90 % dekkevne (Flatsome: .header-bg-color rgba(255,255,255,.9)), så teksten under
     skinte gjennom når man hadde rullet. Nå er den helt hvit.
   - Menyen var 16 px fet med store bokstaver og trengte mer plass enn den hadde: fra 850 til 1199 px brøt den over to
     eller tre linjer og la seg utenfor headeren. 15 px med vanlige bokstaver (incrediwear.com: 14 px, vanlige bokstaver;
     store bokstaver leses og skumleses saktere) gjør den 530 px bred, så den står på én linje fra 1000 px. Mellom 850 og
     999 px er det ikke plass (388–458 px), så der brukes mobilheaderen (menyknapp, logoen i midten), med Flatsome sine
     egne regler for under 850 px.
   - Logoen står fortsatt til venstre på PC: da finner brukerne lettere tilbake til forsiden (NN/g 2016, «Centered Logos
     Hurt Website Navigation»). På mobil står den i midten, som før. */
.header-wrapper.stuck .header-bg-color { background-color: #fff; }
#masthead .header-nav-main > li.menu-item > a { font-size: 14px; text-transform: none; letter-spacing: 0; }   /* 15 px til 07.10.2026 (skriftstørrelsen over) */
#main-menu .nav-sidebar > li > a { text-transform: none; letter-spacing: 0; }   /* mobilmenyen: samme vanlige bokstaver */
@media screen and (min-width: 850px) and (max-width: 999px) {
  #masthead .hide-for-medium { display: none !important; }
  #masthead .show-for-medium { display: block !important; }
  #masthead .medium-logo-center .flex-left { flex: 1 1 0; order: 1; }
  #masthead .medium-logo-center .logo { margin: 0 15px; order: 2; text-align: center; }
  #masthead .medium-logo-center .logo img { margin: 0 auto; }
  #masthead .medium-logo-center .flex-right { flex: 1 1 0; order: 3; }
}

/* Produktnavnene i rutenettene er lenker. Med lenkefargen etter stilguiden (oransje-tekst #A64F08, 06.10.2026; før
   Flatsome sin marineblå #334862) ble alle navnene oransje. De er mørke #413A3E (11,1:1) og oransje ved pek. */
.product-small .product-title a { color: var(--iw-tekst); }
.product-small .product-title a:hover { color: var(--iw-oransje-tekst); }

/* Resten av Flatsome sine standardfarger på tekst (målt 06.10.2026 på 8 sider): prisene #111 (span.amount i
   flatsome-shop.css), brødsmulestien og skjemaetikettene #222 og tabelltekst #666 er stilguidens mørke #413A3E.
   Tilbudsprisen er stilguidens rosa (4,5:1), som Flatsome sin color_sale_price. */
body span.amount { color: var(--iw-tekst); }
body ins span.amount { color: var(--iw-rosa); }
body .breadcrumbs, body label { color: var(--iw-tekst); }
body td { color: var(--iw-tekst); }

/* Gjennomgangen av alle sidene 06.10.2026 natt (Kristian: «personvern-2 dude, det er dårlig formatert, ta en
   gjennomgang av alle sider»; skjermbilder av 18 sider i 390, 1280 og 1920 px). Innholdsbredden i Flatsome
   (site_width) var 1 920 px, så standardsidene, butikken og produktsiden fylte hele skjermen, mens de nye sidene står i
   en ramme på 1 140 px. Nå er site_width 1 170 (beholderen 1 140, som rammen); se README. */

/* Tekstsidene med standardmalen (personvern, salgsbetingelser, tilgjengelighet): én lesespalte midt på siden
   (34em, rundt 74 tegn per linje, som før), luft over og under, en synlig tittel (salgsbetingelsene hadde bare en
   skjult), og tabellene bredere enn spalten (høyst 68rem) og midt på. Før sto spalten inntil venstre kant. */
body.page-template-default:not(.woocommerce-page) #content.page-wrapper { padding-top: 2.5rem; padding-bottom: 3.5rem; }
body.page-template-default:not(.woocommerce-page) #content.page-wrapper > .row-main > .col > .col-inner { max-width: 34em; margin-inline: auto; }
body.page-template-default:not(.woocommerce-page) #content.page-wrapper > .row-main > .col > .col-inner > :is(p, ul, ol, h2, h3, h4) { max-width: none; }
body.page-template-default:not(.woocommerce-page) #content.page-wrapper .col-inner > h1 { margin: 0 0 1.25rem; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem); line-height: 1.15; text-wrap: balance; }
body.page-template-default:not(.woocommerce-page) #content.page-wrapper .col-inner > h2 { margin: 2.25rem 0 .6rem; font-size: 1.375rem; line-height: 1.25; text-wrap: balance; }
body.page-template-default:not(.woocommerce-page) #content.page-wrapper .col-inner > h3 { margin: 1.6rem 0 .4rem; font-size: 1.1875rem; line-height: 1.3; }
body.page-template-default:not(.woocommerce-page) #content.page-wrapper .col-inner > .iw-tabell { width: min(68rem, calc(100vw - 30px)); max-width: none; margin-left: 50%; transform: translateX(-50%); }
/* Tabellene: kolonne- og radoverskriftene var versaler med sperring (Flatsome sin th). */
.iw-tabell th { text-transform: none; letter-spacing: 0; }
.iw-tabell thead th { font-size: .875rem; color: var(--iw-dempet); }

/* Butikken og kroppsdelsidene: knappene for kroppsdelene delte raden med «Viser alle 21 resultater» og sorteringen,
   og alt ble klemt sammen. Knappene får hele bredden, og antallet og sorteringen står under, til høyre. */
@media (min-width: 850px) {
  .shop-page-title .page-title-inner { flex-wrap: wrap; row-gap: .5rem; }
  .shop-page-title .page-title-inner > .flex-col.flex-grow { flex: 1 0 100%; }
  .shop-page-title .page-title-inner > .flex-col:not(.flex-grow) { margin-left: auto; }
}

/* Bunnteksten nederst også på korte sider (den tomme handlekurven: grått felt under bunnteksten på PC). Kurven og
   kassen har sin egen ramme (#main-content, Flatsome sin «focused checkout»). Flatsome gir html samme farge som den
   nederste stripa (.absolute-footer, html { #4d4d4d }); den er tekst-dyp nå, så html også. */
#wrapper, #main-content.site-main { display: flex; flex-direction: column; min-height: 100vh; }
:is(#wrapper, #main-content.site-main) > #main { flex: 1 0 auto; }
html { background-color: var(--iw-tekst-dyp); }
