/* ==========================================================================
   Add-to-cart popup (woocommerce/cart/mini-cart.php) — copy of the
   koopjesdrogisterij popup in Natuurlijk colors. 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 / v2.css) — this file only resizes them to fit the
   popup, it does not restyle them.
   ========================================================================== */

.popup_new {
  --pn-scrim:        rgba(31, 42, 34, .46);
  --pn-surface:      #ffffff;
  --pn-ink:          #1f2a22;
  --pn-ink-2:        #69736b;
  --pn-line:         #e6e5df;
  --pn-line-strong:  #d7ddd4;
  --pn-primary:      #306552;
  --pn-primary-dark: #26513f;
  --pn-primary-ink:  #ffffff;
  --pn-success:      #3f6f46;
  --pn-success-bg:   #eef5ed;
  --pn-success-line: #cfe0cc;
  --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(31, 42, 34, .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(31, 42, 34, .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: var(--pn-primary-dark); 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: 20px; /* site heading font (DM Serif Text, 400) — a bit larger than Koopjes' 17px/900 sans */
  line-height: 1.2;
  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 v2.css; only dimensions shrink here so the card is a
   smaller copy of the archive-page card. Every rule starts with
   ".nw-v2 .popup_new__cards" so it outranks the ".nw-v2 .cart--product ..."
   rules (incl. their mobile overrides) on every page. */
.nw-v2 .popup_new__cards .cart--product {
  border-radius: 14px;
  gap: 0;
}
.nw-v2 .popup_new__cards .cart--product:hover {
  transform: none; /* the -2px hover lift misaligns cards in this tight grid */
}
.nw-v2 .popup_new__cards .nw-wishlist--card { top: 8px; right: 8px; }
.nw-v2 .popup_new__cards .nw-wishlist--card .alg-wc-wl-btn { width: 28px; height: 28px; }
.nw-v2 .popup_new__cards .nw-wishlist--card .nw-heart-icon { width: 14px; height: 14px; }
/* The keurmerk icon column has no room next to the packshot in these narrow cards. */
.nw-v2 .popup_new__cards .product-icons { display: none; }

.nw-v2 .popup_new__cards .cart__image { padding: 6px 6px 0; }
/* Fixed image box: every image gets the exact same height. */
.nw-v2 .popup_new__cards .ratioImage {
  height: 132px;
  padding: 34px 10px 2px;
}
.nw-v2 .popup_new__cards .marketing-label {
  top: 8px;
  left: 8px;
  min-height: 22px;
  padding: 4px 7px;
  font-size: 9px;
}

.nw-v2 .popup_new__cards .cart__info { padding: 6px 10px 12px; }
.nw-v2 .popup_new__cards .woocommerce-loop-product__title {
  font-size: 13px;
  line-height: 1.28;
  margin: 0 0 6px;
  min-height: calc(2 * 1.28em);
  max-height: calc(2 * 1.28em);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.nw-v2 .popup_new__cards .price-row { gap: 6px; margin: 0 0 8px; }
.nw-v2 .popup_new__cards .price-row__currency { font-size: 13px; margin-right: 3px; }
.nw-v2 .popup_new__cards .price-row__value { font-size: 15px; }
.nw-v2 .popup_new__cards .price-row__advice { gap: 3px; overflow: hidden; }
.nw-v2 .popup_new__cards .price-row__label { font-size: 9px; }
.nw-v2 .popup_new__cards .price-row__advice .price-row__amount { font-size: 10px; }

.nw-v2 .popup_new__cards .cart__info-box { gap: 6px; margin: 0 0 10px; }
.nw-v2 .popup_new__cards .badge {
  min-height: 20px;
  font-size: 10px;
  padding: 3px 6px;
}

.nw-v2 .popup_new__cards .cart--product .add_to_cart_button {
  gap: 5px;
  padding: 9px 8px;
  font-size: 13px;
  border-radius: 10px;
}
.nw-v2 .popup_new__cards .cart--product .add_to_cart_button:hover { transform: none; }
.nw-v2 .popup_new__cards .cart--product .add_to_cart_button svg {
  width: 15px;
  height: 15px;
}
/* "Toegevoegd!" flash state set by mini-cart-new.js */
.nw-v2 .popup_new__cards .cart--product .add_to_cart_button.added { background: #2f5937; }

/* ── 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; }
}