/* ==========================================================================
   Unpaved — cart add-on upsell strip
   Rendered by snippets/unpaved-cart-upsell.liquid inside the cart drawer's
   scrollable body (#MinimogCartDrawerBody), right after the line items.

   Brand palette:
     Blackout      #1C1F19
     Nevoa         #E9E8E8
     Musgo vivo    #555826
     Pedra-oliva   #626053
     Cascalho      #948D6E
     Floresta      #364621

   Colour comes from the active theme scheme (--color-foreground / --color-border
   / --color-background) so the block inherits light and dark schemes; only the
   accent is hard-coded brand green.

   Placement matters: the block lives in the scroll area, never in the fixed
   footer, so on short viewports it scrolls with the items instead of stealing
   their height. The only positioned element here is .unpaved-upsell itself —
   the drawer's .m-cart-addon__body / .m-cart__overlay are position:absolute
   anchored to .m-cart-drawer and must not gain a closer positioned ancestor.
   ========================================================================== */

:root {
  --unpaved-musgo: #555826;
  --unpaved-floresta: #364621;
  --unpaved-cascalho: #948d6e;
  --unpaved-nevoa: #e9e8e8;
  --unpaved-upsell-gutter: 16px;
}

.unpaved-upsell {
  position: relative;
  flex: 0 0 auto;
  margin: 4px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(var(--color-border), 0.6);
}

/* ---- header ---- */

.unpaved-upsell__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.unpaved-upsell__kicker {
  font-family: var(--font-stack-header);
  font-style: var(--font-style-header);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--color-heading, var(--color-foreground)));
}

.unpaved-upsell .unpaved-upsell__badge {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 2px;
  background-color: var(--unpaved-musgo);
  color: var(--unpaved-nevoa);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.unpaved-upsell__note {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(var(--color-foreground), 0.65);
}

.unpaved-upsell__head + .unpaved-upsell__strip {
  margin-top: 10px;
}

/* ---- strip ---- */

.unpaved-upsell__strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--color-foreground), 0.28) transparent;
}

.unpaved-upsell__strip::-webkit-scrollbar {
  height: 4px;
}

.unpaved-upsell__strip::-webkit-scrollbar-track {
  background: rgba(var(--color-foreground), 0.08);
  border-radius: 2px;
}

.unpaved-upsell__strip::-webkit-scrollbar-thumb {
  background: rgba(var(--color-foreground), 0.3);
  border-radius: 2px;
}

/* ---- card ---- */

.unpaved-upsell__card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: 132px;
  scroll-snap-align: start;
  border: 1px solid rgba(var(--color-border), 0.75);
  border-radius: var(--medium-blocks-radius, 0px);
  background-color: rgba(var(--color-foreground), 0.015);
  overflow: hidden;
  transition: border-color var(--m-duration-default, 0.25s) ease;
}

.unpaved-upsell__card:hover {
  border-color: var(--unpaved-cascalho);
}

.unpaved-upsell__media {
  display: block;
  aspect-ratio: 1 / 1;
  background-color: rgba(var(--color-foreground), 0.04);
}

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

.unpaved-upsell__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.unpaved-upsell__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: rgb(var(--color-foreground));
  text-decoration: none;
}

.unpaved-upsell__title:hover {
  text-decoration: underline;
}

.unpaved-upsell__prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
}

.unpaved-upsell__price {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: rgb(var(--color-foreground));
}

.unpaved-upsell .unpaved-upsell__price--deal {
  color: var(--unpaved-musgo);
}

.unpaved-upsell__was {
  font-size: 11px;
  line-height: 1.2;
  color: rgba(var(--color-foreground), 0.5);
  text-decoration: line-through;
}

/* ---- form ----
   Pinned to the bottom of the card so every ADD button in the row lines up,
   whether or not the card above it has a variant select. */

.unpaved-upsell__form {
  display: block;
  margin-top: auto;
  padding-top: 4px;
}

.unpaved-upsell__product-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}

.unpaved-upsell__variant {
  width: 100%;
  min-height: 32px;
  padding: 4px 22px 4px 8px;
  border: 1px solid rgba(var(--color-border), 0.9);
  border-radius: var(--inputs-radius, 0px);
  background-color: rgb(var(--color-background));
  background-image: var(--arrow-select-box);
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 9px;
  color: rgb(var(--color-foreground));
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.unpaved-upsell .unpaved-upsell__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--unpaved-musgo);
  border-radius: var(--btn-border-radius, 0px);
  background-color: var(--unpaved-musgo);
  color: var(--unpaved-nevoa);
  font-family: var(--font-stack-header);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--m-duration-default, 0.25s) ease,
    border-color var(--m-duration-default, 0.25s) ease;
}

.unpaved-upsell .unpaved-upsell__add:hover:not([disabled]),
.unpaved-upsell .unpaved-upsell__add:active:not([disabled]) {
  background-color: var(--unpaved-floresta);
  border-color: var(--unpaved-floresta);
}

.unpaved-upsell .unpaved-upsell__add[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* The theme's <product-form> toggles .m-button--loading on the submit button and
   reveals .m-spinner-icon. Keep the icon collapsed until then so the label is
   centred. */
.unpaved-upsell__add .m-spinner-icon {
  display: none;
}

.unpaved-upsell__add.m-button--loading .m-spinner-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: unpaved-upsell-spin 0.7s linear infinite;
}

.unpaved-upsell__add.m-button--loading .unpaved-upsell__add-text {
  opacity: 0.7;
}

@keyframes unpaved-upsell-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- touch devices: no scrollbar chrome, the peeking card is the cue ---- */

@media (hover: none) and (pointer: coarse) {
  .unpaved-upsell__strip {
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .unpaved-upsell__strip::-webkit-scrollbar {
    display: none;
  }
}

/* ---- mobile drawer ----
   The strip bleeds to the drawer edges so cards scroll under the panel edge,
   a soft fade on the right hints at more, and controls grow to touch size. */

@media screen and (max-width: 767px) {
  .unpaved-upsell {
    margin-top: 2px;
    padding-top: 14px;
  }

  .unpaved-upsell__note {
    margin-bottom: 8px;
  }

  .m-cart-drawer__body .unpaved-upsell__strip {
    margin-left: calc(-1 * var(--unpaved-upsell-gutter));
    margin-right: calc(-1 * var(--unpaved-upsell-gutter));
    padding-left: var(--unpaved-upsell-gutter);
    padding-right: var(--unpaved-upsell-gutter);
    scroll-padding-left: var(--unpaved-upsell-gutter);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  }

  .unpaved-upsell__card {
    width: 138px;
  }

  .unpaved-upsell__body {
    gap: 6px;
    padding: 9px 9px 10px;
  }

  .unpaved-upsell__title {
    font-size: 12.5px;
  }

  .unpaved-upsell__price {
    font-size: 14px;
  }

  .unpaved-upsell__variant {
    min-height: 40px;
    font-size: 12px;
  }

  .unpaved-upsell .unpaved-upsell__add {
    min-height: 44px;
    font-size: 12px;
  }
}