/* =============================================================================
 * SONOYA - nb-quickview.css
 * -----------------------------------------------------------------------------
 * Vue rapide produit (quickview-modal.php + quickview.js). Prefixe nb-qv-.
 *
 * Mobile-first : bottom sheet 94 dvh, galerie a defilement horizontal avec
 * scroll-snap, barre d'achat collee en bas. A partir de 1024 px : fenetre
 * centree de 1040 px en deux colonnes (galerie collante a gauche, contenu a
 * droite, barre d'achat en pied de colonne droite).
 *
 * S'appuie sur dialog.nb-dialog--bottom-sheet (nb-dialogs.css) et sur les
 * primitives nb-btn, nb-skeleton, nb-chip (nb-global.css).
 * ============================================================================= */

@layer components {

  /* ---------- Coquille ---------- */
  dialog.nb-qv > .nb-qv__panel {
    max-height: 94dvh;
    height: 94dvh;
  }
  .nb-qv__panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .nb-qv__header {
    display: flex;
    align-items: center;
    gap: var(--nb-space-3);
    padding: var(--nb-space-2) var(--nb-space-3) var(--nb-space-2) var(--nb-space-4);
    border-bottom: 1px solid var(--nb-color-border);
    flex-shrink: 0;
  }
  .nb-qv__header-label {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text-muted);
    & > i { font-size: 1.1rem; color: var(--nb-color-accent); }
  }
  .nb-qv__header-link {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-accent);
    text-decoration: none;
    white-space: nowrap;
    &:hover { text-decoration: underline; }
  }
  .nb-qv__close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-pill);
    background: var(--nb-color-surface);
    color: var(--nb-color-text);
    font-size: 1.1rem;
    cursor: pointer;
    &:hover { background: var(--nb-color-surface-alt); }
  }

  .nb-qv__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* ---------- Squelette / erreur ---------- */
  .nb-qv__skeleton { padding: 0 0 var(--nb-space-6); }
  .nb-qv__skeleton-media { aspect-ratio: 1; width: 100%; }
  .nb-qv__skeleton-body {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-3);
    padding: var(--nb-space-4);
  }
  .nb-qv__skeleton-line { height: 12px; border-radius: var(--nb-radius-xs); }
  .nb-qv__skeleton-line--lg { height: 18px; }
  .nb-qv__skeleton-price { height: 34px; width: 50%; border-radius: var(--nb-radius-xs); }

  .nb-qv__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nb-space-3);
    padding: var(--nb-space-10) var(--nb-space-6);
    text-align: center;
    & > i { font-size: 3rem; color: var(--nb-color-danger); }
  }
  .nb-qv__error-title { font-size: var(--nb-fs-lg); font-family: var(--nb-font-heading); }
  .nb-qv__error-text { color: var(--nb-color-text-muted); font-size: var(--nb-fs-sm); }

  /* ---------- Galerie ---------- */
  .nb-qv__gallery { position: relative; background: var(--nb-color-surface-sunk); }
  .nb-qv__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    aspect-ratio: 1;
    &::-webkit-scrollbar { display: none; }
  }
  .nb-qv__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    position: relative;
    display: grid;
    place-items: center;
    background: center / cover no-repeat;
    & > img { width: 100%; height: 100%; object-fit: contain; }
  }
  .nb-qv__noimg {
    display: grid;
    place-items: center;
    gap: var(--nb-space-2);
    color: var(--nb-color-text-muted);
    font-size: var(--nb-fs-sm);
    & > i { font-size: 3rem; }
  }
  .nb-qv__badges {
    position: absolute;
    top: var(--nb-space-3);
    left: var(--nb-space-3);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    z-index: 1;
    pointer-events: none;
  }
  .nb-qv__badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-bold);
    line-height: 1.3;
    border-radius: var(--nb-radius-xs);
    color: white;
    background: var(--nb-color-danger);
    &.is-prime { background: oklch(68% 0.22 145); color: oklch(18% 0.05 145); }
    &.is-flash { background: var(--nb-color-warning); color: oklch(20% 0.05 80); }
  }
  .nb-qv__counter {
    position: absolute;
    right: var(--nb-space-3);
    bottom: var(--nb-space-3);
    padding: 2px 8px;
    border-radius: var(--nb-radius-pill);
    background: oklch(0% 0 0 / 0.55);
    color: white;
    font-size: var(--nb-fs-xs);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
  }
  .nb-qv__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: none;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: oklch(100% 0 0 / 0.92);
    color: var(--nb-color-text-strong);
    box-shadow: var(--nb-shadow-sm);
    cursor: pointer;
    z-index: 1;
    &.is-prev { left: var(--nb-space-3); }
    &.is-next { right: var(--nb-space-3); }
    &:disabled { opacity: 0.35; cursor: default; }
  }
  .nb-qv__thumbs {
    display: flex;
    gap: var(--nb-space-2);
    padding: var(--nb-space-2) var(--nb-space-3);
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--nb-color-surface);
    &::-webkit-scrollbar { display: none; }
  }
  .nb-qv__thumb {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 2px solid var(--nb-color-border);
    border-radius: var(--nb-radius-sm);
    overflow: hidden;
    background: var(--nb-color-surface-sunk);
    cursor: pointer;
    & > img { width: 100%; height: 100%; object-fit: cover; }
    &.is-active { border-color: var(--nb-color-accent); }
  }

  /* ---------- Contenu ---------- */
  .nb-qv__info { padding: var(--nb-space-4) var(--nb-space-4) var(--nb-space-6); }
  .nb-qv__crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nb-space-2);
    margin-bottom: var(--nb-space-2);
    font-size: var(--nb-fs-xs);
    & a { color: var(--nb-color-text-muted); text-decoration: none; }
    & a:hover { color: var(--nb-color-accent); }
    & .is-brand { color: var(--nb-color-accent); font-weight: var(--nb-fw-semibold); }
  }
  .nb-qv__title {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-lg);
    font-weight: var(--nb-fw-bold);
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 var(--nb-space-2);
    color: var(--nb-color-text-strong);
  }
  .nb-qv__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nb-space-2) var(--nb-space-3);
    font-size: var(--nb-fs-xs);
    color: var(--nb-color-text-muted);
    margin-bottom: var(--nb-space-3);
  }
  .nb-qv__stars { color: var(--nb-color-warning); letter-spacing: 1px; }
  .nb-qv__stars-empty { color: var(--nb-color-border-strong); }
  .nb-qv__meta b { color: var(--nb-color-text-strong); }

  .nb-qv__price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--nb-space-3);
    margin-bottom: var(--nb-space-3);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-md);
    background: var(--nb-color-surface-alt);
  }
  .nb-qv__price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--nb-space-2); }
  .nb-qv__price-amount {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-xl);
    font-weight: var(--nb-fw-heavy);
    color: var(--nb-color-accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }
  .nb-qv__price-currency { font-size: var(--nb-fs-xs); font-weight: var(--nb-fw-bold); color: var(--nb-color-text-muted); }
  .nb-qv__price-old { font-size: var(--nb-fs-sm); color: var(--nb-color-text-muted); text-decoration: line-through; }
  .nb-qv__price-discount {
    padding: 2px 6px;
    background: var(--nb-color-danger);
    color: white;
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-bold);
    border-radius: var(--nb-radius-xs);
  }
  .nb-qv__price-savings { font-size: var(--nb-fs-xs); font-weight: var(--nb-fw-semibold); color: var(--nb-color-success-hover); }
  .nb-qv__countdown {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    font-size: var(--nb-fs-xs);
    color: var(--nb-color-danger);
    font-weight: var(--nb-fw-semibold);
    & > output { font-variant-numeric: tabular-nums; font-weight: var(--nb-fw-bold); }
  }
  .nb-qv__flash-bar {
    height: 6px;
    border-radius: var(--nb-radius-pill);
    background: var(--nb-color-danger-soft);
    overflow: hidden;
    & > span { display: block; height: 100%; background: var(--nb-color-danger); }
  }
  .nb-qv__stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-semibold);
    &.is-in { color: var(--nb-color-success-hover); }
    &.is-low { color: var(--nb-color-warning-hover, var(--nb-color-warning)); }
    &.is-out { color: var(--nb-color-danger); }
  }

  .nb-qv__section { margin-bottom: var(--nb-space-4); }
  .nb-qv__section-title {
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
    color: var(--nb-color-text-muted);
    margin: 0 0 var(--nb-space-2);
    & > span { color: var(--nb-color-text-strong); text-transform: none; letter-spacing: 0; }
  }
  .nb-qv__options { display: flex; flex-wrap: wrap; gap: var(--nb-space-2); }
  .nb-qv__chip {
    min-height: 36px;
    padding: 0 var(--nb-space-3);
    border: 1.5px solid var(--nb-color-border);
    border-radius: var(--nb-radius-sm);
    background: var(--nb-color-surface);
    color: var(--nb-color-text-strong);
    font-size: var(--nb-fs-sm);
    font-weight: var(--nb-fw-medium);
    cursor: pointer;
    &.is-selected { border-color: var(--nb-color-accent); background: var(--nb-color-accent-soft); font-weight: var(--nb-fw-semibold); }
    &.is-disabled { opacity: 0.45; text-decoration: line-through; cursor: not-allowed; }
  }
  .nb-qv__swatch {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 2px solid var(--nb-color-border);
    border-radius: var(--nb-radius-sm);
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--nb-color-surface);
    cursor: pointer;
    & > img { width: 100%; height: 100%; object-fit: cover; }
    & > span { width: 28px; height: 28px; border-radius: 50%; border: 1px solid oklch(0% 0 0 / 0.12); }
    &.is-selected { border-color: var(--nb-color-accent); box-shadow: 0 0 0 2px var(--nb-color-accent-soft); }
    &.is-disabled { opacity: 0.4; cursor: not-allowed; }
  }

  .nb-qv__highlights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--nb-fs-sm);
    & > li { display: flex; gap: var(--nb-space-2); align-items: flex-start; }
    & > li > i { color: var(--nb-color-success); margin-top: 2px; flex-shrink: 0; }
  }
  .nb-qv__desc {
    font-size: var(--nb-fs-sm);
    line-height: 1.6;
    color: var(--nb-color-text);
    max-height: 7.5em;
    overflow: hidden;
    position: relative;
    &.is-open { max-height: none; }
    &:not(.is-open)::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 2.5em;
      background: linear-gradient(to bottom, transparent, var(--nb-color-surface));
    }
    & p { margin: 0 0 var(--nb-space-2); }
    & h3 { font-size: var(--nb-fs-sm); margin: var(--nb-space-3) 0 var(--nb-space-1); }
  }
  .nb-qv__more {
    margin-top: var(--nb-space-1);
    background: none;
    border: 0;
    padding: 0;
    color: var(--nb-color-accent);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-semibold);
    cursor: pointer;
  }

  .nb-qv__seller {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: var(--nb-space-2) var(--nb-space-3);
    align-items: center;
    padding: var(--nb-space-3);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-md);
  }
  .nb-qv__seller-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--nb-color-accent-soft);
    color: var(--nb-color-accent);
    font-weight: var(--nb-fw-bold);
    font-size: var(--nb-fs-sm);
    overflow: hidden;
    & > img { width: 100%; height: 100%; object-fit: cover; }
  }
  .nb-qv__seller-name { display: flex; align-items: center; gap: 4px; font-weight: var(--nb-fw-semibold); font-size: var(--nb-fs-sm); color: var(--nb-color-text-strong); }
  .nb-qv__seller-name > i { color: var(--nb-color-info); }
  .nb-qv__seller-stats { font-size: var(--nb-fs-xs); color: var(--nb-color-text-muted); display: flex; flex-wrap: wrap; gap: var(--nb-space-2); }
  .nb-qv__seller-actions { grid-column: 1 / -1; display: flex; gap: var(--nb-space-2); }
  .nb-qv__seller-actions > * { flex: 1; min-height: 36px; font-size: var(--nb-fs-xs); }

  .nb-qv__delivery {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--nb-fs-sm);
    & > li { display: flex; gap: var(--nb-space-2); align-items: flex-start; }
    & > li > i { color: var(--nb-color-accent); margin-top: 2px; flex-shrink: 0; }
    & b { color: var(--nb-color-text-strong); }
  }
  .nb-qv__trust {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--nb-fs-xs);
    color: var(--nb-color-text-muted);
    & > span { display: flex; gap: 6px; align-items: center; }
    & > span > i { color: var(--nb-color-success); }
  }
  .nb-qv__fine { font-size: var(--nb-fs-xs); color: var(--nb-color-text-muted); display: flex; flex-wrap: wrap; gap: var(--nb-space-3); }

  /* ---------- Barre d'achat ---------- */
  .nb-qv__footer {
    display: flex;
    align-items: center;
    gap: var(--nb-space-2);
    padding: var(--nb-space-2) var(--nb-space-3) calc(var(--nb-space-2) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--nb-color-border);
    background: var(--nb-color-surface);
    flex-shrink: 0;
  }
  .nb-qv__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-sm);
    height: 44px;
    flex-shrink: 0;
  }
  .nb-qv__qty-btn {
    width: 38px;
    height: 100%;
    border: 0;
    background: none;
    color: var(--nb-color-text);
    font-size: 1rem;
    cursor: pointer;
    &:disabled { opacity: 0.35; cursor: default; }
  }
  .nb-qv__qty-value { min-width: 28px; text-align: center; font-weight: var(--nb-fw-bold); font-variant-numeric: tabular-nums; }
  .nb-qv__cta {
    flex: 1;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nb-space-2);
    white-space: nowrap;
  }
  .nb-qv__cta-price { font-weight: var(--nb-fw-heavy); font-variant-numeric: tabular-nums; }
  .nb-qv__cta-price:empty { display: none; }
  .nb-qv__icon-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-sm);
    background: var(--nb-color-surface);
    color: var(--nb-color-text);
    font-size: 1.25rem;
    text-decoration: none;
    cursor: pointer;
    &[aria-pressed="true"] { color: var(--nb-color-danger); border-color: var(--nb-color-danger); }
    &.nb-qv__icon-btn--whatsapp { color: oklch(60% 0.17 150); }
  }

  /* ---------- Tablette : plus d'air ---------- */
  @media (min-width: 640px) {
    .nb-qv__cta-price::before { content: "·"; margin-inline-end: var(--nb-space-2); opacity: 0.6; }
  }

  /* ---------- Desktop : fenetre centree 2 colonnes ---------- */
  @media (min-width: 1024px) {
    dialog.nb-qv > .nb-qv__panel {
      max-width: 1040px;
      height: auto;
      max-height: 88dvh;
    }
    .nb-qv__scroll { overflow: hidden; display: flex; flex-direction: column; }
    .nb-qv__content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 0;
      flex: 1;
    }
    .nb-qv__gallery {
      position: sticky;
      top: 0;
      align-self: start;
      border-inline-end: 1px solid var(--nb-color-border);
    }
    .nb-qv__nav { display: grid; }
    .nb-qv__thumbs { flex-wrap: wrap; }
    .nb-qv__thumb { flex-basis: 60px; width: 60px; height: 60px; }
    .nb-qv__info {
      overflow-y: auto;
      max-height: calc(88dvh - 57px - 69px);
      padding: var(--nb-space-5) var(--nb-space-6);
    }
    .nb-qv__title { font-size: var(--nb-fs-xl); }
    .nb-qv__footer { padding-inline: var(--nb-space-6); }
    .nb-qv__skeleton { display: grid; grid-template-columns: 1fr 1fr; }
    .nb-qv__skeleton-media { aspect-ratio: auto; min-height: 480px; }
  }
}