body.pageTypeproduct[class*="pageCategory"]
.site-main-content > .row > .col-xl-24
.category-description * {
  text-align: inherit;
}

body.pageTypeproduct[class*="pageCategory"]
.site-main-content > .row > .col-xl-24
.category-description a,
body.pageTypeproduct[class*="pageCategory"]
.site-main-content > .row > .col-xl-24
.category-description strong {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* =========================================================
   AcourA – Wine extras (Abbozzo)
   Kun styling. Ingen logik her.
   ========================================================= */

/* Madikoner */

.acoura-food-icons img{
  width:34px;
  height:auto;
  display:block;
}


/* AcourA Vin – tabs + vin-specifikation tabel (Abbozzo) */

#acoura-title-badges { display: none; } /* hvis placeholderen findes men du ikke bruger badges */

.acoura-spec-table-wrap {
  width: 100%;
}

.acoura-spec-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.acoura-spec-table tbody tr + tr th,
.acoura-spec-table tbody tr + tr td {
  border-top: 1px solid rgba(0,0,0,0.08);
}

.acoura-spec-key {
  width: 180px;
  font-weight: 600;
  vertical-align: top;
  padding: 10px 14px;
  white-space: nowrap;
}

.acoura-spec-val {
  padding: 10px 14px;
  vertical-align: top;
}

.acoura-spec-table-wrap {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  overflow: hidden;
}

@media (max-width: 600px) {
  /* Mobil: gør det mere læsbart (key over value) */
  .acoura-spec-table,
  .acoura-spec-table tbody,
  .acoura-spec-table tr,
  .acoura-spec-table th,
  .acoura-spec-table td {
    display: block;
    width: 100%;
  }

  .acoura-spec-key {
    width: 100%;
    white-space: normal;
    padding-bottom: 4px;
  }

  .acoura-spec-val {
    padding-top: 0;
    padding-bottom: 14px;
  }

  .acoura-spec-table tbody tr + tr th,
  .acoura-spec-table tbody tr + tr td {
    border-top: none;
  }

  .acoura-spec-table tbody tr + tr {
    border-top: 1px solid rgba(0,0,0,0.08);
  }
}

/* 1 stk pris skal matche h5 præcist (rammer kun første prislinje i offers) */
.m-product-offers p:first-of-type .m-product-priceline .m-product-price{
  font-size: 1.25em !important;
}


/* Besparelseslinje */
#savings-banner{
  font-size: 1.25em;
  color: #B89455;
  font-weight: 700;
  margin-top: 6px;
}

/* Variant prisboks i topområdet */
#acoura-pricebox-variant.is-hidden { display: none; }
#acoura-pricebox-default.is-hidden { display: none; }

#acoura-pricebox-variant .acoura-variant-picked{
  margin: 6px 0 8px;
  font-weight: 600;
}

#acoura-pricebox-variant .acoura-variant-pricelines .selected-priceLine{
  margin: 0 0 6px;
}

#acoura-pricebox-variant .acoura-variant-savings{
  margin: 4px 0 8px;
  font-weight: 600;
  color: #B89455;
}

#acoura-pricebox-variant .acoura-variant-cheapest{
  margin: 2px 0 0;
  font-size: 0.95em;
  opacity: 0.9;
}

#acoura-pricebox-variant .acoura-variant-cheapest.is-hidden{
  display: none;
}

/* Når variant er valgt: skjul den nederste prisvisning under årgang (men behold "Vælg årgang" advarsel når ingen valgt) */
.acoura-variant-selected .variantInfoPanel .panel-body .product-priceLines{
  display: none;
}


/* Når variant er valgt: skjul "Vejl. udsalgspris ..." i variantInfoPanel */
.acoura-variant-selected .variantInfoPanel .priceSuggested,
.acoura-variant-selected .variantInfoPanel .priceSuggested *{
  display: none !important;
}


#acoura-pricebox-variant .acoura-variant-cheapest{
  margin-top: 8px;
}


/* Besparelseslinje i variant skal matche #savings-banner */
#acoura-pricebox-variant .acoura-variant-savings{
  font-size: 1.25em;
  font-weight: 700;
  color: #B89455;
}


/* Variant: 1 stk skal være "lille" som normalvisningens 1-stk */
#acoura-pricebox-variant .acoura-line-single .m-product-price{
  font-size: 1.25em !important;
  font-weight: 700;
}

/* Hold pladsen til "billigste variant"-linjen, men skjul den visuelt */
#acoura-pricebox-variant .acoura-variant-cheapest.is-placeholder{
  visibility: hidden;
}


/* =========================================================
   AcourA – Smagsprofil (Abbozzo)
   "Barcelona"-princip: CSS-table (display: table / table-row / table-cell)
   - Mest stabilt ved zoom og på tværs af devices
   - Ingen orddeling midt i ord (ingen "Me-get")
   ========================================================= */

/* ---------- NEMT AT RETTE (DIN KONTROL) ---------- */
:root{
  /* Farver */
  --acoura-profile-bg: #d9c9b4;
  --acoura-profile-border: #B89455;
  --acoura-track: #B89455;
  --acoura-active: #7A1E1E;

  /* Boks */
  --acoura-radius: 6px;
  --acoura-border-w: 1px;
  --acoura-pad-y: 16px;
  --acoura-pad-x: 18px;

  /* Kolonnebredder (Barcelona-stil = procent, ikke px) */
  --acoura-y: 20%;
  --acoura-z: 22%;
  --acoura-o: 36%;
  --acoura-q: 22%;

  /* Skala */
  --acoura-dot: 14px;     /* prik størrelse */
  --acoura-track-h: 2px;  /* streg tykkelse */
}

.acoura-extras{ margin-top:14px; }

/* Overskrift (udenfor boksen) */
.acoura-extras h3{
  margin: 14px 0 10px;
  font-size: 1.15em;
  line-height: 1.15;
  font-weight: 800;
  color: var(--acoura-active);
}

/* Selve boksen (container) */
.acoura-profile{
  margin: 0 0 14px 0;
  padding: var(--acoura-pad-y) var(--acoura-pad-x);
  background: var(--acoura-profile-bg);
  border: var(--acoura-border-w) solid var(--acoura-profile-border);
  border-radius: var(--acoura-radius);

  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden; /* sikkerhedsnet: intet må stikke ud af border */

  /* Barcelona-låsning */
  display: table;
  width: 100%;
  table-layout: fixed; /* KRITISK: stabilt kolonnelayout ved zoom */
  border-collapse: separate;
  border-spacing: 0;
}

/* Række */
.acoura-profile-row{
  display: table-row;
}

/* Fælles for celler */
.acoura-profile-row > *{
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
  box-sizing: border-box;

  /* KRITISK: ingen "vilde" breaks */
  word-break: normal;
  overflow-wrap: normal;

  /* KRITISK: slå orddeling fra (stopper Me-get) */
  hyphens: none;

  /* Sikkerhed: celler må ikke presse ud */
  overflow: hidden;
}

/* Kolonnebredder (Barcelona-stil) */
.acoura-profile-label{ width: var(--acoura-y); }
.acoura-profile-left{  width: var(--acoura-z); }
.acoura-profile-scale{ width: var(--acoura-o); }
.acoura-profile-right{ width: var(--acoura-q); }

/* Y = label */
.acoura-profile-label{
  font-weight: 800;
  letter-spacing: .02em;
  font-size: .9em;
  white-space: nowrap;        /* labels på én linje */
  text-overflow: ellipsis;
}

/* Z + Q = tekster: må gerne være 2 linjer (dine tekster er 2 ord)
   men ALDRIG deles midt i et ord */
.acoura-profile-left,
.acoura-profile-right{
  font-size: .95em;
  line-height: 1.25;

  white-space: normal;        /* må gå i 2 linjer */
}

/* Skala-kolonnen */
.acoura-profile-scale{
  /* hold den fleksibel inde i sin kolonne */
  padding-left: 18px;
  padding-right: 18px;
}

.acoura-profile-left{
  padding-right: 14px; /* ekstra buffer før skalaen */
}

.acoura-profile-dots{
  position: relative;
  width: 100%;
  max-width: 100%;
  height: var(--acoura-dot);

  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
}

.acoura-profile-dots::before{
  content: "";
  position: absolute;
  left: calc(var(--acoura-dot) / 2);
  right: calc(var(--acoura-dot) / 2);
  top: 50%;
  transform: translateY(-50%);
  height: var(--acoura-track-h);
  background: var(--acoura-track);
  border-radius: 999px;
}

/* Prikker */
.acoura-dot{
  width: var(--acoura-dot);
  height: var(--acoura-dot);
  border-radius: 50%;
  background: var(--acoura-track);
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}

.acoura-dot.is-active{
  background: var(--acoura-active);
}

/* ---------- RESPONSIV: stadig table (Barcelona-stil), men strammere ---------- */
@media (max-width: 900px){
  :root{
    --acoura-dot: 12px;

    /* giv skalaen lidt mere plads, så side-tekster får mindre pres */
    --acoura-y: 22%;
    --acoura-z: 16%;
    --acoura-o: 44%;
    --acoura-q: 18%;
  }
}

@media (max-width: 650px){
  :root{
    --acoura-dot: 11px;

    /* mobil: skala endnu mere plads for stabilitet */
    --acoura-y: 24%;
    --acoura-z: 16%;
    --acoura-o: 46%;
    --acoura-q: 14%;
  }

  .acoura-profile{
    padding: 14px 14px;
  }

  .acoura-profile-row > *{
    padding: 10px 6px;
  }
}



/* =========================
   AcourA – Madikoner
   ========================= */

.acoura-food-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.acoura-food-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.acoura-food-icon img {
  display: block;
  transform: scale(1.25);
  transform-origin: center;
}

.acoura-food-icons{
  gap: 20px;
}

/* Tooltip */
.acoura-food-icon::after {
  content: attr(data-tip);
  position: absolute;
  left: 62%;                 /* let forskudt mod højre */
  bottom: 100%;
  transform: translate(-50%, -8px);
  background: #4C653C;
  color: #fff;
  padding: 9px 15px;
  border-radius: 12px;
  font-size: 18px;           /* 50% større */
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 10;
}

/* Tooltip pil */
.acoura-food-icon::before {
  content: "";
  position: absolute;
  left: 62%;
  bottom: 100%;
  transform: translate(-50%, -2px);
  border: 9px solid transparent;
  border-top-color: #4C653C;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 10;
}

.acoura-food-icon:hover::after,
.acoura-food-icon:hover::before,
.acoura-food-icon:focus::after,
.acoura-food-icon:focus::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -10px);
}

.acoura-food-icon:focus {
  outline: 2px solid rgba(76,101,60,.35);
  outline-offset: 4px;
  border-radius: 10px;
}

.acoura-food-icon.is-open::after,
.acoura-food-icon.is-open::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -10px);
}



/* =========================================================
   AcourA – Tabs: desktop styling (old theme behavior)
   ========================================================= */
:root{
  --acoura-tab-green: #4C653C;
  --acoura-tab-radius: 0px;      /* justér senere */
  --acoura-tab-border-w: 2px;
  --acoura-tab-pad-y: 10px;
  --acoura-tab-pad-x: 18px;
  --acoura-tab-gap: 14px;
}

/* Desktop/tablet: tabs som “knapper” med ens bredde */
ul.nav.nav-tabs.m-product-additional-info-tabs{
  border-bottom: 0 !important;         /* fjerner den tynde streg */
  padding-left: 0;
  margin: 20px 0 14px;
  display: flex;                        /* vi styrer layout her */
  gap: var(--acoura-tab-gap);
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* LI skal have ens bredde, men ikke strække til fuld container */
ul.nav.nav-tabs.m-product-additional-info-tabs > li{
  float: none !important;
  margin: 0 !important;
  flex: 0 0 auto;                       /* ingen “fyld hele bredden” */
}



/* A: inline-block + min-width=max-content trick via JS? (nej)
   I CSS alene kan vi ikke automatisk sætte alle til bredden af den længste.
   Derfor bruger vi CSS-variabel --acoura-tab-w, som JS sætter automatisk. */

ul.nav.nav-tabs.m-product-additional-info-tabs > li > a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* JS sætter --acoura-tab-w dynamisk. Fallback hvis JS ikke kører: 220px */
  width: var(--acoura-tab-w, 220px);

  padding: var(--acoura-tab-pad-y) var(--acoura-tab-pad-x);

  border: var(--acoura-tab-border-w) solid var(--acoura-tab-green) !important;
  border-radius: var(--acoura-tab-radius);

  background: #fff !important;
  color: #4C653C !important;

  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;

  transition: background .12s ease, color .12s ease;
}

/* Active */
ul.nav.nav-tabs.m-product-additional-info-tabs > li.active > a{
  background: var(--acoura-tab-green) !important;
  color: #fff !important;
}

/* Hover på inaktiv: “som aktiv” */
ul.nav.nav-tabs.m-product-additional-info-tabs > li:not(.active) > a:hover{
  background: #D9C9B4 !important;
  color: #4C653C !important;
}

/* Fokus */
ul.nav.nav-tabs.m-product-additional-info-tabs > li > a:focus{
  outline: 2px solid rgba(76,101,60,.35);
  outline-offset: 3px;
}

/* =========================================================
   AcourA – Tabs: kun mobil layout (stack + full width)
   ========================================================= */
@media (max-width: 700px){

  /* Tab-listen */
  ul.nav.nav-tabs.m-product-additional-info-tabs{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 10px 0 10px;
    padding: 0;
    border-bottom: 0 !important;
  }

  /* Hver tab */
  ul.nav.nav-tabs.m-product-additional-info-tabs > li{
    width: 100%;
    margin: 0;
  }

  /* Selve link-knappen */
  ul.nav.nav-tabs.m-product-additional-info-tabs > li > a{
    min-width: 0;          /* vigtigt: ellers får du ikke full width */
    width: 100%;
    display: block;
    text-align: center;
    padding: 10px 12px;
    margin: 0;
  }
}


/* =========================================================
   AcourA – Flyt købsknap til højre for antal
   ========================================================= */

.product-transaction .row{
  display: flex;
  align-items: center;
}

/* Antal først */
.m-product-transaction-amount{
  order: 1;
}

/* Køb bagefter (til højre) */
.m-product-transaction-button{
  order: 2;
}



/* Split-linje: label + stort beløb på samme linje */
.productItem .product-various-price-info .acoura-combo-row{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;

  /* gør den tydelig som “egen linje” */
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.10);
}

/* Label lille (hold den samlet så den ikke “blander sig” med normalpris) */
.productItem .product-various-price-info .acoura-combo-label{
  font-size: 0.95em;
  font-weight: 400;
  white-space: nowrap;
}

/* Beløb stort (6-pack prisen) */
.productItem .product-various-price-info .acoura-combo-amount{
  font-size: 1.8em;
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
}

/* Normalpris under – højrejustér så den ikke ligner en del af labelen */
.productItem .prices .m-productlist-price{
  order: 3;
  width: 100%;
  font-size: 1.15em;
  font-weight: 700;

  text-align: right;
  margin-top: 2px;
}

/* Når der er tilbud: førpris skal stå ovenover og højrestilles */
.productItem .prices .m-productlist-discount{
  order: 2;          /* før normalprisen */
  width: 100%;
  text-align: right; /* højrestil */
  margin-bottom: 2px;
}

/* AcourA – Produktkort: centrer vin-navn + vingård (uden at styre font-size) */
.productItem .m-productlist-heading{
  text-align: center;
}

/* Sørg for at både titel-link og brand-link opfører sig pænt ved centrering */
.productItem .m-productlist-heading .m-productlist-link,
.productItem .m-productlist-heading .m-productlist-brand-link{
  display: block;
  text-align: center;
}

/* Luft mellem vinens navn og vingård (kun spacing) */
.productItem .m-productlist-title{
  margin: 8px 0 2px;
}


.productItem .m-productlist-brand{
  margin: 0 0 10px;
}

/* Produktkort: centrer vin-navn + vingård */
.productItem .m-productlist-heading,
.productItem .m-productlist-heading .m-productlist-link,
.productItem .m-productlist-brand-link,
.productItem .m-productlist-brand {
  text-align: center;
}

/* Stram afstand i Dansk liste (produktkort) mellem H4/H5/H6 */
.productItem .m-productlist-short-description h4,
.productItem .m-productlist-short-description h5,
.productItem .m-productlist-short-description h6{
  margin: 0;            /* fjerner standard-luft */
  line-height: 1.15;    /* rolig, tæt men læsbart */
}

/* Giv en lille kontrolleret afstand mellem linjerne */
.productItem .m-productlist-short-description h4{ margin-bottom: 4px; }
.productItem .m-productlist-short-description h5{ margin-bottom: 6px; }
.productItem .m-productlist-short-description h6{ margin-top: 8px; }

/* =========================================================
   AcourA – Breadcrumb + kategori-top (Abbozzo)
   Bevarer:
   - fuld bredde brun breadcrumb/top
   - ingen lys stribe mellem breadcrumb og topsektion
   - titel venstrestillet
   - titel tæt på breadcrumbs
   - mindre H1, så H2 stadig får visuel betydning
   ========================================================= */

/* Grundværdier */
:root{
  --acoura-breadcrumb-bg: #D9C9B4;
  --acoura-gutter: 10px;
  --acoura-gap-fill: 60px;
  --acoura-content-max: 1600px;
  --acoura-content-pad: 10px;
}

/* =========================================================
   1) Breadcrumb-bjælke i fuld bredde
   ========================================================= */
body.pageTypeproduct[class*="pageCategory"] .site-main-wrapper > .container.with-xlarge.site-wrapper{
  background: var(--acoura-breadcrumb-bg) !important;
  box-shadow: 0 0 0 100vmax var(--acoura-breadcrumb-bg) !important;
  clip-path: inset(0 -100vmax) !important;
  margin-bottom: 0 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  position: relative;
  z-index: 3;
}

/* Breadcrumbs skal ikke have egen baggrund */
body.pageTypeproduct[class*="pageCategory"] .m-breadcrumb,
body.pageTypeproduct[class*="pageCategory"] .nav.nav-breadcrumbs.small{
  background: transparent !important;
}

/* Print-område til højre skal følge wrapperens baggrund */
body.pageTypeproduct[class*="pageCategory"] .site-main-wrapper > .container.with-xlarge.site-wrapper .col-s-1,
body.pageTypeproduct[class*="pageCategory"] .site-main-wrapper > .container.with-xlarge.site-wrapper .m-print{
  background: transparent !important;
}

/* Fjern mellemrum mellem breadcrumb-wrapper og næste blok */
body.pageTypeproduct[class*="pageCategory"] .site-main-wrapper > .container.with-xlarge.site-wrapper + .site-slider,
body.pageTypeproduct[class*="pageCategory"] .site-main-wrapper > .container.with-xlarge.site-wrapper + .site-content{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* =========================================================
   2) Brun udfyldning bag kategori-top
   ========================================================= */
body.pageTypeproduct[class*="pageCategory"] .row.row-description{
  position: relative;
  margin-top: 0 !important;
  padding-top: 0 !important;
  z-index: 1;
}

body.pageTypeproduct[class*="pageCategory"] .row.row-description::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--acoura-gap-fill) * -1);
  height: var(--acoura-gap-fill);
  background: var(--acoura-breadcrumb-bg);
  pointer-events: none;
  box-shadow: 0 0 0 100vmax var(--acoura-breadcrumb-bg);
  clip-path: inset(0 -100vmax);
  z-index: 0;
}

body.pageTypeproduct[class*="pageCategory"] .row.row-description > *{
  position: relative;
  z-index: 1;
}

/* Hvis .site-content giver ekstra luft over kategori-toppen */
body.pageTypeproduct[class*="pageCategory"] .site-content{
  padding-top: 0 !important;
}

/* =========================================================
   3) Titelblok
   - venstrestillet
   - tæt på breadcrumbs
   - uden at ødelægge resten mere end nødvendigt
   ========================================================= */
body.pageTypeproduct[class*="pageCategory"] header.category-headline.page-title{
  width: 100%;
  margin-top: 0 !important;
  padding-top: 0 !important;
  text-align: left !important;
}

body.pageTypeproduct[class*="pageCategory"] header.category-headline.page-title h1.category-headline,
body.pageTypeproduct[class*="pageCategory"] header.category-headline.page-title h1{
  max-width: var(--acoura-content-max);
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-left: var(--acoura-content-pad);
  padding-right: var(--acoura-content-pad);
  box-sizing: border-box;
  text-align: left !important;

  /* H1 mindre, så H2 stadig er vigtig */
  font-size: 34px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
}

/* =========================================================
   AcourA – Sekundære knapper
   Beige baggrund + grøn ramme + tydeligere tekst
   ========================================================= */

.button.button-default,
button.form-submit.button.small,
a.button.button-icon.small,
button.button.button-icon.small{
  background: #D9C9B4 !important;
  border: 2px solid #4C653C !important;
  color: #4C653C !important;

  font-weight: 700 !important;
  font-size: 1.25em !important;
}

.button.button-default:hover,
button.form-submit.button.small:hover,
a.button.button-icon.small:hover,
button.button.button-icon.small:hover{
  background: #CBB89D !important;
}