/**
 * NDPE Cards – Premium card system with 3 skins.
 * Design: Envato Elements quality + Framer interaction feel.
 * @package NDPE
 */

/* ═══════════════════════════════════════════════════════
   SHARED BUTTON SYSTEM
   ═══════════════════════════════════════════════════════ */
.ndpe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--ndpe-font);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--ndpe-btn-radius, 8px);
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  border: 2px solid transparent;
  line-height: 1;
  padding: 10px 20px;
  font-size: 0.875rem;
}
.ndpe-btn--filled {
  background: var(--ndpe-primary, #e85d04);
  color: #fff;
  border-color: var(--ndpe-primary, #e85d04);
  flex: 1;
}
.ndpe-btn--filled:hover {
  background: #dc4c00;
  border-color: #dc4c00;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(232, 93, 4, 0.35);
  color: #fff;
}
.ndpe-btn--filled:active { transform: translateY(0); box-shadow: none; }

.ndpe-btn--outline {
  background: transparent;
  color: var(--ndpe-primary, #e85d04);
  border-color: currentColor;
}
.ndpe-btn--outline:hover {
  background: rgba(232, 93, 4, 0.05);
  transform: translateY(-1px);
  color: #e85d04;
}

/* ═══════════════════════════════════════════════════════
   SHARED CARD BASE
   ═══════════════════════════════════════════════════════ */
.ndpe-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--ndpe-card-radius, 12px);
  overflow: hidden;
  will-change: transform;
  position: relative;
}

/* ── Thumbnail ── */
.ndpe-card-thumb {
  position: relative;
  overflow: hidden;
  height: var(--ndpe-img-height, 220px);
  background: #f0f0ee;
  flex-shrink: 0;
}
.ndpe-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: var(--ndpe-img-fit, cover);
  object-position: top center;
  display: block;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* ── Badges ── */
.ndpe-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 5px;
  font-family: var(--ndpe-font);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
  pointer-events: none;
  z-index: 2;
}
.ndpe-badge--sale {
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(135deg, #e85d04 0%, #f97316 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(232, 93, 4, 0.3);
}
.ndpe-badge--category {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(15, 15, 15, 0.65);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ── Hover Overlay ── */
.ndpe-card-hover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15, 15, 15, 0.4) 100%);
  opacity: 0;
  transition: opacity 280ms ease;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Preview trigger on card hover ── */
.ndpe-card-footer .ndpe-btn-preview-trigger {
  padding: 8px;
  border-radius: var(--ndpe-btn-radius, 8px);
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  background: transparent;
  color: #6b7280;
  flex: 0 0 auto;
  font-size: 0;
  line-height: 0;
  transition: all 180ms ease;
}
.ndpe-card-footer .ndpe-btn-preview-trigger svg { display: block; }
.ndpe-card-footer .ndpe-btn-preview-trigger:hover {
  border-color: var(--ndpe-primary, #e85d04);
  color: var(--ndpe-primary, #e85d04);
  background: rgba(232, 93, 4, 0.04);
}

/* ── Card Body ── */
.ndpe-card-body {
  padding: 14px 16px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ndpe-card-title {
  font-family: var(--ndpe-font);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ndpe-text, #0f0f0f);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ndpe-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease;
}
.ndpe-card-title a:hover { color: var(--ndpe-primary, #e85d04); }

.ndpe-card-rating {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ndpe-card-rating .star-rating { font-size: 0.8125rem; color: #f59e0b; }

.ndpe-card-price {
  font-family: var(--ndpe-font);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ndpe-text, #0f0f0f);
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: auto;
}
.ndpe-card-price del {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ndpe-text-faint, #9ca3af);
}
.ndpe-card-price ins {
  text-decoration: none;
  color: var(--ndpe-text, #0f0f0f);
}

/* ── Card Footer ── */
.ndpe-card-footer {
  padding: 10px 16px 16px;
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* ═══════════════════════════════════════════════════════
   SKIN 1: DEFAULT — Clean & Confident
   ═══════════════════════════════════════════════════════ */
.ndpe-card--default {
  background: var(--ndpe-card-bg, #fff);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05),
              0 1px 2px rgba(0, 0, 0, 0.03);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 280ms ease;
}
.ndpe-card--default:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08),
              0 8px 20px rgba(0, 0, 0, 0.06),
              0 2px 6px rgba(0, 0, 0, 0.04);
  border-color: rgba(232, 93, 4, 0.12);
}
.ndpe-card--default:hover .ndpe-card-thumb img { transform: scale(1.04); }
.ndpe-card--default:hover .ndpe-card-hover-overlay { opacity: 1; }

/* ═══════════════════════════════════════════════════════
   SKIN 2: GLASSMORPHISM — Frosted Glass
   ═══════════════════════════════════════════════════════ */
.ndpe-card--glassmorphism {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(24px) saturate(200%) brightness(105%);
  -webkit-backdrop-filter: blur(24px) saturate(200%) brightness(105%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07),
              inset 0 1px 0 rgba(255, 255, 255, 0.6),
              inset 0 -1px 0 rgba(0, 0, 0, 0.03);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ndpe-card--glassmorphism:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.ndpe-card--glassmorphism:hover .ndpe-card-thumb img { transform: scale(1.04); }
.ndpe-card--glassmorphism:hover .ndpe-card-hover-overlay { opacity: 1; }
.ndpe-card--glassmorphism .ndpe-card-footer { border-top: 1px solid rgba(255, 255, 255, 0.3); }

/* ═══════════════════════════════════════════════════════
   SKIN 3: CREATIVE — Bold & Vibrant
   ═══════════════════════════════════════════════════════ */
.ndpe-card--creative {
  background: var(--ndpe-card-bg, #fff);
  border: none;
  border-bottom: 3px solid var(--ndpe-primary, #e85d04);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ndpe-card--creative:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 24px 64px rgba(232, 93, 4, 0.12),
              0 8px 24px rgba(0, 0, 0, 0.08);
}
.ndpe-card--creative .ndpe-card-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(232, 93, 4, 0.15), rgba(249, 115, 22, 0.08));
  opacity: 0;
  transition: opacity 400ms ease;
  z-index: 1;
}
.ndpe-card--creative:hover .ndpe-card-thumb::after { opacity: 1; }
.ndpe-card--creative:hover .ndpe-card-thumb img { transform: scale(1.06); }
.ndpe-card--creative:hover .ndpe-card-hover-overlay { opacity: 1; }
.ndpe-card--creative .ndpe-card-title { font-size: 1rem; font-weight: 700; }
.ndpe-card--creative .ndpe-card-price ins,
.ndpe-card--creative .ndpe-card-price .amount {
  background: linear-gradient(135deg, #e85d04, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════════════════════
   IMAGE HOVER SCROLL EFFECT
   ═══════════════════════════════════════════════════════ */
.ndpe-card-thumb[data-scroll] img {
  object-position: top center !important;
  height: auto !important;
  min-height: 100% !important;
  transition: transform 3000ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.ndpe-card:hover .ndpe-card-thumb[data-scroll] img {
  transform: translateY(var(--ndpe-scroll-offset, -20%)) !important;
}

/* ═══════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════ */
.ndpe-grid-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 20px;
  text-align: center;
  color: var(--ndpe-text-faint, #9ca3af);
}
.ndpe-grid-empty svg { opacity: 0.3; }
.ndpe-grid-empty p { font-size: 0.9375rem; margin: 0; }

/* ═══════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  .ndpe-card--default {
    --ndpe-card-bg: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.07);
  }
  .ndpe-card--default:hover { border-color: rgba(232, 93, 4, 0.2); }
  .ndpe-card--default .ndpe-card-thumb { background: #222; }
  .ndpe-card-title, .ndpe-card-title a { color: #f0f0f0; }
  .ndpe-card-title a:hover { color: #e85d04; }
  .ndpe-card-price, .ndpe-card-price ins { color: #f0f0f0; }
  .ndpe-card-price del { color: #6b7280; }
  .ndpe-badge--category { background: rgba(255, 255, 255, 0.12); }

  .ndpe-card--glassmorphism {
    background: rgba(30, 30, 30, 0.65);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .ndpe-card--creative {
    --ndpe-card-bg: #1a1a1a;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }
  .ndpe-card-footer .ndpe-btn-preview-trigger {
    border-color: rgba(255, 255, 255, 0.1);
    color: #9ca3af;
  }
}

/* ═══════════════════════════════════════════════════════
   PATCH 1: PREVIEW BUTTON — CARD FOOTER REDESIGN
   ═══════════════════════════════════════════════════════ */

/*
  Layout: price on left + circular preview icon button on right,
  Buy Now button full-width below.
  Achieved via CSS-only flexbox reordering — no PHP/HTML changes.
*/

/* Card footer: column flex with proper spacing */
.ndpe-card-footer {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 12px 14px 14px !important;
}

/* Price elements fill available row space */
.ndpe-card-footer .price,
.ndpe-card-footer .woocommerce-Price-amount {
  flex: 1;
}

/* Preview trigger → circular icon button */
.ndpe-card-footer .ndpe-btn-preview-trigger,
.ndpe-card-footer [data-ndpe-preview] {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  background: #fff !important;
  color: #6b7280 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  order: 10;
}

/* Hover: orange fill with glow */
.ndpe-card-footer .ndpe-btn-preview-trigger:hover,
.ndpe-card-footer [data-ndpe-preview]:hover {
  background: #e85d04 !important;
  border-color: #e85d04 !important;
  color: #fff !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 14px rgba(232, 93, 4, 0.4) !important;
}

/* Tooltip */
.ndpe-card-footer .ndpe-btn-preview-trigger::after,
.ndpe-card-footer [data-ndpe-preview]::after {
  content: 'Preview';
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0f0f0f;
  color: #fff;
  font-size: 0.6875rem !important;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease;
  letter-spacing: 0.03em;
}
.ndpe-card-footer .ndpe-btn-preview-trigger:hover::after,
.ndpe-card-footer [data-ndpe-preview]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Price + preview icon sit in the same row */
.ndpe-card-pricing,
.ndpe-card-price {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

/* ── PATCH 1 Dark Mode additions ── */
@media (prefers-color-scheme: dark) {
  .ndpe-card-footer .ndpe-btn-preview-trigger,
  .ndpe-card-footer [data-ndpe-preview] {
    background: #222 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #9ca3af !important;
  }
  .ndpe-card-footer .ndpe-btn-preview-trigger:hover,
  .ndpe-card-footer [data-ndpe-preview]:hover {
    background: #e85d04 !important;
    border-color: #e85d04 !important;
    color: #fff !important;
  }
  .ndpe-card-footer .ndpe-btn-preview-trigger::after,
  .ndpe-card-footer [data-ndpe-preview]::after {
    background: #f0f0f0;
    color: #0f0f0f;
  }
}

/* ═══════════════════════════════════════════════════════
   PATCH 5: Image Scroll Hover Effect
   ═══════════════════════════════════════════════════════ */

.ndpe-card-thumb[data-scroll] {
  overflow: hidden !important;
}
.ndpe-card-thumb[data-scroll] img {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  transform: translateY(0) !important;
  transition: transform 3200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  will-change: transform;
}
.ndpe-card:hover .ndpe-card-thumb[data-scroll] img {
  transform: translateY(var(--ndpe-scroll-offset, -28%)) !important;
}

/* Non-scroll cards: preserve default scale */
.ndpe-card-thumb:not([data-scroll]) img {
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.ndpe-card:hover .ndpe-card-thumb:not([data-scroll]) img {
  transform: scale(1.04) !important;
}

/* ═══════════════════════════════════════════════════════
   PATCH 6: Theme Presets
   ═══════════════════════════════════════════════════════ */

/* ── DARK MODE PRESET ── */
.ndpe-grid-wrap.ndpe-theme-dark,
.ndpe-shop-wrap.ndpe-theme-dark {
  background-color: #111111;
  padding: 20px;
  border-radius: 16px;
}
.ndpe-theme-dark .ndpe-card--default,
.ndpe-theme-dark .ndpe-card--creative {
  background: #1c1c1e !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
.ndpe-theme-dark .ndpe-card--default:hover {
  border-color: rgba(232, 93, 4, 0.25) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
}
.ndpe-theme-dark .ndpe-card-title,
.ndpe-theme-dark .ndpe-card-title a { color: #f0f0f0 !important; }
.ndpe-theme-dark .ndpe-card-title:hover,
.ndpe-theme-dark .ndpe-card-title a:hover { color: #e85d04 !important; }
.ndpe-theme-dark .ndpe-card-meta { color: #6b7280 !important; }
.ndpe-theme-dark .ndpe-card-price,
.ndpe-theme-dark .ndpe-card-price ins,
.ndpe-theme-dark .ndpe-card-price .amount { color: #f0f0f0 !important; }
.ndpe-theme-dark .ndpe-card-footer {
  background: #1c1c1e !important;
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}
.ndpe-theme-dark .ndpe-card-footer .ndpe-btn-preview-trigger {
  background: #2c2c2e !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #9ca3af !important;
}
.ndpe-theme-dark .ndpe-card-thumb { background: #222 !important; }

/* ── MIDNIGHT BLACK PRESET ── */
.ndpe-grid-wrap.ndpe-theme-midnight,
.ndpe-shop-wrap.ndpe-theme-midnight {
  background-color: #000000;
  padding: 24px;
  border-radius: 20px;
}
.ndpe-theme-midnight .ndpe-card--default {
  background: #0a0a0a !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}
.ndpe-theme-midnight .ndpe-card--default:hover {
  border-color: rgba(232, 93, 4, 0.2) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6) !important;
}
.ndpe-theme-midnight .ndpe-card-title,
.ndpe-theme-midnight .ndpe-card-title a { color: #ffffff !important; }
.ndpe-theme-midnight .ndpe-card-footer {
  background: #0a0a0a !important;
  border-top-color: rgba(255, 255, 255, 0.04) !important;
}
.ndpe-theme-midnight .ndpe-card-price,
.ndpe-theme-midnight .ndpe-card-price ins,
.ndpe-theme-midnight .ndpe-card-price .amount { color: #ffffff !important; }
.ndpe-theme-midnight .ndpe-card-meta { color: #4b5563 !important; }
.ndpe-theme-midnight .ndpe-card-thumb { background: #111 !important; }
.ndpe-theme-midnight .ndpe-card-footer .ndpe-btn-preview-trigger {
  background: #111 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #6b7280 !important;
}

/* ── WARM CREAM PRESET ── */
.ndpe-grid-wrap.ndpe-theme-warm,
.ndpe-shop-wrap.ndpe-theme-warm {
  background-color: #faf7f2;
  padding: 20px;
  border-radius: 16px;
}
.ndpe-theme-warm .ndpe-card--default {
  background: #fffdf9 !important;
  border-color: rgba(180, 140, 90, 0.12) !important;
  box-shadow: 0 1px 4px rgba(120, 80, 20, 0.06) !important;
}
.ndpe-theme-warm .ndpe-card--default:hover {
  border-color: rgba(232, 93, 4, 0.18) !important;
  box-shadow: 0 12px 40px rgba(120, 80, 20, 0.1) !important;
}
.ndpe-theme-warm .ndpe-card-footer {
  background: #fffdf9 !important;
  border-top-color: rgba(180, 140, 90, 0.08) !important;
}
.ndpe-theme-warm .ndpe-card-thumb { background: #f5f0e8 !important; }

/* ── LIGHT PRESET (default — ensures white background always) ── */
.ndpe-grid-wrap.ndpe-theme-light .ndpe-card--default {
  background: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════
   PATCH 7: Glass Preview Button on Image
   ═══════════════════════════════════════════════════════ */

.ndpe-card-preview-glass {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);

  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;

  /* Frosted glass */
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);

  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 100px;

  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.14),
    0 1px 4px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);

  font-family: var(--ndpe-font, 'Space Grotesk', sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0f0f0f;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;

  opacity: 0;
  transition:
    opacity 250ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
    background 180ms ease,
    box-shadow 180ms ease;

  z-index: 10;
  pointer-events: none;
}

/* Show on card hover */
.ndpe-card:hover .ndpe-card-preview-glass {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Button own hover — orange tint */
.ndpe-card-preview-glass:hover {
  background: rgba(232, 93, 4, 0.88) !important;
  border-color: rgba(232, 93, 4, 0.5) !important;
  color: #ffffff !important;
  box-shadow:
    0 6px 20px rgba(232, 93, 4, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transform: translateX(-50%) translateY(-2px) !important;
}
.ndpe-card-preview-glass:hover svg { stroke: #ffffff; }

.ndpe-card-preview-glass svg {
  flex-shrink: 0;
  transition: stroke 180ms ease;
}

/* Dark presets: adapt glass for dark cards */
.ndpe-theme-dark .ndpe-card-preview-glass,
.ndpe-theme-midnight .ndpe-card-preview-glass {
  background: rgba(20, 20, 20, 0.75);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.ndpe-theme-dark .ndpe-card-preview-glass:hover,
.ndpe-theme-midnight .ndpe-card-preview-glass:hover {
  background: rgba(232, 93, 4, 0.9) !important;
}

/* Hide old footer preview button */
.ndpe-card-footer .ndpe-btn-preview-trigger,
.ndpe-card-footer [class*="preview"]:not(.ndpe-card-preview-glass) {
  display: none !important;
}

/* Ensure thumb has position context */
.ndpe-card-thumb {
  position: relative !important;
}

/* ════ FIX: List View — Button + Description ════ */

/* ── Button: compact, fixed height, never stretches ── */
.ndpe-list-view .ndpe-card .ndpe-btn--filled,
.ndpe-list-view .ndpe-card .ndpe-card-buy-btn,
.ndpe-list-view .ndpe-card .ndpe-btn {
  width: auto !important;
  min-width: 110px !important;
  max-width: 150px !important;
  padding: 7px 18px !important;
  height: 36px !important;
  line-height: 1 !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  align-self: center !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Footer: price + button stacked, compact, fixed width ── */
.ndpe-list-view .ndpe-card .ndpe-card-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 12px 16px !important;
  min-width: 150px !important;
  max-width: 160px !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}

/* ── Price: right-aligned in list view ── */
.ndpe-list-view .ndpe-card .ndpe-card-pricing,
.ndpe-list-view .ndpe-card .ndpe-card-price {
  text-align: right !important;
  white-space: nowrap !important;
}
.ndpe-list-view .ndpe-card .ndpe-card-pricing .price ins .woocommerce-Price-amount,
.ndpe-list-view .ndpe-card .ndpe-card-pricing .price .woocommerce-Price-amount,
.ndpe-list-view .ndpe-card .ndpe-card-price .price ins .woocommerce-Price-amount,
.ndpe-list-view .ndpe-card .ndpe-card-price .price .woocommerce-Price-amount {
  font-size: 1.0625rem;
  font-weight: 800;
}

/* ── Description: hidden in grid, shown in list ── */
.ndpe-card-list-desc {
  display: none;
}
.ndpe-list-view .ndpe-card .ndpe-card-list-desc {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 0.8125rem !important;
  line-height: 1.55 !important;
  color: #6b7280 !important;
  margin: 4px 0 2px !important;
  max-width: 100% !important;
  font-weight: 400 !important;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .ndpe-list-view .ndpe-card .ndpe-card-list-desc {
    color: #9ca3af !important;
  }
}

/* ════════════════════════════════════════════════════════════
   LIVE PREVIEW — Liquid Glass Button
   Always visible. No hover-only. Positioned over card image
   in grid view. Inline in list view.
════════════════════════════════════════════════════════════ */

/* ── Grid View: Position wrapper over the image ── */
.ndpe-card-thumb {
  position: relative !important;
}

.ndpe-card-thumb .ndpe-card-preview-wrap {
  position: absolute !important;
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  width: auto !important;
  pointer-events: auto !important;
}

/* ── List View: Inline positioning ── */
.ndpe-list-view .ndpe-card .ndpe-card-preview-wrap {
  position: static !important;
  transform: none !important;
  display: inline-flex !important;
  margin: 4px 0 6px !important;
}

/* ── THE LIQUID GLASS BUTTON ── */
.ndpe-preview-glass-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 16px 8px 12px !important;
  border-radius: 100px !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  font-family: var(--ndpe-font, -apple-system, BlinkMacSystemFont, sans-serif) !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;

  /* Liquid glass core */
  background: rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(14px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35) !important;

  /* Glass border */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.30) inset,
    0 1px 0 0 rgba(255, 255, 255, 0.45) inset,
    0 4px 20px rgba(0, 0, 0, 0.20),
    0 1px 4px rgba(0, 0, 0, 0.15) !important;

  /* Smooth transition */
  transition:
    background 200ms ease,
    box-shadow 200ms ease,
    transform 150ms ease !important;

  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Hover — glass becomes more opaque */
.ndpe-preview-glass-btn:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.45) inset,
    0 1px 0 0 rgba(255, 255, 255, 0.60) inset,
    0 6px 24px rgba(0, 0, 0, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.18) !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Active/press */
.ndpe-preview-glass-btn:active {
  transform: translateY(0px) scale(0.97) !important;
  background: rgba(255, 255, 255, 0.22) !important;
}

/* Icon */
.ndpe-preview-glass-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 15px !important;
  height: 15px !important;
  opacity: 0.92 !important;
}
.ndpe-preview-glass-icon svg {
  display: block !important;
  stroke: #ffffff !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)) !important;
}

/* Label */
.ndpe-preview-glass-label {
  display: inline !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

/* ── List view variant: muted, no glass ── */
.ndpe-list-view .ndpe-card .ndpe-preview-glass-btn {
  background: rgba(15, 15, 15, 0.06) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #374151 !important;
  text-shadow: none !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08) inset,
    0 1px 4px rgba(0, 0, 0, 0.06) !important;
  padding: 6px 14px 6px 10px !important;
  font-size: 0.75rem !important;
}
.ndpe-list-view .ndpe-card .ndpe-preview-glass-btn:hover {
  background: rgba(232, 93, 4, 0.08) !important;
  box-shadow:
    0 0 0 1px rgba(232,93,4,0.20) inset,
    0 2px 8px rgba(232,93,4,0.10) !important;
  color: #e85d04 !important;
}
.ndpe-list-view .ndpe-card .ndpe-preview-glass-icon svg {
  stroke: currentColor !important;
  filter: none !important;
}
.ndpe-list-view .ndpe-card .ndpe-preview-glass-label {
  color: inherit !important;
}

/* ── Override old hover-only classes ── */
.ndpe-hover-only,
.ndpe-card-overlay .ndpe-preview-btn,
.ndpe-card:not(:hover) .ndpe-preview-btn,
.ndpe-card-actions {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}
.ndpe-card .ndpe-card-overlay {
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  pointer-events: none !important;
}
.ndpe-card .ndpe-card-overlay * {
  pointer-events: auto !important;
}

/* ── Dark mode glass adjustments ── */
@media (prefers-color-scheme: dark) {
  .ndpe-list-view .ndpe-card .ndpe-preview-glass-btn {
    background: rgba(255,255,255,0.06) !important;
    color: #d1d5db !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.08) inset,
      0 1px 4px rgba(0,0,0,0.15) !important;
  }
  .ndpe-list-view .ndpe-card .ndpe-preview-glass-btn:hover {
    background: rgba(232,93,4,0.12) !important;
    color: #e85d04 !important;
    box-shadow:
      0 0 0 1px rgba(232,93,4,0.25) inset,
      0 2px 8px rgba(232,93,4,0.15) !important;
  }
}