/*
Theme Name: Digant
Theme URI: https://digant.dk/
Description: Custom Divi Child Theme til Digant
Author: Frederik Verner Hansen
Author URI: https://digant.dk/
Template: Divi
Version: 1.0.0
*/

/* Din egen CSS kan skrives her */
/* --- Gør variations-rækken vertikal: label over kort --- */
.variations_form .variations tr {
  display: block;
  margin: 0 0 8px;
}
.variations_form .variations th,
.variations_form .variations td {
  display: block;
  padding: 0 !important;
  border: 0;
}
.variations_form .variations .label label {
  display: block;
  margin: 0 0 6px;
  font-weight: 700;
}

/* --- Kompakt kort-layout (matcher skærmbilledet) --- */
.digant-variation-cards {
  display: grid;
  gap: 8px;              /* mindre afstand mellem de to varianter */
  margin-top: 0;
}
.digant-variation-card {
  display: grid;
  grid-template-columns: auto 1fr auto auto; /* ikon, titel, pris, radio */
  align-items: center;
  gap: 10px;
  padding: 12px 14px;    /* mere kompakt */
  border: 2px solid #eee;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.digant-variation-card .digant-icon {   /* lille “bog/telefon”-placeholder */
  width: 20px; height: 20px; border-radius: 6px; background: #f3f3f3;
}
.digant-variation-card .digant-label { font-weight: 700; line-height: 1.2; }
.digant-variation-card .digant-price { font-weight: 700; white-space: nowrap; }
.digant-variation-card .digant-radio {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid #bbb; margin-left: 6px;
}

/* Valgt tilstand (skift farven til din brandfarve) */
.digant-variation-card.is-selected {
  border-color: #a69c8a;          
  box-shadow: 0 0 0 2px rgba(215,25,32,.10);
}
.digant-variation-card.is-selected .digant-radio {
  border-color: #a69c8a;
  box-shadow: inset 0 0 0 4px #a69c8a;
}

/* --- Skjul den originale dropdown (fra tidligere løsning) --- */
.variations_form .variations select {
  position: absolute !important; left: -9999px;
}

/* --- Mindre afstand før “Læg i kurv” --- */
.single-product .summary form.cart { 
  display: grid;
  gap: 10px;                /* tættere mellem variationer, pris og knap */
  margin-top: 6px;
}
.single_variation_wrap .woocommerce-variation,
.single_variation_wrap .woocommerce-variation-price,
.single_variation_wrap .woocommerce-variation-description {
  margin: 0 0 36px !important;
}

/* Hvis dit tema lægger stor margin på knappen, nul den: */
.single_variation_wrap .single_add_to_cart_button { margin-top: 0 !important; }

/* Mobil – fuld bredde og strammere spacing */
@media (max-width: 480px){
  .digant-variation-card { grid-template-columns: 1fr auto auto; }
  .digant-variation-card .digant-icon { display:none; } /* gem ikon på mobil for kompakthed */
}
/* Skjul "Clear" link */
.reset_variations {
  display: none !important;
}

/* Skjul WooCommerce's ekstra pris (vi viser den allerede i kortet) */
.single_variation_wrap .woocommerce-variation-price {
  display: none !important;
}

/* Fjern pil på select (selvom den er skjult/offscreen) */
.variations_form .variations select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
}
.digant-hidden-select {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.single_variation_wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.single_variation_wrap .woocommerce-variation,
.single_variation_wrap .woocommerce-variation-price,
.single_variation_wrap .woocommerce-variation-description {
  margin: 0 !important;
  padding: 0 !important;
}
.single_variation_wrap .single_add_to_cart_button {
  margin-top: 0 !important;
}
/* ---------- Layout: label over kort + kompakt ---------- */
.single-product .summary .variations_form .variations tr { display:block !important; margin:0 0 8px !important; }
.single-product .summary .variations_form .variations th,
.single-product .summary .variations_form .variations td { display:block !important; padding:0 !important; border:0 !important; }
.single-product .summary .variations_form .variations .label label { display:block !important; margin:0 0 6px !important; font-weight:700; }

/* ---------- Variation cards ---------- */
.single-product .summary .digant-variation-cards { display:grid !important; gap:8px !important; margin-top:0 !important; }
.single-product .summary .digant-variation-card {
  display:grid !important; grid-template-columns:auto 1fr auto auto !important;
  align-items:center !important; gap:10px !important;
  padding:12px 14px !important; border:2px solid #eee !important;
  border-radius:12px !important; background:#fff !important; cursor:pointer !important;
  transition:border-color .15s, box-shadow .15s, background .15s !important;
}
.single-product .summary .digant-variation-card .digant-icon { width:20px; height:20px; border-radius:6px; background:#f3f3f3; }
.single-product .summary .digant-variation-card .digant-label { font-weight:700; line-height:1.2; }
.single-product .summary .digant-variation-card .digant-price { font-weight:700; white-space:nowrap; }
.single-product .summary .digant-variation-card .digant-radio { width:18px; height:18px; border-radius:50%; border:2px solid #bbb; margin-left:6px; }

/* ---------- Skjul CLEAR-linket ---------- */
.single-product .summary .reset_variations { display:none !important; }

/* ---------- Skjul ekstra Woo pris over knappen ---------- */
.single-product .summary .single_variation_wrap .price,
.single-product .summary .single_variation_wrap .woocommerce-variation-price { display:none !important; }

/* ---------- Fjern pil-ikoner/pseudo on variations ---------- */
.single-product .summary .variations_form .variations select { 
  appearance:none !important; -webkit-appearance:none !important; -moz-appearance:none !important;
  background-image:none !important;
  position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; overflow:hidden !important; pointer-events:none !important;
}
/* Hvis temaet selv tilføjer pil via ::after */
.single-product .summary .variations_form .variations .value::after,
.single-product .summary .variations_form .variations .label::after { content:none !important; display:none !important; }

/* ---------- Stram spacing før knap ---------- */
.single-product .summary form.cart { display:grid !important; row-gap: var(--ownlane-vgap); margin-top:0 !important; }
.single-product .summary .single_variation_wrap { margin:0 !important; padding:0 !important; }
.single-product .summary .single_variation_wrap .woocommerce-variation,
.single-product .summary .single_variation_wrap .woocommerce-variation-description { margin:0 !important; padding:0 !important; }
.single-product .summary .single_add_to_cart_button { margin-top:0 !important; }

/* ---------- Mobil kompakt ---------- */
@media (max-width: 480px){
  .single-product .summary .digant-variation-card { grid-template-columns:1fr auto auto !important; }
  .single-product .summary .digant-variation-card .digant-icon { display:none !important; }
}
/* Fjern den grå pil Divi/Woo lægger på variations-feltet */
.single-product .summary .variations .value::after,
.single-product .summary .variations .label::after,
.et_pb_wc_add_to_cart .variations .value::after { /* Divi modul */
  content: none !important;
  display: none !important;
}

/* Skjul selve selecten helt (vi bruger kortene i stedet) */
.single-product .summary .variations select {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: none !important;
  pointer-events: none !important;
}

/* Mindre afstand mellem varianter og knap */
.single-product .summary .variations { margin-bottom: 8px !important; }
.single-product .summary .single_variation_wrap { margin: 0 !important; padding: 0 !important; }
.single-product .summary .single_add_to_cart_button { margin-top: 0 !important; }

/* Hvis du bruger Divis Add to Cart–modul, nul stil der også */
.et_pb_wc_add_to_cart form.cart { margin-top: 0 !important; }
.et_pb_wc_add_to_cart .single_add_to_cart_button { margin-top: 0 !important; }

/* === 2) Antal (fast bredde) === */
.single_variation_wrap .woocommerce-variation-add-to-cart .quantity{
  flex:0 0 88px !important;             /* fast søjle til qty */
  margin:0 !important; float:none !important; width:auto !important;
}
.single_variation_wrap .woocommerce-variation-add-to-cart .quantity input.qty{
  height:56px !important; width:100% !important;
  border:1.5px solid #E6E0D8 !important; border-radius:12px !important;
  background:#fff !important; text-align:center !important;
  font-size:18px !important; line-height:56px !important; padding:0 10px !important;
  box-sizing:border-box !important; margin:0 !important;
}

/* === 3) Add to cart (fylder resten) === */
.single_variation_wrap .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.single_variation_wrap .woocommerce-variation-add-to-cart button.single_add_to_cart_button,
.single_variation_wrap .woocommerce-variation-add-to-cart .button.alt{
  flex:1 1 auto !important;             /* <- gør knappen fleksibel */
  width:auto !important;                /* <- fjern 100% bredde */
  height:56px !important; border-radius:12px !important;
  padding:0 22px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  box-sizing:border-box !important; margin:0 !important;
}

/* === 4) Share-knap (fast bredde) === */
.single_variation_wrap .woocommerce-variation-add-to-cart .ol-share{
  flex:0 0 56px !important;             /* fast søjle til share */
  height:56px !important; width:56px !important;
  border:1.5px solid #E6E0D8; border-radius:12px;
  background:#fff; color:#800020;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; cursor:pointer; margin:0;
}


/* Nulstil alle marginer på de tre elementer */
.single_variation_wrap .woocommerce-variation-add-to-cart .quantity,
.single_variation_wrap .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.single_variation_wrap .woocommerce-variation-add-to-cart button.single_add_to_cart_button,
.single_variation_wrap .woocommerce-variation-add-to-cart .button.alt,
.single_variation_wrap .woocommerce-variation-add-to-cart .ol-share{
  margin:0 !important;
}

/* Overstyr Divi/Woo global regel der giver qty margin-right */
.woocommerce div.product form.cart div.quantity{
  margin:0 !important;              /* <- fjerner de ekstra 20px */
}
/* ===== Vertical spacing kontrol ===== */
:root { --ownlane-vgap: 0px; }   /* ← justér samlet lodret afstand 0–12px */

/* 1) Ryd/gør afstand i hele add-to-cart-blokken */
.single-product .summary form.cart {
  display: grid !important;
  row-gap: var(--ownlane-vgap) !important;   /* ← var i din fil: gap:10px !important */
  column-gap: 0 !important;
  margin-top: 0 !important;
}

/* 2) Variations-tabellen (Book/E-Book) – fjern Woo’s 1em */
.woocommerce div.product form.cart .variations{
  margin: 0 0 var(--ownlane-vgap) 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

/* 3) Ryd margin på variation-rækker (du satte 8px på tr) */
.variations_form .variations tr{ margin: 0 !important; }

/* Hvis du vil have luft mellem flere rækker, så kun mellem dem (ikke den sidste) */
.variations_form .variations tr:not(:last-child){ margin-bottom: var(--ownlane-vgap) !important; }

/* 4) Nulstil ekstra margins i wrapperen efter tabellen */
.single_variation_wrap{
  margin: 0 !important;
  padding: 0 !important;
}
.single_variation_wrap .woocommerce-variation,
.single_variation_wrap .woocommerce-variation-price,
.single_variation_wrap .woocommerce-variation-description{
  margin: 0 !important;
  padding: 0 !important;
}
.single_variation_wrap .woocommerce-variation-add-to-cart{
  margin: 0 !important;   /* rækken med qty|knap|share */
}
/* === OWN LANE: fix – ens afstand mellem qty | ADD TO CART | share === */
:root { --ol-colgap: 14px; } /* justér vandret mellemrum her */

.single_variation_wrap .woocommerce-variation-add-to-cart.variations_button{
  display: grid !important;
  grid-template-columns: 88px 1fr 56px;          /* qty | knap | share */
  column-gap: var(--ol-colgap) !important;
  align-items: stretch !important;
  margin: 0 !important;
}

/* Nulstil egne margins på børn (ellers lægges de oven i column-gap) */
.single_variation_wrap .woocommerce-variation-add-to-cart .quantity,
.single_variation_wrap .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.single_variation_wrap .woocommerce-variation-add-to-cart .button.alt,
.single_variation_wrap .woocommerce-variation-add-to-cart .ol-share{
  margin: 0 !important;
}

/* Slå Woo/Divi’s qty-margin fra i alle varianter */
.woocommerce div.product form.cart div.quantity,
.woocommerce-page div.product form.cart div.quantity,
.woocommerce-page #content div.product form.cart div.quantity{
  margin: 0 !important;
}

/* Højderne du allerede bruger – behold dem for visuelt match */
.single_variation_wrap .woocommerce-variation-add-to-cart .quantity input.qty,
.single_variation_wrap .woocommerce-variation-add-to-cart .single_add_to_cart_button,
.single_variation_wrap .woocommerce-variation-add-to-cart .ol-share{
  height: 56px !important;
  border-radius: 12px !important;
}

/* sørg for at knappen ikke selv tilføjer ekstra margin */
.single-product .summary form.cart
  .single_variation_wrap .woocommerce-variation-add-to-cart .single_add_to_cart_button{
  margin-right: 0 !important;
}
/* === Final: qty | ADD TO CART | info — grid, ens afstand === */
:root{
  --qty-w:   88px;
  --info-w:  56px;
  --ctrl-h:  56px;
  --col-gap: 14px;
}

/* Desktop/tablet: 3 kolonner → [qty][CTA][info] */
.single-product .summary form.cart .single_variation_wrap > .woocommerce-variation-add-to-cart.variations_button{
  display: grid !important;
  grid-template-columns: var(--qty-w) 1fr var(--info-w) !important;
  column-gap: var(--col-gap) !important;
  align-items: stretch !important;
  margin: 0 !important;
}

/* Fjern tilfældige margins/padding der ødelægger gap’et */
.single-product .summary form.cart .single_variation_wrap > .woocommerce-variation-add-to-cart.variations_button > *{
  margin:0 !important; padding:0 !important; float:none !important;
}

/* Sikr faste bredder på qty/info + ens højde */
.single-product .summary form.cart div.quantity{ width:var(--qty-w) !important; margin:0 !important; }
.single-product .summary form.cart .ol-infobox-wrap{ width:var(--info-w) !important; display:flex !important; align-items:stretch !important; margin:0 !important; padding:0 !important; }
.single-product .summary form.cart .quantity .qty,
.single-product .summary form.cart .single_add_to_cart_button,
.single-product .summary form.cart .ol-infobox-wrap .ol-info{
  height:var(--ctrl-h) !important; border-radius:12px !important;
}

/* ===== Mobil: 2 rækker → 1) [qty][info]  2) [CTA full width] ===== */
@media (max-width: 480px){
  .single-product .summary form.cart .single_variation_wrap > .woocommerce-variation-add-to-cart.variations_button{
    grid-template-columns: var(--qty-w) var(--info-w) !important;
    grid-template-rows: auto auto;
    grid-template-areas:
      "qty info"
      "cta cta";
    column-gap: 12px !important;
    row-gap: 10px !important;
  }

  .single-product .summary form.cart .quantity{ grid-area: qty !important; }
  .single-product .summary form.cart .ol-infobox-wrap{ grid-area: info !important; }
  .single-product .summary form.cart .single_add_to_cart_button,
  .single-product .summary form.cart button.single_add_to_cart_button,
  .single-product .summary form.cart .button.alt{
    grid-area: cta !important;
    width:100% !important; min-width:0 !important;
    justify-content:center !important;
    height:var(--ctrl-h) !important; border-radius:12px !important;
  }
}
/* Gør variantnavn ("Book", "E-Book") grå i stedet for sort */
.digant-variation-card .digant-label {
  color: #777; /* skift evt. til en lysere/mørkere nuance */
}

/* Gør teksten mørkere igen, når varianten er valgt */
.digant-variation-card.is-selected .digant-label {
  color: #333; /* eller behold samme grå, hvis du ikke vil ændre farve ved valgt */
}
/* Tving farven til grå på alle varianter – både valgt og ikke-valgt */
.single-product .summary .digant-variation-card .digant-label {
  color: #777 !important;
}

/* Hvis du stadig ønsker, at den valgte får en mørkere nuance: */
.single-product .summary .digant-variation-card.is-selected .digant-label {
  color: #555 !important; /* eller fx #333 hvis du vil have tydeligere kontrast */
}
/* --- Tving "Book" og "E-Book" til grå --- */
body.single-product .digant-variation-card .digant-label {
  color: #777 !important;
}

/* Valgt kort – lidt mørkere grå (valgfrit) */
body.single-product .digant-variation-card.is-selected .digant-label {
  color: #555 !important;
}
/* === Farve på variantnavn ("Book", "E-Book") === */
.digant-variation-card .digant-label {
  color: #777 !important; /* mellemgrå */
}

.digant-variation-card.is-selected .digant-label {
  color: #777 !important; /* samme farve, også ved valgt */
}