/* incrediwear.no – produktsiden som på incrediwear.com (Kristian 05.10.2026: «oppsettet på hvordan det presenteres
 * også»): ikonene under prisen, trekkspillene ved kjøpsknappen og delene under produktet. Lastes bare på produktsidene
 * (mu-plugins/iw-produktside.php). Fargene kommer fra designtokens i iw-uu.css. */

/* Kortteksten under prisen */
.product-short-description { font-size: 1rem; line-height: 1.55; margin-bottom: .75rem; }
.product-short-description p { margin-bottom: .5rem; }

/* Fire ikoner under prisen */
.iw-ikoner { list-style: none; margin: .25rem 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.iw-ikoner li { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; font-size: .875rem; line-height: 1.3; color: var(--iw-tekst); }
.iw-ikoner svg { color: var(--iw-oransje-tekst); }

/* Trekkspillene ved kjøpsknappen */
.iw-trekk { margin: 1.25rem 0 1.5rem; border-top: 1px solid var(--iw-kant); }
.iw-trekk__del { border-bottom: 1px solid var(--iw-kant); }
.iw-trekk__del > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: .5rem 0; }
.iw-trekk__del > summary::-webkit-details-marker { display: none; }
.iw-trekk__del > summary::after { content: ""; width: 9px; height: 9px; flex: none; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.iw-trekk__del[open] > summary::after { transform: rotate(225deg); }
.iw-trekk__tittel { margin: 0; font-size: .9375rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.iw-trekk__innhold { padding: 0 0 1rem; font-size: 1rem; line-height: 1.6; }
.iw-trekk__innhold ul { margin: 0 0 .75rem 1.1em; }
.iw-trekk__innhold li { margin-bottom: .25rem; }
.iw-trekk__innhold table { width: auto; margin: .25rem 0 .75rem; }
.iw-trekk__innhold th, .iw-trekk__innhold td { padding: .35rem .6rem; text-align: center; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.iw-trekk__innhold th[scope="row"] { text-align: left; }
.iw-trekk__innhold :is(p, li) a:not(.button) { text-decoration: underline; }
.iw-tabell { overflow-x: auto; max-width: 100%; }   /* rammen har role=region og tabindex=0 (scrollable-region-focusable) */
/* Sidelengs rulling på mobil (Kristian 05.10.2026: «Litt teit med sidescroll på mobil»). Målt på alle 21 produktsidene i
   360, 390 og 430 px: måltabellene arvet min-width: 640px fra tekstsidene (iw-uu.css) og rullet på alle. Uten den passer
   alle unntatt de med minst 5 størrelser, og de får en snudd utgave (iw_tabell_snudd i iw-produktside.php) som vises når
   trekkspillet er smalere enn 460 px. Styrt av bredden på trekkspillet, ikke skjermen, så det gjelder også den smale
   produktkolonnen på nettbrett. Den som er skjult, leses heller ikke av skjermlesere. */
.iw-trekk { container-type: inline-size; }
.iw-trekk__innhold .iw-tabell table { min-width: 0; }
.iw-tabell--smal { display: none; }
@container (max-width: 459px) {
  .iw-tabell--bred { display: none; }
  .iw-tabell--smal { display: block; }
}

/* Produktsiden fra 850 px: bildene følger med når kunden ruller forbi trekkspillet (gjennomgangen 06.10.2026: venstre
   spalte sluttet ca. 530 px over høyre på Hip Brace i 1280 px). 90 px = den klebrige toppen (70 px) og luft. */
@media (min-width: 850px) {
  .single-product .product-main .product-gallery { position: sticky; top: 90px; align-self: flex-start; }
}
/* «Kategori: Incrediwear» står på alle 21 varene (én kategori), så linja sier ingenting; stikkordet (kroppsdelen) står. */
.single-product .product_meta .posted_in { display: none; }
/* «Mer for rygg og hofte» (iw-produktside.php) med samme overskriftsstil som delene over, ikke versaler. */
.single-product .related .product-section-title { text-transform: none; letter-spacing: 0; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); line-height: 1.2; }

/* Hurtigvisningen: trekkspillet under bildet fra 850 px, ellers under kjøpsknappen (iw-produktside.php, Kristian 06.10.2026:
   «blir litt tomt på venstre side»). 30 px er innrykket Flatsome gir høyre spalte. */
.iw-hurtig--bred { display: none; }
@media (min-width: 850px) {
  .iw-hurtig--bred { display: block; padding: 1rem 30px 24px; font-size: 90%; }   /* samme skriftstørrelse som høyre spalte */
  .iw-hurtig--bred .iw-trekk__del > summary { min-height: 40px; padding: .35rem 0; }   /* 40 px er godt over 24 px (WCAG 2.5.8) */
  .iw-hurtig--smal { display: none; }
}
.iw-hurtig .iw-trekk { margin: 0 0 1rem; }
.iw-hurtig__lenke { margin: 0; font-weight: 700; }
.iw-hurtig__lenke a { text-decoration: underline; text-underline-offset: 2px; }

/* Delene under produktet */
.iw-produkt-del { max-width: 1080px; margin: 3rem auto 0; }
.iw-produkt-del h2 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); line-height: 1.2; margin: 0 0 .75rem; text-wrap: balance; }
.iw-produkt-del__ingress { max-width: 40em; margin-bottom: 1rem; }
.iw-produkt-del__etikett { margin: 0 0 .35rem; font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--iw-oransje-tekst); }

/* Sammenligning med kompresjon */
.iw-sammenlign__ramme { overflow-x: auto; }
.iw-sammenlign__tabell { width: 100%; border-collapse: collapse; font-size: 1rem; }
.iw-sammenlign__tabell th, .iw-sammenlign__tabell td { padding: .85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid #e3e1de; }
.iw-sammenlign__tabell thead th { font-size: .9375rem; letter-spacing: .06em; text-transform: uppercase; }
/* Incrediwear-spalten: #fef3e9 er 10 % av stilguidens oransje #F58426 på hvitt (før 06.10.2026 #fff4ec). */
.iw-sammenlign__tabell thead th:nth-child(2), .iw-sammenlign__tabell tbody td:nth-child(2) { background: #fef3e9; }
.iw-sammenlign__tabell tbody th { font-weight: 700; width: 24%; }
/* Kort i stedet for tabellen når sammenligningen er smalere enn 560 px: tabellen er 418 px bred og rullet sidelengs på
   mobil (målt 05.10.2026). Hvert kort er én egenskap, med Incrediwear (samme flate som kolonnen i tabellen) over
   kompresjon. */
.iw-sammenlign { container-type: inline-size; }
.iw-sammenlign__kort { display: none; list-style: none; margin: 0; padding: 0; gap: .75rem; }
@container (max-width: 559px) {
  .iw-sammenlign__ramme { display: none; }
  .iw-sammenlign__kort { display: grid; }
}
.iw-sammenlign__kort > li { margin: 0; border: 1px solid #e3e1de; border-radius: 10px; overflow: hidden; }
.iw-sammenlign__kort h3 { margin: 0; padding: .7rem 1rem; font-size: 1.0625rem; line-height: 1.3; }
.iw-sammenlign__kort dl { margin: 0; font-size: 1rem; text-transform: none; letter-spacing: normal; }   /* Flatsome: dl med versaler, dt flytende ved siden av dd */
.iw-sammenlign__kort dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }   /* Incrediwear og kompresjon side om side: kortene var 953 px høye på 390 px (06.10.2026) */
.iw-sammenlign__kort dl > div { padding: .65rem .75rem .75rem; border-top: 1px solid #e3e1de; }
.iw-sammenlign__kort dl > div + div { border-left: 1px solid #e3e1de; }
/* Etikettene «Incrediwear» og «Kompresjon» synes bare i det første kortet, som kolonneoverskrifter; i resten er de skjult
   for øyet, men leses av skjermlesere (fargeflaten viser Incrediwear-spalten). */
.iw-sammenlign__kort > li + li dt { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.iw-sammenlign__kort .iw-sammenlign__iw { background: #fef3e9; }
.iw-sammenlign__kort dt, .iw-sammenlign__kort dd { display: block; float: none; width: auto; }
.iw-sammenlign__kort dt { margin: 0 0 .15rem; font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--iw-tekst); }
.iw-sammenlign__kort dd { margin: 0; line-height: 1.5; font-weight: 400; text-transform: none; color: var(--iw-tekst); }

/* Hva er Incrediwear? */
.iw-tek { display: grid; gap: 1.5rem 3rem; align-items: center; background: var(--iw-lys); border-radius: 14px; padding: 2rem 1.5rem; }
@media (min-width: 850px) { .iw-tek { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); padding: 2.5rem 3rem; } }
.iw-tek__tekst p { max-width: 38em; line-height: 1.6; }
.iw-tek__punkter { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.iw-tek__punkter li { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; background: #fff; border-radius: 10px; padding: 1rem .5rem; font-size: .9375rem; line-height: 1.35; }
.iw-tek__punkter svg { color: var(--iw-oransje-tekst); }

/* Spørsmål og svar */
.iw-faq { margin-bottom: 1rem; }
.iw-faq__del { border-bottom: 1px solid var(--iw-kant); }
.iw-faq__del:first-of-type { border-top: 1px solid var(--iw-kant); }
.iw-faq__del > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: .6rem 0; }
.iw-faq__del > summary::-webkit-details-marker { display: none; }
.iw-faq__del > summary::after { content: "+"; font-size: 1.5rem; line-height: 1; flex: none; }
.iw-faq__del[open] > summary::after { content: "−"; }
.iw-faq__sporsmal { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.iw-faq__svar p { margin: 0 0 1rem; max-width: 46em; line-height: 1.6; }
.iw-faq__svar a { text-decoration: underline; }