/*
 * Handlekurv – fri frakt-progressbar og forslagspanel.
 *
 * Variablene er scopet til komponentene så de ikke lekker inn i Flatsome sitt
 * eget system. --fs-color-primary settes av Flatsome (i dag #006699); fallbacken
 * gjelder hvis stilarket lastes før temaets inline-variabler.
 */

.ds-freeship,
.ds-upsell {
  --ds-blue: var(--fs-color-primary, #006699);
  --ds-blue-2: #3d9bc7;
  --ds-blue-bg: #e5f0f6;
  --ds-blue-bg-border: #c4dcea;
  --ds-blue-ink: #00517a;
  --ds-green: #1d7a3f;
  --ds-ink: #222;
  --ds-muted: #77746e;
  --ds-line-2: #e8e6e1;
  --ds-line-soft: #f0eee9;
}

/* ---------- Fri frakt-progress ---------- */

.ds-freeship {
  background: var(--ds-blue-bg);
  border: 1px solid var(--ds-blue-bg-border);
  border-radius: 10px;
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0 0 24px;
}

.ds-freeship__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  line-height: 1.35;
  flex-wrap: wrap;
}

.ds-freeship__label {
  font-weight: 600;
  color: var(--ds-blue-ink);
}

.ds-freeship__label b {
  color: var(--ds-blue);
}

.ds-freeship__nums {
  color: #4c7b95;
  font-size: 13.5px;
}

.ds-freeship__bar {
  height: 8px;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}

.ds-freeship__fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--ds-blue), var(--ds-blue-2));
  transition: width .3s ease;
}

.ds-freeship.is-reached .ds-freeship__bar {
  background: #dff2e6;
}

.ds-freeship.is-reached .ds-freeship__fill {
  background: linear-gradient(90deg, var(--ds-green), #3fb56a);
}

/* Kompakt variant i minikurven (nedtrekk + off-canvas). */
.widget_shopping_cart_content .ds-freeship,
#cart-popup .ds-freeship {
  padding: 10px 14px;
  margin: 0 0 12px;
  gap: 7px;
  text-align: left;
}

.widget_shopping_cart_content .ds-freeship__row,
#cart-popup .ds-freeship__row {
  font-size: 12.5px;
}

.widget_shopping_cart_content .ds-freeship__nums,
#cart-popup .ds-freeship__nums {
  font-size: 11.5px;
}

.widget_shopping_cart_content .ds-freeship__bar,
#cart-popup .ds-freeship__bar {
  height: 6px;
}

/* ---------- Handlekurv: forslag ---------- */

.ds-upsell {
  background: #fff;
  border: 1px solid var(--ds-line-2);
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
}

.ds-upsell__t {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ds-ink);
  margin-bottom: 4px;
}

.ds-upsell__d {
  font-size: 13px;
  color: var(--ds-muted);
  margin-bottom: 14px;
}

.ds-upsell__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.ds-upsell__item {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--ds-line-soft);
  border-radius: 10px;
  padding: 10px;
  color: inherit;
  /* Grid-elementer har min-width:auto: uten dette sprenger lange produktnavn
     kolonnene og kortene flyter ut av panelet. */
  min-width: 0;
}

.ds-upsell__item:hover {
  border-color: var(--ds-blue);
  text-decoration: none;
}

.ds-upsell__ph {
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-line-soft);
  /* Produktnavnet står allerede ved siden av, så alt-teksten er ren
     dublett – og uten dette bryter den layouten når bildet ikke lastes. */
  font-size: 0;
}

.ds-upsell__ph img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.ds-upsell__in {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.ds-upsell__name {
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--ds-ink);
  /* Produktnavnene her er lange («SILICON- & WACHSENTFERNER isopropanol
     /control spray (5 kg)»); klipp til to linjer så kortene holder høyden. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ds-upsell__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 13px;
  color: var(--ds-ink);
}

.ds-upsell__price .amount {
  font-weight: 700;
  font-size: 13px;
  color: var(--ds-ink);
}

.ds-upsell__note {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-green);
  white-space: nowrap;
}

.ds-upsell__add {
  color: var(--ds-blue);
  font-weight: 600;
  font-size: 12px;
}

@media (max-width: 860px) {
  .ds-upsell__grid {
    grid-template-columns: 1fr;
  }
}