/** Shopify CDN: Minification failed

Line 96:18 The "-" operator only works if there is whitespace on both sides

**/
/* nat & bam | Cart upsell + free shipping bar | v1.9
   File: assets/nab-cart-upsell.css
   Breakpoints like Dawn: mobile < 750px, tablet 750-989px, desktop >= 990px.
   All sizes inside the bar and the box are in em: the per-device size setting scales
   text, images, spacing, stars and buttons together.
   Colors of the suggestion box come from the chosen Dawn color scheme. Lilac is only
   used for the bar and the stars (brand accent). */

.nab-shipbar,
.nab-upsell {
  --nab-lilac: #e2baf5;
  --nab-lilac-deep: #c98be6;
  font-size: var(--nab-fs-m, 13px);
  line-height: 1.4;
}

@media screen and (min-width: 750px) {
  .nab-shipbar,
  .nab-upsell {
    font-size: var(--nab-fs-t, 14px);
  }
}

@media screen and (min-width: 990px) {
  .nab-shipbar,
  .nab-upsell {
    font-size: var(--nab-fs-d, 14px);
  }
}

/* ---------- Free shipping bar ---------- */

.nab-shipbar {
  margin-bottom: 1.6em;
  padding: 0.9em 1.2em 1.1em;
  border-radius: 1.2em;
  background: rgba(226, 186, 245, 0.25);
}

.nab-shipbar__text {
  margin: 0;
}

.nab-shipbar__track {
  position: relative;
  height: 1em;
  margin: 1.1em 0 0.15em;
  border-radius: 99px;
  background: rgb(var(--color-background));
}

.nab-shipbar__fill {
  display: block;
  width: var(--nab-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--nab-lilac), var(--nab-lilac-deep));
}

.nab-shipbar__star,
.nab-shipbar__goal {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  stroke-linejoin: round; /* rounded corners */
}

/* The three small stars: smaller than the bar.
   Not reached: light lilac fill, slightly darker lilac border. Reached: white, no border. */
.nab-shipbar__star {
  width: 0.85em;
  height: 0.85em;
  fill: var(--nab-lilac);
  stroke: var(--nab-line, var(--nab-lilac-deep));
  stroke-width: 2;
}

.nab-shipbar__star.is-on {
  fill: rgb(var(--color-background));
  stroke: rgb(var(--color-background));
}

/* Last star: outline only, vertically centered, sitting on the bar end.
   Position: "right" = distance to the bar end. 0.15em = fully inside the bar,
   -0.9em = star center exactly on the bar end. Larger value = further inside.
   Reached: filled in the end color of the bar. */
.nab-shipbar__goal {
  right: -0.4em;
  width: 1.8em;
  height: 1.8em;
  top:top:calc(50%-0.4em);
  transform: translateY(-50%);
  fill: none;
  stroke: var(--nab-line, var(--nab-lilac-deep));
  stroke-width: 2;
}

.nab-shipbar--reached .nab-shipbar__goal {
  fill: var(--nab-lilac-deep);
  stroke: var(--nab-lilac-deep);
  stroke-width: 3;
  animation: nab-pop 0.6s ease-out;
}

@keyframes nab-pop {
  50% {
    transform: translateY(-50%) scale(1.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nab-shipbar--reached .nab-shipbar__goal {
    animation: none;
  }
}

/* ---------- Upsell ---------- */

/* Dawn's <product-recommendations> needs a size to be detected when the drawer opens */
.nab-upsell-loader {
  display: block;
  min-height: 1px;
}

.nab-upsell {
  margin: 1.2em 0;
  padding: 1em 1.1em;
  border-radius: 1.2em;
}

.nab-upsell__title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 0.9em;
  font-size: 1.1em;
}

.nab-upsell__star {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  fill: var(--nab-star-fill, var(--nab-lilac));
  stroke: var(--nab-star-stroke, var(--nab-lilac-deep));
  stroke-width: var(--nab-star-border, 1px);
  stroke-linejoin: round;
}

/* Border in screen pixels, independent of the icon size */
.nab-upsell__star path {
  vector-effect: non-scaling-stroke;
}

.nab-upsell__list {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
}

/* Fixed columns: image | text (shrinks) | button (always at the right edge) */
.nab-upsell__item {
  display: grid;
  grid-template-columns: 4.3em minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9em;
}

.nab-upsell__media {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.9em;
  background: rgba(var(--color-foreground), 0.04);
}

.nab-upsell__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nab-upsell__info {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  min-width: 0;
}

.nab-upsell .nab-upsell__vendor {
  margin: 0;
  font-size: 0.75em;
  color: var(--nab-vendor-color, #6b5a54);
}

/* Same font as the cart item title (heading font), max. 2 lines */
.nab-upsell__name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: inherit;
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  line-height: 1.3;
  text-decoration: none;
}

/* Dawn's price snippet: scale to the box size */
.nab-upsell .price {
  font-size: 0.9em;
}

.nab-upsell--no-unit-price .unit-price {
  display: none;
}

/* Right column: Sale badge above the button, centered on each other */
.nab-upsell__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}

.nab-upsell__badge.badge {
  font-size: 0.8em;
  padding: 0.45em 1em 0.5em;
}

/* Dawn's button, compact. Size: per-device size x "Button-Größe" setting.
   Colors (background, text, plus) come from Dawn's secondary button variables set in the snippet.
   Own border instead of Dawn's ring, so border color and strength can differ from the text color. */
.nab-upsell__add.button {
  font-size: calc(0.85em * var(--nab-btn-scale, 1));
  min-width: 0;
  min-height: 2.8em;
  padding: 0 1em;
  white-space: nowrap;
  border: var(--nab-btn-border-width, 1px) solid var(--nab-btn-border-color, #2d1a0e);
}

.nab-upsell__add.button::before,
.nab-upsell__add.button::after {
  display: none;
}

/* Plus + text share one text line, so they are rounded to the same pixel row */
.nab-upsell__label {
  display: inline-block;
  line-height: 1;
}

.nab-upsell__add .svg-wrapper {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: -0.14em;
}

/* Arrow button for products with variants (icon only) */
.nab-upsell__add--icon.button {
  width: 2.8em;
  padding: 0;
}

.nab-upsell__add--icon .svg-wrapper {
  display: block;
  margin: 0;
}

/* Hover (desktop): hover colors from the settings */
@media (hover: hover) {
  .nab-upsell__add.button:not(.loading):hover {
    background-color: var(--nab-hover-bg, #e2baf5);
    color: var(--nab-hover-text, #2d1a0e);
  }
}