/* Featured product — feature icons, custom offer cards, upsell, gift bar, summary and order popup */
/* keep the page exactly as wide as the phone screen (carousels/marquees must not widen it, so the popup stays fully visible) */
@media (max-width: 749px) { html, body { overflow-x: clip; } }
.fpo-list[hidden], .fpg[hidden], .fpm__step[hidden], .fpm__order-ref[hidden], .fp__stock[hidden], .fpm__error[hidden], .fpm__offers[hidden], .fpmu[hidden] { display: none !important; }

/* feature bullets with round icons — compact 2-column grid */
.fp__features--icons { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: .45rem 1rem; }
.fp__features--icons li { align-items: center; gap: .55rem; color: var(--fi-text, inherit); font-size: .92rem; line-height: 1.25; }
@media (max-width: 749px) {
  .fp__features--icons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .6rem; }
  .fp__features--icons li { font-size: .8rem; gap: .45rem; }
  .fp__feat-icon { width: min(var(--fi-size, 36px), 30px); height: min(var(--fi-size, 36px), 30px); font-size: 15px; }
}
.fp__feat-icon {
  flex: none; display: grid; place-items: center; width: var(--fi-size, 36px); height: var(--fi-size, 36px); border-radius: 50%;
  background: var(--fi-bg, color-mix(in srgb, var(--color-accent) 28%, #fff)); font-size: calc(var(--fi-size, 36px) * .5); line-height: 1;
}
.fp__features--icons .fp__feat-icon .icon { width: 55%; height: 55%; margin: 0; color: var(--color-heading); }

/* offer list */
.fpo-list { display: grid; gap: 1rem; }
.fpo-list > .fp__legend { margin-bottom: .2rem; }

/* offer card */
.fpo {
  --_bg: var(--o-bg, var(--color-surface));
  --_border: var(--o-border, var(--color-border));
  --_accent: var(--color-controls-active, var(--color-heading));
  position: relative; display: flex; align-items: center; gap: .9rem;
  padding: var(--fpo-pad, 16px); padding-left: calc(var(--fpo-pad, 16px) + 1.9rem);
  border: 2px solid var(--_border); border-radius: calc(var(--radius) + 4px);
  background: var(--_bg); cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fpo:hover { transform: translateY(-1px); }
.fpo--badge-edge { margin-top: .55rem; }
.fpo--badge-bottom-edge { margin-bottom: .55rem; }
.fpo__input { position: absolute; opacity: 0; pointer-events: none; }
.fpo__radio {
  position: absolute; left: var(--fpo-pad, 16px); top: 50%; translate: 0 -50%;
  width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--color-text) 35%, transparent); background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.fpo:has(.fpo__input:checked) {
  border-color: var(--fpo-sel-border, var(--_accent));
  background: var(--fpo-sel-bg, color-mix(in srgb, var(--color-accent) 12%, var(--_bg)));
  box-shadow: 0 14px 28px -20px color-mix(in srgb, var(--fpo-sel-border, var(--_accent)) 80%, transparent);
}
.fpo:has(.fpo__input:checked) .fpo__radio { border-color: var(--fpo-sel-border, var(--_accent)); box-shadow: inset 0 0 0 4px #fff; background: var(--fpo-sel-border, var(--_accent)); }
.fpo:has(.fpo__input:focus-visible) { outline: 2px solid var(--color-heading); outline-offset: 3px; }

.fpo__media { flex: none; display: grid; place-items: center; width: var(--o-img, 84px); aspect-ratio: 1; }
.fpo__media img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(18, 59, 120, .18)); }
.fpo-list--img-right .fpo__media { order: 2; margin-left: auto; }
.fpo__body { display: grid; gap: .3rem; min-width: 0; flex: 1; }
.fpo__tag {
  justify-self: start; padding: .15rem .6rem; border-radius: 6px; font-size: var(--o-tag-size, 12px); font-weight: 700;
  background: var(--o-tag-bg, color-mix(in srgb, var(--color-accent) 35%, #fff)); color: var(--o-tag-text, var(--color-heading));
}
.fpo:has(.fpo__input:checked) .fpo__tag { background: var(--o-tag-bg, var(--_accent)); color: var(--o-tag-text, #fff); }
.fpo__title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--o-title-size, 17px); line-height: 1.25; color: var(--o-title, var(--color-heading)); }
.fpo__sep { opacity: .45; font-weight: 400; }
.fpo__prices { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .55rem; }
.fpo__price { font-weight: 800; font-size: var(--o-price-size, 20px); color: var(--o-price, var(--color-heading)); }
.fpo__compare { font-size: .9em; opacity: .55; }
.fpo__pct { padding: .12rem .5rem; border-radius: 99px; font-size: .78rem; font-weight: 800; background: var(--o-pct-bg, var(--color-heading)); color: var(--o-pct-text, #fff); }
.fpo__save { font-size: .88rem; font-weight: 600; color: var(--o-save, var(--fpo-save, #b42318)); }
.fpo__ship { font-size: .88rem; font-weight: 600; color: var(--o-ship, var(--fpo-ship, color-mix(in srgb, var(--color-text) 80%, transparent))); }
.fpo__ship.is-free { color: var(--o-ship, var(--fpo-ship-free, #1f8a4c)); font-weight: 800; }
.fpo__extra { font-size: .85rem; }

/* badge: position (left / center / right × top / bottom, edge / inside) + tilt + fine offsets */
.fpo__badge {
  position: absolute; z-index: 1; padding: .3rem .8rem; border-radius: 8px; white-space: nowrap;
  font-size: var(--o-badge-size, 12px); font-weight: 800; letter-spacing: .02em; line-height: 1.2;
  background: var(--o-badge-bg, var(--color-heading)); color: var(--o-badge-text, #fff);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .45);
  transform: translate(var(--b-x, 0px), var(--b-y, 0px)) rotate(var(--b-rot, 0deg));
}
.fpo__badge--edge { top: 0; translate: 0 -55%; }
.fpo__badge--inside { top: .55rem; }
.fpo__badge--bottom-edge { bottom: 0; translate: 0 55%; }
.fpo__badge--bottom-inside { bottom: .55rem; }
.fpo__badge--right { right: .9rem; }
.fpo__badge--left { left: .9rem; }
.fpo__badge--center { left: 50%; }
.fpo__badge--center.fpo__badge--edge { translate: -50% -55%; }
.fpo__badge--center.fpo__badge--inside, .fpo__badge--center.fpo__badge--bottom-inside { translate: -50% 0; }
.fpo__badge--center.fpo__badge--bottom-edge { translate: -50% 55%; }

/* upsell */
.fpu {
  --_ua: var(--u-accent, var(--color-heading));
  position: relative; margin-top: .6rem; padding: 1rem; border-radius: calc(var(--radius) + 4px);
  border: 2px dashed var(--u-border, var(--_ua)); background: var(--u-bg, color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)));
  transition: border-color .2s ease, background-color .2s ease;
}
.fpu.is-added { border-style: solid; background: var(--u-on-bg, var(--u-bg, color-mix(in srgb, #1f8a4c 8%, var(--color-surface)))); }
.fpu__ribbon {
  position: absolute; top: 0; left: 1rem; translate: 0 -55%; padding: .25rem .75rem; border-radius: 99px;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--_ua); color: var(--u-accent-text, #fff);
}
.fpu__row { display: flex; align-items: center; gap: .9rem; }
.fpu__media { flex: none; width: var(--u-img, 76px); aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #fff; }
.fpu__media img { width: 100%; height: 100%; object-fit: contain; }
.fpu__body { display: grid; gap: .2rem; flex: 1; min-width: 0; }
.fpu__title { font-weight: 800; color: var(--u-title, var(--color-heading)); line-height: 1.25; }
.fpu__text { font-size: .85rem; }
.fpu__prices { display: flex; flex-wrap: wrap; gap: .2rem .5rem; align-items: baseline; }
.fpu__price { font-weight: 800; color: var(--u-title, var(--color-heading)); }
.fpu__compare { font-size: .85rem; opacity: .55; }
.fpu__gift { font-size: .85rem; font-weight: 800; color: var(--u-gift, #1f8a4c); }
.fpu__deal { font-size: .9rem; font-weight: 800; line-height: 1.3; color: var(--u-gift, #1f8a4c); }
.fpu__deal[hidden] { display: none; }
.fpu__btn {
  flex: none; min-height: 2.6rem; padding: .5rem 1.1rem; border-radius: 99px; cursor: pointer;
  font: inherit; font-weight: 800; font-size: .9rem; white-space: nowrap;
  border: 2px solid var(--u-btn-bg, var(--_ua)); background: var(--u-btn-bg, var(--_ua)); color: var(--u-btn-text, var(--u-accent-text, #fff));
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.fpu__btn:hover { transform: scale(1.04); }
.fpu__btn[aria-pressed="true"] { background: var(--u-btn-on-bg, #fff); color: var(--u-btn-on-text, #b42318); border-color: var(--u-btn-on-text, #b42318); }
.fpu__btn-added { display: none; }
.fpu__btn[aria-pressed="true"] .fpu__btn-add { display: none; }
.fpu__btn[aria-pressed="true"] .fpu__btn-added { display: inline; }

/* gift progress bar */
.fpg { display: grid; gap: .45rem; padding: .9rem 1rem; border-radius: var(--radius); background: var(--g-bg, color-mix(in srgb, var(--g-fill, var(--color-heading)) 6%, var(--color-surface))); color: var(--g-text, var(--color-heading)); }
.fpg__msg { margin: 0; font-weight: 800; font-size: .95rem; line-height: 1.35; }
.fpg__track { position: relative; height: 12px; border-radius: 99px; background: var(--g-track, rgba(255, 255, 255, .7)); margin-right: 14px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08); }
.fpg__fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--g-fill, var(--color-heading)); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.fpg__icon {
  position: absolute; right: -14px; top: 50%; translate: 0 -50%; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; font-size: 17px; background: #fff;
  border: 3px solid var(--g-track, rgba(255, 255, 255, .7)); transition: border-color .3s ease, transform .3s ease;
}
.fpg.is-unlocked .fpg__icon { border-color: var(--g-fill, var(--color-heading)); transform: scale(1.1); animation: fpg-pop .6s ease; }
.fpg__labels { display: flex; justify-content: space-between; gap: 1rem; font-size: .78rem; font-weight: 700; opacity: .85; }
@keyframes fpg-pop { 40% { transform: scale(1.35) rotate(-8deg); } }

/* summary */
.fps { display: grid; gap: .35rem; padding: .9rem 1rem; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-surface); font-size: .93rem; }
.fps:empty { display: none; }
.fps__row { display: flex; justify-content: space-between; gap: 1rem; }
.fps__row span:last-child { font-weight: 700; white-space: nowrap; text-align: right; }
.fps__row s { opacity: .55; font-weight: 400; margin-right: .3rem; }
.fps__free { color: #1f8a4c; }
.fps__total { margin-top: .3rem; padding-top: .55rem; border-top: 1px dashed var(--color-border); font-weight: 800; font-size: 1.05rem; color: var(--color-heading); }

/* order button + animations */
.fp__order { position: relative; overflow: hidden; min-height: 3.7rem; font-size: 1.1rem; gap: .55rem; background: var(--ob-bg, var(--color-button-bg)); color: var(--ob-text, var(--color-button-text)); border-color: var(--ob-bg, var(--color-button-border, var(--color-button-bg))); }
.fp__order--pulse { animation: fp-order-pulse 2.2s ease-in-out infinite; }
.fp__order--shake { animation: fp-order-shake 3s ease-in-out infinite, fp-order-pulse 3s ease-in-out infinite; }
.fp__order--bounce { animation: fp-order-bounce 2s ease-in-out infinite; }
.fp__order--shine::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 35%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-20deg);
  animation: fp-order-shine 2.6s ease-in-out infinite;
}
.fp__order--shake::after { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 35%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); animation: fp-order-shine 3s ease-in-out infinite; }
@keyframes fp-order-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ob-bg, var(--color-button-bg)) 55%, transparent); } 50% { box-shadow: 0 0 0 12px transparent; } }
@keyframes fp-order-shake { 0%, 70%, 100% { transform: translateX(0) rotate(0); } 74% { transform: translateX(-4px) rotate(-1deg); } 78% { transform: translateX(4px) rotate(1deg); } 82% { transform: translateX(-3px) rotate(-.6deg); } 86% { transform: translateX(3px) rotate(.6deg); } 90% { transform: translateX(0); } }
@keyframes fp-order-bounce { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-6px); } 80% { transform: translateY(0); } 88% { transform: translateY(-3px); } }
@keyframes fp-order-shine { 0% { left: -45%; } 55%, 100% { left: 125%; } }

/* popup */
.fpm {
  --_m: var(--m-accent, var(--color-heading));
  width: min(470px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0;
  border-radius: calc(var(--radius) + 10px); background: var(--color-surface, #fff); color: var(--color-text);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5); overflow: auto; overscroll-behavior: contain;
}
.fpm::backdrop { background: rgba(10, 12, 40, .55); backdrop-filter: blur(3px); }
.fpm[open] { animation: fpm-in .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes fpm-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.fpm__box { position: relative; padding: 0 0 1.1rem; }
.fpm__close { position: absolute; z-index: 2; top: .8rem; right: .8rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--color-text) 8%, transparent); color: var(--_m); cursor: pointer; }
.fpm__head { display: flex; align-items: center; gap: .8rem; padding: 1rem 3.2rem 1rem 1rem; background: color-mix(in srgb, var(--_m) 7%, var(--color-surface)); border-bottom: 1px solid color-mix(in srgb, var(--_m) 15%, transparent); }
.fpm__thumb { flex: none; width: 3.6rem; height: 3.6rem; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .3); }
.fpm__thumb img { width: 100%; height: 100%; object-fit: contain; }
.fpm__head-text { display: grid; gap: .2rem; min-width: 0; }
.fpm__title { margin: 0; font-size: 1.3rem; line-height: 1.15; color: var(--_m); }
.fpm__intro { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .82rem; font-weight: 700; color: var(--_m); }
.fpm__intro .icon { width: 1rem; height: 1rem; flex: none; }
.fpm__offers-wrap, .fpm__form { padding: 0 1rem; }
.fpm__step-label { margin: 1rem 0 .55rem; font-weight: 800; font-size: .9rem; color: var(--color-heading); }
.fpm__offers { display: grid; gap: .6rem; }

.fpmo {
  position: relative; display: flex; align-items: center; gap: .6rem; padding: .65rem .75rem .65rem 2.4rem;
  border: 1.5px solid color-mix(in srgb, var(--_m) 22%, var(--color-border)); border-radius: 12px; cursor: pointer;
  background: var(--color-surface); transition: border-color .2s ease, background-color .2s ease;
}
.fpmo__radio { position: absolute; left: .8rem; top: 50%; translate: 0 -50%; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--color-text) 35%, transparent); background: #fff; }
.fpmo:has(.fpo__input:checked) { border-color: var(--_m); background: color-mix(in srgb, var(--_m) 6%, var(--color-surface)); }
.fpmo:has(.fpo__input:checked) .fpmo__radio { border-color: var(--_m); background: var(--_m); box-shadow: inset 0 0 0 3px #fff; }
.fpmo:has(.fpo__input:focus-visible) { outline: 2px solid var(--_m); outline-offset: 2px; }
.fpmo__img { flex: none; width: 2.9rem; height: 2.9rem; }
.fpmo__img img { width: 100%; height: 100%; object-fit: contain; }
.fpmo__body { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.fpmo__body strong { font-size: .95rem; color: var(--color-heading); line-height: 1.2; }
.fpmo__body small { font-size: .75rem; line-height: 1.3; opacity: .8; }
.fpmo__price { display: grid; justify-items: end; flex: none; }
.fpmo__price b { font-size: 1rem; color: var(--_m); white-space: nowrap; }
.fpmo__price s { font-size: .75rem; opacity: .55; white-space: nowrap; }
.fpmo__badge { position: absolute; top: 0; right: .7rem; translate: 0 -55%; padding: .12rem .55rem; border-radius: 99px; font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: var(--o-badge-bg, var(--_m)); color: var(--o-badge-text, #fff); }
.fpmo:has(.fpmo__badge) { margin-top: .35rem; }

.fpmu {
  display: flex; align-items: center; gap: .6rem; width: 100%; margin-top: .6rem; padding: .6rem .75rem; text-align: left;
  border: 1.5px dashed var(--_m); border-radius: 12px; background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  font: inherit; color: inherit; cursor: pointer;
}
.fpmu__check { flex: none; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 6px; border: 2px solid var(--_m); background: #fff; color: transparent; }
.fpmu__check .icon { width: .85rem; height: .85rem; }
.fpmu[aria-pressed="true"] { border-style: solid; }
.fpmu[aria-pressed="true"] .fpmu__check { background: var(--_m); color: #fff; }
.fpmu__img { flex: none; width: 2.5rem; height: 2.5rem; }
.fpmu__img img { width: 100%; height: 100%; object-fit: contain; }
.fpmu__text { display: grid; gap: .05rem; flex: 1; min-width: 0; }
.fpmu__text strong { font-size: .85rem; color: var(--color-heading); line-height: 1.2; }
.fpmu__text small { font-size: .75rem; font-weight: 700; color: #1f8a4c; }
.fpmu__price { flex: none; font-weight: 800; color: var(--_m); white-space: nowrap; }

.fpm__form { display: grid; gap: .75rem; }
.fpm__form .fpm__step-label { margin-bottom: 0; }
.fpm__field { display: grid; gap: .3rem; }
.fpm__field label { font-weight: 700; font-size: .85rem; color: var(--color-heading); }
.fpm__field label span { color: #b42318; }
.fpm__input { position: relative; }
.fpm__ico { position: absolute; left: .85rem; top: 50%; translate: 0 -50%; width: 1.1rem; height: 1.1rem; color: var(--_m); pointer-events: none; }
.fpm__input .field { width: 100%; padding-left: 2.6rem; font-size: 16px; border-radius: 12px; border-color: color-mix(in srgb, var(--_m) 25%, var(--color-border)); }
.fpm__input .field:focus { border-color: var(--_m); box-shadow: 0 0 0 3px color-mix(in srgb, var(--_m) 18%, transparent); }
.fpm__input .field[aria-invalid="true"] { border-color: #b42318; box-shadow: 0 0 0 1px #b42318 inset; }
.fpm__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fpm__summary .fps { background: color-mix(in srgb, var(--_m) 5%, var(--color-surface)); border-color: color-mix(in srgb, var(--_m) 15%, transparent); }
.fpm__summary .fps__total { color: var(--_m); }
.fpm__error { margin: 0; }
.fpm__submit { min-height: 3.4rem; font-size: 1.02rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; border-radius: 99px; background: var(--m-accent, var(--color-button-bg)); color: var(--m-accent-text, var(--color-button-text)); border-color: var(--m-accent, var(--color-button-bg)); }
.fpm__submit[disabled] { opacity: .7; cursor: progress; }
.fpm__note { margin: 0; text-align: center; font-size: .8rem; opacity: .85; }
.fpm__done { display: grid; justify-items: center; gap: .6rem; text-align: center; padding: 2rem 1.3rem .5rem; }
.fpm__done .fpm__title { margin: 0; }
.fpm__done-icon { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: #1f8a4c; color: #fff; animation: fpg-pop .6s ease; }
.fpm__done-icon .icon { width: 2rem; height: 2rem; }
.fpm__done-text p { margin: 0; }
.fpm__order-ref { margin: 0; font-weight: 800; color: var(--color-heading); }
.fpm__done-btn { min-width: 10rem; margin-top: .4rem; }

/* compact offer cards on every screen: label + title on one line, savings + delivery on one line */
.fpo { gap: .75rem; padding: calc(var(--fpo-pad, 16px) * .65) var(--fpo-pad, 16px) calc(var(--fpo-pad, 16px) * .65) calc(var(--fpo-pad, 16px) + 1.7rem); }
.fpo--badge-edge { margin-top: .45rem; }
.fpo__body { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; }
.fpo__tag { flex: 0 0 auto; }
.fpo__title { flex: 1 1 auto; }
.fpo__prices { flex-basis: 100%; }
.fpo__save:has(+ .fpo__ship)::after { content: "·"; margin-left: .5rem; opacity: .5; }

/* « Choisissez votre produit » cards — colors from the section settings */
.fp__selectors .fp-select { background: var(--sel-bg, var(--color-surface)); border-color: var(--sel-border, var(--color-border)); }
.fp__selectors .fp-select__media { background: var(--sel-media-bg, color-mix(in srgb, var(--color-accent) 18%, var(--color-surface))); }
.fp__selectors .fp-select__label { color: var(--sel-text, var(--color-heading)); }
.fp__selectors .fp-select:has(input:checked) { border-color: var(--sel-active-border, var(--color-controls-active)); box-shadow: 0 0 0 2px var(--sel-active-border, var(--color-controls-active)) inset; }
.fp__selectors .fp-select:has(input:checked) .fp-select__label { background: var(--sel-active-bg, var(--color-controls-active)); color: var(--sel-active-text, var(--color-surface)); }

/* smaller main price above the offers */
.fp__price-row { padding-block: .6rem; }
.fp__price { font-size: var(--fp-price-size, 24px); line-height: 1.2; }
.fp__price .price__compare { font-size: .68em; }
.fp__price .price__save { font-size: max(10px, .42em); padding: .18rem .55rem; vertical-align: middle; letter-spacing: .04em; }

/* compact upsell card (desktop) */
.fpu { padding: .7rem .85rem; }
.fpu__row { gap: .7rem; }
.fpu__media { width: min(var(--u-img, 76px), 56px); }
.fpu__title { font-size: .95rem; }
.fpu__deal { font-size: .82rem; }
.fpu__btn { min-height: 2.3rem; padding: .4rem .95rem; font-size: .85rem; }

/* "OFFRE SPÉCIALE" ribbon animation */
.fpu__ribbon--shake { animation: fpu-shake 2.2s ease-in-out infinite; }
.fpu__ribbon--pulse { animation: fpu-pulse 1.6s ease-in-out infinite; }
@keyframes fpu-shake { 0%, 60%, 100% { transform: rotate(0) scale(1); } 66% { transform: rotate(-7deg) scale(1.08); } 72% { transform: rotate(6deg) scale(1.08); } 78% { transform: rotate(-5deg) scale(1.05); } 84% { transform: rotate(3deg) scale(1.03); } 90% { transform: rotate(0) scale(1); } }
@keyframes fpu-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* WhatsApp green button under the order button */
.fpwa-or { display: flex; align-items: center; gap: .8rem; width: 100%; margin: .15rem 0 0; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.fpwa-or::before, .fpwa-or::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.fpwa {
  position: relative; isolation: isolate; justify-self: center; display: inline-flex; align-items: center; gap: .75rem;
  padding: .4rem .45rem .4rem .4rem; border-radius: 99px; text-decoration: none; font-weight: 800; font-size: 1.02rem;
  background: var(--wa-bg, linear-gradient(135deg, #25d366 0%, #1ebe5b 100%)); color: var(--wa-text, #fff);
  box-shadow: 0 14px 26px -14px rgba(37, 211, 102, .95); transition: transform .2s ease, box-shadow .2s ease;
}
.fpwa:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -14px rgba(37, 211, 102, 1); }
.fpwa::before, .fpwa::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; border: 2px solid #25d366; animation: fpwa-ring 2.4s ease-out infinite; }
.fpwa::after { animation-delay: 1.2s; }
.fpwa__icon { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: #fff; color: #25d366; animation: fpwa-wiggle 2.4s ease-in-out infinite; }
.fpwa__icon .icon { width: 1.2rem; height: 1.2rem; }
.fpwa__text { padding-right: .3rem; }
.fpwa__arrow { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: transform .2s ease; }
.fpwa:hover .fpwa__arrow { transform: translateX(3px); }
@keyframes fpwa-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.12, 1.5); opacity: 0; } }
@keyframes fpwa-wiggle { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-14deg); } 82% { transform: rotate(12deg); } 88% { transform: rotate(-6deg); } }

/* tablet + mobile: smaller sizes so each offer stays on 3 short lines */
@media (max-width: 749px) {
  .fpo-list { gap: .65rem; }
  .fpo { gap: .45rem; padding: 7px 8px 7px calc(8px + 1.45rem); border-radius: 14px; }
  .fpo--badge-edge { margin-top: .45rem; }
  .fpo__radio { left: 8px; width: 1.05rem; height: 1.05rem; }
  .fpo__media { width: min(var(--fpo-img-m, 52px), 46px); }
  .fpo__media img { filter: none; }
  .fpo__body { display: flex; flex-wrap: wrap; align-items: center; gap: .08rem .35rem; }
  .fpo__tag { flex: 0 0 auto; font-size: 10px; padding: .06rem .38rem; border-radius: 5px; }
  .fpo__title { flex: 1 1 auto; font-size: min(var(--o-title-size, 17px), 12.5px); line-height: 1.2; }
  .fpo__prices { flex-basis: 100%; flex-wrap: nowrap; gap: .35rem; }
  .fpo__price { font-size: min(var(--o-price-size, 20px), 16px); white-space: nowrap; }
  .fpo__compare { font-size: .74rem; white-space: nowrap; }
  .fpo__pct { font-size: .64rem; padding: .04rem .36rem; white-space: nowrap; }
  .fpo__save, .fpo__ship { font-size: 10px; line-height: 1.25; white-space: nowrap; }
  .fpo__save:has(+ .fpo__ship)::after { content: "·"; margin-left: .35rem; opacity: .5; }
  .fpo__badge { font-size: min(var(--o-badge-size, 12px), 10.5px); padding: .18rem .55rem; }
  .fpu { padding: .6rem .65rem; }
  .fpu__row { flex-wrap: nowrap; gap: .55rem; }
  .fpu__media { width: min(var(--u-img, 76px), 44px); }
  .fpu__title { font-size: 12.5px; }
  .fpu__deal { font-size: 11px; }
  .fpu__btn { width: auto; min-height: 2.1rem; padding: .3rem .7rem; font-size: .76rem; }
  .fpu__ribbon { font-size: .62rem; padding: .18rem .6rem; }
  .fp__price { font-size: calc(var(--fp-price-size, 24px) * .85); }
}
@media (max-width: 599px) {
  /* centered card with a margin on both sides */
  .fpm { position: fixed; inset: 0; margin: auto; width: calc(100% - 28px); max-width: 420px; height: fit-content; max-height: calc(100dvh - 40px); box-sizing: border-box; border-radius: 20px; overflow-x: hidden; }
  .fpm__box, .fpm__form, .fpm__offers-wrap { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .fpmo, .fpmu { max-width: 100%; box-sizing: border-box; }
  /* smaller content */
  .fpm__box { padding-bottom: .8rem; }
  .fpm__close { top: .55rem; right: .55rem; width: 1.9rem; height: 1.9rem; }
  .fpm__head { gap: .6rem; padding: .7rem 2.7rem .7rem .75rem; }
  .fpm__thumb { width: 2.7rem; height: 2.7rem; border-radius: 10px; }
  .fpm__title { font-size: 1.05rem; }
  .fpm__intro { font-size: .7rem; }
  .fpm__offers-wrap, .fpm__form { padding: 0 .75rem; }
  .fpm__step-label { margin: .7rem 0 .4rem; font-size: .8rem; }
  .fpm__offers { gap: .45rem; }
  .fpmo { gap: .45rem; padding: .45rem .55rem .45rem 2rem; border-radius: 10px; }
  .fpmo__radio { left: .6rem; width: 1rem; height: 1rem; }
  .fpmo__img { width: 2.2rem; height: 2.2rem; }
  .fpmo__body strong { font-size: .82rem; }
  .fpmo__body small { font-size: .66rem; }
  .fpmo__price b { font-size: .85rem; }
  .fpmo__price s { font-size: .66rem; }
  .fpmo__badge { font-size: .55rem; right: .5rem; }
  .fpmu { gap: .45rem; padding: .45rem .55rem; margin-top: .45rem; border-radius: 10px; }
  .fpmu__img { width: 2rem; height: 2rem; }
  .fpmu__text strong { font-size: .76rem; }
  .fpmu__text small { font-size: .66rem; }
  .fpmu__price { font-size: .8rem; }
  .fpm__form { gap: .55rem; }
  .fpm__field { gap: .2rem; }
  .fpm__field label { font-size: .76rem; }
  .fpm__input .field { min-height: 2.6rem; padding-top: .45rem; padding-bottom: .45rem; padding-left: 2.3rem; border-radius: 10px; }
  .fpm__ico { left: .7rem; width: 1rem; height: 1rem; }
  .fpm__summary .fps { padding: .6rem .75rem; font-size: .8rem; gap: .25rem; }
  .fpm__summary .fps__total { font-size: .9rem; }
  .fpm__submit { min-height: 2.9rem; font-size: .88rem; }
  .fpm__note { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fpo, .fpg__fill, .fpg__icon, .fp__order, .fp__order::after, .fpm[open], .fpm__done-icon, .fpu__ribbon, .fpwa::before, .fpwa::after, .fpwa__icon { transition: none; animation: none !important; }
}