/* ===========================
   Upsell Bundle – Clean CSS
   =========================== */

/* Vis altid bundle-boksen (også i sticky wrapper) */
.ast-sticky-add-to-cart-action-wrap .bundled_holder_div{
  display:block;
}

/* ---------------------------------
   Layout: sørg for fuld bredde i form.cart
   --------------------------------- */
.single-product form.cart,
.single-product form.cart .variations_button,
.single-product form.cart .woocommerce-variation-add-to-cart{
  width: 100% !important;
  max-width: none !important;
}

/* wrap så boksen kan ligge under knappen */
.single-product form.cart .variations_button,
.single-product form.cart .woocommerce-variation-add-to-cart{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  align-items:center !important;
  box-sizing:border-box !important;
}

/* Boksen skal tage fuld række under knappen */
.single-product form.cart .bundled_holder_div{
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: none !important;
  order: 99;
  margin-top: 14px !important;
  box-sizing:border-box !important;
}

/* ---------------------------------
   Container card + titel/undertitel
   --------------------------------- */
.single-product form.cart .bundled_holder_div .container{
  position: relative;
  width: 100% !important;
  max-width: 720px;             /* sæt til none hvis du vil 100% bredde */
  margin: 0 !important;

  background:#fff !important;
  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:14px !important;
  box-shadow:0 14px 40px rgba(0,0,0,.10) !important;

  padding: 64px 16px 16px 16px !important; /* top padding pga titel */
  box-sizing:border-box !important;

  /* Grid for upsell cards */
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}

/* Titel + undertitel */
.single-product form.cart .bundled_holder_div .container::before{
  content:"Anbefalet tilbehør til denne cykel";
  position:absolute;
  top:14px; left:16px; right:16px;
  font-weight:700;
  font-size:16px;
  line-height:1.2;
}

.single-product form.cart .bundled_holder_div .container::after{
  content:"Tilvalgt udstyr er monteret ved levering";
  position:absolute;
  top:34px; left:16px; right:16px;
  font-size:13px;
  opacity:.75;
  line-height:1.2;
}

/* Hidden field må ikke fylde i grid */
.single-product form.cart .bundled_holder_div #bundled_product_ids{
  display:none !important;
}

/* ---------------------------------
   Upsell card (row)
   --------------------------------- */
.single-product form.cart .bundled_holder_div .upsell_row{
  width:100%;
  margin:0 !important;

  background:#fff !important;
  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:12px !important;
  box-shadow:0 10px 22px rgba(0,0,0,.06) !important;

  padding:14px !important;
  box-sizing:border-box !important;

  display:grid;
  grid-template-columns: 18px 84px 1fr;
  grid-template-areas:
    "cb img title"
    "cb img price";
  gap:10px 12px;
  align-items:start;
}

/* Checkbox */
.single-product form.cart .bundled_holder_div .upsell_checkbox_first{
  grid-area: cb;
  display:flex !important;
  align-items:flex-start;
  margin-top:6px;
}
.single-product form.cart .bundled_holder_div .upsell_checkbox_second{
  display:none !important;
}

/* Billede */
.single-product form.cart .bundled_holder_div .upsell_image{
  grid-area: img;
  width:84px;
}
.single-product form.cart .bundled_holder_div .upsell_image img{
  width:84px;
  height:auto;
  display:block;
  max-width:100%;
}

/* Titel/tekst */
.single-product form.cart .bundled_holder_div .upsell_title{
  grid-area: title;
  min-width:0;
}
.single-product form.cart .bundled_holder_div .upsell_title a{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:14px;
  line-height:1.25;
  margin:0 0 4px;
  color:#000;
  text-decoration:none;
  border:0;
  display:block;
  white-space:normal !important;
  word-break:break-word;
}

/* Pris + qty */
.single-product form.cart .bundled_holder_div .upsell_price{
  grid-area: price;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  text-align:left;
  min-width:0;
}

/* Qty input (ret selector + stabil bredde) */
.single-product form.cart .bundled_holder_div input.quantity,
.single-product form.cart .bundled_holder_div .quantity.form-control{
  width:64px !important;
  border-radius:8px !important;
  padding:8px 10px !important;
  border:1px solid rgba(0,0,0,.25) !important;
  box-sizing:border-box !important;
}

/* Pris typografi */
.single-product .woocommerce-Price-amount{
  font-weight:700 !important;
}

/* Checkbox lidt større */
.single-product form.cart .bundled_holder_div input[type="checkbox"]{
  transform: scale(1.05);
}

/* ---------------------------------
   Mobil: 1 kolonne + overflow-fix
   --------------------------------- */
@media (max-width: 768px){
  .single-product form.cart,
  .single-product form.cart .variations_button,
  .single-product form.cart .woocommerce-variation-add-to-cart,
  .single-product form.cart .bundled_holder_div,
  .single-product form.cart .bundled_holder_div .container,
  .single-product form.cart .bundled_holder_div .upsell_row{
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* Undgå at wrapper padding gør 100% bredere end skærmen */
  .single-product form.cart .variations_button,
  .single-product form.cart .woocommerce-variation-add-to-cart{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* 1 kolonne på mobil */
  .single-product form.cart .bundled_holder_div .container{
    grid-template-columns: 1fr;
    max-width:100%;
  }

  /* Sikkerhed på billeder */
  .single-product img{
    max-width:100% !important;
    height:auto !important;
  }
}

/* Skjul ekstra upsells indtil "Se flere" */
.upsell-hidden{
  display:none !important;
}

/* "Se flere" wrapper skal spænde begge kolonner i grid */
.upsell-toggle-wrap{
  grid-column: 1 / -1;
  display:flex;
  justify-content:center;
  margin-top: 6px;
}

/* Selve knappen */
.upsell-toggle-btn{
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}

/* Pil */
.upsell-toggle-btn::after{
  content: "▾";
  margin-left: 10px;
  display:inline-block;
  transition: transform .2s ease;
}

/* Når den er åben, vender pilen */
.upsell-toggle-btn.is-open::after{
  transform: rotate(180deg);
}