/* =============================================================================
 * SONOYA - panier.css
 * -----------------------------------------------------------------------------
 * Page panier multi-vendeur (ecran 8). Prefixe ct-* (D-011 #22).
 *
 * Ce fichier ne contient QUE du layout et les blocs propres a la page.
 * La ligne de panier est le composant canonique nb-cart-line (D-030), la card
 * produit des suggestions est nb-product-card : aucun style de l'un ou de l'autre
 * ne doit apparaitre ici.
 *
 * Mobile-first : une colonne, le recapitulatif passe sous les colis et une barre
 * de paiement collante apparait au scroll. Deux colonnes a partir de 1024px.
 * ============================================================================= */

@layer pages {

  /* ===============================================
   * PAGE
   * =============================================== */
  .ct-page {
    max-width: var(--nb-container-max-narrow);
    margin-inline: auto;
    padding-inline: var(--nb-container-pad);
    padding-bottom: calc(var(--nb-mobile-nav-h) + 72px);
  }
  @media (min-width: 1024px) {
    .ct-page {
      max-width: var(--nb-container-max);
      padding-bottom: var(--nb-space-16);
    }
  }

  .ct-breadcrumb { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ct-breadcrumb::-webkit-scrollbar { display: none; }
  .ct-breadcrumb__list { display: contents; }

  .ct-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--nb-space-4);
  }
  .ct-header__title {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-xl);
    font-weight: var(--nb-fw-heavy);
    color: var(--nb-color-text-strong);
    letter-spacing: var(--nb-ls-tighter);
  }
  @media (min-width: 768px) {
    .ct-header__title { font-size: var(--nb-fs-2xl); }
  }
  .ct-header__count {
    font-size: var(--nb-fs-sm);
    color: var(--nb-color-text-muted);

    & > strong { color: var(--nb-color-text-strong); font-variant-numeric: tabular-nums; }
  }

  /* Explication de l'eclatement en colis : rassure au lieu d'inquieter */
  .ct-split-note {
    display: flex;
    align-items: flex-start;
    gap: var(--nb-space-2);
    padding: var(--nb-space-3) var(--nb-space-4);
    margin-bottom: var(--nb-space-4);
    background: var(--nb-color-surface);
    border: 1px solid var(--nb-color-border);
    border-inline-start: 3px solid var(--nb-color-info);
    border-radius: var(--nb-radius-md);
    box-shadow: var(--nb-shadow-xs);
    font-size: var(--nb-fs-xs);
    line-height: var(--nb-lh-snug);
    color: var(--nb-color-text);

    & > i {
      flex-shrink: 0;
      font-size: 1.15rem;
      margin-top: 1px;
      color: var(--nb-color-info);
    }
  }


  /* ===============================================
   * LAYOUT
   * =============================================== */
  .ct-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nb-space-5);
  }
  @media (min-width: 1024px) {
    .ct-layout {
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: var(--nb-space-8);
      align-items: start;
    }
  }

  .ct-parcels {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-4);
    min-width: 0;
  }


  /* ===============================================
   * COLIS (1 par vendeur x mode de livraison, D-005)
   * =============================================== */
  .ct-parcel {
    background: var(--nb-color-surface);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-lg);
    box-shadow: var(--nb-shadow-sm);
    overflow: hidden;
  }

  .ct-parcel__head {
    display: flex;
    align-items: center;
    gap: var(--nb-space-3);
    flex-wrap: wrap;
    padding: var(--nb-space-3) var(--nb-space-4);
    background: var(--nb-color-surface-alt);
    border-bottom: 1px solid var(--nb-color-border);
  }
  .ct-parcel__index {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--nb-space-2);
    background: var(--nb-color-text);
    color: var(--nb-color-text-inverse);
    border-radius: var(--nb-radius-xs);
    font-size: var(--nb-fs-2xs);
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wide);
    white-space: nowrap;
  }

  /* L'identite vendeur et la pastille de mode d'expedition sont des COMPOSANTS
   * CANONIQUES (D-030) : .nb-seller-identity et .nb-fulfillment-tag, definis
   * dans nb-seller-identity.css. Ne rien redefinir ici.
   * Seul le placement dans l'en-tete de colis appartient a ce scope. */
  .ct-parcel__head > .nb-fulfillment-tag { margin-inline-start: auto; }

  /* Progression vers la livraison gratuite du vendeur */
  .ct-parcel__freeship {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-1);
    padding: var(--nb-space-2) var(--nb-space-4);
    background: var(--nb-color-surface-alt);
    border-bottom: 1px solid var(--nb-color-border-alt);
  }
  .ct-parcel__freeship-text {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-1);
    font-size: var(--nb-fs-2xs);
    font-weight: var(--nb-fw-bold);
    color: var(--nb-color-warning-hover);

    & > i { font-size: 1.05rem; }
  }
  .ct-parcel__freeship.is-reached .ct-parcel__freeship-text { color: var(--nb-color-success-hover); }
  .ct-parcel__freeship-bar {
    height: 4px;
    background: var(--nb-color-surface-sunk);
    border-radius: var(--nb-radius-pill);
    overflow: hidden;

    & > span {
      display: block;
      height: 100%;
      background: var(--nb-color-warning);
      border-radius: var(--nb-radius-pill);
      transition: width var(--nb-dur-slow) var(--nb-ease-out-quart);
    }
  }
  .ct-parcel__freeship.is-reached .ct-parcel__freeship-bar > span { background: var(--nb-color-success); }

  .ct-parcel__lines { padding-inline: var(--nb-space-4); }

  .ct-parcel__foot {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-1);
    padding: var(--nb-space-3) var(--nb-space-4);
    border-top: 1px solid var(--nb-color-border);
    background: var(--nb-color-surface-alt);
  }
  .ct-parcel__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nb-space-3);
    font-size: var(--nb-fs-sm);
    color: var(--nb-color-text-muted);

    & > strong {
      color: var(--nb-color-text-strong);
      font-variant-numeric: tabular-nums;
    }
  }
  .ct-parcel__free { color: var(--nb-color-success); }


  /* ===============================================
   * RECAPITULATIF (un seul paiement pour N colis)
   * =============================================== */
  .ct-summary {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-3);
    padding: var(--nb-space-4);
    background: var(--nb-color-surface);
    border: 1px solid var(--nb-color-border);
    border-radius: var(--nb-radius-lg);
    box-shadow: var(--nb-shadow-sm);
  }
  @media (min-width: 1024px) {
    .ct-summary {
      position: sticky;
      top: calc(var(--nb-header-menu-h) + var(--nb-space-4));
      box-shadow: var(--nb-shadow-sm);
    }
  }
  .ct-summary__title {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-md);
    font-weight: var(--nb-fw-heavy);
    color: var(--nb-color-text-strong);
  }

  .ct-promo {
    display: flex;
    gap: var(--nb-space-2);
  }
  .ct-promo__input {
    flex: 1;
    min-width: 0;
    padding: var(--nb-space-2) var(--nb-space-3);
    border: 1.5px solid var(--nb-color-border);
    border-radius: var(--nb-radius-sm);
    background: var(--nb-color-surface);
    font-size: var(--nb-fs-sm);
  }
  .ct-promo__input:focus-visible {
    outline: none;
    border-color: var(--nb-color-accent);
    box-shadow: var(--nb-focus-ring);
  }
  .ct-promo__btn {
    flex-shrink: 0;
    padding: var(--nb-space-2) var(--nb-space-4);
    border-radius: var(--nb-radius-sm);
    background: var(--nb-color-accent-soft);
    color: var(--nb-color-accent-hover);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wide);
    white-space: nowrap;
    transition: background var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .ct-promo__btn:hover { background: var(--nb-color-accent); color: var(--nb-color-accent-contrast); }
  .ct-promo__btn:focus-visible { outline: none; box-shadow: var(--nb-focus-ring); }

  .ct-summary__rows {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-2);
    padding-block: var(--nb-space-3);
    border-block: 1px dashed var(--nb-color-border);
  }
  .ct-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nb-space-3);
    font-size: var(--nb-fs-sm);

    & > dt { color: var(--nb-color-text-muted); }
    & > dd {
      color: var(--nb-color-text-strong);
      font-weight: var(--nb-fw-semibold);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
  }
  .ct-summary__row--savings > dd { color: var(--nb-color-success); }

  .ct-summary__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nb-space-3);

    & > span {
      font-size: var(--nb-fs-sm);
      font-weight: var(--nb-fw-bold);
      color: var(--nb-color-text-strong);
    }
    & > strong {
      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: var(--nb-ls-tight);
      white-space: nowrap;
    }
  }

  .ct-summary__cta {
    justify-content: center;
    padding-block: var(--nb-space-3);
    font-size: var(--nb-fs-sm);
  }
  .ct-summary__continue {
    align-self: center;
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-semibold);
    color: var(--nb-color-text-muted);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    transition: color var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .ct-summary__continue:hover { color: var(--nb-color-accent); }

  /* Confiance : escrow + moyens de paiement */
  .ct-trust {
    display: flex;
    flex-direction: column;
    gap: var(--nb-space-2);
    padding-top: var(--nb-space-3);
    border-top: 1px solid var(--nb-color-border-alt);
  }
  .ct-trust__escrow {
    display: flex;
    align-items: flex-start;
    gap: var(--nb-space-2);
    font-size: var(--nb-fs-2xs);
    line-height: var(--nb-lh-snug);
    color: var(--nb-color-text-muted);

    & > i { flex-shrink: 0; color: var(--nb-color-success); font-size: 1.1rem; }
  }
  .ct-trust__label {
    font-size: var(--nb-fs-2xs);
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wider);
    color: var(--nb-color-text-faint);
  }
  .ct-trust__pays {
    display: flex;
    gap: var(--nb-space-1);
    flex-wrap: wrap;
  }
  .ct-trust__pay {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--nb-space-2);
    border-radius: var(--nb-radius-xs);
    font-size: var(--nb-fs-2xs);
    font-weight: var(--nb-fw-bold);
    letter-spacing: var(--nb-ls-wide);
  }
  .ct-trust__pay--om   { background: color-mix(in oklch, oklch(75% 0.17 60) 20%, var(--nb-color-surface)); color: oklch(52% 0.16 55); }
  .ct-trust__pay--momo { background: color-mix(in oklch, oklch(85% 0.17 95) 26%, var(--nb-color-surface)); color: oklch(48% 0.11 90); }
  .ct-trust__pay--cod  { background: var(--nb-color-success-soft); color: var(--nb-color-success-hover); }
  .ct-trust__pay--card { background: var(--nb-color-info-soft);    color: var(--nb-color-info-hover); }


  /* ===============================================
   * SUGGESTIONS (cards canoniques)
   * =============================================== */
  .ct-suggested { margin-top: var(--nb-space-8); }
  .ct-suggested__title {
    display: inline-flex;
    align-items: center;
    gap: var(--nb-space-2);
    margin-bottom: var(--nb-space-3);
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-lg);
    font-weight: var(--nb-fw-heavy);
    color: var(--nb-color-text-strong);
    letter-spacing: var(--nb-ls-tighter);

    & > i { color: var(--nb-color-accent); }
  }

  /* Meme regle que les autres rails : fraction du conteneur, jamais de pixels */
  .ct-rail {
    --ct-rail-cols: 2;
    --ct-rail-gap: var(--nb-space-2);

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(
      (100% - (var(--ct-rail-cols) - 1) * var(--ct-rail-gap)) / var(--ct-rail-cols)
    );
    gap: var(--ct-rail-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-block: 2px;
  }
  .ct-rail::-webkit-scrollbar { display: none; }
  .ct-rail > .nb-product-card { scroll-snap-align: start; }
  @media (min-width: 560px) {
    .ct-rail { --ct-rail-cols: 3; --ct-rail-gap: var(--nb-space-3); }
  }
  @media (min-width: 900px) {
    .ct-rail { --ct-rail-cols: 4; }
  }
  @media (min-width: 1440px) {
    .ct-rail { --ct-rail-cols: 5; --ct-rail-gap: var(--nb-space-4); }
  }


  /* ===============================================
   * PANIER VIDE
   * =============================================== */
  .ct-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nb-space-3);
    padding: var(--nb-space-16) var(--nb-space-4);
    text-align: center;

    & > i {
      font-size: 3.5rem;
      color: var(--nb-color-text-disabled);
    }
  }
  .ct-empty__title {
    font-family: var(--nb-font-heading);
    font-size: var(--nb-fs-lg);
    font-weight: var(--nb-fw-heavy);
    color: var(--nb-color-text-strong);
  }
  .ct-empty__text {
    font-size: var(--nb-fs-sm);
    color: var(--nb-color-text-muted);
    max-width: 44ch;
  }


  /* ===============================================
   * BARRE DE PAIEMENT COLLANTE (mobile)
   * =============================================== */
  .ct-sticky {
    position: fixed;
    inset-inline: 0;
    bottom: var(--nb-mobile-nav-h);
    z-index: var(--nb-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--nb-space-3);
    padding: var(--nb-space-2) var(--nb-space-3);
    padding-bottom: max(var(--nb-space-2), env(safe-area-inset-bottom));
    background: var(--nb-color-surface);
    border-top: 1px solid var(--nb-color-border-strong);
    box-shadow: var(--nb-shadow-lg);
    transform: translateY(calc(100% + var(--nb-mobile-nav-h)));
    transition: transform var(--nb-dur-slow) var(--nb-ease-out-expo);
  }
  .ct-sticky.is-visible { transform: translateY(0); }
  @media (min-width: 1024px) {
    .ct-sticky { display: none; }
  }
  .ct-sticky__total {
    display: flex;
    flex-direction: column;
    min-width: 0;

    & > span {
      font-size: var(--nb-fs-2xs);
      color: var(--nb-color-text-muted);
      text-transform: uppercase;
      letter-spacing: var(--nb-ls-wide);
    }
    & > strong {
      font-family: var(--nb-font-heading);
      font-size: var(--nb-fs-md);
      font-weight: var(--nb-fw-heavy);
      color: var(--nb-color-accent);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
  }
  .ct-sticky__cta {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nb-space-2);
    padding: var(--nb-space-3);
    background: var(--nb-color-accent);
    color: var(--nb-color-accent-contrast);
    border-radius: var(--nb-radius-md);
    font-size: var(--nb-fs-xs);
    font-weight: var(--nb-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--nb-ls-wide);
    white-space: nowrap;
    transition: background var(--nb-dur-fast) var(--nb-ease-standard);
  }
  .ct-sticky__cta:hover { background: var(--nb-color-accent-hover); }
  .ct-sticky__cta:focus-visible { outline: none; box-shadow: var(--nb-focus-ring); }
}