/** Shopify CDN: Minification failed

Line 278:0 Unexpected "<"
Line 365:0 Unexpected "<"

**/
/* =====================================================================
   LES OFFRES PAR QUANTITE — definition unique, ne pas dupliquer ailleurs
   ---------------------------------------------------------------------
   Ce bloc a ete reecrit entierement le 27/08/2026 : les passes successives
   avaient empile des regles contradictoires (position:static ici,
   position:absolute la), et chaque correction en cassait une autre.

   🔴 Ce qu'il faut savoir sur ce theme, tout est invisible dans les reglages :
   - AUCUN input radio dans ces cartes. L'etat vit dans la classe
     `.quantity-break--selected`. Le rond est dessine en CSS.
   - le nombre et le titre (« 2 boxes ») sont dans le MEME noeud : on masque ce
     titre et on promeut la banniere de l'offre a sa place.
   - la banniere n'est PAS dans le conteneur titre-et-prix, c'est un FRERE
     place en haut et centre : il faut l'ancrer explicitement.
   - `additional_class` n'est pas reporte sur l'element.
   ===================================================================== */

/* --- la carte --------------------------------------------------------- */
.quantity-break.card{
  position:relative;overflow:visible!important;
  border:2px solid #E4E7EE!important;border-radius:13px!important;
  background:#fff!important;
  padding:17px 16px 17px 46px!important;
  display:flex!important;align-items:center!important;min-height:76px;
  transition:border-color .15s,background .15s}
.quantity-break.card:hover{border-color:#FFB593!important}
.quantity-break.quantity-break--selected{
  border-color:#FF6B2C!important;background:#FFF4EE!important}

/* --- le rond de choix, dessine ---------------------------------------- */
.quantity-break.card::before{
  content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;border:2px solid #C7CCD8;background:#fff}
.quantity-break.quantity-break--selected::before{
  border-color:#FF6B2C;background:#FF6B2C;
  box-shadow:inset 0 0 0 4px #fff,0 0 0 1px #FF6B2C}

/* --- le titre de l'offre, ancre a cote du rond ------------------------- */
.quantity-break .quantity-break__banner{
  position:absolute!important;left:46px!important;top:50%!important;
  transform:translateY(-50%)!important;
  width:auto!important;max-width:56%!important;margin:0!important;padding:0!important;
  background:none!important;border:0!important;border-radius:0!important;
  color:#181A2E!important;font-size:18px!important;font-weight:800!important;
  letter-spacing:0!important;text-transform:none!important;line-height:1.2!important;
  text-align:left!important;justify-content:flex-start!important;
  overflow:visible!important;text-overflow:clip!important;z-index:1}
.quantity-break .quantity-break__banner span{
  display:inline!important;white-space:normal!important;color:inherit!important}

/* le titre natif et la description font doublon */
.quantity-break__title{display:none!important}
.quantity-break__description{display:none!important}
.quantity-break__title_and_description-container{
  width:0!important;min-width:0!important;flex:0 0 0!important;
  overflow:visible!important;position:static!important}
.quantity-break__title-and-badge-container{
  width:0!important;overflow:visible!important;position:static!important;display:block!important}

/* --- le prix, en noir, cale a droite ---------------------------------- */
.quantity-break__main-content{margin-left:auto!important;width:auto!important}
.quantity-break__content{width:auto!important}
.quantity-break__price-and-title-container{
  display:flex!important;flex-direction:row!important;align-items:center!important;
  justify-content:flex-end!important;gap:12px!important;width:auto!important}
.quantity-break__price-container{
  flex:0 0 auto;text-align:right!important;white-space:nowrap;align-items:flex-end!important}
.quantity-break__price-container .price,
.quantity-break__price-container .price *{
  color:#181A2E!important;font-weight:800!important;font-size:20px!important}
.quantity-break__price-container .price--compare,
.quantity-break__price-container s,
.quantity-break__price-container .price s{
  color:#9AA0B4!important;font-weight:600!important;font-size:14px!important;
  text-decoration:line-through}
.quantity-break__price-container_unit-price{
  display:block!important;color:#5A5F7D!important;font-size:12.5px!important;
  font-weight:600!important;margin-top:2px!important;text-align:right!important}

/* --- le ruban, ancre au coin ------------------------------------------ */
.quantity-break .badge--small{
  z-index:4;
  height:auto!important;min-height:0!important;width:auto!important;
  background:#FF6B2C!important;color:#fff!important;
  font-size:11.5px!important;font-weight:800!important;letter-spacing:.01em!important;
  text-transform:none!important;padding:5px 12px!important;
  border-radius:8px 8px 0 8px!important;border:0!important;
  white-space:nowrap!important;margin:0!important;line-height:1.25!important;
  display:inline-block!important;overflow:visible!important}
.quantity-break .badge--small:empty{display:none!important}

/* --- les cartes qui portent un selecteur de coloris -------------------
   Elles sont plus hautes : un titre centre verticalement tomberait pile sur
   le selecteur. On le remonte en haut et on libere la place. */
/* 🔴 On NE detecte PAS par `:has(select)` : le theme laisse les balises
   <select> dans le DOM meme quand le selecteur est desactive, masquees et de
   hauteur nulle. La regle s'appliquait donc a des fiches sans coloris et y
   ajoutait un espace inutile. La classe `wt-coloris` est posee explicitement
   sur le SEUL gabarit dont le selecteur est actif. */
/* 🔴 30/08 : cette regle portait sur TOUTES les cartes du gabarit, alors que
   le selecteur de coloris n'est rendu que dans la carte SELECTIONNEE. Les
   autres gardaient 46 px de padding en haut pour un selecteur absent : leur
   titre et leur prix flottaient hors du centre, visible sur le Talking Farm
   Barn. On restreint donc a `--selected`, les autres restent centrees. */
.wt-coloris .quantity-break.card.quantity-break--selected{
  padding-top:46px!important;align-items:flex-start!important}
.wt-coloris .quantity-break.card.quantity-break--selected .quantity-break__banner{
  top:16px!important;transform:none!important;max-width:calc(100% - 62px)!important}
.wt-coloris .quantity-break.card.quantity-break--selected::before{
  top:23px!important;transform:none!important}

@media (max-width:749px){
  .quantity-break.card{padding:16px 14px 16px 42px!important;min-height:72px}
  .quantity-break.card::before{left:14px;width:19px;height:19px}
  .quantity-break .quantity-break__banner{left:42px!important;font-size:16.5px!important;
    max-width:52%!important}
  .quantity-break__price-container .price,
  .quantity-break__price-container .price *{font-size:18px!important}
  .quantity-break .badge--small{font-size:10.5px!important;padding:4px 10px!important}
  .wt-coloris .quantity-break.card.quantity-break--selected{padding-top:44px!important}
  .wt-coloris .quantity-break.card.quantity-break--selected .quantity-break__banner{
    max-width:calc(100% - 56px)!important}
}

/* --- 2. le choix de version, en cartes --------------------------- */
.wt-sets .variant-picker__option-values{
  display:flex!important;flex-direction:column!important;
  align-items:stretch!important;gap:18px!important;width:100%}
.wt-sets .variant-picker__option{width:100%}
.wt-sets .variant-picker__option-value{
  position:relative;width:100%!important;display:block;
  margin:0!important;padding:0!important;box-sizing:border-box}
.wt-sets .variant-picker__option-value input{position:absolute;opacity:0;width:0;height:0}
.wt-sets .variant-picker__option-value label{
  display:flex!important;align-items:center;gap:13px;
  width:100%!important;max-width:100%!important;margin:0!important;
  box-sizing:border-box;min-height:92px;
  padding:14px 16px!important;border:2px solid #E4E7EE!important;
  border-radius:15px!important;background:#fff!important;color:#181A2E!important;
  cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.wt-sets .wt-radio{flex:none;width:20px;height:20px;border-radius:50%;
  border:2px solid #C7CCD8;background:#fff}
.wt-sets input:checked + label .wt-radio{
  border-color:#FF6B2C;background:#FF6B2C;box-shadow:inset 0 0 0 4px #fff}
.wt-sets .wt-vig{flex:none;width:66px;height:66px;border-radius:11px;
  background:#F6F7F9 center/cover no-repeat}
.wt-sets .wt-txt{display:flex;flex-direction:column;gap:3px;
  min-width:0;flex:1 1 auto;padding-right:8px}
.wt-sets .wt-nom{font-weight:800;font-size:15px;line-height:1.2}
.wt-sets .wt-ligne{font-weight:500;font-size:12.5px;color:#5A5F7D;
  line-height:1.35;overflow-wrap:anywhere}
.wt-sets .wt-prix{margin-left:auto;text-align:right;flex:0 0 auto;
  min-width:88px;line-height:1.15}
.wt-sets .wt-actuel{display:block;font-weight:900;font-size:20px;color:#FF6B2C}
.wt-sets .wt-barre{display:block;font-weight:600;font-size:14px;
  color:#9AA0B4;text-decoration:line-through}
.wt-sets .wt-bad{position:absolute;top:-12px;right:16px;z-index:2;
  font-size:10.5px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;color:#fff;background:#FF6B2C;white-space:nowrap}
.wt-sets .wt-bad--sombre{background:#181A2E}
.wt-sets input:checked + label{
  border-color:#FF6B2C!important;border-width:3px!important;background:#FFF6F2!important}
.wt-sets .variant-picker__option-value:hover label{border-color:#FFB593!important}
.wt-sets .variant-picker__option-name{font-weight:800;margin-bottom:10px;font-size:14px}

/* --- 3. les stories, centrees partout ---------------------------- */
.stories, .stories__list{justify-content:center!important}

@media (max-width:749px){
  .wt-sets .variant-picker__option-values{gap:17px!important}
  .wt-sets .variant-picker__option-value label{
    padding:12px 13px!important;gap:11px;min-height:86px}
  .wt-sets .wt-vig{width:58px;height:58px}
  .wt-sets .wt-nom{font-size:14px}
  .wt-sets .wt-ligne{font-size:12px}
  .wt-sets .wt-actuel{font-size:18px}
  .wt-sets .wt-barre{font-size:13px}
  .wt-sets .wt-prix{min-width:80px}
}


/* 26/09/2026 — Halloween Mochi : Enzo ne veut plus la vignette photo dans le
   selecteur de packs, seulement le bouton radio et le libelle (qui porte
   desormais le prix par piece). Cible la fiche du mochi uniquement. */
.wt-sets.wt-no-vig .wt-vig{display:none!important}

/* 26/09/2026 — Halloween Mochi : le selecteur de packs 30/60/90 fait double
   emploi avec l escalier de paliers (1 pack = 30 squishies). On le masque
   plutot que de supprimer les variantes, pour ne perdre aucune commande. */
.wt-cache{display:none!important}


/* 26/09/2026 — la pastille « Limited Offer » DANS le rectangle du cross-sell,
   a cote du prix. Demande d Enzo.
   🔴 Elle a d abord ete posee dans le custom_liquid du gabarit du Halloween
   Mochi : ce <style> n est charge que sur CETTE fiche, donc la pastille
   n existait que la, alors que les remises de cross-sell tournent sur tout le
   catalogue. Une regle qui doit valoir partout vit dans CETTE feuille, qui est
   chargee sur toutes les pages, jamais dans un gabarit. */
.toggle-cross-sell__product-price-container{
  display:flex!important;align-items:center!important;gap:9px!important;
  flex-wrap:wrap}
.toggle-cross-sell__product-price-container::after{
  content:"Limited Offer";
  background:#FF6B2C;color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;white-space:nowrap;line-height:1.35}




/* =====================================================================
   LES PALIERS SUR DEUX LIGNES — opt-in par fiche via la classe `wt-2l`
   ---------------------------------------------------------------------
   🔴 Plus haut, ce fichier masque `.quantity-break__title` et
   `.quantity-break__description` sur TOUT le site. Certaines fiches ont
   besoin des DEUX lignes. Une fiche active ce bloc en posant `wt-2l` sur
   <html> depuis son custom_liquid.
   🔴 26/09 : un premier scopage prefixait LIGNE PAR LIGNE. Un selecteur
   ecrit sur deux lignes recevait donc `.wt-2l` AU MILIEU, ce qui le rendait
   inapplicable en silence. On scope desormais par REGLE.
   ===================================================================== */
/* 26/09/2026 — Halloween Mochi : les cartes de paliers sur DEUX lignes, comme
   la maquette validee. whiz-offres.css masque le titre et la description sur
   tout le site (le design du 27/08 ne gardait que la banniere) ; ici on les
   remet, et uniquement ici.
   La carte devient une grille 2 colonnes. Les trois conteneurs intermediaires
   passent en display:contents pour que la banniere, le prix et la description
   deviennent enfants directs de cette grille : sans ca le prix, imbrique deux
   niveaux plus bas, ne peut pas se poser sur la meme ligne que la banniere. */
.wt-2l .quantity-break.card{
  display:grid!important;grid-template-columns:1fr auto!important;
  align-items:center!important;row-gap:3px!important;column-gap:14px!important;
  padding:14px 16px 14px 46px!important;min-height:78px}
.wt-2l .quantity-break__main-content,
.wt-2l .quantity-break__content,
.wt-2l .quantity-break__price-and-title-container{display:contents!important}
.wt-2l .quantity-break .quantity-break__banner{
  position:static!important;transform:none!important;
  grid-row:1;grid-column:1;justify-self:start!important;
  max-width:none!important;width:auto!important;font-size:17px!important}

/* le titre natif (« 1 pack ») ne sert que sur la carte SANS banniere ;
   son conteneur reste present sur les autres, il porte le ruban FALL SALE. */
.wt-2l .quantity-break__title_and_description-container{
  grid-row:1;grid-column:1;justify-self:start!important}
.wt-2l .quantity-break:not(:has(.quantity-break__banner)) .quantity-break__title{
  display:block!important;font-size:17px!important;font-weight:800!important;
  color:#181A2E!important;margin:0!important;white-space:nowrap}
.wt-2l .quantity-break:has(.quantity-break__banner) .quantity-break__title_and_description-container{width:0!important}
.wt-2l .quantity-break__price-container{
  grid-row:1;grid-column:2;justify-self:end!important;text-align:right!important}

/* ligne 2 : le detail a gauche, le prix par piece a droite */
.wt-2l .quantity-break__description{
  display:block!important;grid-row:2;grid-column:1/-1}
.wt-2l .quantity-break__description p{
  display:flex!important;justify-content:space-between!important;
  align-items:baseline!important;gap:12px!important;
  margin:0!important;font-size:12.5px!important;color:#5A5F7D!important}
.wt-2l .quantity-break__description p strong{
  font-weight:600!important;color:#5A5F7D!important;white-space:nowrap}

@media (max-width:749px){
.wt-2l .quantity-break.card{padding:13px 14px 13px 42px!important}
.wt-2l .quantity-break .quantity-break__banner,
.wt-2l .quantity-break:not(:has(.quantity-break__banner)) .quantity-break__title{
    font-size:15.5px!important}
.wt-2l .quantity-break__description p{font-size:11.5px!important;gap:8px!important}
}

</style>

<style>




















@media (max-width:749px){
.wt-2l .wt-sets .variant-picker__option-value label{padding:12px 13px!important;gap:11px}
.wt-2l .wt-sets .wt-vig{width:58px;height:58px}
.wt-2l .wt-sets .wt-nom{font-size:14px}
.wt-2l .wt-sets .wt-ligne{font-size:12px}
.wt-2l .wt-sets .wt-actuel{font-size:18px}
.wt-2l .wt-sets .wt-barre{font-size:13px}
}









@media (max-width:749px){
.wt-2l .wt-sets .variant-picker__option-values{gap:17px!important}
.wt-2l .wt-sets .variant-picker__option-value label{min-height:86px}
.wt-2l .wt-sets .wt-prix{min-width:80px}
}







/* Le bouton est un bloc STATIQUE du formulaire, on ne peut pas l ordonner
   dans le JSON. On le fait donc en CSS, avec `order` sur le flex. */
.wt-2l .product-form{display:flex;flex-direction:column}
.wt-2l .product-form > *{order:1}
.wt-2l .product-form .product-add-to-cart-button{order:2}
.wt-2l .product-form .whiz-xs{order:3;margin-top:14px}
.wt-2l .product-form .accelerated-checkout{order:4}
/* le prix, GROS, avec l ancien barre juste dessous */
.wt-2l .whiz-xs .toggle-cross-sell__product-price-container .price{
  font-size:19px;font-weight:800;line-height:1.1;display:block}
.wt-2l .whiz-xs .toggle-cross-sell__product-price-container .compare-at-price{
  font-size:14px;opacity:.6;text-decoration:line-through;display:block;margin-top:1px}
.wt-2l .whiz-xs .toggle-cross-sell__product-price-container{text-align:right}
/* titre du produit : court, gras, deux lignes maxi */
.wt-2l .whiz-xs .toggle-cross-sell__product-title{font-weight:700;font-size:15px;line-height:1.25}
.wt-2l .whiz-xs .toggle-cross-sell__heading{font-weight:800;font-size:17px}
.wt-2l .whiz-xs img{border-radius:8px}


/* --- CROSS-SELL : cases a cocher, SOUS le bouton d achat --- */
/* 🔴 Le conteneur est `.product-form__form`, deja en flex. Le bouton est un
   bloc STATIQUE : on ne peut pas l ordonner dans le JSON, donc `order` en CSS. */
.wt-2l .product-form__form{display:flex;flex-direction:column}
.wt-2l .product-form__form > *{order:1}
.wt-2l .product-form__form > .product-add-to-cart-button{order:2}
.wt-2l .product-form__form > .whiz-xs{order:3;margin-top:16px}
.wt-2l .product-form__form > .accelerated-checkout{order:4}
/* prix GROS. Le prix barre vient de la vraie remise Shopify
   « Accessory: 50% off », le theme le rend tout seul. */
.wt-2l .whiz-xs .prices .price{font-size:20px;font-weight:800;line-height:1.15}
.wt-2l .whiz-xs .prices{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.wt-2l .whiz-xs .toggle-cross-sell__product-title,
.wt-2l .whiz-xs .toggle-cross-sell__product a{font-weight:700;font-size:15px;line-height:1.25}
.wt-2l .whiz-xs img{border-radius:8px}

</style>
<script>
(function(){
  var CDN = "/cdn/shop/files/";
  var INFOS = {
.wt-2l "30 Pieces":{
      vig: CDN + "halloween-mochi-squishy-toys-party-school-04_220x220.jpg",
      ligne: "Enough for one class party or a birthday table.",
      prix: "$29.90", barre: "", badge: ""}
.wt-2l "60 Pieces":{
      vig: CDN + "halloween-mochi-squishy-toys-goodie-bags-05_220x220.jpg",
      ligne: "The size most parents pick for a whole class.",
      prix: "$44.90", barre: "$59.80", badge: "15 PIECES FREE"}
.wt-2l "90 Pieces":{
      vig: CDN + "halloween-mochi-squishy-toys-pile-01_220x220.jpg",
      ligne: "Trick-or-treaters, the classroom, and the leftovers.",
      prix: "$59.00", barre: "$89.70", badge: "30 PIECES FREE", sombre: true}
  };
  function poser(){
    var zone = document.querySelector('.wt-sets');
    if(!zone) return;
    zone.querySelectorAll('.variant-picker__option-value').forEach(function(el){
.wt-2l var lab = el.querySelector('label'),
.wt-2l inp = el.querySelector('input'); if(!lab || !inp || lab.dataset.wt) return; var i = INFOS[inp.value]; if(!i) return; lab.dataset.wt = "1"; var nom = lab.textContent.trim(); lab.innerHTML = '<span class="wt-radio"></span>' + '<span class="wt-vig" style="background-image:url(' + i.vig + ')"></span>' + '<span class="wt-txt"><span class="wt-nom">' + nom + '</span>' + '<span class="wt-ligne">' + i.ligne + '</span></span>' + '<span class="wt-prix"><span class="wt-actuel">' + i.prix + '</span>' + '<span class="wt-barre">' + i.barre + '</span></span>'; if(i.badge){
        var b = document.createElement('span');
        b.className = 'wt-bad' + (i.sombre ? ' wt-bad--sombre' : '');
        b.textContent = i.badge;
        el.appendChild(b);
      }
    });
  }
.wt-2l poser(); document.addEventListener('DOMContentLoaded',
.wt-2l poser); new MutationObserver(poser).observe(document.documentElement{childList:true, subtree:true});
})();
</script>



/* le prix a la piece A DROITE, sous le prix ; le libelle se recentre sur
   le rond puisque sa colonne n a plus qu une ligne. */
/* 🔴 les deux selecteurs sont SEPARES : groupes, si un seul est invalide
   dans le navigateur, TOUTE la regle est ignoree, en silence. */
.wt-2l .quantity-break .quantity-break__banner{
  grid-row:1 / -1!important;align-self:center!important}
.wt-2l .quantity-break .quantity-break__title{
  grid-row:1 / -1!important;align-self:center!important}
.wt-2l .quantity-break__description{
  grid-row:2;grid-column:2!important;justify-self:end!important}
.wt-2l .quantity-break__description p{
  justify-content:flex-end!important;text-align:right!important}


/* 🔴 26/09 — LE ROND SE CALE SUR LE LIBELLE, pas l inverse. Sur une carte a
   deux lignes, le rond etait centre sur la CARTE (top:50%) et le libelle sur sa
   RANGEE : dix pixels d ecart, visibles. Tenter de centrer le libelle sur la
   carte ne marche pas, la grille ne s etire pas jusqu au min-height. On deplace
   donc le rond sur la premiere rangee, celle qui porte le libelle et le prix. */


/* 🔴 26/09 — L ALIGNEMENT DU LIBELLE AVEC SON ROND, la bonne facon.
   Deux tentatives ratees avant celle-ci, gardees en memoire :
   1. centrer le libelle DANS la grille (`grid-row:1/-1` + `align-self:center`)
      ne change rien au rendu, meme quand `getComputedStyle` le confirme ;
   2. remonter le ROND sur la premiere rangee aligne les deux, mais c est le
      rond qu on deplace au lieu de recentrer l ensemble, et ca se voit a cote
      des fiches a une ligne.
   Ce qui marche est ce que faisait le CSS d origine du 27/08, avant le passage
   en deux lignes : le libelle est SORTI du flux, en absolu, centre sur la carte
   exactement comme le rond. Les deux partagent alors la meme reference.
   Ecart mesure : 0 px. */
.wt-2l .quantity-break .quantity-break__banner{
  position:absolute!important;left:46px!important;top:50%!important;
  transform:translateY(-50%)!important;
  grid-row:auto!important;grid-column:auto!important;
  width:auto!important;max-width:56%!important;height:auto!important}
.wt-2l .quantity-break.card::before{top:50%!important;transform:translateY(-50%)!important}
@media (max-width:749px){
  .wt-2l .quantity-break .quantity-break__banner{left:42px!important;max-width:52%!important} }


/* le SAVE en orange, demande d Enzo le 29/09/2026 */
.wt-2l .quantity-break__description p strong{
  color:#FF6B2C!important;font-weight:800!important}


/* le SAVE en orange, demande d Enzo le 29/09/2026 */
.wt-2l .quantity-break__description p strong{
  color:#FF6B2C!important;font-weight:800!important}

/* =====================================================================
   LE CROSS-SELL A BOUTON « ADD » — pose le 01/10/2026 a la demande d Enzo
   ---------------------------------------------------------------------
   On a remplace la case a cocher du formulaire par le bloc public de
   cross-sell, celui qui tourne deja dans le panier, parce qu il ajoute
   DIRECTEMENT au panier au lieu d attendre le bouton d achat principal.
   Mesure du 01/10 sur 552 commandes : le bloc du panier attache a 6,7 et
   8,1 %, la case de la fiche a 2,5 et 3,1 %.

   🔴 La pastille « Limited Offer » etait injectee par CSS sur une classe
   propre au bloc a case a cocher. Le bloc a bouton n a pas cette classe,
   la pastille a donc disparu et Enzo l a vu tout de suite. Elle est
   rebranchee ici sur la nouvelle structure.

   Mise en page dictee par Enzo le 01/10, pour que la carte reste etroite
   et basse : une seule ligne, image, puis texte, puis prix, puis bouton
   tout a droite. La pastille passe SOUS la description, et le prix du
   jour se lit SOUS le prix barre.
   ===================================================================== */

/* une seule ligne : image · texte · prix · bouton */
.whiz-xc .cross-sell__content{
  display:flex!important;flex-direction:row!important;align-items:center!important;
  gap:12px!important;flex-wrap:nowrap!important}
.whiz-xc .cross-sell__heading{
  display:flex!important;flex-direction:row!important;align-items:center!important;
  gap:12px!important;flex:1 1 auto!important;min-width:0!important}
.whiz-xc .cross-sell__title-and-description{
  flex:1 1 auto!important;min-width:0!important;
  display:flex!important;flex-direction:column!important;
  align-items:flex-start!important}
.whiz-xc .cross-sell__actions{flex:0 0 auto!important;margin:0!important}

/* la pastille sous la description, plus a cote du prix */
.whiz-xc .cross-sell__heading .product-price-container::after{content:none!important}
.whiz-xc .cross-sell__title-and-description::after{
  content:"Limited Offer";display:inline-block;margin-top:6px;
  background:#FF6B2C;color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;white-space:nowrap;line-height:1.35}

/* le prix juste a gauche du bouton, barre au-dessus, prix du jour dessous */
.whiz-xc .cross-sell__heading .product-price-container{
  flex:0 0 auto!important;display:block!important}
.whiz-xc .cross-sell__heading .prices{
  display:flex!important;flex-direction:column-reverse!important;
  align-items:flex-end!important;gap:0!important}
.whiz-xc .cross-sell__heading .prices .price{
  font-size:18px!important;font-weight:800!important;line-height:1.15!important}
.whiz-xc .cross-sell__heading .prices .compare-at-price{
  font-size:13px!important;opacity:.6!important;text-decoration:line-through!important;
  line-height:1.2!important}

.whiz-xc .cross-sell__title-and-description{font-weight:700;font-size:15px;line-height:1.25}
.whiz-xc img.cross-sell__image{border-radius:8px}

/* Mobile : mesure du 01/10 sur une colonne de 370 px. La carte faisait
   142 px de haut, le titre partait sur six lignes parce que la colonne de
   texte etait ecrasee a 101 px. Image a 56, texte a 13,5 et bouton serre
   la ramenent a 122 px, sans debordement et sans rien masquer. */
@media (max-width: 900px){
  .whiz-xc img.cross-sell__image{width:56px!important;height:56px!important}
  .whiz-xc .cross-sell__content{gap:9px!important}
  .whiz-xc .cross-sell__heading{gap:9px!important}
  .whiz-xc .cross-sell__title-and-description{font-size:13.5px!important;line-height:1.2!important}
  .whiz-xc .cross-sell__actions button{padding-left:14px!important;padding-right:14px!important}
}

/* =====================================================================
   LE « SAVE » COLLE AU TEXTE — corrige le 01/10/2026, signale par Enzo
   ---------------------------------------------------------------------
   Symptome : « 2 MYSTERY BOXES, 2 CHANCESSAVE $19.90 », sans espace.

   🔴 LA CAUSE, et elle est instructive : notre regle
      `.wt-2l .quantity-break__description p { display:flex; gap:12px }`
      porte bien !important, mais le bloc du theme injecte EN LIGNE
      `quantity-break-item.quantity-break.card .quantity-break__description p
       { display:block !important }`
      qui a une SPECIFICITE plus forte. Deux !important : c est la
      specificite qui tranche, pas l ordre. Resultat, notre `gap` passait
      et notre `display:flex` non. Or un `gap` ne fait RIEN sur un bloc.
      Le SAVE restait donc colle, sans qu aucune regle n ait l air fausse.

   On remonte simplement notre specificite au-dessus de la sienne.
   ===================================================================== */
.wt-2l quantity-break-item.quantity-break.card .quantity-break__description p{
  display:flex!important;justify-content:flex-end!important;
  align-items:baseline!important;gap:12px!important;
  text-align:right!important;margin:0!important}

@media (max-width:749px){
  .wt-2l quantity-break-item.quantity-break.card .quantity-break__description p{
    gap:8px!important}
}

/* =====================================================================
   LA PASTILLE « FALL SALE » TOMBEE DANS LA CARTE — 01/10/2026
   ---------------------------------------------------------------------
   Meme cause que le SAVE colle, juste au-dessus : le bloc du theme pose
   EN LIGNE `quantity-break-item.quantity-break.card .badge--small
   { position:static !important; top:auto; right:auto }`, plus specifique
   que notre `.quantity-break .badge--small { position:absolute }`. Le
   ruban quittait donc le coin de la carte pour venir sous le prix.

   🔴 La lecon, et elle vaut pour tout ce fichier : nos regles portent
   toutes !important, ce qui donne l illusion qu elles gagnent toujours.
   Entre deux !important c est la SPECIFICITE qui tranche. Le theme ecrit
   ses regles en ligne avec un selecteur a quatre crans ; il faut donc
   ecrire les notres au moins aussi precisement, pas ajouter un !important
   de plus.
   ===================================================================== */


quantity-break-item.quantity-break.card
  .quantity-break__title-and-badge-container .badge--small:empty{
  display:none!important}
/* 🔴 SUITE, et c est le piege : rendre la pastille `absolute` ne suffit pas.
   La carte `.wt-2l` est une GRILLE. Un element en position absolue dans une
   grille se cale sur SA CELLULE, pas sur le conteneur. Avec `top:-13px` la
   pastille tombait donc 34 px SOUS le haut de la carte, pile sur le prix
   barre. On lui donne la grille entiere comme repere pour qu elle retrouve
   le coin. */



/* ===== GABARIT CARTE DE PALIER · DEBUT · ne pas editer a la main ===== */
/* La pastille de palier : EN HAUT A DROITE, a cheval sur la bordure.
   Le SAVE est sous le prix, le titre et la description a gauche.
   Valide par Enzo le 02/10/2026. Reference : memory/whiz_gabarit_carte_palier.md

   Les trois pieges deja payes, a ne pas re-decouvrir :
   1. `grid-area` doit valoir `auto`. La carte est une GRILLE ; en `1/1/-1/-1`
      la pastille se cale sur UNE CELLULE et les insets deviennent faux.
   2. `overflow:visible` est indispensable : la carte porte la classe
      `quantity-break--no-overflow`, qui la clipperait.
   3. Le conteneur du badge est ecrase a `width:0` ailleurs dans ce fichier,
      pour masquer le titre maison du theme au profit du bandeau. La pastille
      n a donc AUCUNE place en flux : `absolute` est obligatoire. */

quantity-break-item.quantity-break.card{overflow:visible!important}

/* 🔴 Ici vivait `padding-bottom:0` sur les cartes a pastille. Il servait a
   annuler la bande reservee quand la pastille etait en bas ; une fois celle-ci
   remontee en haut a droite, il ne faisait plus que SUPPRIMER le padding
   naturel de la carte (14 px). Sur un palier qui porte des selecteurs de
   variante, le dernier menu se retrouvait a 5 px du bord. Enzo : « il est trop
   colle au bas du bloc ». On ne force plus rien : la carte garde le sien. */

quantity-break-item.quantity-break.card
  .quantity-break__title-and-badge-container .badge--small{
  position:absolute!important;grid-area:auto!important;z-index:5;
  height:auto!important;min-height:0!important;white-space:nowrap!important;
  bottom:auto!important;transform:none!important;top:-11px!important;
  left:auto!important;inset-inline-start:auto!important;
  right:16px!important;inset-inline-end:16px!important}

quantity-break-item.quantity-break.card
  .quantity-break__title-and-badge-container .badge--small:empty{
  display:none!important}
/* ===== GABARIT CARTE DE PALIER · FIN ===== */

/* =====================================================================
   LE SAVE SOUS LE PRIX, ALIGNE A DROITE — 10/10/2026, demande d Enzo
   ---------------------------------------------------------------------
   Reference : memory/whiz_gabarit_carte_palier.md (gabarit fige du 02/10).
   Symptome : sur les fiches `.wt-2l`, « 2 JUMBO CUBES, ONE TO KEEP...
   SAVE $8.95 » se lisait en ligne, a gauche, apres la description.

   🔴 La cause : la regle plus haut `.wt-2l .quantity-break__description
   { grid-column:2 }` perd contre le theme (specificite), la description
   reste en colonne 1, `justify-self:start`, LARGEUR AJUSTEE au texte. Le
   `justify-content:flex-end` du <p> n a donc aucune place ou pousser le SAVE.

   🔴 DEUX FAMILLES de fiches `.wt-2l`, sans aucune classe pour les distinguer :
   - gabarits « recents » (grinch, jellycheesecube, blindbox, glowdumpling...) :
     leur custom_liquid met le bandeau en flux, rangee 1, et la description en
     `grid-column:1`. C est la que le SAVE etait colle au texte, a gauche.
   - gabarits « anciens » (sealdumpling...) : bandeau en absolu centre, la
     description en colonne 2 (regle plus haut), SAVE deja sous le prix.
   Un premier essai a `grid-column:1 / -1` a reussi la premiere famille et
   CASSE la seconde : le texte du Seal est parti sous le bandeau (mesure
   10/10 a 400 px). On ne touche donc QUE la fin de colonne : 1/-1 chez les
   recents, 2/-1 = inchange chez les anciens (rendu identique, mesure).

   La parade : sur les cartes qui PORTENT un SAVE (`:has(strong)`), la
   description va jusqu a la derniere colonne ; le texte reste
   a gauche, le <strong> part au bout avec `margin-left:auto`, donc sous le
   prix, aligne sur son bord droit. Les cartes sans SAVE (palier 1) ne sont
   pas touchees. Specificite a 5 crans, au-dessus de celle du theme (4). */
.wt-2l quantity-break-item.quantity-break.card:has(.quantity-break__description strong) .quantity-break__description{
  grid-column-end:-1!important;
  justify-self:stretch!important;width:auto!important;min-width:0!important}
.wt-2l quantity-break-item.quantity-break.card:has(.quantity-break__description strong) .quantity-break__description p{
  display:flex!important;justify-content:space-between!important;
  align-items:baseline!important;text-align:left!important}
.wt-2l quantity-break-item.quantity-break.card .quantity-break__description p strong{
  margin-left:auto!important;text-align:right!important;white-space:nowrap!important;
  flex:0 0 auto!important}