/* ==========================================================================
   Checkout Upsell Strip — WayAcross
   Paleta: #87B13B, #295441, #FFA41C
   Primary/dark-green route through --color-primary / --color-secondary
   (defined by the Akira theme's :root, driven by its color customizer);
   the var() fallback keeps every other theme on the literal hex values.
   ========================================================================== */

/* -- Section ------------------------------------------------------------- */
.wa-cu {
  margin-top: 28px;
  padding: 18px 20px 16px;
  background: #f8fbf2;
  border: 1px solid color-mix(in srgb, var(--color-primary, #87B13B) 22%, transparent);
  border-radius: 10px;
}

/* ── Heading ───────────────────────────────────────────────────────────── */
.wa-cu__heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-secondary, #295441);
}

.wa-cu__heading-icon {
  color: #FFA41C;
  flex-shrink: 0;
}

/* ── Produto track (scroll horizontal) ────────────────────────────────── */
.wa-cu__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: #c8dba0 transparent;
  cursor: grab;
}
.wa-cu__track:active {
  cursor: grabbing;
}

.wa-cu__track::-webkit-scrollbar { height: 4px; }
.wa-cu__track::-webkit-scrollbar-track { background: transparent; }
.wa-cu__track::-webkit-scrollbar-thumb { background: #c8dba0; border-radius: 2px; }

/* ── Card ──────────────────────────────────────────────────────────────── */
.wa-cu__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 140px;
  padding: 12px 10px 10px;
  background: #fff;
  border: 1.5px solid #e8ede4;
  border-radius: 8px;
  text-align: center;
  transition: border-color .15s, box-shadow .15s;
}

.wa-cu__card:hover {
  border-color: var(--color-primary, #87B13B);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--color-primary, #87B13B) 15%, transparent);
}

/* Destaque para produtos FSB bridge */
.wa-cu__card--bridge {
  border-color: rgba(255,164,28,.5);
  background: #fffbf2;
}

.wa-cu__card--bridge:hover {
  border-color: #FFA41C;
  box-shadow: 0 2px 10px rgba(255,164,28,.2);
}

/* -- "Free shipping!" badge ---------------------------------------------- */
.wa-cu__bridge-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #FFA41C;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  white-space: nowrap;
}

/* ── Imagem ────────────────────────────────────────────────────────────── */
.wa-cu__img-wrap {
  display: block;
  width: 90px;
  height: 90px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.wa-cu__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.wa-cu__img--placeholder {
  display: block;
  background: #e8ede4;
  border-radius: 4px;
}

/* ── Info ──────────────────────────────────────────────────────────────── */
.wa-cu__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  width: 100%;
}

.wa-cu__name {
  font-size: 11.5px;
  line-height: 1.4;
  color: #333;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .15s;
}

.wa-cu__name:hover { color: var(--color-primary, #87B13B); }

.wa-cu__price {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-secondary, #295441);
}

/* -- Add button ---------------------------------------------------------- */
.wa-cu__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
  width: 100%;
  padding: 7px 6px;
  background: var(--color-primary, #87B13B);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}

.wa-cu__add:hover { background: color-mix(in srgb, var(--color-primary, #87B13B) 75%, black); }

.wa-cu__add:disabled {
  background: #b8c8a0;
  cursor: not-allowed;
}

/* Estado "adicionado" */
.wa-cu__add--added {
  background: var(--color-secondary, #295441);
}

/* ── Link "Ver mais" (produtos compostos) ─────────────────────────────────
   Meeting decision 2026-08-06: a suggested multi-combination product never
   silently adds the default combination - it links to the product page. Styled
   as a link/border, not a green button, so it does not look like an "add"
   action. */
.wa-cu__show {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  width: 100%;
  padding: 6px 6px;
  background: transparent;
  color: var(--color-secondary, #295441);
  border: 1px solid #c9d6cc;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  transition: border-color .15s, color .15s;
}

.wa-cu__show:hover {
  border-color: var(--color-primary, #87B13B);
  color: color-mix(in srgb, var(--color-primary, #87B13B) 75%, black);
}

/* ── Feedback ──────────────────────────────────────────────────────────── */
.wa-cu__feedback {
  margin: 10px 0 0;
  padding: 7px 12px;
  border-radius: 4px;
  font-size: 12px;
}

.wa-cu__feedback--success {
  background: color-mix(in srgb, var(--color-primary, #87B13B) 15%, transparent);
  color: var(--color-secondary, #295441);
}

.wa-cu__feedback--error {
  background: rgba(255,164,28,.15);
  color: #7a4a00;
}

/* ── Mini-cart variant (.wa-cu--mini) ──────────────────────────────────────
   Compactada agressivamente para evitar empurrar o footer do drawer (subtotal
   + the View Cart / Checkout buttons) out of the viewport. Combined with the
   sticky footer below, it keeps the buttons visible without scrolling. */
.wa-cu--mini {
  margin: 0;
  padding: 8px 12px 8px;
  border-left: none;
  border-right: none;
  border-radius: 0;
  background: #ddeec5;
}

.wa-cu--mini .wa-cu__heading {
  font-size: 11px;
  font-weight: 600;
  margin: 0 0 6px;
  gap: 5px;
  text-transform: uppercase;
  letter-spacing: .3px;
  opacity: .85;
}

.wa-cu--mini .wa-cu__heading-icon {
  width: 12px;
  height: 12px;
}

.wa-cu--mini .wa-cu__track {
  gap: 8px;
  padding-bottom: 2px;
}

.wa-cu--mini .wa-cu__card {
  flex: 0 0 92px;
  padding: 6px 6px 6px;
  border-width: 1px;
  border-radius: 6px;
}

.wa-cu--mini .wa-cu__bridge-badge {
  font-size: 8px;
  padding: 1px 5px;
  top: -7px;
}

.wa-cu--mini .wa-cu__img-wrap {
  width: 50px;
  height: 50px;
  margin-bottom: 4px;
}

.wa-cu--mini .wa-cu__info {
  gap: 2px;
}

.wa-cu--mini .wa-cu__name {
  font-size: 10px;
  line-height: 1.25;
  -webkit-line-clamp: 1;
}

.wa-cu--mini .wa-cu__price {
  font-size: 11px;
}

.wa-cu--mini .wa-cu__add {
  font-size: 10px;
  padding: 4px 3px;
  margin-top: 4px;
  gap: 3px;
  border-radius: 4px;
}

.wa-cu--mini .wa-cu__add-icon {
  width: 10px;
  height: 10px;
}

.wa-cu--mini .wa-cu__add-label {
  font-size: 10px;
}

.wa-cu--mini .wa-cu__show {
  font-size: 10px;
  padding: 4px 3px;
  margin-top: 4px;
  border-radius: 4px;
}

/* ── Sticky footer do mini-cart drawer ─────────────────────────────────────
   Akira / NRT (and most PS 1.7+ themes) use `.widget_shopping_cart_bottom` as
   the container for the subtotal + buttons. When the upsell strip is injected
   before this container, in a drawer holding 2-3 cart products the buttons
   ended up outside the viewport. Forcing position:sticky on the footer keeps
   the buttons visible and pushes the overflow into the cart products area.

   Scoped to `#canvas-mini-cart` (the id NRT/Akira use for the drawer) so the
   full cart page is unaffected. Extra selectors cover common variants
   noutros temas (cart-drawer-footer, blockcart__footer). */
#canvas-mini-cart .widget_shopping_cart_bottom,
#canvas-mini-cart .cart-drawer-footer,
#canvas-mini-cart .blockcart__footer,
#canvas-mini-cart .mini-cart-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: #fff;
  box-shadow: 0 -4px 8px -4px rgba(0, 0, 0, .08);
}

/* `position: sticky` precisa que algum ancestral tenha overflow constrangido.
   Most themes already set `overflow-y: auto` on the canvas - but some Akira
   versions leave the overflow on the canvas body. Forcing overflow-y here is
   defensive: if it was already set, it is a no-op; if not, it enables the
   sticky. */
#canvas-mini-cart {
  overflow-y: auto;
}

/* -- Collapse the empty space between the cart products and the strip ------
   In the Akira theme (and several NRT/Warehouse derivatives), the container
   `.wrapper-scroll` dentro do `.widget_shopping_cart_content` tem
   `flex: 1 1 auto` (flex-grow: 1) para esticar verticalmente e empurrar o
   footer to the bottom of the drawer. That was fine before the upsell strip,
   but it began creating a huge empty gap (up to ~300px) between the cart
   products and the strip - the strip sat against the footer, not the
   products.

   Fix: anular o `flex-grow` no wrapper-scroll **apenas** dentro do drawer.
   Since the footer is now `position: sticky` (rule above), it stays against the
   fundo sem precisar que o wrapper-scroll estique. Se o carrinho tiver muitos
   produtos, o wrapper passa a fazer scroll interno (overflow-y: auto).

   Selectores extra cobrem variantes comuns (`.cart-drawer-body`,
   `.blockcart__body`, `.widget_shopping_cart_content > div:first-child`). */
#canvas-mini-cart .wrapper-scroll,
#canvas-mini-cart .cart-drawer-body,
#canvas-mini-cart .blockcart__body {
  flex: 0 1 auto;
  flex-grow: 0;
  overflow-y: auto;
}

/* -- Coexistence with wayacross_freeshipbar --------------------------------
   The `wayacross_freeshipbar` module injects its `.pv-fsb--cart` bar as a
   sibling before `.widget_shopping_cart_content` (configured in
   `MINI_INSERT_TARGETS[0]` do freeshipbar.js). No tema Akira isso causa
   overflow: the parent `.widget_shopping_cart` is `display: block` (not flex)
   e o `.widget_shopping_cart_content` tem `height: 718px` setado inline
   by the theme's JS. When the bar (~117px) is inserted above the content
   without the content shrinking, the total content exceeds the drawer height
   and the cross-sell strip (rendered inside the content, before the sticky
   footer) is pushed out of the viewport - even though the footer stays visible
   thanks to `position: sticky`.

   Fix: force `.widget_shopping_cart` to `flex-direction: column` and
   libertar a altura fixa do content. O content passa a encolher para o
   natural content (FSB + scroll + strip + footer), all visible without
   vertical scrolling. The `!important` is needed because the theme sets the
   height inline via JS (style="height: 718px") — sem !important, o
   cascade perde para o inline style.

   Without freeshipbar installed this rule is a no-op (there is no extra sibling
   before the content; the content keeps its natural height). */
#canvas-mini-cart .widget_shopping_cart {
  display: flex;
  flex-direction: column;
}

#canvas-mini-cart .widget_shopping_cart_content {
  height: auto !important;
  flex: 1 1 auto;
  min-height: 0;
}

/* ── Responsivo ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .wa-cu {
    padding: 14px 12px 12px;
  }

  .wa-cu__card {
    flex: 0 0 118px;
    padding: 10px 8px 8px;
  }

  .wa-cu__img-wrap {
    width: 72px;
    height: 72px;
  }
}