/** Shopify CDN: Minification failed

Line 182:0 Unexpected "}"
Line 249:0 Unexpected "}"

**/
/* ==========================================================================
   LA CELLULE DE CASIER — et le rayonnage qui la contient
   Le composant qu'on touche deux cents fois par visite.

   Refonte V2.1 : fin de la grille soudée au filet. La cellule est une CARTE
   qui flotte sur le papier — rayon --nm-r-md, ombre --nm-o-carte AU REPOS,
   vraie gouttière entre voisines. Au survol elle se soulève de 3 px et
   l'ombre s'élargit (--nm-o-cell). C'est la sensation V22 / ours.market :
   du mobilier posé sur le papier, pas un mur de casiers.

   Ce qui ne bouge pas : la réglette de prix à hauteur fixe et son liseré
   rouge de 3 px (la signature), le bouton d'ajout en pilule de 44 px dans le
   puits d'image, le nettoyage de titre côté Liquid, tous les crochets
   data-* du moteur de panier.
   ========================================================================== */

/* ── LE RAYONNAGE ─────────────────────────────────────────────────────────
   Plus de fond-filet ni de border-block : les cartes sont SÉPARÉES par une
   vraie gouttière — 12 px au doigt, 20 px à la souris. L'ombre au repos de
   chaque carte fait le travail de structure que le filet faisait, sans la
   sévérité. `container-type` reste indispensable : le badge se règle sur la
   largeur de SA cellule, pas sur celle de l'écran. */
.nm-rayonnage{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--nm-s3);
  container-type:inline-size;
}
@media (min-width:761px){
  .nm-rayonnage{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--nm-s5); }
}
@media (min-width:1101px){ .nm-rayonnage{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (min-width:1360px){ .nm-rayonnage--dense{ grid-template-columns:repeat(5, minmax(0,1fr)); } }
/* Le rayonnage reste DANS la gouttière de page, comme la V22 : des cartes qui
   flottent se posent sur une marge, elles ne touchent pas le bord. (L'ancien
   débord pleine largeur appartenait au montage « meuble soudé ».) */

/* ── LE LINÉAIRE — variante qui défile horizontalement ────────────────────
   Mêmes cartes, même gouttière, scroll-snap conservé. Le padding-block rend
   aux ombres (repos ET survol) la place que le conteneur défilant leur
   volerait ; la marge négative la reprend à la mise en page, donc rien ne
   bouge autour du rail. */
.nm-lineaire{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:minmax(158px, 42vw);
  gap:var(--nm-s3);
  overflow-x:auto; overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--nm-pad);
  scrollbar-width:none;
  container-type:inline-size;
  padding-block:var(--nm-s10);
  margin-block:calc(-1 * var(--nm-s10));
}
.nm-lineaire::-webkit-scrollbar{ display:none; }
.nm-lineaire > *{ scroll-snap-align:start; }
@media (min-width:761px){
  .nm-lineaire{ grid-auto-columns:minmax(210px, 26vw); gap:var(--nm-s5); }
}
@media (min-width:1101px){ .nm-lineaire{ grid-auto-columns:minmax(240px, 21vw); } }
@media (max-width:760px){
  /* Le rail file jusqu'au bord de l'écran — c'est ce qui dit « ça continue » —
     mais la première carte reste alignée sur la gouttière de page. */
  .nm-lineaire{
    margin-inline:calc(var(--nm-pad) * -1);
    padding-inline:var(--nm-pad);
  }
}

/* ── LA CELLULE ───────────────────────────────────────────────────────────
   grid-template-rows: auto 1fr auto + margin-top:auto sur la réglette : dans
   une rangée, toutes les cellules ont la même hauteur et TOUTES LES RÉGLETTES
   TOMBENT SUR LA MÊME LIGNE OPTIQUE. Cette ligne-là ne se négocie pas.

   La carte porte son ombre AU REPOS : c'est ce qui la détache du papier.
   Au survol, elle se soulève de 3 px et l'ombre suit — sortie douce,
   ~0,4 s sur la courbe expo. */
.nm-cell{
  background:var(--nm-etal);
  display:grid; grid-template-rows:auto 1fr auto;
  position:relative;
  min-width:0;
  border-radius:var(--nm-r-md);
  box-shadow:var(--nm-o-carte);
  transition:box-shadow var(--nm-d4) var(--nm-e-sortie),
             transform  var(--nm-d4) var(--nm-e-sortie);
}
@media (hover:hover){
  .nm-cell:hover{
    z-index:var(--nm-z-cell-hover);
    box-shadow:var(--nm-o-cell);
    transform:translateY(-3px);
  }
}
/* Pas d'équivalent :active au doigt : la carte entière est traversée par le
   défilement, un soulèvement au contact clignoterait à chaque scroll. Le
   retour tactile vit sur les vrais contrôles (bouton, compteur), plus bas. */

/* ── LE PUITS D'IMAGE ─────────────────────────────────────────────────────
   Il épouse les deux coins hauts de la carte ; overflow:hidden y contient le
   zoom de survol ET donne son arrondi à la cellule sans photo.
   container-type crée un bloc conteneur pour les descendants absolute ET
   fixed. Le badge, le bouton et le compteur sont enfants directs, donc sans
   effet. Mais un widget d'application tierce en position:fixed y serait
   piégé : à tester avec les applications réellement installées. */
.nm-cell__puits{
  aspect-ratio:1; position:relative; overflow:hidden;
  background:var(--nm-etal); container-type:inline-size;
  border-radius:var(--nm-r-md) var(--nm-r-md) 0 0;
}
.nm-cell__lien-img{
  display:block; width:100%; height:100%;
  padding:clamp(10px, 2.4vw, 22px);
}
.nm-cell__lien-img img{
  width:100%; height:100%; object-fit:contain;
  transition:transform var(--nm-d-panneau) var(--nm-e-sortie);
}
/* object-fit:contain : un catalogue d'épicerie mélange des formes
   irréconciliables (bouteille de 3 l, boîte de gaufrettes, pot trapu).
   `cover` les rognerait tous différemment. `contain` + carré + padding donne à
   chacun sa boîte d'air et une ligne d'horizon identique d'une cellule à
   l'autre. Aucun mix-blend-mode : les packshots sont déjà sur blanc franc. */
@media (hover:hover){
  .nm-cell:hover .nm-cell__lien-img img{ transform:scale(1.045); }
}
/* Aucune rotation ici : elle est réservée aux tuiles de rayon, pour que les
   deux gestes ne se confondent pas. */

/* Cellule sans photo — état DESSINÉ, jamais un carré gris ni une icône cassée.
   Le fond --nm-rail hérite l'arrondi du puits par le clip. */
.nm-cell__vide{
  position:absolute; inset:0; display:grid; place-content:center; gap:var(--nm-s2);
  background:var(--nm-rail); text-align:center; padding:var(--nm-s4);
}
.nm-cell__vide svg{ width:44px; height:auto; margin-inline:auto; color:var(--nm-filet); }
.nm-cell__vide span{
  font-family:var(--nm-sans); font-size:var(--nm-t-label); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--nm-encre-45);
}

/* ── LE BLOC NOM ──────────────────────────────────────────────────────────
   La marque et la contenance ont été RETIRÉES du titre par le Liquid et
   reposées ailleurs : plus aucun doublon, et le titre net tient en 2 lignes
   pour 691 produits sur 697. */
.nm-cell__nom{
  display:grid; align-content:start; gap:2px;
  padding:10px 12px 8px;
  min-height:var(--nm-tap); min-width:var(--nm-tap);
}
.nm-cell__sur{
  font-family:var(--nm-sans); font-size:var(--nm-t-label); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--nm-encre-45);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* La ligne de surtitre n'est JAMAIS vide (marque, sinon sous-rayon) : sans
   cela la hauteur de cellule varierait d'une colonne à l'autre. */
.nm-cell__titre{
  font-family:var(--nm-serif); font-size:var(--nm-t-nom);
  line-height:var(--nm-lh-2); font-weight:600; color:var(--nm-encre);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
html:lang(ru) .nm-cell__titre,
html:lang(uk) .nm-cell__titre{ -webkit-line-clamp:3; }
@media (hover:hover){
  .nm-cell__nom:hover .nm-cell__titre{ text-decoration:underline; text-underline-offset:3px; }
}
/* Équivalent tactile du soulignement : le lien est un vrai contrôle, il doit
   accuser l'appui au doigt comme il accuse le survol à la souris. */
.nm-cell__nom:active .nm-cell__titre{ text-decoration:underline; text-underline-offset:3px; }

/* align-items:baseline et non center : le pied du chiffre et celui de l'unité
   tombent au même endroit, ce que center ne ferait pas à deux corps différents. */
@media (hover:hover){
  .nm-cell:hover 
}

.nm-cell__prix{
  font-size:var(--nm-t-prix); font-weight:700; color:var(--nm-encre);
  white-space:nowrap; flex:none;
}
.nm-cell__prix s{ color:var(--nm-encre-45); font-weight:400; margin-right:var(--nm-s2); }

/* ── LE BADGE — un seul, jamais deux ──────────────────────────────────────
   Décollé du coin (8 px des deux bords) et arrondi en --nm-r-xs : posé SUR la
   carte, plus soudé à son angle. box-shadow:inset et non border pour les
   variantes filaires : la variante n'agrandit pas la boîte d'un pixel et
   reste alignée avec ses sœurs. */
.nm-badge{
  position:absolute; top:var(--nm-s2); left:var(--nm-s2); z-index:2;
  max-width:calc(100% - 2 * var(--nm-s2)); pointer-events:none;
  padding:5px 9px; border-radius:var(--nm-r-xs);
  font-family:var(--nm-sans); font-size:var(--nm-t-label); line-height:var(--nm-lh-1);
  font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  display:inline-flex; align-items:center;
  box-shadow:var(--nm-o-douce);
}
.nm-badge--promo   { background:var(--nm-rouge); color:var(--nm-sur-rouge); white-space:nowrap; }
.nm-badge--rupture { background:var(--nm-encre); color:var(--nm-creme); }
.nm-badge--derniers{ background:var(--nm-etal);  color:var(--nm-encre-70);
                     box-shadow:inset 0 0 0 1px var(--nm-filet), var(--nm-o-douce); }
.nm-badge--top     { background:var(--nm-sauge); color:var(--nm-encre); }
.nm-badge--surgele,
.nm-badge--frais   { background:var(--nm-etal);  color:var(--nm-sauge-texte);
                     box-shadow:inset 0 0 0 1px var(--nm-sauge), var(--nm-o-douce); }
.nm-badge--halal   { background:var(--nm-etal);  color:var(--nm-encre-70);
                     box-shadow:inset 0 0 0 1px var(--nm-filet), var(--nm-o-douce); }
.nm-badge--promo em{
  font-style:normal; font-weight:700; margin-left:4px; padding-left:4px;
  border-left:1px solid color-mix(in srgb, var(--nm-sur-rouge) 38%, transparent);
  font-variant-numeric:tabular-nums; flex:none;
}

/* La container query — indispensable en trilingue. Le badge s'adapte à la
   largeur DE SA CELLULE, pas à celle de l'écran : la même cellule vit à quatre
   largeurs différentes sur la même page. Sans cela « НЕМАЄ В НАЯВНОСТІ » ne
   tient pas dans une cellule en deux colonnes. */
@container (max-width: 11em){
  /* Masquer le mot d'un badge sans chiffre laissait une coquille colorée
     vide en haut de carte. À l'étroit : la promo garde son chiffre, la
     rupture et le surgelé gardent leur mot compacté, tous les autres badges
     disparaissent entièrement. */
  .nm-badge--top, .nm-badge--frais, .nm-badge--halal, .nm-badge--derniers{ display:none; }
  .nm-badge__mot{ display:none; }
  .nm-badge--promo em{ border-left:0; margin-left:0; padding-left:0; }
  .nm-badge--rupture .nm-badge__mot,
  .nm-badge--surgele .nm-badge__mot{
    display:inline; font-size:var(--nm-t-micro); letter-spacing:.04em;
  }
}
@supports not (container-type: inline-size){
  @media (max-width:760px){ .nm-badge__mot{ display:none; } }
}

/* Le dépli est enfermé dans hover:hover : AU DOIGT, le bouton reste un rond
   compact de 44 px qui ne mange pas le packshot dans une cellule de 169 px.
   C'est la décision qui rend le mobile meilleur que le desktop.
   max-width:14rem et non 10rem : « ДОБАВИТЬ » dépasse 160 px et serait coupé
   par overflow:hidden sans aucun signe visible. */
@media (hover:hover){
  .nm-cell:hover 
  
}

@media (hover:hover){
  
}

/* ── RUPTURE ──────────────────────────────────────────────────────────────
   L'indisponibilité est factuelle, pas agressive : badge en pleine encre et
   non en rouge. Le prix est conservé. */
.nm-cell--rupture .nm-cell__lien-img img{ opacity:.5; }

@media (hover:hover){
  
}

/* ── PERFORMANCE ──────────────────────────────────────────────────────────
   Le mot-clé `auto` mémorise la hauteur réellement rendue : sans lui, la barre
   de défilement saute quand on remonte. Les valeurs sont données par point de
   rupture ET par langue — une seule valeur ferait sauter le défilement sur
   deux langues sur trois. */
.nm-cell{ content-visibility:auto; }
@media (min-width:1101px){ .nm-cell{ contain-intrinsic-size:auto 432px; } }
@media (min-width:761px) and (max-width:1100px){ .nm-cell{ contain-intrinsic-size:auto 400px; } }
@media (max-width:760px){ .nm-cell{ contain-intrinsic-size:auto 272px; } }
html:lang(ru) .nm-cell, html:lang(uk) .nm-cell{ contain-intrinsic-size:auto 452px; }
@media (max-width:760px){
  html:lang(ru) .nm-cell, html:lang(uk) .nm-cell{ contain-intrinsic-size:auto 292px; }
}
/* La première rangée porte le LCP : elle ne doit jamais être différée. */
.nm-rayonnage > .nm-cell:nth-child(-n+8),
.nm-lineaire  > .nm-cell:nth-child(-n+4){ content-visibility:visible; }


/* ── LE CORPS FAÇON V22 ───────────────────────────────────────────────────
   Marque, titre, prix, ligne de stock, grand bouton. C'est la carte que le
   client préfère : lisible, naturelle, e-commerce alimentaire assumé. */
.nm-cell__corps{
  display:grid; align-content:start; gap:var(--nm-s1);
  padding:var(--nm-s3) var(--nm-s4) var(--nm-s4);
}
.nm-cell__prix{
  margin:var(--nm-s1) 0 0;
  font-family:var(--nm-sans); font-weight:700; font-size:1.125rem;
  color:var(--nm-encre);
}
.nm-cell__prix s{ color:var(--nm-encre-45); font-weight:400; margin-right:var(--nm-s2); }
.nm-cell__stock{
  margin:0;
  font-family:var(--nm-sans); font-size:var(--nm-t-petit); font-weight:600;
  color:var(--nm-sauge-texte);
}
.nm-cell__btn{
  margin-top:var(--nm-s2);
  width:100%; min-height:var(--nm-tap);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--nm-r-pilule);
  background:var(--nm-rouge); color:var(--nm-sur-rouge);
  font-family:var(--nm-sans); font-weight:700; font-size:var(--nm-t-petit);
  letter-spacing:.02em;
  transition:background var(--nm-d2), transform var(--nm-d2) var(--nm-e-sortie);
}
@media (hover:hover){
  .nm-cell__btn:hover{ background:var(--nm-rouge-actif); transform:translateY(-1px); }
}
.nm-cell__btn:active{ background:var(--nm-rouge-actif); }
.nm-cell__btn.is-loading{ opacity:.6; pointer-events:none; }
.nm-cell__btn--filaire{
  background:var(--nm-etal); color:var(--nm-encre-70);
  box-shadow:inset 0 0 0 1.5px var(--nm-filet);
}
@media (hover:hover){
  .nm-cell__btn--filaire:hover{ background:var(--nm-encre); color:var(--nm-creme); transform:none; }
}
.nm-cell__btn--filaire:active{ background:var(--nm-encre); color:var(--nm-creme); }

/* Le puits redevient simple : l'achat vit dans le corps désormais. */
.nm-cell__puits{ border-radius:var(--nm-r-md) var(--nm-r-md) 0 0; }


/* ── LE VOL VERS LE PANIER — le retour du geste ─────────────────────────── */
.fly-to-cart{
  position:fixed; z-index:var(--nm-z-vol); pointer-events:none;
  border-radius:var(--nm-r-md); overflow:hidden;
  background:var(--nm-etal); box-shadow:var(--nm-o-cell);
  transition:transform .65s var(--nm-e-bascule), opacity .6s ease;
}
.fly-to-cart img{ width:100%; height:100%; object-fit:contain; }

@keyframes nm-bump{
  0%{ transform:scale(1); } 35%{ transform:scale(1.35); } 100%{ transform:scale(1); }
}
[data-cart-count].cart-bump{ animation:nm-bump .45s var(--nm-e-sortie); }
@media (prefers-reduced-motion: reduce){
  .fly-to-cart{ display:none; }
  [data-cart-count].cart-bump{ animation:none; }
}

/* ── LE SÉLECTEUR DE CARTE — la pilule rouge qui a appris à compter ──────
   Après l'ajout, « Ajouter » devient − / quantité / + : même pilule, même
   rouge, mêmes 44 px. L'identité Nash, pas le bloc noir de la référence. */
.nm-cell__stepper{
  width:100%; min-height:var(--nm-tap);
  display:flex; align-items:stretch;
  border-radius:var(--nm-r-pilule);
  background:var(--nm-rouge); color:var(--nm-sur-rouge);
  overflow:hidden;
  margin-top:var(--nm-s2);
}
.nm-cell__stepper[hidden]{ display:none; }
.nm-cell__stepper-btn{
  flex:1; min-width:var(--nm-tap);
  display:grid; place-items:center;
  color:inherit; font-family:var(--nm-sans); font-size:1.2rem; font-weight:700;
  transition:background var(--nm-d1);
}
@media (hover:hover){
  .nm-cell__stepper-btn:hover{ background:var(--nm-rouge-actif); }
}
.nm-cell__stepper-btn:active{ background:var(--nm-rouge-actif); }
.nm-cell__stepper-btn:disabled{ opacity:.45; cursor:not-allowed; }
.nm-cell__stepper-qte{
  flex:none; min-width:2.2ch; align-self:center; text-align:center;
  font-family:var(--nm-sans); font-weight:800; font-size:var(--nm-t-corps);
}

/* ── LA NOTIFICATION D'AJOUT — en bas, discrète, utile ─────────────────── */
.nm-toast-achat{
  position:fixed; z-index:var(--nm-z-toast);
  left:50%; transform:translate(-50%, 16px);
  bottom:calc(var(--nm-s4) + var(--nm-sa-bottom));
  display:flex; align-items:center; gap:var(--nm-s3);
  max-width:min(440px, calc(100vw - 2 * var(--nm-s4)));
  padding:var(--nm-s2) var(--nm-s3);
  background:var(--nm-etal);
  border-radius:var(--nm-r-lg);
  box-shadow:var(--nm-o-panneau);
  opacity:0; pointer-events:none;
  transition:opacity var(--nm-d3) ease, transform var(--nm-d4) var(--nm-e-sortie);
}
.nm-toast-achat.is-visible{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.nm-toast-achat__img{
  width:48px; height:48px; object-fit:contain; flex:none;
  background:var(--nm-etal); border-radius:var(--nm-r-sm);
}
.nm-toast-achat__texte{ display:grid; gap:1px; min-width:0; }
.nm-toast-achat__texte strong{
  font-family:var(--nm-serif); font-size:var(--nm-t-petit); font-weight:600;
  color:var(--nm-encre);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.nm-toast-achat__texte > span{
  font-family:var(--nm-sans); font-size:var(--nm-t-micro); color:var(--nm-sauge-texte);
  font-weight:600;
}
.nm-toast-achat__lien{
  flex:none; margin-left:auto;
  min-height:36px; padding-inline:var(--nm-s3);
  display:inline-flex; align-items:center;
  border-radius:var(--nm-r-pilule);
  background:var(--nm-rouge); color:var(--nm-sur-rouge);
  font-family:var(--nm-sans); font-size:var(--nm-t-micro); font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
}
@media (hover:hover){ .nm-toast-achat__lien:hover{ background:var(--nm-rouge-actif); } }
.nm-toast-achat__lien:active{ background:var(--nm-rouge-actif); }
@media (prefers-reduced-motion: reduce){
  .nm-toast-achat{ transition:opacity var(--nm-d2) ease; transform:translate(-50%,0); }
}

/* ── LES MESSAGES DU MOTEUR ────────────────────────────────────────────────
   theme.js écrit ici « Ajouté au panier », « Vous avez atteint le stock
   disponible », les erreurs de ligne… L'élément existait mais restait
   `hidden` et sans style : TOUS ces messages étaient invisibles (constaté
   à la revue finale). Même position et même langage que la notification
   d'achat ; l'avertissement prend un liseré sauge, l'erreur un liseré rouge. */
.toast{
  position:fixed; z-index:var(--nm-z-toast);
  left:50%; transform:translate(-50%, 16px);
  bottom:calc(var(--nm-s4) + var(--nm-sa-bottom));
  max-width:min(440px, calc(100vw - 2 * var(--nm-s4)));
  padding:var(--nm-s3) var(--nm-s5);
  border-radius:var(--nm-r-md);
  background:var(--nm-encre); color:var(--nm-creme);
  font-family:var(--nm-sans); font-size:var(--nm-t-label); font-weight:600;
  box-shadow:var(--nm-o-flot);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:opacity var(--nm-d2) ease, transform var(--nm-d2) ease,
             visibility var(--nm-d2) ease;
}
.toast.is-visible{ opacity:1; visibility:visible; transform:translate(-50%, 0); }
.toast--warn{ box-shadow:var(--nm-o-flot), inset 0 0 0 2px var(--nm-sauge); }
.toast--error{ box-shadow:var(--nm-o-flot), inset 0 0 0 2px var(--nm-rouge-clair); }
@media (prefers-reduced-motion: reduce){ .toast{ transition:opacity var(--nm-d2) ease; transform:translate(-50%,0); } }