/* ==== PRODUKT-GRID & KORT ==== */
.produkt-feed-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:10px;
  padding:20px;
}

.produkt-card{
  background:#fff;
  border:1px solid #ddd;
  border-radius:8px;
  overflow:hidden;
  transition:transform .2s ease-in-out, box-shadow .2s ease-in-out;
  position:relative; /* badge */
  /* Performance */
  content-visibility:auto;
  contain-intrinsic-size:320px 500px; /* stabil plads → mindre layout shift */
}
.produkt-card:hover{ transform:scale(1.05); box-shadow:0 4px 10px rgba(0,0,0,.1); }

.produkt-image-container{
  width:100%;
  height:200px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-bottom:1px solid #ddd;
  padding:30px;              /* luft hele vejen rundt */
  box-sizing:border-box;     /* så padding ikke øger containerens størrelse */
}

/* ÉN sandhed for billeder i containeren */
.produkt-image-container img{
  max-width:90% !important;
  max-height:90% !important;
  width:auto;                /* tilsidesætter width-attribut */
  height:auto;               /* tilsidesætter height-attribut */
  object-fit:contain;
  display:block;
}

.produkt-info{ padding:15px; text-align:center; }

.produkt-navn{
  font-size:14px;
  font-weight:500;
  margin-bottom:8px;
  color:#333;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  min-height:2.8em;
  line-height:1.4em;
}

.produkt-fragtomk,
.produkt-glpris{ font-size:14px; color:#333; margin-bottom:8px; }
.produkt-glpris{ min-height:1.5em; border-top:1px solid #ddd; }

.produkt-nypris{ font-size:17px; font-weight:500; margin-bottom:8px; }

.produkt-knap{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:3.6em; padding:.6em 10px;
  background:#0073aa; color:#fff !important; text-decoration:none !important;
  border-radius:4px; font-weight:bold; text-align:center; box-sizing:border-box; line-height:1.3;
  white-space:normal; word-break:break-word;
}
.produkt-knap:hover{ background:#005f87; }

.produkt-badge{
  position:absolute; top:10px; left:10px;
  background:#F59600; color:#000; font-size:.8em; font-weight:600;
  padding:4px 8px; border-radius:4px; z-index:2;
}

/* (Valgfrit) liste-styling hvis du bruger egenskaber */
.produkt-egenskaber{
  list-style:none; padding:0; margin:0 0 10px 0;
  font-size:.85em; line-height:1.4em; max-width:220px; overflow:hidden;
}
.produkt-egenskaber li{
  margin-bottom:5px; padding-left:1.2em; position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.produkt-egenskaber li::before{ content:"•"; position:absolute; left:0; color:#FF6600; }

/* ==== FILTER / SORTERING ==== */
/* 3 kolonner (centreret). Checkbox i egen centreret række. */
.produkt-filter-sortering{
  display:grid;
  grid-template-columns:repeat(3, 280px);
  justify-content:center;
  align-items:start;
  gap:8px 24px;
  margin:0 auto 16px;
  padding:10px 14px;
  background:#fafafa;
  border:1px solid #e6e6e6;
  border-radius:6px;
  text-align:center;
}

.produkt-filter-sortering .filter-group{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-width:0;
}
.produkt-filter-sortering .filter-group label{
  font-size:12px; font-weight:600; margin:0; line-height:1.2;
}

/* dropdowns – stærk override mod temaers width:100% */
.produkt-filter-sortering .filter-group select{
  width:280px !important;
  height:34px;
  padding:4px 8px;
  font-size:13px;
  border:1px solid #ccc;
  border-radius:4px;
  background:#fff;
  box-shadow:none;
}

/* Checkbox-række */
.produkt-filter-sortering .filter-checkbox{
  grid-column:1 / -1;
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top:6px;
}

/* Større checkbox + pæn alignment */
#tilbud-filter{
  transform:scale(1.4);
  transform-origin:left center;
  margin:0;
}
.produkt-filter-sortering .filter-checkbox label{
  margin:0; font-size:14px;
  display:flex; align-items:center; gap:6px;
}

/* =========================================================
   SINGLE PRODUKT – BRED VISNING
   Aktiveres via single_produkt="1"
   ========================================================= */

/* Grid: én kolonne og centreret */
.produkt-feed-grid--singlewide{
  grid-template-columns:1fr;
  max-width:960px;
  margin:0 auto;
  padding:20px;
}

/* Kort: horisontalt layout */
.produkt-card--wide{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:24px;
  align-items:center;
  padding:10px;
}

/* Fjern hover-effekt på single */
.produkt-card--wide:hover{
  transform:none;
  box-shadow:none;
}

/* Billedområde */
.produkt-card--wide .produkt-image-container{
  height:320px;
  padding:24px;
  border-bottom:none;
}

/* Billede */
.produkt-card--wide .produkt-image-container img{
  max-width:100%;
  max-height:100%;
}

/* Indhold */
.produkt-card--wide .produkt-info{
  text-align:left;
  padding:10px 10px 10px 0;
}

/* Titel */
.produkt-card--wide .produkt-navn{
  font-size:20px;
  line-height:1.4;
  min-height:auto;
  margin-bottom:12px;
}

/* Priser */
.produkt-card--wide .produkt-glpris{
  font-size:15px;
  margin-bottom:6px;
  border-top:none;
}

.produkt-card--wide .produkt-nypris{
  font-size:22px;
  margin-bottom:10px;
}

/* Fragt */
.produkt-card--wide .produkt-fragtomk{
  font-size:14px;
  margin-bottom:14px;
}

/* CTA-knap */
.produkt-card--wide .produkt-knap{
  max-width:260px;
  margin-top:10px;
}

/* Badge – justér placering */
.produkt-card--wide .produkt-badge{
  top:14px;
  left:14px;
  font-size:14px;
}

/* =========================================================
   MOBIL – SINGLE PRODUKT
   ========================================================= */

@media (max-width:768px){

  .produkt-feed-grid--singlewide{
    padding:10px;
  }

  .produkt-card--wide{
    grid-template-columns:1fr;
    gap:12px;
  }

  .produkt-card--wide .produkt-image-container{
    height:260px;
    padding:20px;
  }

  .produkt-card--wide .produkt-info{
    text-align:center;
    padding:0 10px 10px;
  }

  .produkt-card--wide .produkt-knap{
    max-width:100%;
  }
}

/* ==== RESPONSIVE ==== */
@media (max-width:768px){
  .produkt-filter-sortering{
    grid-template-columns:1fr;
    justify-content:center;
  }
  .produkt-filter-sortering .filter-group select{
    width:100% !important; max-width:420px;
  }
  /* Drop tunge hover-effekter på mobil */
  .produkt-card:hover{ transform:none; box-shadow:none; }
}

/* === MOBIL: justering af produktbilleder === */
@media (max-width:768px){
  .produkt-image-container{
    height:320px;
    padding:20px;
  }

  .produkt-image-container img{
    max-width:65%;
    max-height:65%;
  }
}

/* ==== TILBUDSBOKS ==== */
.su-tilbud-boks{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:0 auto 16px;
  padding:14px 18px;
  background:#F3E9D2;
  border:1px solid #D6BF86;
  border-radius:14px;
  max-width:944px;
  box-sizing:border-box;
}

.su-tilbud-boks__tekst{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px;
}

.su-tilbud-boks__overskrift{
  font-size:18px;
  font-weight:700;
  line-height:1.2;
  color:#8A5A00;
}

.su-tilbud-boks__subtekst{
  font-size:14px;
  color:#9C6A10;
  line-height:1.3;
}

.su-tilbud-boks__actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.su-tilbud-knap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:150px;
  min-height:46px;
  padding:10px 24px;
  border:1px solid #C98F00 !important;
  border-radius:12px;
  /*background:#F59600 !important;*/
  /*background:#F4B400 !important;*/
  background:#F8F1DE !important;
  color:#734800 !important;
  font-size:16px;
  font-weight:700;
  text-decoration:none !important;
  cursor:pointer;
  transition:all .2s ease;
  box-sizing:border-box;
}

/*.su-tilbud-knap:hover{
  background:#E5A700;
  border-color:#D39A00;
  color:#734800 !important;
}*/

.su-tilbud-knap.is-active{
  background:#F59600 !important;
  border-color:#C98F00 !important;
  color:#734800 !important;
}
/* Vis alle som sekundær knap */
.su-tilbud-knap--alle{
  background:#F8F1DE;
  color:#8A5A00 !important;
  border:1px solid #D6BF86 !important;
}

/*.su-tilbud-knap--alle:hover{
  background:#EFE3C2;
  border-color:#CDB06E;
  color:#8A5A00 !important;
}*/

.su-tilbud-knap--alle.is-active{
  background:#F59600 !important;
  /*background:#E8D8AF;*/
  border-color:#C9A85E !important;
  color:#6F4700;
}

.produkt-filter-sortering .filter-checkbox{
  display:none;
}

/* ==== HURTIGVALG CTA ==== */
.su-hurtigvalg{
  margin:0 auto 16px;
  padding:14px 16px;
  background:#eef3fb;
  border:1px solid #cfd8ea;
  border-radius:10px;
  max-width:944px;
  box-sizing:border-box;
}
.su-hurtigvalg__titel{
  margin-bottom:10px;
  color:#23406a;
  font-size:18px;
  font-weight:700;
  line-height:1.2;
}
.su-hurtigvalg__knapper{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.su-hurtigvalg__knap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:6px 12px;
  background:#1e6bd6;
  color:#fff !important;
  border:1px solid #1659b6;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none !important;
  transition:all .2s ease;
}
.su-hurtigvalg__knap:hover{
  background:#175fc1;
  border-color:#124f9f;
  color:#fff !important;
}

@media (max-width:768px){
  .su-tilbud-boks{
    flex-direction:column;
    align-items:flex-start;
    padding:14px 16px;
  }
  .su-tilbud-boks__tekst{
    align-items:flex-start;
    flex-direction:row;
  }
  .su-tilbud-boks__overskrift{
    font-size:17px;
  }
  .su-tilbud-boks__subtekst{
    font-size:13px;
  }
  .su-tilbud-boks__actions{
    width:100%;
  }
  .su-tilbud-knap{
    flex:1 1 140px;
    width:100%;
    min-width:0;
  }
  .su-hurtigvalg__titel{
    font-size:16px;
  }
}