<div class="container">
<nav class="flex items-center min-h-10" aria-label="Fil d'ariane">
<ol class="flex items-center gap-1 flex-wrap text-body-xs text-black/40">
<li>
<a href="#" class="
link-sm
link-neutral
">
Accueil
</a>
</li>
<li aria-hidden="true" class="text-neutral-500">
•
</li>
<li>
<a href="#" class="
link-sm
link-neutral
">
Category
</a>
</li>
<li aria-hidden="true" class="text-neutral-500">
•
</li>
<li>
<span class="font-bold text-black tracking-[0.3px]" aria-current="page">Subcategory</span>
</li>
</ol>
</nav>
</div>
<div class="container grid-layout">
<div class="col-span-4 sm:col-span-12 md:col-span-8 flex flex-col gap-4 2xl:gap-6 3xl:gap-10">
<div>
<h1 class="h6 p-2">Mon panier</h1>
<table class="w-full text-body-sm">
<thead class="hidden md:table-header-group">
<tr class="font-bold min-h-14 border-b border-black/08">
<th class="p-2 text-start md:w-1/2 2xl:w-1/4">Produit</th>
<th class="p-2 text-end w-1/4 hidden md:table-cell">Prix</th>
<th class="p-2 text-center w-auto hidden md:table-cell">Qté</th>
<th class="p-2 text-end w-1">Total</th>
<th class="p-2 w-1"></th>
</tr>
</thead>
<tbody>
<tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50 block md:table-row">
<td class="block md:table-cell p-2 text-start">
<div class="flex items-center gap-3">
<div class="flex-shrink-0 overflow-hidden">
<img src="https://naos.dam-broadcast.com/cdn-cgi/image/width=48,height=57,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg" alt="La mousse nettoyante" class="w-full h-full object-cover" />
</div>
<div class="text-body-sm">
<h4 class="font-bold">La mousse nettoyante</h4>
<p>Adoucit - Illumine • <span class="text-black/64">150 ml</span></p>
</div>
</div>
</td>
<td class="flex justify-between items-center px-2 py-2 gap-4 md:hidden">
<div>
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full items-center">
<div class="input-qty-wrapper" x-data="{qty: 1 }">
<button type="button" @click='if(qty > 0) qty--' :class="qty === 0 ? 'disabled' : ''" aria-label="Label text" class="btn-qty decrement btn btn-dark btn-subtle btn-border btn-size-xs btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M5 12h14" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</button>
<input type="number" name="1" id="1" value="1" class="input-qty
" placeholder="" min="0" x-model="qty" :class="qty > 0 ? 'filled' : ''">
<button type="button" @click='qty++' aria-label="Label text" class="btn-qty increment btn btn-dark btn-subtle btn-border btn-size-xs btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</button>
</div>
<div class="sr-only">
<label for="1">
<span>La mousse nettoyante</span>
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-row gap-4 text-body-xs font-bold whitespace-nowrap">
13,41 €
<button type="button" aria-label="Label text" class=" btn btn-dark btn-simple btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</td>
<td class="p-2 text-end hidden md:table-cell">
<div class="text-body-xs font-bold">13,41€</div>
</td>
<td class="p-2 text-center hidden md:table-cell">
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full items-center">
<div class="input-qty-wrapper" x-data="{qty: 1 }">
<button type="button" @click='if(qty > 0) qty--' :class="qty === 0 ? 'disabled' : ''" aria-label="Label text" class="btn-qty decrement btn btn-dark btn-subtle btn-border btn-size-xs btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M5 12h14" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</button>
<input type="number" name="1" id="1" value="1" class="input-qty
" placeholder="" min="0" x-model="qty" :class="qty > 0 ? 'filled' : ''">
<button type="button" @click='qty++' aria-label="Label text" class="btn-qty increment btn btn-dark btn-subtle btn-border btn-size-xs btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</button>
</div>
<div class="sr-only">
<label for="1">
<span>La mousse nettoyante</span>
</label>
</div>
</div>
</div>
</td>
<td class="p-2 text-end hidden md:table-cell">
<span class="text-body-xs font-bold whitespace-nowrap">13,41 €</span>
</td>
<td class="p-2 text-end hidden md:table-cell">
<div class="flex items-center justify-center">
<button type="button" aria-label="Label text" class=" btn btn-dark btn-simple btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</td>
</tr>
<tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50 block md:table-row">
<td class="block md:table-cell p-2 text-start">
<div class="flex items-center gap-3">
<div class="flex-shrink-0 overflow-hidden">
<img src="https://naos.dam-broadcast.com/cdn-cgi/image/width=48,height=57,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg" alt="Le gel nettoyant" class="w-full h-full object-cover" />
</div>
<div class="text-body-sm">
<h4 class="font-bold">Le gel nettoyant</h4>
<p>Purifie - Réduit les brillances • <span class="text-black/64">200ml</span></p>
</div>
</div>
</td>
<td class="flex justify-between items-center px-2 py-2 gap-4 md:hidden">
<div>
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full items-center">
<div class="input-qty-wrapper" x-data="{qty: 1 }">
<button type="button" @click='if(qty > 0) qty--' :class="qty === 0 ? 'disabled' : ''" aria-label="Label text" class="btn-qty decrement btn btn-dark btn-subtle btn-border btn-size-xs btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M5 12h14" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</button>
<input type="number" name="1" id="1" value="1" class="input-qty
" placeholder="" min="0" x-model="qty" :class="qty > 0 ? 'filled' : ''">
<button type="button" @click='qty++' aria-label="Label text" class="btn-qty increment btn btn-dark btn-subtle btn-border btn-size-xs btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</button>
</div>
<div class="sr-only">
<label for="1">
<span>Le gel nettoyant</span>
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-row gap-4 text-body-xs font-bold whitespace-nowrap">
14,90€
<button type="button" aria-label="Label text" class=" btn btn-dark btn-simple btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</td>
<td class="p-2 text-end hidden md:table-cell">
<div class="text-body-xs font-bold">14,90€</div>
</td>
<td class="p-2 text-center hidden md:table-cell">
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full items-center">
<div class="input-qty-wrapper" x-data="{qty: 1 }">
<button type="button" @click='if(qty > 0) qty--' :class="qty === 0 ? 'disabled' : ''" aria-label="Label text" class="btn-qty decrement btn btn-dark btn-subtle btn-border btn-size-xs btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M5 12h14" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</button>
<input type="number" name="1" id="1" value="1" class="input-qty
" placeholder="" min="0" x-model="qty" :class="qty > 0 ? 'filled' : ''">
<button type="button" @click='qty++' aria-label="Label text" class="btn-qty increment btn btn-dark btn-subtle btn-border btn-size-xs btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</button>
</div>
<div class="sr-only">
<label for="1">
<span>Le gel nettoyant</span>
</label>
</div>
</div>
</div>
</td>
<td class="p-2 text-end hidden md:table-cell">
<span class="text-body-xs font-bold whitespace-nowrap">14,90€</span>
</td>
<td class="p-2 text-end hidden md:table-cell">
<div class="flex items-center justify-center">
<button type="button" aria-label="Label text" class=" btn btn-dark btn-simple btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</td>
</tr>
<tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50 block md:table-row">
<td class="block md:table-cell p-2 text-start">
<div class="flex items-center gap-3">
<div class="flex-shrink-0 overflow-hidden">
<img src="https://naos.dam-broadcast.com/cdn-cgi/image/width=48,height=57,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg" alt="Fluide minéral protecteur SPF 50+" class="w-full h-full object-cover" />
</div>
<div class="text-body-sm">
<h4 class="font-bold">Fluide minéral protecteur SPF 50+</h4>
<p>Solaire visage • <span class="text-black/64">40ml</span></p>
</div>
</div>
</td>
<td class="flex justify-between items-center px-2 py-2 gap-4 md:hidden">
<div>
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full items-center">
<div class="input-qty-wrapper" x-data="{qty: 2 }">
<button type="button" @click='if(qty > 0) qty--' :class="qty === 0 ? 'disabled' : ''" aria-label="Label text" class="btn-qty decrement btn btn-dark btn-subtle btn-border btn-size-xs btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M5 12h14" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</button>
<input type="number" name="1" id="1" value="2" class="input-qty
" placeholder="" min="0" x-model="qty" :class="qty > 0 ? 'filled' : ''">
<button type="button" @click='qty++' aria-label="Label text" class="btn-qty increment btn btn-dark btn-subtle btn-border btn-size-xs btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</button>
</div>
<div class="sr-only">
<label for="1">
<span>Fluide minéral protecteur SPF 50+</span>
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-row gap-4 text-body-xs font-bold whitespace-nowrap">
51,80€
<button type="button" aria-label="Label text" class=" btn btn-dark btn-simple btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</td>
<td class="p-2 text-end hidden md:table-cell">
<div class="text-body-xs font-bold">25,90€</div>
</td>
<td class="p-2 text-center hidden md:table-cell">
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full items-center">
<div class="input-qty-wrapper" x-data="{qty: 2 }">
<button type="button" @click='if(qty > 0) qty--' :class="qty === 0 ? 'disabled' : ''" aria-label="Label text" class="btn-qty decrement btn btn-dark btn-subtle btn-border btn-size-xs btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M5 12h14" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</button>
<input type="number" name="1" id="1" value="2" class="input-qty
" placeholder="" min="0" x-model="qty" :class="qty > 0 ? 'filled' : ''">
<button type="button" @click='qty++' aria-label="Label text" class="btn-qty increment btn btn-dark btn-subtle btn-border btn-size-xs btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</button>
</div>
<div class="sr-only">
<label for="1">
<span>Fluide minéral protecteur SPF 50+</span>
</label>
</div>
</div>
</div>
</td>
<td class="p-2 text-end hidden md:table-cell">
<span class="text-body-xs font-bold whitespace-nowrap">51,80€</span>
</td>
<td class="p-2 text-end hidden md:table-cell">
<div class="flex items-center justify-center">
<button type="button" aria-label="Label text" class=" btn btn-dark btn-simple btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</td>
</tr>
<tr class="min-h-14 border-t first:border-t-0 border-black/08 even:bg-neutral-50 block md:table-row">
<td class="block md:table-cell p-2 text-start">
<div class="flex items-center gap-3">
<div class="flex-shrink-0 overflow-hidden">
<img src="https://naos.dam-broadcast.com/cdn-cgi/image/width=48,height=57,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg" alt="La mousse nettoyante" class="w-full h-full object-cover" />
</div>
<div class="text-body-sm">
<h4 class="font-bold">La mousse nettoyante</h4>
<p>Adoucit - Illumine • <span class="text-black/64">150 ml</span></p>
</div>
</div>
</td>
<td class="flex justify-between items-center px-2 py-2 gap-4 md:hidden">
<div>
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full items-center">
<div class="input-qty-wrapper" x-data="{qty: 1 }">
<button type="button" @click='if(qty > 0) qty--' :class="qty === 0 ? 'disabled' : ''" aria-label="Label text" class="btn-qty decrement btn btn-dark btn-subtle btn-border btn-size-xs btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M5 12h14" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</button>
<input type="number" name="1" id="1" value="1" class="input-qty
" placeholder="" min="0" x-model="qty" :class="qty > 0 ? 'filled' : ''">
<button type="button" @click='qty++' aria-label="Label text" class="btn-qty increment btn btn-dark btn-subtle btn-border btn-size-xs btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</button>
</div>
<div class="sr-only">
<label for="1">
<span>La mousse nettoyante</span>
</label>
</div>
</div>
</div>
</div>
<div class="flex flex-row gap-4 text-body-xs font-bold whitespace-nowrap">
13,41 €
<button type="button" aria-label="Label text" class=" btn btn-dark btn-simple btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</td>
<td class="p-2 text-end hidden md:table-cell">
<div class="text-body-xs font-bold">13,41€</div>
</td>
<td class="p-2 text-center hidden md:table-cell">
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full items-center">
<div class="input-qty-wrapper" x-data="{qty: 1 }">
<button type="button" @click='if(qty > 0) qty--' :class="qty === 0 ? 'disabled' : ''" aria-label="Label text" class="btn-qty decrement btn btn-dark btn-subtle btn-border btn-size-xs btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M5 12h14" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</button>
<input type="number" name="1" id="1" value="1" class="input-qty
" placeholder="" min="0" x-model="qty" :class="qty > 0 ? 'filled' : ''">
<button type="button" @click='qty++' aria-label="Label text" class="btn-qty increment btn btn-dark btn-subtle btn-border btn-size-xs btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M12 4.5v15m7.5-7.5h-15" stroke="currentColor" stroke-width="2" fill="none" />
</svg>
</button>
</div>
<div class="sr-only">
<label for="1">
<span>La mousse nettoyante</span>
</label>
</div>
</div>
</div>
</td>
<td class="p-2 text-end hidden md:table-cell">
<span class="text-body-xs font-bold whitespace-nowrap">13,41 €</span>
</td>
<td class="p-2 text-end hidden md:table-cell">
<div class="flex items-center justify-center">
<button type="button" aria-label="Label text" class=" btn btn-dark btn-simple btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<section class="relative flex flex-col gap-4 adjusted-marg-y-xs" x-data="initSlider" x-init="calcPageSize(); $nextTick(() => calcActive())" @resize.window.debounce="calcPageSize(); $nextTick(() => calcActive())" role="group" aria-roledescription="Carousel" aria-label="échantillons offerts">
<h3 class="text-body-base font-bold">Je souhaite recevoir 3 échantillons offerts: <span class="text-brand-700">3</span> restants</h3>
<div class="relative w-full flex flex-row justify-between items-center gap-4 px-1 overflow-x-hidden">
<div class="flex flex-row gap-4">
<button type="button" :class="{ 'opacity-25 pointer-events-none' : active === 0 }" @click="scrollPrevious" :disabled="active === 0" aria-label="Voir le slide précédent" class=" btn btn-dark btn-subtle btn-border btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.5 19.5L3 12M3 12L10.5 4.5M3 12H21" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
<div class="relative flex flex-nowrap w-full overflow-auto js_slides snap snap-x gap-1.5" @scroll.debounce="calcActive" aria-label="Échantillons">
<label class="js_slide selection-control-label selection-control-checkbox
w-[268px] sm:w-[218px] md:w-[248px] 3xl:w-[328px]
flex flex-row gap-4 flex-shrink-0 px-2 py-4 snap-start cursor-pointer transition-all duration-200
bg-white border-dashed border border-black/16 hover:!border-brand-500
has-[input:checked]:border-solid has-[input:checked]:border-black" role="tabpanel" :aria-hidden="active !== 0">
<input type="checkbox" name="La crème riche" value="La crème riche" class="peer">
<div>
<p class="text-body-sm font-bold">La crème riche - <span class="text-black/64">(2ml)</span></p>
<a href="#" class="
underline
link-medium
link-dark
">
En savoir plus
</a>
</div>
</label>
<label class="js_slide selection-control-label selection-control-checkbox
w-[268px] sm:w-[218px] md:w-[248px] 3xl:w-[328px]
flex flex-row gap-4 flex-shrink-0 px-2 py-4 snap-start cursor-pointer transition-all duration-200
bg-white border-dashed border border-black/16 hover:!border-brand-500
has-[input:checked]:border-solid has-[input:checked]:border-black" role="tabpanel" :aria-hidden="active !== 1">
<input type="checkbox" name="La crème légère" value="La crème légère" class="peer">
<div>
<p class="text-body-sm font-bold">La crème légère - <span class="text-black/64">(2ml)</span></p>
<a href="#" class="
underline
link-medium
link-dark
">
En savoir plus
</a>
</div>
</label>
<label class="js_slide selection-control-label selection-control-checkbox
w-[268px] sm:w-[218px] md:w-[248px] 3xl:w-[328px]
flex flex-row gap-4 flex-shrink-0 px-2 py-4 snap-start cursor-pointer transition-all duration-200
bg-white border-dashed border border-black/16 hover:!border-brand-500
has-[input:checked]:border-solid has-[input:checked]:border-black" role="tabpanel" :aria-hidden="active !== 2">
<input type="checkbox" name="Niacinamide 5%" value="Niacinamide 5%" class="peer">
<div>
<p class="text-body-sm font-bold">Niacinamide 5% - <span class="text-black/64">(1ml)</span></p>
<a href="#" class="
underline
link-medium
link-dark
">
En savoir plus
</a>
</div>
</label>
<label class="js_slide selection-control-label selection-control-checkbox
w-[268px] sm:w-[218px] md:w-[248px] 3xl:w-[328px]
flex flex-row gap-4 flex-shrink-0 px-2 py-4 snap-start cursor-pointer transition-all duration-200
bg-white border-dashed border border-black/16 hover:!border-brand-500
has-[input:checked]:border-solid has-[input:checked]:border-black" role="tabpanel" :aria-hidden="active !== 3">
<input type="checkbox" name="La crème riche" value="La crème riche" class="peer">
<div>
<p class="text-body-sm font-bold">La crème riche - <span class="text-black/64">(2ml)</span></p>
<a href="#" class="
underline
link-medium
link-dark
">
En savoir plus
</a>
</div>
</label>
<label class="js_slide selection-control-label selection-control-checkbox
w-[268px] sm:w-[218px] md:w-[248px] 3xl:w-[328px]
flex flex-row gap-4 flex-shrink-0 px-2 py-4 snap-start cursor-pointer transition-all duration-200
bg-white border-dashed border border-black/16 hover:!border-brand-500
has-[input:checked]:border-solid has-[input:checked]:border-black" role="tabpanel" :aria-hidden="active !== 4">
<input type="checkbox" name="La crème légère" value="La crème légère" class="peer">
<div>
<p class="text-body-sm font-bold">La crème légère - <span class="text-black/64">(2ml)</span></p>
<a href="#" class="
underline
link-medium
link-dark
">
En savoir plus
</a>
</div>
</label>
<label class="js_slide selection-control-label selection-control-checkbox
w-[268px] sm:w-[218px] md:w-[248px] 3xl:w-[328px]
flex flex-row gap-4 flex-shrink-0 px-2 py-4 snap-start cursor-pointer transition-all duration-200
bg-white border-dashed border border-black/16 hover:!border-brand-500
has-[input:checked]:border-solid has-[input:checked]:border-black" role="tabpanel" :aria-hidden="active !== 5">
<input type="checkbox" name="Niacinamide 5%" value="Niacinamide 5%" class="peer">
<div>
<p class="text-body-sm font-bold">Niacinamide 5% - <span class="text-black/64">(1ml)</span></p>
<a href="#" class="
underline
link-medium
link-dark
">
En savoir plus
</a>
</div>
</label>
</div>
<div class="flex flex-row gap-4">
<button type="button" :class="{ 'opacity-25 pointer-events-none' : active >= itemCount - pageSize }" @click="scrollNext" :disabled="active >= itemCount - pageSize" aria-label="Voir le slide suivant" class=" btn btn-dark btn-subtle btn-border btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</div>
</section>
<script>
function initSlider() {
return {
active: 0,
itemCount: 0,
getSlider() {
return this.$root.querySelector('.js_slides');
},
pageSize: 3,
pageFillers: 0,
calcPageSize() {
const slider = this.getSlider();
if (slider) {
this.itemCount = slider.querySelectorAll('.js_slide').length;
this.pageSize = Math.round(slider.clientWidth / slider.querySelector('.js_slide').clientWidth);
this.pageFillers = (this.pageSize * Math.ceil(this.itemCount / this.pageSize)) - this.itemCount;
}
},
calcActive() {
const slider = this.getSlider();
if (slider) {
const sliderItems = this.itemCount + this.pageFillers;
const calculatedActiveSlide = slider.scrollLeft / (slider.scrollWidth / sliderItems);
this.active = Math.round(calculatedActiveSlide / this.pageSize) * this.pageSize;
}
},
scrollPrevious() {
this.scrollTo(this.active - this.pageSize);
},
scrollNext() {
this.scrollTo(this.active + this.pageSize);
},
scrollTo(idx) {
const slider = this.getSlider();
if (slider) {
const slideWidth = slider.scrollWidth / (this.itemCount + this.pageFillers);
slider.scrollLeft = Math.floor(slideWidth) * idx;
this.active = idx;
}
},
}
}
</script>
</div>
<div class="col-span-4 sm:col-span-12 md:col-span-4">
<section class="flex flex-col gap-1">
<h2 class="px-3 pt-2 h6">Récapitulatif</h2>
<div class="flex flex-col gap-3 pt-2 px-3 pb-3 text-body-sm">
<div class="flex flex-row gap-2">
<div class="flex flex-col w-full gap-y-1">
<div class="input-wrapper flex flex-col relative w-full floating-label">
<input type="text" name="text" id="codepromo" class="form-input w-full peer
" placeholder="" @input.debounce="onChange">
<div class="label-wrapper ">
<label for="codepromo" class="flex flex-row items-center gap-2">
<span class="flex-grow">Code promo</span>
</label>
</div>
</div>
</div> <button type="button" class=" btn btn-dark btn-solid btn-size-md">
OK
</button>
</div>
<div class="pt-1 flex flex-row gap-2 justify-between">
<p>Sous-total</p>
<div>57,70€</div>
</div>
<div class="pt-1 flex flex-col">
<div class="flex flex-row gap-2 justify-between">
<div class="flex flex-col">
<p>Frais de livraison estimés</p>
<p class="text-body-xs text-black/56">Livraison gratuite à partir de 50€ d’achat</p>
</div>
<span>0,00€</span>
</div>
<div class="bg-neutral-50 flex flex-col gap-1 px-2 py-1.5">
<div class="flex flex-row justify-between items-center gap-2">
<svg class="text-black/56 shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M5.5 12.5C5.5 13.0523 5.05228 13.5 4.5 13.5C3.94772 13.5 3.5 13.0523 3.5 12.5M5.5 12.5C5.5 11.9477 5.05228 11.5 4.5 11.5C3.94772 11.5 3.5 11.9477 3.5 12.5M5.5 12.5H9.5M3.5 12.5H2.25C1.83579 12.5 1.5 12.1642 1.5 11.75V9.5003M13 12.5C13 13.0523 12.5523 13.5 12 13.5C11.4477 13.5 11 13.0523 11 12.5M13 12.5C13 11.9477 12.5523 11.5 12 11.5C11.4477 11.5 11 11.9477 11 12.5M13 12.5L13.75 12.5C14.1642 12.5 14.5024 12.1638 14.477 11.7504C14.3369 9.47865 13.5648 7.37792 12.3344 5.62189C12.0929 5.27728 11.7019 5.07183 11.2818 5.04877H9.5M11 12.5H9.5M9.5 5.04877V4.40986C9.5 4.03153 9.21832 3.71147 8.84201 3.67242C7.74356 3.55843 6.6286 3.5 5.5 3.5C4.3714 3.5 3.25644 3.55843 2.15799 3.67242C1.78168 3.71147 1.5 4.03153 1.5 4.40986V9.5003M9.5 5.04877V9.5003M9.5 12.5V9.5003M9.5 9.5003H1.5" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<div class="h-2 w-full bg-neutral-100 rounded-full overflow-hidden">
<div class="h-full bg-brand-700 rounded-full" style="width: NaN%" role="progressbar" aria-valuenow="NaN" aria-valuemin="0" aria-valuemax="100" aria-label="Progression vers la livraison gratuite" aria-valuetext="NaN% complété - NaN€ sur €">
</div>
</div>
<svg class="text-brand-700 shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</div>
<div class="flex items-center gap-2">
<div class="text-brand-600">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12ZM15.6103 10.1859C15.8511 9.84887 15.773 9.38046 15.4359 9.1397C15.0989 8.89894 14.6305 8.97701 14.3897 9.31407L11.1543 13.8436L9.53033 12.2197C9.23744 11.9268 8.76256 11.9268 8.46967 12.2197C8.17678 12.5126 8.17678 12.9874 8.46967 13.2803L10.7197 15.5303C10.8756 15.6862 11.0921 15.7656 11.3119 15.7474C11.5316 15.7293 11.7322 15.6153 11.8603 15.4359L15.6103 10.1859Z" fill="currentColor" />
</svg>
</div>
<p class="text-sm">Votre livraison <strong>est offerte</strong> !</p>
</div>
</div>
</div>
<div class="pt-1 flex flex-row gap-2 justify-between">
<div class="flex flex-col">
<p>Code promo</p>
<p class="text-body-xs text-black/56">La crème riche – Hydratation intense • 15ml</p>
</div>
<span>Offert</span>
</div>
<div class="pt-1 flex flex-row gap-2 justify-between">
<div class="flex flex-col">
<p class="font-bold">TOTAL</p>
<p class="text-body-xs text-black/56">Taxes de 00,00 € incluses</p>
</div>
<span class="font-bold">57,70€</span>
</div>
</div>
<div id="buttonOrders" class="flex flex-col justify-center gap-2.5">
<button type="button" class="justify-center btn btn-dark btn-solid btn-size-lg">
Commander
</button>
<a href="#" class="
underline
link-medium
link-dark
flex justify-center
">
Partager mon panier
</a>
</div>
<div class="flex justify-around gap-3 md:gap-4 3xl:gap-5 py-4">
<div class="flex flex-col gap-1 items-center text-center text-brand-700">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.75541 10.0589C5.82748 6.0579 9.94 3.68353 13.941 4.75559C15.262 5.10955 16.4038 5.79374 17.3036 6.69528L19.2067 8.59835H16.023C15.6088 8.59835 15.273 8.93414 15.273 9.34835C15.273 9.76256 15.6088 10.0984 16.023 10.0984H21.0156C21.2145 10.0984 21.4053 10.0193 21.546 9.87864C21.6866 9.73797 21.7656 9.54717 21.7656 9.34824V4.35575C21.7656 3.94153 21.4298 3.60575 21.0156 3.60575C20.6014 3.60575 20.2656 3.94153 20.2656 4.35575V7.53591L18.3653 5.63561C17.2841 4.55253 15.9116 3.73071 14.3292 3.3067C9.52803 2.02023 4.593 4.86947 3.30653 9.67067C3.19932 10.0708 3.43676 10.482 3.83686 10.5892C4.23696 10.6964 4.64821 10.459 4.75541 10.0589ZM20.1629 13.4108C19.7628 13.3036 19.3515 13.5411 19.2443 13.9412C18.1722 17.9422 14.0597 20.3165 10.0587 19.2445C8.73774 18.8905 7.59594 18.2063 6.69609 17.3048L4.7942 15.4017H7.97702C8.39123 15.4017 8.72702 15.0659 8.72702 14.6517C8.72702 14.2375 8.39123 13.9017 7.97702 13.9017L2.98438 13.9017C2.57016 13.9017 2.23438 14.2375 2.23438 14.6517V19.6443C2.23438 20.0585 2.57016 20.3943 2.98438 20.3943C3.39859 20.3943 3.73438 20.0585 3.73438 19.6443V16.4632L5.63444 18.3645C6.71564 19.4477 8.08796 20.2693 9.67048 20.6934C14.4717 21.9798 19.4067 19.1306 20.6932 14.3294C20.8004 13.9293 20.563 13.5181 20.1629 13.4108Z" fill="currentColor" />
</svg>
<p class="text-body-sm">Retour gratuit sous 30 jours</p>
</div>
<div class="flex flex-col gap-1 items-center text-center text-brand-700">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M2.25 8.25H21.75M2.25 9H21.75M5.25 14.25H11.25M5.25 16.5H8.25M4.5 19.5H19.5C20.7426 19.5 21.75 18.4926 21.75 17.25V6.75C21.75 5.50736 20.7426 4.5 19.5 4.5H4.5C3.25736 4.5 2.25 5.50736 2.25 6.75V17.25C2.25 18.4926 3.25736 19.5 4.5 19.5Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<p class="text-body-sm">Paiement sécurisé</p>
</div>
</div>
</section>
</div>
<div x-data="{ visible: true }" x-init="
$nextTick(() => {
let target = document.querySelector('#buttonOrders');
if (target) new IntersectionObserver(([entry]) => {
visible = !entry.isIntersecting;
}, {
root: null,
threshold: 0.1
}).observe(target);
});
" x-show="visible" x-transition:leave.opacity.duration.300ms x-cloak class="fixed bottom-0 left-0 right-0 z-40 bg-white shadow px-4 py-3 md:hidden">
<div class="pt-1 flex flex-row gap-2 justify-between">
<div class="flex flex-col">
<p class="font-bold">TOTAL</p>
<p class="text-body-xs text-black/56">Taxes de 00,00 € incluses</p>
</div>
<span class="font-bold">57,70€</span>
</div>
<button type="button" class="w-full justify-center btn btn-dark btn-solid btn-size-lg">
Commander
</button>
</div>
</div>
<section class="flex flex-col gap-3 py-6 2xl:py-8 3xl:py-18">
<div class="container text-body-lg font-bold text-black/64">
<h3>Recommandé pour vous</h3>
</div>
<div class="overflow-auto">
<div class="container flex gap-3 2xl:gap-4 3xl:gap-5">
<a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> <a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> <a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> <a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> <a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0 flex md:hidden lg:flex">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a>
</div>
</div>
</section>
<div class="container">
{% render "@breadcrumbs" with (_target.meta.breadcrumbs is defined ? _target.meta.breadcrumbs : {})|merge({container_classes:'text-body-xs text-black/40'}) %}
</div>
<div class="container grid-layout">
<div class="col-span-4 sm:col-span-12 md:col-span-8 flex flex-col gap-4 2xl:gap-6 3xl:gap-10">
<div>
<h1 class="h6 p-2">Mon panier</h1>
{% render '@card-products-list' %}
</div>
{% render "@slider-card-sample" %}
</div>
<div class="col-span-4 sm:col-span-12 md:col-span-4">
{% render "@card-summary" %}
</div>
<div
x-data="{ visible: true }"
x-init="
$nextTick(() => {
let target = document.querySelector('#buttonOrders');
if (target) new IntersectionObserver(([entry]) => {
visible = !entry.isIntersecting;
}, {
root: null,
threshold: 0.1
}).observe(target);
});
"
x-show="visible"
x-transition:leave.opacity.duration.300ms
x-cloak
class="fixed bottom-0 left-0 right-0 z-40 bg-white shadow px-4 py-3 md:hidden"
>
<div class="pt-1 flex flex-row gap-2 justify-between">
<div class="flex flex-col">
<p class="font-bold">TOTAL</p>
<p class="text-body-xs text-black/56">Taxes de 00,00 € incluses</p>
</div>
<span class="font-bold">57,70€</span>
</div>
{% render "@template-button" with {
label: "Commander",
color: "dark",
type: "solid",
button_class: "w-full justify-center"
} %}
</div>
</div>
{% render "@product-selection" with {
title: "Recommandé pour vous"
} %}
/* No context defined. */
No notes defined.