/*
 * Detailshop – variantvelgeren (inc/variation-swatches.php).
 *
 * Fila er delt i tre:
 *   1. Rammen rundt valgene – attributtnavnet over i stedet for til venstre.
 *   2. Piller – den kompakte formen, for mange valg til samme pris.
 *   3. Rader – den utvidede formen, for få valg med ulik pris (volum).
 *
 * Begge formene deler farger, radius og valgt-tilstand, slik at et produkt med
 * både en volumrad og en størrelsesrad ser ut som én kontroll og ikke som to.
 */

/* ---------- 1. Rammen ---------- */

/* Attributt-tittelen («Volum», «Spredning») over valgene i stedet for til
   venstre: stable hver rad i variasjons-tabellen vertikalt. */
.variations,
.variations tbody,
.variations tr {
  display: block;
  width: 100%;
}

.variations tr {
  margin: 0 0 14px;
}

.variations tr:last-child {
  margin-bottom: 0;
}

.variations th.label,
.variations td.value {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
}

.variations th.label {
  margin: 0 0 6px;
  color: var(--ds-ink, #222);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
}

/* Behold den ekte <select>-en i drift, men usynlig (og fortsatt lesbar for
   skjermlesere som følger label-koblingen). */
select.ds-swatch-select {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 2. Piller ---------- */

.ds-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.ds-pill {
  min-width: 52px;
  /* Flatsome gir alle <button> en margin-bottom. Her er det gap-en på
     .ds-pills som skal styre avstanden, ellers blir det luft mellom radene
     med piller som ikke finnes mellom pillene på samme rad. */
  margin: 0;
  padding: 9px 14px;
  border: 1.5px solid var(--ds-line-input, #d8d5cf);
  border-radius: var(--ds-radius-sm, 8px);
  background: var(--ds-surface, #fff);
  color: var(--ds-ink, #222);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.ds-pill:hover {
  border-color: var(--ds-blue, #069);
}

.ds-pill.is-active {
  border-color: var(--ds-blue, #069);
  background: var(--ds-blue, #069);
  color: #fff;
}

/* Rabattmerke rett på pillen – bare når pillene faktisk har ulik rabatt. */
.ds-pill__save {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--ds-blue, #069);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: middle;
}

.ds-pill.is-active .ds-pill__save {
  background: #fff;
  color: var(--ds-blue, #069);
}

/* ---------- 3. Rader ---------- */

/* Rammen ligger på hver rad, ikke rundt gruppen: da er streken mellom to rader
   og streken ytterst den samme streken, og den valgte raden kan overta hele
   kanten sin uten at det blir en dobbel strek øverst og nederst. Radene legges
   1,5 px over hverandre så de deler kant.

   Avrundingen ligger på radene selv, ikke som klipping på gruppen: klipper man
   gruppen, kappes radenes kantlinje av i hjørnene og streken blir borte akkurat
   der. Første og siste rad runder derfor sine egne ytterhjørner. */
.ds-vopts {
  background: var(--ds-surface, #fff);
}

.ds-vopt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  /* Flatsome sin margin-bottom på <button> ville skjøvet radene fra hverandre
     og etterlatt en luftstripe mellom hver kantlinje. Radene skal stå tett. */
  margin: 0;
  padding: 12px 14px;
  border: 1.5px solid var(--ds-line-input, #d8d5cf);
  border-radius: 0;
  background: var(--ds-surface, #fff);
  color: var(--ds-ink, #222);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.ds-vopt:first-child {
  border-radius: var(--ds-radius, 12px) var(--ds-radius, 12px) 0 0;
}

.ds-vopt:last-child {
  border-radius: 0 0 var(--ds-radius, 12px) var(--ds-radius, 12px);
}

.ds-vopt + .ds-vopt {
  margin-top: -1.5px;
}

.ds-vopt:hover {
  background: var(--ds-line-soft, #f0eee9);
}

.ds-vopt.is-active {
  /* Over naboene, så den blå kanten ikke blir spist av raden under. */
  z-index: 1;
  border-color: var(--ds-blue, #069);
  /* Kanten tykkes innover i stedet for utover: raden endrer ikke høyde. */
  box-shadow: inset 0 0 0 1px var(--ds-blue, #069);
  background: var(--ds-blue-bg, #e5f0f6);
}

/* Radioknappen – bærer valgt-tilstanden også for den som ikke ser farger. */
.ds-vopt__mark {
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ds-line-input, #d8d5cf);
  border-radius: 50%;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ds-vopt:hover .ds-vopt__mark {
  border-color: var(--ds-blue-soft, #8fc3dc);
}

.ds-vopt.is-active .ds-vopt__mark {
  border-color: var(--ds-blue, #069);
  /* Prikken i midten: ring innover, ingen ekstra element. */
  box-shadow: inset 0 0 0 4px var(--ds-blue, #069);
}

/* Venstre kolonne: størrelsen, og literprisen under. */
.ds-vopt__main {
  flex: 1 1 auto;
  min-width: 0;
}

.ds-vopt__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.ds-vopt__unit {
  margin-top: 2px;
  color: var(--ds-muted, #77746e);
  font-size: 13px;
  line-height: 1.3;
}

/* Merket ved siden av størrelsen – «Billigst per liter» eller «Utsolgt».
   Det står her og ikke som en badge oppå raden fordi det er en egenskap ved
   selve valget, ikke et tilbudsmerke. */
.ds-vopt__tag {
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--ds-green, #1d7a3f);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Utsolgt er ingen anbefaling: hult merke i grått, så det ikke konkurrerer om
   oppmerksomheten med det kunden faktisk kan kjøpe. */
.ds-vopt__tag--oos {
  border: 1px solid var(--ds-line-input, #d8d5cf);
  padding: 1px 6px;
  background: transparent;
  color: var(--ds-muted, #77746e);
}

/* Høyre kolonne: prisene, høyrestilt så de ligger i én søyle nedover. */
.ds-vopt__prices {
  flex: none;
  text-align: right;
  line-height: 1.25;
}

.ds-vopt__amounts {
  display: block;
}

.ds-vopt__was {
  margin-right: 6px;
  color: var(--ds-muted-2, #98958f);
  font-size: 13px;
  text-decoration: line-through;
}

.ds-vopt__price {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.ds-vopt__save {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--ds-blue, #069);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

/* wc_price() tar med sine egne spans – de skal arve, ikke sette egen stil. */
.ds-vopt .woocommerce-Price-amount {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* Literprisen står på hver rad når radformen er i bruk. Da er det frittstående
   merket rett over – som viser den samme literprisen for valgt størrelse – en
   ren gjentakelse, og det er raden som skal beholdes: den viser alle sammen.
   Klassen settes av JS-en, så merket blir stående på alt annet. */
.ds-unitprice-in-rows .ds-unitprice-line {
  display: none;
}

/* ---------- Utsolgt, i begge former ---------- */

/* Skravert og strøket over: kunden ser at valget finnes, men ikke er å få. */
.ds-pill.is-oos {
  border-color: var(--ds-line, #e6e4e0);
  background-color: var(--ds-beige, #f1efeb);
  background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(0, 102, 153, .08) 5px, rgba(0, 102, 153, .08) 6px);
  color: var(--ds-muted-2, #98958f);
  text-decoration: line-through;
  text-decoration-color: var(--ds-muted-2, #98958f);
}

.ds-pill.is-oos:hover {
  border-color: var(--ds-line, #e6e4e0);
}

.ds-pill.is-oos.is-active {
  border-color: var(--ds-blue-ink, #00517a);
  background-color: var(--ds-blue-ink, #00517a);
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, .7);
}

/* Samme skravering som pillene, så «ikke å få» ser likt ut i begge formene. */
.ds-vopt.is-oos {
  background-color: var(--ds-beige, #f1efeb);
  background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(0, 102, 153, .08) 5px, rgba(0, 102, 153, .08) 6px);
  color: var(--ds-muted, #77746e);
}

/* Bare selve størrelsen strykes over – ikke merket ved siden av, som skal
   kunne leses, og ikke prisene, som fortsatt gjelder. */
.ds-vopt.is-oos .ds-vopt__label {
  text-decoration: line-through;
  text-decoration-color: var(--ds-muted-2, #98958f);
}

.ds-vopt.is-oos .ds-vopt__price {
  color: var(--ds-muted, #77746e);
  font-weight: 600;
}

/* Rabatten på en utsolgt størrelse er ikke et tilbud kunden kan ta imot. */
.ds-vopt.is-oos .ds-vopt__save {
  background: var(--ds-muted-2, #98958f);
}

/* ---------- Tastatur ---------- */

.ds-pill:focus-visible,
.ds-vopt:focus-visible {
  outline: 2px solid var(--ds-blue, #069);
  outline-offset: 2px;
}

/* ---------- Mobil ---------- */

@media (max-width: 549px) {
  .ds-vopt {
    gap: 10px;
    padding: 11px 12px;
  }

  .ds-vopt__name,
  .ds-vopt__price {
    font-size: 15px;
  }

  .ds-pill {
    padding: 8px 12px;
    font-size: 13px;
  }
}