/* ==========================================================================
   Add-to-cart popup (woocommerce/cart/mini-cart.php) — design:
   tasks/newaddcart.html. Everything is scoped under .popup_new.
   Visibility is driven by the existing mechanism:
   .widget_shopping_cart_content is hidden until body.cart-visible.

   The cross-sell cards are the REAL shop cards (content-product.php,
   .cart--product / 2026-cat.css) — this file only resizes them to fit the
   popup, it does not restyle them.
   ========================================================================== */

.popup_new {
  --pn-scrim:        rgba(35, 31, 38, .46);
  --pn-surface:      #ffffff;
  --pn-ink:          #231f26;
  --pn-ink-2:        #6b6470;
  --pn-line:         #ebe6f0;
  --pn-line-strong:  #ded7e6;
  --pn-primary:      #8b5594;
  --pn-primary-ink:  #ffffff;
  --pn-success:      #2e8b3d;
  --pn-success-bg:   #e7f4e8;
  --pn-success-line: #bfe3c3;
  --pn-radius:       18px;

  position: fixed;
  inset: 0;
  z-index: 999992;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  color: var(--pn-ink);
}

.popup_new__scrim {
  position: fixed;
  inset: 0;
  background: var(--pn-scrim);
  cursor: pointer;
}

.popup_new__dialog {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: auto 0;
  background: var(--pn-surface);
  border-radius: var(--pn-radius);
  box-shadow: 0 24px 60px -18px rgba(35, 31, 38, .45);
  overflow: hidden;
  /* Never taller than the viewport: the confirm bar and the two action
     buttons always stay visible; only the cross-sell section can scroll. */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  animation: popup_new-pop-in .28s cubic-bezier(.2, .8, .2, 1);
}
@keyframes popup_new-pop-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ── Confirmation bar ─────────────────────────────────────────────────── */
.popup_new__confirm {
  flex: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: var(--pn-success-bg);
  border-bottom: 1px solid var(--pn-success-line);
}
.popup_new__check {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pn-success);
  display: grid;
  place-items: center;
  flex: none;
  animation: popup_new-check-pop .4s .05s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes popup_new-check-pop {
  from { transform: scale(.3); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.popup_new__check svg { width: 22px; height: 22px; }

.popup_new__title {
  margin: 0;
  font-size: 16.5px;
  font-weight: 800;
  color: var(--pn-success);
  line-height: 1.2;
}
.popup_new__product-name {
  margin: 3px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pn-ink);
  line-height: 1.3;
}
.popup_new__x {
  align-self: start;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--pn-ink-2);
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  transition: background .15s, color .15s;
}
.popup_new__x:hover { background: rgba(35, 31, 38, .08); color: var(--pn-ink); }
.popup_new__x svg { width: 16px; height: 16px; }

/* ── Main actions ─────────────────────────────────────────────────────── */
.popup_new__actions {
  flex: none;
  display: flex;
  gap: 12px;
  padding: 12px 20px;
}
.popup_new__btn {
  font: inherit;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
  border-radius: 12px;
  padding: 14px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: transform .12s, background .15s, border-color .15s, color .15s;
  border: 2px solid transparent;
}
.popup_new__btn:active { transform: translateY(1px); }
.popup_new__btn--primary {
  flex: 1 1 60%;
  background: var(--pn-primary);
  color: var(--pn-primary-ink);
}
.popup_new__btn--primary:hover { background: #7a4a82; color: var(--pn-primary-ink); }
.popup_new__btn--primary svg { width: 18px; height: 18px; }
.popup_new__btn--secondary {
  flex: 1 1 40%;
  background: var(--pn-surface);
  color: var(--pn-primary);
  border-color: var(--pn-line-strong);
}
.popup_new__btn--secondary:hover { border-color: var(--pn-primary); }

/* ── "Vaak samen gekocht" ─────────────────────────────────────────────── */
.popup_new__crosssell {
  border-top: 1px solid var(--pn-line);
  padding: 14px 20px 16px;
  /* Safety net on very short screens: scroll inside this section only. */
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.popup_new__crosssell-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.popup_new__crosssell-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--pn-ink);
}
.popup_new__hint { font-size: 12px; font-weight: 700; color: var(--pn-ink-2); }

.popup_new__cards-wrap { position: relative; }
.popup_new__cards {
  display: grid;
  /* minmax(0,...) — plain 1fr tracks grow for a card whose nowrap stock
     badge is wide (e.g. "40 zuigtabletten"), giving unequal card widths
     and thus unequal image heights. Force truly equal columns instead. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.popup_new__scroll-hint { display: none; }

/* ── Shop card (.cart--product) resized for the popup ─────────────────── */
/* Base look comes from 2026-cat.css; only dimensions shrink here so the
   card is a smaller copy of the archive-page card.
   The !important margins pin the card layout so it is IDENTICAL on every
   page: 2026-cat.css has ".archive ... {margin:0 !important}" mobile rules
   that would otherwise reshape popup cards on archive pages only. */
.popup_new__cards .cart--product {
  padding: 10px 10px 12px;
  border-radius: 14px;
  gap: 0; /* .archive .cart{gap:8px} would add per-context spacing */
}
.popup_new__cards .cart--product:hover {
  transform: none; /* the -2px hover lift misaligns cards in this tight grid */
}
.popup_new__cards .btn-favourite {
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
}
.popup_new__cards .btn-favourite svg { width: 16px; height: 16px; }

.popup_new__cards .cart__image { margin: 0 0 8px !important; }
/* Slightly wider-than-tall image box (archive uses a 1:1 square): every
   image gets the exact same height, the popup just stays more compact. */
.popup_new__cards .ratio-wrap { padding-bottom: 82%; }
.popup_new__cards .price-badge-wrapper {
  top: 6px;
  left: 4px;
  transform: scale(.62);
}

.popup_new__cards .woocommerce-loop-product__title {
  font-size: 13px;
  line-height: 1.28;
  margin: 0 0 6px !important;
  min-height: calc(2 * 1.28em);
  max-height: calc(2 * 1.28em);
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.popup_new__cards .review-stars { margin: auto 0 8px !important; }
.popup_new__cards .review-stars svg { width: 13px; height: 13px; }
.popup_new__cards .review-stars .review-count { font-size: 11px; }
.popup_new__cards .review-stars .review-count span { display: none; } /* " reviews" */
.popup_new__cards .review-placeholder { height: 18px !important; } /* beats inline style */

.popup_new__cards .cart__info-box { margin: 0 0 10px !important; }
.popup_new__cards .cart__info-box .badge {
  font-size: 10px;
  padding: 3px 6px;
}
/* In these narrow cards a long contents badge ("40 zuigtabletten") must
   ellipsize instead of overflowing; the stock badge keeps its full text. */
.popup_new__cards .cart__info-box .badge--grey { min-width: 0; }
.popup_new__cards .cart__info-box .badge:last-child { flex: none; }

.popup_new__cards .cart--product .button--primary {
  padding: 9px 8px;
  font-size: 13px;
  border-radius: 10px;
}
.popup_new__cards .cart--product .button--primary svg {
  width: 15px;
  height: 15px;
  margin-right: 4px;
}
/* "Toegevoegd!" flash state set by mini-cart-new.js */
.popup_new__cards .cart--product .add_to_cart_button.added { background: #2e7d32; }

/* ── Horizontally scrolling card row ──────────────────────────────────── */
/* Active on mobile widths AND on desktop viewports too short for the
   two-row grid: everything then fits without any vertical scrolling and
   the arrow hints take over (manager: no scroll after add-to-cart). */
@media (max-width: 600px), (max-height: 860px) {
  .popup_new__cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 24px) / 3); /* 3 cards per view */
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 2px 0 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .popup_new__cards::-webkit-scrollbar { display: none; }
  .popup_new__cards .cart--product { scroll-snap-align: start; }

  .popup_new__scroll-hint {
    display: grid;
    place-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    background: var(--pn-surface);
    border: 1px solid var(--pn-line);
    box-shadow: 0 3px 12px -2px rgba(0, 0, 0, .28);
    color: var(--pn-primary);
    cursor: pointer;
    z-index: 3;
    transition: opacity .25s;
  }
  .popup_new__scroll-hint svg { width: 17px; height: 17px; }
  .popup_new__scroll-hint--right { right: 6px; }
  .popup_new__scroll-hint--left { left: 6px; }
  .popup_new__cards-wrap.at-end .popup_new__scroll-hint--right { opacity: 0; pointer-events: none; }
  .popup_new__cards-wrap.at-start .popup_new__scroll-hint--left { opacity: 0; pointer-events: none; }
}

/* ── Mobile (stacked buttons + bigger swipe cards) ────────────────────── */
@media (max-width: 600px) {
  .popup_new { padding: 16px 12px; }

  .popup_new__actions { flex-direction: column-reverse; }
  .popup_new__btn--primary,
  .popup_new__btn--secondary { flex: 1 1 auto; width: 100%; }

  .popup_new__cards-wrap { margin: 0 -20px; }
  .popup_new__cards {
    grid-auto-columns: 62%;
    padding: 2px 20px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .popup_new *,
  .popup_new *::before,
  .popup_new *::after { animation: none !important; transition: none !important; }
}