/* ═══════════════════════════════════════════════════════════════════════════
   Fox Affiliate — Premium Frontend Templates
   Supports: .fox-style-minimal | card | featured | glass
             .fox-btn-filled | outline | ghost
             .fox-animate
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens (defaults, overridden by Fox_Design via :root) ─────────── */
:root {
    --fox-accent:      #FF6B35;
    --fox-accent-hover:#E55A25;
    --fox-text:        #0F172A;
    --fox-text-muted:  #64748B;
    --fox-bg:          #FFFFFF;
    --fox-bg-badge:    #FFF7ED;
    --fox-border:      #E2E8F0;
    --fox-price:       #DC2626;
    --fox-btn-text:    #FFFFFF;
    --fox-radius:      12px;
    --fox-radius-sm:   8px;
    --fox-radius-lg:   16px;
    --fox-shadow:      0 4px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
    --fox-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Comportement — valeurs PHP injectées au runtime par Fox_Design::inject_styles() */
    --fox-show-badge:  1;
    --fox-animate:     1;
    --fox-show-savings:1;
    --fox-img-bg:      linear-gradient(135deg, #f8fafc, #f1f5f9);
}

/* BOX */
.fox-box {
    font-family: var(--fox-font);
    background: var(--fox-bg);
    border-radius: var(--fox-radius-lg);
    overflow: hidden;
    display: flex;
    gap: 0;
    max-width: 100%;
    position: relative;
    transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s;
    margin: 20px 0;
    border: 1px solid var(--fox-border);
    box-shadow: var(--fox-shadow);
}

.fox-box:hover { transform: translateY(-2px); box-shadow: 0 8px 40px rgba(0,0,0,.14); }

/* Minimal */
.fox-style-minimal .fox-box { box-shadow: none; border-radius: var(--fox-radius); border: 1.5px solid var(--fox-border); }
.fox-style-minimal .fox-box:hover { transform: none; border-color: var(--fox-accent); }

/* Featured */
.fox-style-featured .fox-box { flex-direction: column; border: none; max-width: 320px; }
.fox-style-featured .fox-box__image-link { width: 100%; height: 200px; }
.fox-style-featured .fox-box__image { width: 100%; height: 200px; object-fit: contain; background: var(--fox-img-bg); padding: 20px; }
.fox-style-featured .fox-box__body { padding: 20px; }

/* Glass */
.fox-style-glass .fox-box {
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 8px 32px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.8);
}

.fox-box__image-link {
    display: block;
    flex-shrink: 0;
    width: 140px;
    background: var(--fox-img-bg);
    overflow: hidden;
}

.fox-box__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 12px;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.fox-box:hover .fox-box__image { transform: scale(1.04); }

.fox-box__body { flex: 1; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.fox-box__badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--fox-accent); background: var(--fox-bg-badge); border-radius: 20px; padding: 3px 9px; width: fit-content;
    /* show_badge: opacity 1 = visible, 0 = hidden (set via --fox-show-badge in :root) */
    opacity: var(--fox-show-badge, 1);
    pointer-events: none;
    max-height: calc(var(--fox-show-badge, 1) * 40px);
    overflow: hidden;
    margin-bottom: calc(var(--fox-show-badge, 1) * 2px);
}

.fox-box__title { font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--fox-text); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fox-box__title a { color: inherit; text-decoration: none; }
.fox-box__title a:hover { color: var(--fox-accent); }

.fox-box__footer { display: flex; align-items: center; gap: 12px; margin-top: auto; flex-wrap: wrap; }

.fox-box__price { font-size: 20px; font-weight: 800; color: var(--fox-price); letter-spacing: -.03em; line-height: 1; }
.fox-box__price-label { display: block; font-size: 10px; font-weight: 500; color: var(--fox-text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.fox-box__price-block { display: flex; flex-direction: column; gap: 2px; }
.fox-box__price-before { font-size: 13px; font-weight: 500; color: var(--fox-text-muted); text-decoration: line-through; line-height: 1; }

.fox-box__availability { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: #16A34A; }
.fox-box__availability::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fox-box__availability.unavailable { color: var(--fox-text-muted); }

/* Prime badge inline — affiché à côté du statut stock dans box & showcase */
.fox-box__prime {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #0066c0;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 6px;
    border-radius: 3px;
    vertical-align: middle;
    line-height: 1.4;
    text-transform: uppercase;
}
.fox-box__prime svg {
    flex-shrink: 0;
}

/* BUTTONS */
.fox-box__btn, .fox-table__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 18px; border-radius: var(--fox-radius-sm);
    font-size: 13px; font-weight: 600; font-family: var(--fox-font);
    text-decoration: none !important; cursor: pointer; border: 2px solid transparent;
    transition: background .18s, color .18s, border-color .18s, transform .15s, box-shadow .18s;
    white-space: nowrap; line-height: 1;
}

/* Filled */
.fox-box__btn, .fox-table__btn,
.fox-btn-filled .fox-box__btn, .fox-btn-filled .fox-table__btn {
    background: var(--fox-accent); color: var(--fox-btn-text) !important; border-color: var(--fox-accent);
}
.fox-box__btn:hover, .fox-table__btn:hover,
.fox-btn-filled .fox-box__btn:hover, .fox-btn-filled .fox-table__btn:hover {
    background: var(--fox-accent-hover); border-color: var(--fox-accent-hover);
    transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255,107,53,.35);
}

/* Outline */
.fox-btn-outline .fox-box__btn, .fox-btn-outline .fox-table__btn {
    background: transparent; color: var(--fox-accent) !important; border-color: var(--fox-accent);
}
.fox-btn-outline .fox-box__btn:hover, .fox-btn-outline .fox-table__btn:hover {
    background: var(--fox-accent); color: var(--fox-btn-text) !important;
}

/* Ghost */
.fox-btn-ghost .fox-box__btn, .fox-btn-ghost .fox-table__btn {
    background: var(--fox-bg-badge); color: var(--fox-accent) !important; border-color: transparent;
}
.fox-btn-ghost .fox-box__btn:hover, .fox-btn-ghost .fox-table__btn:hover {
    background: var(--fox-accent); color: var(--fox-btn-text) !important;
}

.fox-box__btn::after { content: '→'; font-style: normal; transition: transform .18s; }
.fox-box__btn:hover::after { transform: translateX(3px); }

/* LINK */
.fox-link {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--fox-accent); font-family: var(--fox-font); font-weight: 600; font-size: inherit;
    text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,107,53,.4);
    transition: color .15s, text-decoration-color .15s;
}
.fox-link:hover { color: var(--fox-accent-hover); text-decoration-color: var(--fox-accent-hover); }

/* TABLE */
.fox-table-wrap {
    overflow-x: auto; margin: 24px 0;
    border-radius: var(--fox-radius-lg); box-shadow: var(--fox-shadow);
    font-family: var(--fox-font); border: 1px solid var(--fox-border);
}

.fox-table { width: 100%; border-collapse: collapse; background: var(--fox-bg); font-size: 14px; }

.fox-table thead th {
    background: #F8FAFC; border-bottom: 1px solid var(--fox-border); padding: 13px 16px;
    text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--fox-text-muted); white-space: nowrap;
}

.fox-table td { padding: 14px 16px; border-bottom: 1px solid var(--fox-border); vertical-align: middle; color: var(--fox-text); }
.fox-table__row:last-child td { border-bottom: none; }
.fox-table__row { transition: background .15s; }
.fox-table__row:hover td { background: rgba(255,107,53,.03); }

.fox-table__col-img { width: 80px; text-align: center; background: var(--fox-img-bg); padding: 8px; }
.fox-table__col-img img { width: 60px; height: 60px; object-fit: contain; transition: transform .25s; }
.fox-table__row:hover .fox-table__col-img img { transform: scale(1.08); }

.fox-table__title a { color: var(--fox-text); text-decoration: none; font-weight: 500; line-height: 1.4; }
.fox-table__title a:hover { color: var(--fox-accent); }

.fox-table__price-cell { white-space: nowrap; width: 110px; }
.fox-table__price { font-size: 17px; font-weight: 800; color: var(--fox-price); letter-spacing: -.02em; }
.fox-table__na { color: var(--fox-text-muted); font-size: 13px; }
.fox-table__col-action { width: 110px; }
.fox-table__btn { padding: 7px 14px; font-size: 12px; }
.fox-table__btn::after { content: none; }

/* ANIMATIONS
   Triggered by .fox-animate body class (set by Fox_Design::inject_styles)
   AND by --fox-animate CSS var for live studio preview.
   Trick: animation-duration:0s when --fox-animate:0 = no visible animation */
.fox-box {
    animation: fox-slide-up .4s cubic-bezier(.16,1,.3,1) both;
    animation-duration: calc(var(--fox-animate, 0) * 0.4s);
}
.fox-table-wrap {
    animation: fox-fade-in .35s ease both;
    animation-duration: calc(var(--fox-animate, 0) * 0.35s);
}
/* When body has .fox-animate class (frontend), force duration regardless of var */
.fox-animate .fox-box      { animation-duration: .4s; }
.fox-animate .fox-table-wrap { animation-duration: .35s; }

@keyframes fox-slide-up { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes fox-fade-in  { from { opacity:0; } to { opacity:1; } }

/* STATES */
.fox-placeholder { display:block; font-family:var(--fox-font); }
.fox-skeleton-wrap { margin: 24px 0; }
.fox-skeleton-wrap--grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px; }

/* ── Skeleton card ─────────────────────────────────────────────────────── */
.fox-skeleton-card { background:var(--fox-card-bg, #fff); border-radius:var(--fox-radius, 12px); overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.fox-skeleton-card--horizontal { display:flex; flex-direction:row; min-height:140px; }
.fox-skeleton-card--horizontal .fox-skeleton__image { width:160px; min-height:140px; flex-shrink:0; }
.fox-skeleton-card--vertical { display:flex; flex-direction:column; }
.fox-skeleton__image { background:#f0f2f5; }
.fox-skeleton__image--tall { height:160px; }
.fox-skeleton__body { flex:1; padding:16px; display:flex; flex-direction:column; gap:10px; }
.fox-skeleton__footer { display:flex; align-items:center; gap:10px; margin-top:auto; }
.fox-skeleton__line { border-radius:6px; background:#f0f2f5; }
.fox-skeleton__line--title { height:14px; width:85%; }
.fox-skeleton__line--short { height:12px; width:55%; }
.fox-skeleton__line--price { height:20px; width:60px; border-radius:4px; }
.fox-skeleton__line--btn   { height:32px; width:90px; border-radius:8px; margin-left:auto; }

/* ── Shimmer animation ─────────────────────────────────────────────────── */
.fox-shimmer {
    position:relative; overflow:hidden;
}
.fox-shimmer::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
    animation: fox-shimmer 1.6s ease-in-out infinite;
}
@keyframes fox-shimmer {
    0%   { transform:translateX(-100%); }
    100% { transform:translateX(100%); }
}

/* Timeout → freeze: stop shimmer, fade to muted */
.fox-skeleton-wrap--stale .fox-shimmer::after { animation:none; opacity:0; }
.fox-skeleton-wrap--stale .fox-skeleton__image,
.fox-skeleton-wrap--stale .fox-skeleton__line { background:#f5f6f7; }

.fox-error { color:#DC2626; font-size:12px; font-family:var(--fox-font); padding:6px 10px; background:#FEF2F2; border-radius:6px; border-left:3px solid #DC2626; margin:8px 0; }

/* Old spinner — kept for compat */
.fox-worker-spinner { display:none; }

/* RESPONSIVE — skeleton */
@media (max-width: 520px) {
    .fox-skeleton-card--horizontal { flex-direction:column; min-height:auto; }
    .fox-skeleton-card--horizontal .fox-skeleton__image { width:100%; min-height:120px; }
    .fox-skeleton-wrap--grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
}

/* RESPONSIVE */
@media (max-width: 520px) {
    .fox-box { flex-direction: column; }
    .fox-box__image-link { width: 100%; height: 180px; }
    .fox-box__image { height: 180px; padding: 16px; }
    .fox-table thead { display: none; }
    .fox-table td { display: block; padding: 8px 14px; border-bottom: none; }
    .fox-table__row { border-bottom: 1px solid var(--fox-border); }
    .fox-table__col-img { width: 100%; text-align: left; display: flex; align-items: center; gap: 12px; background: none; padding: 14px 14px 0; }
    .fox-table__col-img img { width: 50px; height: 50px; }
    .fox-table__col-action { padding-bottom: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRICE HISTORY — Sparkline + Badge
   ══════════════════════════════════════════════════════════════════════════ */

.fox-sparkline { display: flex; flex-direction: column; gap: 5px; }
.fox-sparkline__svg { display: block; }

.fox-price-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--fox-text-muted); font-family: var(--fox-font); }
.fox-price-badge__icon { font-size: 10px; line-height: 1; }
.fox-price-badge strong { font-weight: 700; }
.fox-price-badge--low  { color: #15803D; }
.fox-price-badge--high { color: #B91C1C; }

/* ── Prix raffiné : wrap prix + sparkline inline (box & showcase) ── */
.fox-box__price-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fox-box__price-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 2px 7px;
    border-radius: 20px;
    line-height: 1.5;
    white-space: nowrap;
}
.fox-box__price-tag--low  { background: #DCFCE7; color: #15803D; }
.fox-box__price-tag--high { background: #FEE2E2; color: #B91C1C; }

.fox-box__sparkline-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: default;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border: 1px solid rgba(0,0,0,.05);
    border-radius: 8px;
    padding: 5px 8px;
    transition: background .2s ease;
}
.fox-box__sparkline-wrap:hover {
    background: linear-gradient(135deg, #F1F5F9 0%, #E8EDF2 100%);
}
.fox-box__sparkline-wrap .fox-sparkline { flex-direction: row; align-items: center; gap: 0; }
.fox-box__sparkline-wrap .fox-sparkline__svg { width: 72px; height: 24px; }

/* Badge inside sparkline-wrap — compact pill */
.fox-box__sparkline-wrap .fox-box__price-tag {
    margin: 0;
    font-size: 9px;
    padding: 1px 6px;
    line-height: 1.4;
}

/* Showcase — sparkline légèrement plus grande */
.fox-showcase__price-wrap.fox-box__price-wrap .fox-box__sparkline-wrap .fox-sparkline__svg { width: 90px; height: 28px; }
.fox-showcase__price-wrap.fox-box__price-wrap .fox-box__sparkline-wrap { padding: 6px 10px; gap: 4px; }
.fox-showcase__price-wrap.fox-box__price-wrap .fox-box__sparkline-wrap .fox-box__price-tag {
    font-size: 10px;
    padding: 2px 7px;
}

/* Sparkline refined stroke & dot */
.fox-sparkline__svg polyline { stroke-width: 1.2; }
.fox-sparkline__svg circle {
    r: 2.5;
    filter: drop-shadow(0 0 2px currentColor);
    transition: r .2s ease;
}
.fox-box__sparkline-wrap:hover .fox-sparkline__svg circle { r: 3; }

/* Subtle pulse on the endpoint dot */
@keyframes fox-spark-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}
.fox-sparkline__svg circle { animation: fox-spark-pulse 2.4s ease-in-out infinite; }

/* ══════════════════════════════════════════════════════════════════════════
   SMART WIDGETS — Shared base
   ══════════════════════════════════════════════════════════════════════════ */

.fox-best { font-family: var(--fox-font); margin: 24px 0; }

/* Header */
.fox-best__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.fox-best__title { font-size: 18px; font-weight: 700; color: var(--fox-text); margin: 0; letter-spacing: -.02em; }

.fox-best__header-right { display: flex; align-items: center; gap: 10px; }

.fox-best__count {
    font-size: 12px; color: var(--fox-text-muted);
    background: #F1F5F9; border-radius: 20px; padding: 2px 8px;
}

/* Shared item card */
.fox-best__item {
    position: relative; background: var(--fox-bg);
    border: 1px solid var(--fox-border); border-radius: var(--fox-radius);
    box-shadow: var(--fox-shadow); overflow: hidden;
    transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s;
}

.fox-best__item:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.13); }

/* Ranked item top borders */
.fox-best__item--ranked:nth-child(1) { border-top: 3px solid #FF6B35; }
.fox-best__item--ranked:nth-child(2) { border-top: 3px solid #94A3B8; }
.fox-best__item--ranked:nth-child(3) { border-top: 3px solid #92400E; }

/* Rank badge */
.fox-best__rank {
    position: absolute; top: 10px; left: 10px;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; z-index: 2;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.fox-best__rank--inline { position: static; width: 28px; height: 28px; flex-shrink: 0; font-size: 12px; }
.fox-best__rank--plain {
    width: 28px; height: 28px; border-radius: 50%; background: #F1F5F9;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: var(--fox-text-muted); flex-shrink: 0;
}

/* Image link */
.fox-best__image-link { display: block; background: var(--fox-img-bg); height: 160px; overflow: hidden; flex-shrink: 0; }
.fox-best__image { width: 100%; height: 100%; object-fit: contain; padding: 16px; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.fox-best__item:hover .fox-best__image { transform: scale(1.06); }

/* Body */
.fox-best__body { padding: 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.fox-best__brand { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--fox-accent); }

.fox-best__item-title {
    font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--fox-text); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.fox-best__item-title a { color: inherit; text-decoration: none; }
.fox-best__item-title a:hover { color: var(--fox-accent); }

/* Stars */
.fox-best__stars { display: flex; align-items: center; gap: 1px; }
.fox-best__review-count { font-size: 11px; color: var(--fox-text-muted); margin-left: 5px; }

/* Footer (price + CTA) */
.fox-best__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.fox-best__price-wrap { display: flex; flex-direction: column; gap: 2px; }
.fox-best__price { font-size: 16px; font-weight: 800; color: var(--fox-price); letter-spacing: -.02em; }
.fox-best__price-range { font-size: 10px; color: var(--fox-text-muted); }

.fox-best__price-tag {
    display: inline-block; font-size: 10px; font-weight: 700; border-radius: 4px; padding: 1px 5px; margin-bottom: 2px;
}
.fox-best__price-tag--low { background: #DCFCE7; color: #15803D; }
.fox-best__price-tag--high { background: #FEE2E2; color: #B91C1C; }
.fox-best__price-before { font-size: 11px; font-weight: 500; color: var(--fox-text-muted); text-decoration: line-through; line-height: 1; }
.fox-best__price-wrap.has-promo .fox-best__price { color: #DC2626; }

.fox-best__sparkline-wrap {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border: 1px solid rgba(0,0,0,.05);
    border-radius: 6px;
    padding: 4px 6px;
}
.fox-best__sparkline-wrap .fox-sparkline { flex-direction: row; align-items: center; }
.fox-best__sparkline-wrap .fox-sparkline__svg { width: 72px; height: 24px; }

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT: GRID
   ══════════════════════════════════════════════════════════════════════════ */

.fox-best--grid .fox-best__grid {
    display: grid;
    /* auto-fit (et non auto-fill) : si le filtre réduit le pool sous le count
       demandé (ex: count=4, filter=price>20 retourne 3 produits), les colonnes
       vides s'effondrent au lieu de réserver un emplacement à droite. Évite
       aussi un effet "shift" en preview Studio pendant le crossfade des layers
       (back en position:absolute prend la largeur du parent dictée par front,
       auto-fill réservait alors un slot vide visible 200ms). */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.fox-best--grid .fox-best__item { display: flex; flex-direction: column; }

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT: LIST
   ══════════════════════════════════════════════════════════════════════════ */

.fox-best--list .fox-best__list { display: flex; flex-direction: column; gap: 10px; }

.fox-best--list .fox-best__list-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--fox-radius);
    transition: transform .18s, box-shadow .18s, border-color .18s;
}

.fox-best--list .fox-best__list-item:hover {
    transform: translateX(3px);
    border-color: var(--fox-accent);
    box-shadow: 0 4px 20px rgba(0,0,0,.09);
}

.fox-best--list .fox-best__list-rank { flex-shrink: 0; }

.fox-best--list .fox-best__list-image-link {
    width: 72px; height: 72px; border-radius: var(--fox-radius-sm);
    background: var(--fox-img-bg);
    flex-shrink: 0; display: block; overflow: hidden;
}

.fox-best--list .fox-best__list-image {
    width: 100%; height: 100%; object-fit: contain; padding: 8px;
    transition: transform .25s;
}

.fox-best--list .fox-best__list-item:hover .fox-best__list-image { transform: scale(1.08); }

.fox-best--list .fox-best__list-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.fox-best--list .fox-best__item-title { -webkit-line-clamp: 2; }

.fox-best--list .fox-best__list-price {
    flex-shrink: 0;
    text-align: right;
    display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
    min-width: 90px;
}

.fox-best--list .fox-best__list-action { flex-shrink: 0; }

/* Connector line between list items */
.fox-best--list .fox-best__list-item + .fox-best__list-item {
    position: relative;
}
.fox-best--list .fox-best__list-item + .fox-best__list-item::before {
    content: '';
    position: absolute;
    top: -5px; left: 16px; right: 16px;
    height: 1px;
    background: var(--fox-border);
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT: CAROUSEL
   ══════════════════════════════════════════════════════════════════════════ */

.fox-best--carousel { position: relative; }

/* Nav buttons */
.fox-best__nav { display: flex; gap: 6px; }

.fox-best__nav-btn {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1.5px solid var(--fox-border);
    background: var(--fox-bg);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--fox-text-muted);
    transition: all .18s; flex-shrink: 0;
}

.fox-best__nav-btn:hover {
    background: var(--fox-accent); color: #fff; border-color: var(--fox-accent);
    box-shadow: 0 4px 12px rgba(255,107,53,.3);
}

.fox-best__nav-btn:disabled { opacity: .3; cursor: default; pointer-events: none; }

/* Carousel track: CSS scroll snap */
.fox-best__carousel-outer {
    overflow: hidden;
    margin: 0 -4px;
}

.fox-best__track {
    display: flex;
    gap: 16px;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 4px 4px 8px;
    scrollbar-width: none;
}

.fox-best__track::-webkit-scrollbar { display: none; }

.fox-best__slide {
    flex: 0 0 calc(33.333% - 11px);
    min-width: 200px;
    max-width: 280px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

/* Dot indicators */
.fox-best__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
}

.fox-best__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--fox-border); border: none; cursor: pointer; padding: 0;
    transition: all .2s cubic-bezier(.4,0,.2,1);
}

.fox-best__dot.is-active {
    width: 22px; border-radius: 4px;
    background: var(--fox-accent);
    box-shadow: 0 2px 8px rgba(255,107,53,.4);
}

.fox-best__dot:hover:not(.is-active) { background: var(--fox-text-muted); }

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT: FEATURED
   ══════════════════════════════════════════════════════════════════════════ */

.fox-best--featured .fox-best__featured-wrap {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 16px;
    align-items: start;
}

/* Hero card */
.fox-best--featured .fox-best__hero {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.fox-best__hero-image-link {
    display: block;
    height: 260px;
    background: var(--fox-img-bg);
    overflow: hidden;
}

.fox-best__hero-image {
    width: 100%; height: 100%;
    object-fit: contain; padding: 24px;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}

.fox-best__hero:hover .fox-best__hero-image { transform: scale(1.04); }

.fox-best__hero-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.fox-best__hero-title {
    font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--fox-text); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

.fox-best__hero-title a { color: inherit; text-decoration: none; }
.fox-best__hero-title a:hover { color: var(--fox-accent); }

.fox-best__hero-sparkline {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border: 1px solid rgba(0,0,0,.05);
    border-radius: 8px;
    padding: 6px 10px;
}
.fox-best__hero-sparkline .fox-sparkline { flex-direction: row; align-items: center; gap: 10px; }
.fox-best__hero-sparkline .fox-sparkline__svg { width: 200px; height: 40px; }

.fox-best__hero-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    flex-wrap: wrap;
}

.fox-best__hero-price { display: flex; flex-direction: column; gap: 2px; }
.fox-best__price--hero { font-size: 26px; font-weight: 900; color: var(--fox-price); letter-spacing: -.03em; }
.fox-best__hero-price.has-promo .fox-best__price--hero { color: #DC2626; }
.fox-best__hero-price { display: flex; flex-direction: column; gap: 3px; }
.fox-best__hero-price .fox-best__price-before { font-size: 14px; }

.fox-best__hero-cta { padding: 12px 22px; font-size: 14px; }

/* Mini strip */
.fox-best--featured .fox-best__mini-strip {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fox-best__mini {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
}

.fox-best__mini-image-link {
    width: 70px; height: 70px;
    border-radius: var(--fox-radius-sm);
    background: var(--fox-img-bg);
    flex-shrink: 0; overflow: hidden;
}

.fox-best__mini-image-link img {
    width: 100%; height: 100%; object-fit: contain; padding: 8px;
    transition: transform .25s;
}

.fox-best__mini:hover .fox-best__mini-image-link img { transform: scale(1.08); }

.fox-best__mini-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fox-best__mini-body .fox-best__item-title { font-size: 12px; -webkit-line-clamp: 2; }
.fox-best__mini-body .fox-best__price { font-size: 14px; }
.fox-best__mini-body .fox-best__footer { margin-top: 0; }
.fox-best__mini-body .fox-best__footer .fox-table__btn { padding: 5px 10px; font-size: 11px; }

/* ══════════════════════════════════════════════════════════════════════════
   ANIMATIONS (staggered)
   ══════════════════════════════════════════════════════════════════════════ */

.fox-animate .fox-best__item,
.fox-animate .fox-best__list-item,
.fox-animate .fox-best__slide {
    animation: fox-slide-up .4s cubic-bezier(.16,1,.3,1) both;
    animation-delay: var(--fox-item-delay, 0ms);
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Featured collapses to single column */
    .fox-best--featured .fox-best__featured-wrap {
        grid-template-columns: 1fr;
    }
    .fox-best--featured .fox-best__mini-strip {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    /* Carousel: 2 visible slides */
    .fox-best__slide { flex: 0 0 calc(50% - 8px); }
}

@media (max-width: 540px) {
    /* Grid: 2 cols */
    .fox-best--grid .fox-best__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .fox-best__image-link { height: 130px; }
    .fox-best__body { padding: 10px; }
    .fox-best__price { font-size: 14px; }

    /* List: hide sparkline on mobile */
    .fox-best--list .fox-best__sparkline-wrap { display: none; }
    .fox-best--list .fox-best__list-price { min-width: 70px; }

    /* Carousel: 1 visible slide */
    .fox-best__slide { flex: 0 0 calc(100% - 16px); max-width: none; }

    /* Featured */
    .fox-best--featured .fox-best__mini-strip { grid-template-columns: 1fr; }
    .fox-best__hero-image-link { height: 200px; }
    .fox-best__hero-body { padding: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT: MASONRY
   ══════════════════════════════════════════════════════════════════════════ */

.fox-best--masonry .fox-best__masonry {
    columns: 3 200px;
    column-gap: 16px;
}

.fox-best__masonry-item {
    break-inside: avoid;
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

/* Variable image heights for natural rhythm */
.fox-best__masonry-img {
    height: calc( 120px + var(--fox-clip, 2) * 20px ); /* 160px or 180px */
    background: var(--fox-img-bg);
    overflow: hidden;
}

.fox-best__masonry-title {
    -webkit-line-clamp: var(--fox-clip, 2) !important;
}

.fox-best__masonry-spark {
    margin: 4px 0 2px;
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border: 1px solid rgba(0,0,0,.05);
    border-radius: 6px;
    padding: 4px 6px;
}

.fox-best__masonry-spark .fox-sparkline { flex-direction: row; align-items: center; gap: 8px; }

/* Stagger animation — delay already set via inline style */
.fox-animate .fox-best__masonry-item {
    animation: fox-slide-up .4s cubic-bezier(.16,1,.3,1) both;
    animation-delay: var(--fox-item-delay, 0ms);
}

@media (max-width: 600px) {
    .fox-best--masonry .fox-best__masonry { columns: 2 160px; }
}

@media (max-width: 380px) {
    .fox-best--masonry .fox-best__masonry { columns: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT: MAGAZINE
   ══════════════════════════════════════════════════════════════════════════ */

.fox-best--magazine .fox-best__magazine { display: flex; flex-direction: column; gap: 16px; }

/* Row 1: hero (2/3) + sidebar (1/3) */
.fox-best__mag-row1 {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 16px;
    align-items: stretch;
}

/* Hero */
.fox-best__mag-hero { display: flex; flex-direction: column; }

.fox-best__mag-hero-img-link {
    display: block;
    height: 240px;
    background: var(--fox-img-bg);
    overflow: hidden;
    flex-shrink: 0;
}

.fox-best__mag-hero-img {
    width: 100%; height: 100%; object-fit: contain; padding: 28px;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}

.fox-best__mag-hero:hover .fox-best__mag-hero-img { transform: scale(1.04); }

.fox-best__mag-hero-body {
    padding: 20px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1;
}

.fox-best__mag-hero-title {
    font-size: 18px; font-weight: 700; line-height: 1.35;
    color: var(--fox-text); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

.fox-best__mag-hero-title a { color: inherit; text-decoration: none; }
.fox-best__mag-hero-title a:hover { color: var(--fox-accent); }

/* Sidebar: two stacked cards */
.fox-best__mag-sidebar { display: flex; flex-direction: column; gap: 12px; }

.fox-best__mag-side {
    display: flex;
    flex-direction: row;
    gap: 0;
    flex: 1;
    align-items: stretch;
    overflow: hidden;
}

.fox-best__mag-side-img-link {
    width: 90px;
    flex-shrink: 0;
    background: var(--fox-img-bg);
    overflow: hidden;
    display: block;
}

.fox-best__mag-side-img {
    width: 100%; height: 100%; object-fit: contain; padding: 10px;
    transition: transform .25s;
}

.fox-best__mag-side:hover .fox-best__mag-side-img { transform: scale(1.07); }

.fox-best__mag-side-body {
    flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}

/* Row 2: 3-col strip */
.fox-best__mag-row2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.fox-best__mag-col { display: flex; flex-direction: column; }
.fox-best__mag-col .fox-best__image-link { height: 130px; }

/* Row 3: trail list */
.fox-best__mag-trail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 2px solid var(--fox-border);
    padding-top: 14px;
}

.fox-best--magazine .fox-best__list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--fox-radius);
}

.fox-best--magazine .fox-best__list-item:hover {
    transform: translateX(3px);
    border-color: var(--fox-accent);
}

.fox-best--magazine .fox-best__list-image-link {
    width: 60px; height: 60px;
    border-radius: var(--fox-radius-sm);
    background: var(--fox-img-bg);
    flex-shrink: 0; overflow: hidden; display: block;
}

.fox-best--magazine .fox-best__list-image {
    width: 100%; height: 100%; object-fit: contain; padding: 6px;
}

.fox-best--magazine .fox-best__list-body { flex: 1; min-width: 0; }
.fox-best--magazine .fox-best__item-title { -webkit-line-clamp: 2; }
.fox-best--magazine .fox-best__list-price { flex-shrink: 0; text-align: right; }
.fox-best--magazine .fox-best__list-action { flex-shrink: 0; }

/* Magazine animations */
.fox-animate.fox-best--magazine .fox-best__mag-hero,
.fox-animate.fox-best--magazine .fox-best__mag-side,
.fox-animate.fox-best--magazine .fox-best__mag-col,
.fox-animate.fox-best--magazine .fox-best__list-item {
    animation: fox-slide-up .4s cubic-bezier(.16,1,.3,1) both;
    animation-delay: var(--fox-item-delay, 0ms);
}

/* Magazine responsive */
@media (max-width: 820px) {
    .fox-best__mag-row1 { grid-template-columns: 1fr; }
    .fox-best__mag-sidebar { flex-direction: row; }
    .fox-best__mag-side { flex: 1; }
    .fox-best__mag-hero-img-link { height: 200px; }
}

@media (max-width: 600px) {
    .fox-best__mag-row2 { grid-template-columns: repeat(2, 1fr); }
    .fox-best__mag-sidebar { flex-direction: column; }
}

@media (max-width: 400px) {
    .fox-best__mag-row2 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FIELD SHORTCODES — éléments inline isolés
   ══════════════════════════════════════════════════════════════════════════ */

/* Image */
.fox-field-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--fox-radius-sm);
}

.fox-field-image-link {
    display: inline-block;
    line-height: 0;
}

.fox-field-image-link .fox-field-image {
    transition: transform .25s, opacity .2s;
}

.fox-field-image-link:hover .fox-field-image {
    transform: scale(1.03);
    opacity: .92;
}

/* Prix inline */
.fox-field-price {
    font-weight: 700;
    color: var(--fox-price);
    white-space: nowrap;
}

/* Lien inline */
.fox-field-link {
    color: var(--fox-accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--fox-accent) 40%, transparent);
    text-underline-offset: 2px;
    transition: color .15s, text-decoration-color .15s;
}

.fox-field-link:hover {
    color: var(--fox-accent-hover);
    text-decoration-color: var(--fox-accent-hover);
}

/* Bouton inline — hérite du style fox-box__btn */
.fox-field-button {
    display: inline-flex;
    vertical-align: middle;
}

/* ── Champs AAWP compat (fox-field-*) ────────────────────────────────────── */

/* Stars clip-path system */
.fox-field-stars {
    position: relative;
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}
.fox-field-stars-bg {
    color: #CBD5E1;
    letter-spacing: 1px;
}
.fox-field-stars-fill {
    position: absolute;
    top: 0; left: 0;
    overflow: hidden;
    color: var(--fox-accent);
    letter-spacing: 1px;
    white-space: nowrap;
}

/* Reviews count */
.fox-field-reviews {
    font-size: 12px;
    color: var(--fox-text-muted);
    vertical-align: middle;
    margin-left: 3px;
}

/* Prime badge (champ isolé — utilisé par Fox_Aawp_Parser) */
.fox-field-prime {
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
}

/* Old / strikethrough price */
.fox-field-old-price {
    text-decoration: line-through;
    color: var(--fox-text-muted);
    font-size: .9em;
    margin-right: 4px;
}

/* Availability */
.fox-field-avail { font-size: 12px; font-weight: 600; }
.fox-field-avail--in  { color: #15803D; }
.fox-field-avail--out { color: #B91C1C; }

/* fields wrapper */
.fox-fields {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   AUTO-INJECTION — .fox-auto-inject
   ══════════════════════════════════════════════════════════════════════════ */

.fox-auto-inject {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 2px solid var(--fox-border);
}

/* Separator line with label */
.fox-auto-inject::before {
    content: attr(data-keyword);
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--fox-text-muted);
    margin-bottom: 16px;
}

/* ══════════════════════════════════════════════════════════════════════════
   DESCRIPTION / FEATURES — Shared across all templates
   ══════════════════════════════════════════════════════════════════════════ */

.fox-desc { margin: 6px 0 2px; }

.fox-desc__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 4px;
}

.fox-desc__item {
    font-size: 12px; line-height: 1.45; color: var(--fox-text-muted);
    font-family: var(--fox-font);
    padding-left: 14px;
    position: relative;
}

.fox-desc__item::before {
    content: ''; position: absolute; left: 0; top: 6px;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--fox-accent); opacity: .5;
}

.fox-desc__text {
    font-size: 12px; line-height: 1.5; color: var(--fox-text-muted);
    font-family: var(--fox-font); margin: 0;
}

/* In table cells — tighter */
.fox-table__title .fox-desc { margin-top: 4px; }
.fox-table__title .fox-desc__item { font-size: 11px; }

/* ══════════════════════════════════════════════════════════════════════════
   HORIZONTAL — Full-width row card
   ══════════════════════════════════════════════════════════════════════════ */

.fox-horizontal {
    font-family: var(--fox-font);
    display: flex; align-items: center; gap: 0;
    background: var(--fox-bg);
    border: 1px solid var(--fox-border);
    border-radius: var(--fox-radius);
    box-shadow: var(--fox-shadow);
    overflow: hidden;
    margin: 16px 0;
    transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s;
}

.fox-horizontal:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.12); }

.fox-horizontal__image-link {
    flex-shrink: 0; width: 120px; height: 120px;
    background: var(--fox-img-bg);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}

.fox-horizontal__image {
    width: 100%; height: 100%; object-fit: contain; padding: 12px;
    transition: transform .25s;
}

.fox-horizontal:hover .fox-horizontal__image { transform: scale(1.05); }

.fox-horizontal__body {
    flex: 1; padding: 14px 18px; min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
}

.fox-horizontal__brand {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--fox-accent);
}

.fox-horizontal__title {
    font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--fox-text); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fox-horizontal__title a { color: inherit; text-decoration: none; }
.fox-horizontal__title a:hover { color: var(--fox-accent); }

.fox-horizontal__availability { font-size: 11px; font-weight: 500; color: #16A34A; display: inline-flex; align-items: center; gap: 4px; }
.fox-horizontal__availability::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.fox-horizontal__availability.unavailable { color: var(--fox-text-muted); }

.fox-horizontal__action {
    flex-shrink: 0; padding: 14px 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    border-left: 1px solid var(--fox-border);
}

.fox-horizontal__price-block { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.fox-horizontal__price {
    font-size: 22px; font-weight: 800; color: var(--fox-price);
    letter-spacing: -.03em; line-height: 1; white-space: nowrap;
}
.fox-horizontal__price-before { font-size: 13px; font-weight: 500; color: var(--fox-text-muted); text-decoration: line-through; line-height: 1; }
.fox-horizontal__price-block.has-promo .fox-horizontal__price { color: #DC2626; }

/* Card style variants */
.fox-style-minimal .fox-horizontal { box-shadow: none; }
.fox-style-minimal .fox-horizontal:hover { transform: none; border-color: var(--fox-accent); }
.fox-style-glass .fox-horizontal { background: rgba(255,255,255,.7); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.6); }

/* ── Promo badge ───────────────────────────────────────────────────────── */
.fox-promo-badge {
    display: inline-block;
    font-size: 11px; font-weight: 700; line-height: 1;
    background: #DC2626; color: #fff;
    border-radius: 4px; padding: 2px 6px;
    letter-spacing: .01em;
    vertical-align: middle;
    /* show_savings: opacity 1 = visible, 0 = hidden */
    opacity: var(--fox-show-savings, 1);
    max-height: calc(var(--fox-show-savings, 1) * 40px);
    overflow: hidden;
}
.fox-price-current { } /* hook for theme overrides */

/* Animation */
.fox-horizontal {
    animation: fox-slide-up .4s cubic-bezier(.16,1,.3,1) both;
    animation-duration: calc(var(--fox-animate, 0) * 0.4s);
}
.fox-animate .fox-horizontal { animation-duration: .4s; }

@media (max-width: 600px) {
    .fox-horizontal { flex-direction: column; }
    .fox-horizontal__image-link { width: 100%; height: 160px; }
    .fox-horizontal__action { flex-direction: row; border-left: none; border-top: 1px solid var(--fox-border); width: 100%; padding: 12px 18px; justify-content: space-between; }
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPACT — Small sidebar card
   ══════════════════════════════════════════════════════════════════════════ */

.fox-compact {
    font-family: var(--fox-font);
    background: var(--fox-bg);
    border: 1px solid var(--fox-border);
    border-radius: var(--fox-radius);
    box-shadow: var(--fox-shadow);
    overflow: hidden;
    max-width: 260px;
    margin: 12px 0;
    transition: transform .2s, box-shadow .2s;
}

.fox-compact:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.13); }

.fox-compact__image-link {
    display: block; width: 100%; height: 160px;
    background: var(--fox-img-bg);
    overflow: hidden;
}

.fox-compact__image {
    width: 100%; height: 100%; object-fit: contain; padding: 16px;
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.fox-compact:hover .fox-compact__image { transform: scale(1.06); }

.fox-compact__body {
    padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}

.fox-compact__title {
    font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--fox-text); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fox-compact__title a { color: inherit; text-decoration: none; }
.fox-compact__title a:hover { color: var(--fox-accent); }

.fox-compact__price-block { display: flex; flex-direction: column; gap: 2px; }
.fox-compact__price {
    font-size: 18px; font-weight: 800; color: var(--fox-price); letter-spacing: -.02em;
}
.fox-compact__price-before { font-size: 12px; font-weight: 500; color: var(--fox-text-muted); text-decoration: line-through; line-height: 1; }
.fox-compact__price-block.has-promo .fox-compact__price { color: #DC2626; }

.fox-compact__btn { width: 100%; text-align: center; justify-content: center; }

.fox-compact .fox-desc__item { font-size: 11px; }

/* ── Promo badge ───────────────────────────────────────────────────────── */
.fox-promo-badge {
    display: inline-block;
    font-size: 11px; font-weight: 700; line-height: 1;
    background: #DC2626; color: #fff;
    border-radius: 4px; padding: 2px 6px;
    letter-spacing: .01em;
    vertical-align: middle;
    /* show_savings: opacity 1 = visible, 0 = hidden */
    opacity: var(--fox-show-savings, 1);
    max-height: calc(var(--fox-show-savings, 1) * 40px);
    overflow: hidden;
}
.fox-price-current { } /* hook for theme overrides */

/* Animation */
.fox-compact {
    animation: fox-slide-up .4s cubic-bezier(.16,1,.3,1) both;
    animation-duration: calc(var(--fox-animate, 0) * 0.4s);
}
.fox-animate .fox-compact { animation-duration: .4s; }

/* ══════════════════════════════════════════════════════════════════════════
   VERSUS — Side-by-side comparison
   ══════════════════════════════════════════════════════════════════════════ */

.fox-versus {
    font-family: var(--fox-font);
    display: flex; align-items: stretch; gap: 0;
    margin: 20px 0;
}

.fox-versus__col {
    flex: 1; background: var(--fox-bg);
    border: 1px solid var(--fox-border);
    border-radius: var(--fox-radius);
    box-shadow: var(--fox-shadow);
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}

.fox-versus__col:hover { transform: translateY(-3px); box-shadow: 0 10px 36px rgba(0,0,0,.13); }

.fox-versus__image-link {
    display: block; height: 180px;
    background: var(--fox-img-bg);
    overflow: hidden;
}

.fox-versus__image {
    width: 100%; height: 100%; object-fit: contain; padding: 18px;
    transition: transform .3s;
}

.fox-versus__col:hover .fox-versus__image { transform: scale(1.05); }

.fox-versus__body {
    padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1;
}

.fox-versus__brand {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--fox-accent);
}

.fox-versus__title {
    font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--fox-text); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fox-versus__title a { color: inherit; text-decoration: none; }
.fox-versus__title a:hover { color: var(--fox-accent); }

.fox-versus__price {
    font-size: 20px; font-weight: 800; color: var(--fox-price);
    letter-spacing: -.03em; margin-top: auto;
}

.fox-versus__separator {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 56px;
}

.fox-versus__vs {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--fox-accent); color: var(--fox-btn-text);
    font-size: 13px; font-weight: 800; letter-spacing: .05em;
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
}

/* ── Promo badge ───────────────────────────────────────────────────────── */
.fox-promo-badge {
    display: inline-block;
    font-size: 11px; font-weight: 700; line-height: 1;
    background: #DC2626; color: #fff;
    border-radius: 4px; padding: 2px 6px;
    letter-spacing: .01em;
    vertical-align: middle;
    /* show_savings: opacity 1 = visible, 0 = hidden */
    opacity: var(--fox-show-savings, 1);
    max-height: calc(var(--fox-show-savings, 1) * 40px);
    overflow: hidden;
}
.fox-price-current { } /* hook for theme overrides */

/* Animation */
.fox-versus__col {
    animation: fox-slide-up .4s cubic-bezier(.16,1,.3,1) both;
    animation-duration: calc(var(--fox-animate, 0) * 0.4s);
}
.fox-versus__col:nth-child(3) { animation-delay: .08s; }
.fox-animate .fox-versus__col { animation-duration: .4s; }

@media (max-width: 640px) {
    .fox-versus { flex-direction: column; gap: 0; }
    .fox-versus__separator { width: auto; height: 48px; }
    .fox-versus__image-link { height: 150px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SHOWCASE — Hero full-width card
   ══════════════════════════════════════════════════════════════════════════ */

.fox-showcase {
    font-family: var(--fox-font);
    display: flex; gap: 0;
    background: var(--fox-bg);
    border: 1px solid var(--fox-border);
    border-radius: var(--fox-radius-lg);
    box-shadow: var(--fox-shadow);
    overflow: hidden;
    margin: 24px 0;
    transition: box-shadow .25s;
}

.fox-showcase:hover { box-shadow: 0 12px 48px rgba(0,0,0,.14); }

.fox-showcase__image-link {
    flex-shrink: 0; width: 40%;
    background: var(--fox-img-bg);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; min-height: 280px;
}

.fox-showcase__image {
    width: 100%; height: 100%; object-fit: contain; padding: 28px;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}

.fox-showcase:hover .fox-showcase__image { transform: scale(1.04); }

.fox-showcase__body {
    flex: 1; padding: 24px 28px;
    display: flex; flex-direction: column; gap: 12px;
}

.fox-showcase__header { display: flex; flex-direction: column; gap: 6px; }

.fox-showcase__brand {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--fox-accent);
}

.fox-showcase__title {
    font-size: 20px; font-weight: 700; line-height: 1.35; color: var(--fox-text); margin: 0;
}
.fox-showcase__title a { color: inherit; text-decoration: none; }
.fox-showcase__title a:hover { color: var(--fox-accent); }

.fox-showcase__rating { display: flex; align-items: center; gap: 6px; }

.fox-showcase__history { padding-top: 8px; border-top: 1px dashed var(--fox-border); }

.fox-showcase__footer {
    display: flex; align-items: center; gap: 16px; margin-top: auto;
    padding-top: 12px; border-top: 1px solid var(--fox-border);
}

.fox-showcase__price-block { display: flex; flex-direction: column; }
.fox-showcase__price-before { font-size: 15px; font-weight: 500; color: var(--fox-text-muted); text-decoration: line-through; line-height: 1; margin-bottom: 2px; }
.fox-showcase__price-block.has-promo .fox-showcase__price { color: #DC2626; }

.fox-showcase__price {
    font-size: 28px; font-weight: 800; color: var(--fox-price);
    letter-spacing: -.04em; line-height: 1;
}

.fox-showcase__btn { padding: 12px 28px; font-size: 15px; }

/* Showcase desc styling — larger for hero context */
.fox-showcase .fox-desc__item { font-size: 13px; }
.fox-showcase .fox-desc__list { gap: 6px; }

/* ── Promo badge ───────────────────────────────────────────────────────── */
.fox-promo-badge {
    display: inline-block;
    font-size: 11px; font-weight: 700; line-height: 1;
    background: #DC2626; color: #fff;
    border-radius: 4px; padding: 2px 6px;
    letter-spacing: .01em;
    vertical-align: middle;
    /* show_savings: opacity 1 = visible, 0 = hidden */
    opacity: var(--fox-show-savings, 1);
    max-height: calc(var(--fox-show-savings, 1) * 40px);
    overflow: hidden;
}
.fox-price-current { } /* hook for theme overrides */

/* Animation */
.fox-showcase {
    animation: fox-slide-up .5s cubic-bezier(.16,1,.3,1) both;
    animation-duration: calc(var(--fox-animate, 0) * 0.5s);
}
.fox-animate .fox-showcase { animation-duration: .5s; }

@media (max-width: 720px) {
    .fox-showcase { flex-direction: column; }
    .fox-showcase__image-link { width: 100%; min-height: 200px; height: 220px; }
    .fox-showcase__body { padding: 20px; }
    .fox-showcase__title { font-size: 18px; }
    .fox-showcase__price { font-size: 24px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   STRIP — Thin inline product banner
   ══════════════════════════════════════════════════════════════════════════ */

.fox-strip {
    font-family: var(--fox-font);
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--fox-bg);
    border: 1px solid var(--fox-border);
    border-radius: var(--fox-radius-sm);
    padding: 6px 14px 6px 6px;
    text-decoration: none !important;
    transition: border-color .18s, box-shadow .18s, transform .15s;
    margin: 6px 0;
    max-width: 100%;
}

.fox-strip:hover {
    border-color: var(--fox-accent);
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    transform: translateY(-1px);
}

.fox-strip__thumb {
    width: 32px; height: 32px; object-fit: contain;
    border-radius: 4px; flex-shrink: 0;
    background: var(--fox-img-bg);
    padding: 2px;
}

.fox-strip__title {
    font-size: 13px; font-weight: 500; color: var(--fox-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0; flex: 1;
}

.fox-strip__price {
    font-size: 14px; font-weight: 800; color: var(--fox-price);
    white-space: nowrap; flex-shrink: 0;
}

.fox-strip__arrow {
    font-size: 14px; color: var(--fox-accent);
    transition: transform .18s; flex-shrink: 0;
}

.fox-strip:hover .fox-strip__arrow { transform: translateX(3px); }

/* ── Promo badge ───────────────────────────────────────────────────────── */
.fox-promo-badge {
    display: inline-block;
    font-size: 11px; font-weight: 700; line-height: 1;
    background: #DC2626; color: #fff;
    border-radius: 4px; padding: 2px 6px;
    letter-spacing: .01em;
    vertical-align: middle;
    /* show_savings: opacity 1 = visible, 0 = hidden */
    opacity: var(--fox-show-savings, 1);
    max-height: calc(var(--fox-show-savings, 1) * 40px);
    overflow: hidden;
}
.fox-price-current { } /* hook for theme overrides */

/* Animation */
.fox-strip {
    animation: fox-fade-in .3s ease both;
    animation-duration: calc(var(--fox-animate, 0) * 0.3s);
}
.fox-animate .fox-strip { animation-duration: .3s; }

/* ═══════════════════════════════════════════════════════════════════════════
   FOX COMPARISON TABLE  (.fct-*)
   Desktop : sticky table avec highlight colonne
   Mobile  : cards swipables + Duel drawer
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.fct-wrap {
    font-family: var(--fox-font);
    color: var(--fox-text);
    margin: 28px 0;
}

.fct-heading {
    font-size: 20px;
    font-weight: 700;
    color: var(--fox-text);
    margin: 0 0 18px;
    letter-spacing: -.02em;
}

/* ══════════════════════════════════════════════════════════════════════
   DESKTOP TABLE
   ══════════════════════════════════════════════════════════════════════ */
.fct-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--fox-radius-lg);
    box-shadow: var(--fox-shadow);
    border: 1px solid var(--fox-border);
}

.fct-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--fox-bg);
    min-width: 480px;
}

/* ── Header row ──────────────────────────────────────────────────────── */
.fct-th {
    background: #F8FAFC;
    border-bottom: 2px solid var(--fox-border);
    padding: 16px 14px 14px;
    vertical-align: bottom;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 2;
}

.fct-th--label {
    text-align: left;
    width: 160px;
    min-width: 120px;
    background: #F8FAFC;
    z-index: 3;
    left: 0;
    position: sticky;
}

.fct-th--product {
    min-width: 160px;
    transition: background .2s;
}

.fct-th--product.is-highlighted {
    background: rgba(255, 107, 53, .06);
}

.fct-th__img-link {
    display: block;
    margin: 0 auto 10px;
    width: 72px;
    height: 72px;
}

.fct-th__img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    background: var(--fox-img-bg);
    border-radius: var(--fox-radius-sm);
    padding: 6px;
    transition: transform .22s;
}

.fct-th--product:hover .fct-th__img { transform: scale(1.06); }

.fct-th__title {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--fox-text);
    text-decoration: none;
    line-height: 1.4;
    margin-top: 4px;
    text-align: center;
}

.fct-th__title:hover { color: var(--fox-accent); }

/* ── Badge ───────────────────────────────────────────────────────────── */
.fct-badge {
    display: inline-block;
    background: var(--fox-accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 8px;
    border-radius: 20px;
    margin-bottom: 8px;
    white-space: nowrap;
}

/* ── Body rows ───────────────────────────────────────────────────────── */
.fct-td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--fox-border);
    vertical-align: middle;
    transition: background .15s;
}

.fct-row:last-child .fct-td { border-bottom: none; }

.fct-td--label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--fox-text-muted);
    white-space: nowrap;
    position: sticky;
    left: 0;
    background: var(--fox-bg);
    z-index: 1;
    min-width: 120px;
}

.fct-row:hover .fct-td--label { background: rgba(255,107,53,.03); }

.fct-td--val {
    text-align: center;
    font-size: 13px;
}

.fct-td--val.is-highlighted {
    background: rgba(255, 107, 53, .05);
}

/* Row zebra */
.fct-row:nth-child(even) .fct-td { background: #FAFBFC; }
.fct-row:nth-child(even) .fct-td--val.is-highlighted { background: rgba(255,107,53,.07); }
.fct-row:nth-child(even) .fct-td--label { background: #FAFBFC; }

/* ── History row (sparkline) ─────────────────────────────────────────── */
.fct-row--history .fct-td--history {
    vertical-align: middle;
    padding: 10px 14px;
}

.fct-row--history .fox-sparkline {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.fct-row--history .fox-sparkline__svg {
    width: 140px;
    height: 44px;
    display: block;
}

.fct-row--history .fox-price-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--fox-text-muted);
    white-space: nowrap;
    justify-content: center;
}

.fct-row--history .fox-price-badge--low  { color: #16A34A; }
.fct-row--history .fox-price-badge--high { color: #DC2626; }

.fct-na--history {
    font-size: 10px;
    color: var(--fox-text-muted);
    font-style: italic;
}

/* Mobile card: historique dans specs */
.fct-card__spec-row--history {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.fct-card__spec-row--history .fct-card__spec-val {
    text-align: left;
    width: 100%;
}

.fct-card__spec-row--history .fox-sparkline {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    width: 100%;
}

.fct-card__spec-row--history .fox-sparkline__svg {
    width: 100%;
    max-width: 200px;
    height: 44px;
}

.fct-card__spec-row--history .fox-price-badge {
    font-size: 10px;
}

/* ── CTA row ─────────────────────────────────────────────────────────── */
.fct-row--cta .fct-td {
    padding: 14px;
    background: #FAFBFC;
    border-top: 2px solid var(--fox-border);
    border-bottom: none;
}

/* ── Cells: price, stars, avail, check ──────────────────────────────── */
.fct-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--fox-price);
    letter-spacing: -.03em;
    white-space: nowrap;
}

.fct-discount {
    display: inline-block;
    background: #FEF2F2;
    color: #DC2626;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 4px;
    vertical-align: middle;
}

.fct-na {
    color: var(--fox-text-muted);
    font-size: 13px;
}

.fct-stars {
    display: inline-block;
    position: relative;
    font-size: 14px;
    line-height: 1;
}

.fct-stars__bg {
    color: #E2E8F0;
}

.fct-stars__fill {
    position: absolute;
    top: 0; left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #F59E0B;
}

.fct-reviews {
    font-size: 11px;
    color: var(--fox-text-muted);
    margin-left: 4px;
    vertical-align: middle;
}

.fct-avail {
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.fct-avail::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.fct-avail--yes { color: #16A34A; }
.fct-avail--no  { color: var(--fox-text-muted); }

.fct-check {
    font-size: 16px;
    font-weight: 700;
    display: inline-block;
    width: 24px; height: 24px;
    line-height: 24px;
    border-radius: 50%;
    text-align: center;
}

.fct-check--yes { color: #16A34A; background: rgba(22,163,74,.1); }
.fct-check--no  { color: #EF4444; background: rgba(239,68,68,.1); }

.fct-cell-val { font-size: 13px; color: var(--fox-text); }

/* ── CTA button ──────────────────────────────────────────────────────── */
.fct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 16px;
    background: var(--fox-accent);
    color: var(--fox-btn-text) !important;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--fox-font);
    border-radius: var(--fox-radius-sm);
    text-decoration: none;
    transition: background .18s, transform .18s, box-shadow .18s;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}

.fct-btn:hover {
    background: var(--fox-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(255,107,53,.3);
}

.fct-btn--sm {
    padding: 7px 14px;
    font-size: 11px;
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE CARDS  (hidden on desktop)
   ══════════════════════════════════════════════════════════════════════ */
.fct-cards {
    display: none;
    gap: 14px;
    padding: 4px 2px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
}
.fct-cards::-webkit-scrollbar { display: none; }

.fct-card {
    flex: 0 0 88vw;
    max-width: 340px;
    background: var(--fox-bg);
    border: 1px solid var(--fox-border);
    border-radius: var(--fox-radius-lg);
    box-shadow: var(--fox-shadow);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.fct-card__badge {
    position: absolute;
    top: 10px; left: 10px;
    background: var(--fox-accent);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 9px;
    border-radius: 20px;
    z-index: 2;
}

/* Card head: image + title + price */
.fct-card__head {
    display: flex;
    gap: 12px;
    padding: 16px 14px 12px;
    align-items: flex-start;
}

.fct-card__img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    background: var(--fox-img-bg);
    border-radius: var(--fox-radius-sm);
    padding: 6px;
    flex-shrink: 0;
}

.fct-card__meta { flex: 1; min-width: 0; }

.fct-card__title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.fct-card__title a {
    color: var(--fox-text);
    text-decoration: none;
}
.fct-card__title a:hover { color: var(--fox-accent); }

.fct-card__price-row {
    margin-bottom: 5px;
}

/* Card specs grid */
.fct-card__specs {
    border-top: 1px solid var(--fox-border);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.fct-card__spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.fct-card__spec-label {
    color: var(--fox-text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    flex-shrink: 0;
}

.fct-card__spec-val {
    text-align: right;
}

/* Card footer: duel checkbox + CTA */
.fct-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-top: 1px solid var(--fox-border);
    background: #FAFBFC;
    gap: 10px;
}

/* ── Duel checkbox ───────────────────────────────────────────────────── */
.fct-duel-check {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
}

.fct-duel-input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border: 2px solid var(--fox-border);
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
    position: relative;
}

.fct-duel-input:checked {
    background: var(--fox-accent);
    border-color: var(--fox-accent);
}

.fct-duel-input:checked::after {
    content: '✓';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.fct-duel-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--fox-text-muted);
    transition: color .15s;
}

.fct-card.is-duel-selected .fct-duel-label {
    color: var(--fox-accent);
}

.fct-card.is-duel-selected {
    border-color: var(--fox-accent);
    box-shadow: 0 0 0 2px rgba(255,107,53,.25), var(--fox-shadow);
}

/* ── Duel prompt bar ────────────────────────────────────────────────── */
.fct-duel-bar {
    display: none;
    position: sticky;
    bottom: 12px;
    left: 0; right: 0;
    margin: 8px 0 0;
    background: var(--fox-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 14px 20px;
    border-radius: var(--fox-radius);
    box-shadow: 0 8px 32px rgba(255,107,53,.45);
    text-align: center;
    cursor: pointer;
    z-index: 10;
    transition: transform .2s, box-shadow .2s;
    animation: fox-slide-up .3s cubic-bezier(.16,1,.3,1) both;
}

.fct-duel-bar:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(255,107,53,.5);
}

/* Scroll lock appliqué sur <body> à l'ouverture du Duel drawer.
   Utilise une classe CSS plutôt que style.overflow inline pour :
   - éviter le bug iOS Safari où overflow:hidden sur body n'empêche pas le scroll
   - être compatible CSP (pas d'attribut style inline dynamique)
   - pouvoir être annulé proprement sans risque d'écraser d'autres overrides */
body.fct-scroll-locked {
    overflow: hidden;
    /* Bloque le scroll tactile sur iOS Safari */
    touch-action: none;
}

/* ══════════════════════════════════════════════════════════════════════
   DUEL DRAWER
   ══════════════════════════════════════════════════════════════════════ */
.fct-duel {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: flex-end;
}

.fct-duel[hidden] { display: none; }

.fct-duel__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(3px);
    animation: fct-fade-in .2s ease both;
}

.fct-duel__sheet {
    position: relative;
    z-index: 1;
    width: 100%;
    background: var(--fox-bg);
    border-radius: 20px 20px 0 0;
    padding: 0 0 env(safe-area-inset-bottom, 16px);
    max-height: 92vh;
    overflow-y: auto;
    animation: fct-slide-up .3s cubic-bezier(.16,1,.3,1) both;
}

@keyframes fct-slide-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fct-fade-in  { from { opacity: 0; } to { opacity: 1; } }

.fct-duel__handle {
    width: 40px; height: 4px;
    background: var(--fox-border);
    border-radius: 2px;
    margin: 12px auto 0;
}

.fct-duel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 12px;
    border-bottom: 1px solid var(--fox-border);
    position: sticky;
    top: 0;
    background: var(--fox-bg);
    z-index: 2;
}

.fct-duel__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--fox-text);
    letter-spacing: -.02em;
}

.fct-duel__close {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #F1F5F9;
    border: none;
    font-size: 12px;
    color: var(--fox-text-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
}

.fct-duel__close:hover { background: var(--fox-accent); color: #fff; }

.fct-duel__body {
    padding: 0 16px 20px;
}

/* Duel 2-col grid */
.fct-duel__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
    padding-top: 14px;
}

.fct-duel__col-head {
    text-align: center;
}

.fct-duel__col-img {
    width: 64px; height: 64px;
    object-fit: contain;
    background: var(--fox-img-bg);
    border-radius: var(--fox-radius-sm);
    padding: 5px;
    margin: 0 auto 8px;
    display: block;
}

.fct-duel__col-title {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--fox-text);
    margin: 0 0 6px;
}

.fct-duel__col-price {
    font-size: 15px;
    font-weight: 800;
    color: var(--fox-price);
    letter-spacing: -.02em;
}

/* Duel spec rows */
.fct-duel__spec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--fox-border);
}

.fct-duel__spec-label {
    grid-column: 1 / -1;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--fox-text-muted);
    padding: 10px 0 4px;
}

.fct-duel__spec-val {
    padding: 0 0 10px;
    font-size: 13px;
    text-align: center;
    transition: background .15s;
    border-radius: var(--fox-radius-sm);
}

/* Diff highlighting — green = winner, red = loser */
.fct-duel__spec-val.is-winner {
    background: rgba(22,163,74,.08);
    color: #15803D;
    font-weight: 700;
}

.fct-duel__spec-val.is-loser {
    background: rgba(239,68,68,.06);
    color: #B91C1C;
}

.fct-duel__cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--fox-border);
}

.fct-duel__cta-row .fct-btn {
    width: 100%;
    font-size: 12px;
    justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINT
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
    .fct-table-scroll { display: none; }
    .fct-cards        { display: flex; }
}

@media (min-width: 681px) {
    .fct-cards    { display: none; }
    .fct-duel-bar { display: none !important; }
    .fct-duel     { display: none !important; }
}

/* ── Animate support ─────────────────────────────────────────────────── */
.fct-table-scroll {
    animation: fox-fade-in .35s ease both;
    animation-duration: calc(var(--fox-animate, 0) * 0.35s);
}
.fox-animate .fct-table-scroll { animation-duration: .35s; }

/* ══════════════════════════════════════════════════════════════════════
   STARS BLOCK — shared component (render_stars_block)
   ══════════════════════════════════════════════════════════════════════ */

/* Generic stars overlay — used by render_stars_block across all templates */
.fox-stars {
    position: relative;
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    color: transparent;
}
.fox-stars__bg {
    color: #D1D5DB;
    letter-spacing: 1px;
}
.fox-stars__fill {
    position: absolute;
    top: 0; left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #F59E0B;
    letter-spacing: 1px;
}
.fox-stars__count {
    font-size: 11px;
    color: var(--fox-text-muted, #64748B);
    margin-left: 4px;
}

/* Stars row block — injected by render_stars_block */
[class*="__stars-row"] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}

/* Per-template overrides */
.fox-box__stars-row,
.fox-compact__stars-row { margin-top: 4px; margin-bottom: 4px; }

.fox-horizontal__stars-row { margin-top: 2px; }

.fox-table__stars-row { margin: 0; }

/* ── Table: stars column ─────────────────────────────────────────────── */
.fox-table__stars-cell {
    white-space: nowrap;
    width: 1%;
    text-align: center;
    padding: 10px 12px;
}

/* ── Strip: inline stars ─────────────────────────────────────────────── */
.fox-strip__stars {
    position: relative;
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    color: transparent;
    margin-left: 4px;
    flex-shrink: 0;
}
.fox-strip__stars .fox-stars__bg  { color: #D1D5DB; }
.fox-strip__stars .fox-stars__fill { color: #F59E0B; }

/* ── Versus: stars + price ───────────────────────────────────────────── */
.fox-versus__stars-row {
    margin: 6px 0 8px;
}
.fox-versus__price-block {
    margin-bottom: 4px;
}

/* ── Alternative notice ─────────────────────────────────────────────────── */
.fox-alternative-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.fox-alternative-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: #fff8e1;
    border-left: 3px solid #f59e0b;
    border-radius: 6px 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #78350f;
    margin-bottom: 0;
}
.fox-alternative-notice + .fox-box,
.fox-alternative-notice + .fox-horizontal,
.fox-alternative-notice + .fox-showcase,
.fox-alternative-notice + .fox-compact,
.fox-alternative-notice + .fox-strip {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.fox-alternative-notice__icon {
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1.4;
}
.fox-alternative-notice__text strong {
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOX STICKY BAR — Barre produit déclenchée au scroll
   ═══════════════════════════════════════════════════════════════════════════ */

.fox-sticky-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* z-index 100000 : au-dessus de la WP Admin Bar (99999) pour rester
       visible quand l'admin est connecté. Sans ça, la sticky bar Fox est
       masquée par l'admin bar en mobile (où elle est positionnée bottom)
       et difficile à manipuler en desktop si elle se chevauche. */
    z-index: 100000;
    transform: translateY( 100% );
    transition: transform 280ms cubic-bezier( .4, 0, .2, 1 );
    will-change: transform;
    pointer-events: none;
}

/* ── WP Admin Bar mobile ─────────────────────────────────────────────────
   En mobile (≤782px), WP positionne #wpadminbar en bas du viewport (height
   46px) → conflit direct avec notre sticky bar également bottom:0. On
   remonte la sticky de 46px pour que les deux coexistent.
   Desktop : admin bar est en haut, pas de compensation nécessaire.
   Le sélecteur cible le body que WordPress applique uniquement quand l'admin
   bar est rendue : .admin-bar (pas .logged-in qui est plus large). */
@media ( max-width: 782px ) {
    body.admin-bar .fox-sticky-bar {
        bottom: 46px;
    }
}

.fox-sticky-bar.is-visible {
    transform: translateY( 0 );
    pointer-events: auto;
}

/* Fade during content update */
.fox-sticky-bar.is-updating .fox-sticky-bar__inner {
    opacity: 0;
    transition: opacity 100ms ease;
}
.fox-sticky-bar .fox-sticky-bar__inner {
    opacity: 1;
    transition: opacity 120ms ease;
}

.fox-sticky-bar__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: #fff;
    border-top: 1px solid var(--fox-border, #E2E8F0);
    box-shadow: 0 -4px 24px rgba(0,0,0,.10), 0 -1px 4px rgba(0,0,0,.05);
    max-width: 860px;
    margin: 0 auto;
    border-radius: 12px 12px 0 0;
}

/* Product info */
.fox-sticky-bar__product {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.fox-sticky-bar__img-wrap {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #F8FAFC;
    border: 1px solid var(--fox-border, #E2E8F0);
}

.fox-sticky-bar__img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
}

.fox-sticky-bar__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.fox-sticky-bar__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--fox-text, #0F172A);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
    line-height: 1.3;
}

.fox-sticky-bar__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fox-sticky-bar__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--fox-price, #DC2626);
    line-height: 1;
}

.fox-sticky-bar__prime {
    display: inline-flex;
    align-items: center;
}

.fox-sticky-bar__stars {
    display: inline-flex;
    align-items: center;
}

/* CTA button.
 *
 * v4.12+ : sélecteur renforcé `.fox-sticky-bar .fox-sticky-bar__cta` pour
 * battre la spécificité de la plupart des thèmes WordPress qui ciblent
 * `.entry-content a`, `article a`, `.post-content a`, etc. en posant des
 * `color` à spécificité plus haute que notre `.fox-sticky-bar__cta` simple.
 *
 * Sans ce renforcement, sur le thème orange et beaucoup d'autres, le texte
 * du CTA hérite du `color: blue` du thème au repos puis `color: white` au
 * hover du thème — désynchronisé de notre design.
 *
 * Le sélecteur `.fox-sticky-bar .fox-sticky-bar__cta` a une spécificité de
 * 0,2,0 (deux classes), suffisante pour battre `.entry-content a` (0,1,1)
 * et `article a` (0,0,2). Sur les rares thèmes qui poussent à 0,3,0+,
 * l'utilisateur peut surcharger via le Studio CSS custom.
 *
 * On garde aussi les styles sur a:hover / span pour couvrir le cas legacy
 * où un thème aurait cassé l'héritage en posant `text-decoration` ou
 * `color` sur `:hover`.
 */
.fox-sticky-bar .fox-sticky-bar__cta,
.fox-sticky-bar .fox-sticky-bar__cta:link,
.fox-sticky-bar .fox-sticky-bar__cta:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 9px 18px;
    background: var(--fox-accent, #FF6B35);
    color: var(--fox-btn-text, #fff);
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--fox-radius-sm, 8px);
    text-decoration: none;
    white-space: nowrap;
    transition: background 150ms, transform 100ms;
    border: none;
    /* v4.12+ : le CTA est toujours un <span> (approche A obfuscation).
       cursor:pointer signale qu'il est cliquable malgré l'absence de href.
       Aussi posé en JS (setupCtaHandler) pour redondance défensive. */
    cursor: pointer;
}

.fox-sticky-bar .fox-sticky-bar__cta:hover,
.fox-sticky-bar .fox-sticky-bar__cta:focus,
.fox-sticky-bar .fox-sticky-bar__cta:active {
    background: var(--fox-accent-hover, #E55A25);
    transform: translateY(-1px);
    color: var(--fox-btn-text, #fff);
    text-decoration: none;
}

/* SVG dans le CTA — hérite du color du parent ; on l'explicite pour battre
 * un éventuel thème qui mettrait `svg { fill: currentColor }` avec une
 * spécificité plus forte sur les <a> internes. */
.fox-sticky-bar .fox-sticky-bar__cta svg {
    color: inherit;
    stroke: currentColor;
    flex-shrink: 0;
}

/* Close button */
.fox-sticky-bar__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #94A3B8;
    padding: 0;
    transition: background 150ms, color 150ms;
}

.fox-sticky-bar__close:hover {
    background: #F1F5F9;
    color: #475569;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
    .fox-sticky-bar__inner {
        gap: 8px;
        padding: 8px 12px;
        border-radius: 0;
    }

    .fox-sticky-bar__title {
        max-width: 140px;
        font-size: 12px;
    }

    .fox-sticky-bar__cta {
        padding: 8px 12px;
        font-size: 12px;
        gap: 4px;
    }

    .fox-sticky-bar__stars { display: none; }

    .fox-sticky-bar__prime { display: none; }
}

/* ── Navigation cards (dots + flèches) ───────────────────────────────── */
.fct-cards-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 8px 0 4px;
}

.fct-cards-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    border: none;
    background: var(--fox-border);
    padding: 0; cursor: pointer;
    transition: background .2s, transform .2s;
    flex-shrink: 0;
}
.fct-cards-dot.is-active {
    background: var(--fox-accent);
    transform: scale(1.3);
}

.fct-cards-nav {
    display: none; /* masqué par défaut, affiché en mobile dans media query */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--fox-border);
    background: var(--fox-bg);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    color: var(--fox-text);
    font-size: 20px; line-height: 1;
    cursor: pointer;
    transition: all .15s;
    align-items: center;
    justify-content: center;
}
.fct-cards-nav:hover:not(:disabled) {
    background: var(--fox-accent);
    color: #fff;
    border-color: var(--fox-accent);
}
.fct-cards-nav:disabled { opacity: .3; cursor: not-allowed; }
.fct-cards-nav--prev { left: -4px; }
.fct-cards-nav--next { right: -4px; }

/* Wrapper relatif pour les flèches — sur le parent .fct-wrap */
.fct-wrap { position: relative; }

/* ── Masquer dots + flèches sur desktop ─────────────────────────────── */
@media (min-width: 681px) {
    .fct-cards-dots { display: none; }
    .fct-cards-nav  { display: none !important; }
}

/* ── Afficher flèches sur mobile ────────────────────────────────────── */
@media (max-width: 680px) {
    .fct-cards-nav { display: flex; }
}

/* ══════════════════════════════════════════════════════════════════════════
   WRAPPER PRODUIT (CDC §2 et §4.5)
   Règles génériques applicables au mode <a> et au mode <span data-source>.

   Choix de tag (v4.9+) :
     • Mode <a>            → ancre HTML standard (inline par nature)
     • Mode obfusqué <span> → utilisé au lieu de <div> pour rester valide
       à l'intérieur d'un <p> (HTML interdit <div> dans <p> ; le navigateur
       fermerait automatiquement le paragraphe et casserait le DOM).

   Pas de display:block global ici : chaque template (box, horizontal, etc.)
   définit son propre display sur sa classe spécifique (.fox-box__image-link
   etc.). Le span hérite de ces règles comme l'ancien div ou le <a>. Pour
   les wrappers SANS classe spécifique (ex: titre dans un <p>), le span
   reste inline, ce qui est le comportement souhaité — il s'inscrit dans
   le flow texte normal.
   ══════════════════════════════════════════════════════════════════════════ */

.fox-product-link {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.fox-product-link:hover { text-decoration: none; }

/* Exception : le template "link" reste un lien inline soulignée — sa classe
   .fox-link restaure le rendu visuel typique d'un lien hypertexte. */
.fox-product-link.fox-link {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255,107,53,.4);
    color: var(--fox-accent);
}
.fox-product-link.fox-link:hover {
    text-decoration: underline;
    color: var(--fox-accent-hover);
    text-decoration-color: var(--fox-accent-hover);
}

/* Mode obfusqué — focus visible (défensif).
 *
 * Note v4.9 : par défaut le span obfusqué n'a plus tabindex="0" (cf. décision
 * d'obfuscation pure documentée dans Fox_Tracking::wrapper_open). Ces règles
 * ne matchent donc plus en config standard. On les conserve par défense au
 * cas où un dev custom remettrait `tabindex` via le filtre `fox_wrapper_attrs`
 * — pour préserver dans ce cas un focus visible accessible. */
.fox-product-link[data-source]:focus {
    outline: 2px solid var(--fox-focus-color, #2271b1);
    outline-offset: 2px;
}
.fox-product-link[data-source]:focus:not(:focus-visible) { outline: none; }
/* ════════════════════════════════════════════════════════════════════════════
 * Fox Highlight — palmarès / shortlist éditoriale (shortcode [fox_highlight])
 * ════════════════════════════════════════════════════════════════════════════
 *
 * À INTÉGRER : à la fin de public/css/fox-affiliate.css, ou via un import.
 *
 * Structure :
 *   1. Palette sémantique     → tokens couleurs par slug (bg, fg, accent)
 *   2. Conteneur racine       → .fox-hl, .fox-hl__list
 *   3. Carte produit          → .fox-hl__item (3 layouts : banner|stripe|pill)
 *   4. Cellules internes      → image / main / cta
 *   5. Badges                 → .fox-hl-badge (variantes par slug + layout)
 *   6. Responsive             → breakpoint mobile (< 600px)
 *
 * Convention : préfixe .fox-hl (Fox Highlight) pour éviter collisions avec
 * les classes existantes du plugin (.fox-box, .fox-table, .fct-*).
 */

/* ── 1. Palette sémantique ─────────────────────────────────────────────────
 * Chaque slug = 4 stops (bg, fg/texte, accent/barre, border).
 * Couleurs alignées avec la palette éditoriale courante en SEO affiliation —
 * choisies pour être suffisamment saturées pour signaler le rôle, mais pas
 * agressives en grande surface.
 *
 * Pour activer le Studio panel (étape 5), ces vars seront surchargées au
 * niveau :root via Fox_Design::inject_styles() — ces valeurs ici servent de
 * fallback par défaut. */
:root {
    /* top — or / Meilleur choix */
    --fox-hl-top-bg:      #FFF4D6;
    --fox-hl-top-fg:      #8B6914;
    --fox-hl-top-accent:  #C8941A;
    /* value — vert / Rapport Q/P */
    --fox-hl-value-bg:    #D4F4DD;
    --fox-hl-value-fg:    #1E5E2A;
    --fox-hl-value-accent:#2E8B3E;
    /* easy — bleu / Débutant */
    --fox-hl-easy-bg:     #E3F2FD;
    --fox-hl-easy-fg:     #0D47A1;
    --fox-hl-easy-accent: #1976D2;
    /* pro — rouge / Avancé */
    --fox-hl-pro-bg:      #FFE0E0;
    --fox-hl-pro-fg:      #9A1A1A;
    --fox-hl-pro-accent:  #C62828;
    /* eco — violet / Écosystème */
    --fox-hl-eco-bg:      #F3E5F5;
    --fox-hl-eco-fg:      #4A148C;
    --fox-hl-eco-accent:  #7B1FA2;
    /* budget — orange / Le moins cher */
    --fox-hl-budget-bg:   #FFF3E0;
    --fox-hl-budget-fg:   #B14600;
    --fox-hl-budget-accent:#E65100;
    /* niche — teal / Usage spécifique */
    --fox-hl-niche-bg:    #E0F2F1;
    --fox-hl-niche-fg:    #004D40;
    --fox-hl-niche-accent:#00897B;
    /* neutral — gris / Mention */
    --fox-hl-neutral-bg:  #F1F5F9;
    --fox-hl-neutral-fg:  #475569;
    --fox-hl-neutral-accent:#64748B;
}

/* ── 2. Conteneur racine ─────────────────────────────────────────────────── */
.fox-hl {
    font-family: var(--fox-font);
    color: var(--fox-text);
    margin: 24px 0;
}

.fox-hl__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--fox-text);
    margin: 0 0 16px;
    line-height: 1.3;
}

.fox-hl__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── 3. Carte produit (base, partagée par les 3 layouts) ──────────────────── */
.fox-hl__item {
    background: var(--fox-bg);
    border: 1px solid var(--fox-border);
    border-radius: var(--fox-radius);
    transition: box-shadow .2s ease, transform .2s ease;
    overflow: hidden; /* important pour le bandeau du layout 'banner' */
}

.fox-hl__item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}

.fox-hl__item--unavailable {
    opacity: .65;
}

/* Layout 'banner' : pas de modif structurelle, le bandeau s'insère naturellement */
.fox-hl__item--banner { /* hérite tout de .fox-hl__item */ }

/* Layout 'stripe' : barre latérale colorée à gauche.
 * On utilise --fox-hl-stripe-c (résolu plus bas par les sélecteurs --c-{slug})
 * pour rester DRY et permettre le mode color="#hex" via la var --fox-hl-c. */
.fox-hl__item--stripe {
    border-left: 4px solid var(--fox-hl-stripe-c, var(--fox-border));
    padding-left: 4px; /* compense l'épaisseur visuelle de la barre */
}

/* Layout 'pill' : aucune modif structurelle ; le badge est dans .fox-hl__main */
.fox-hl__item--pill { /* hérite tout de .fox-hl__item */ }

/* Mapping slug → variable de la barre stripe.
 * Chaque .fox-hl__item--c-{slug} expose la couleur appropriée sur --fox-hl-stripe-c
 * pour que la règle border-left ci-dessus puisse la lire sans dupliquer le sélecteur. */
.fox-hl__item--c-top.fox-hl__item--stripe     { --fox-hl-stripe-c: var(--fox-hl-top-accent); }
.fox-hl__item--c-value.fox-hl__item--stripe   { --fox-hl-stripe-c: var(--fox-hl-value-accent); }
.fox-hl__item--c-easy.fox-hl__item--stripe    { --fox-hl-stripe-c: var(--fox-hl-easy-accent); }
.fox-hl__item--c-pro.fox-hl__item--stripe     { --fox-hl-stripe-c: var(--fox-hl-pro-accent); }
.fox-hl__item--c-eco.fox-hl__item--stripe     { --fox-hl-stripe-c: var(--fox-hl-eco-accent); }
.fox-hl__item--c-budget.fox-hl__item--stripe  { --fox-hl-stripe-c: var(--fox-hl-budget-accent); }
.fox-hl__item--c-niche.fox-hl__item--stripe   { --fox-hl-stripe-c: var(--fox-hl-niche-accent); }
.fox-hl__item--c-neutral.fox-hl__item--stripe { --fox-hl-stripe-c: var(--fox-hl-neutral-accent); }

/* Couleur libre (custom) : --fox-hl-c est injecté inline par PHP sur l'article.
 * On le réutilise pour la stripe. */
.fox-hl__item--c-custom.fox-hl__item--stripe  { --fox-hl-stripe-c: var(--fox-hl-c, var(--fox-border)); }

/* ── 4. Cellules internes ─────────────────────────────────────────────────── */

.fox-hl__row {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 16px;
    padding: 16px;
    align-items: center;
}

/* Pour 'banner', le bandeau est au-dessus du row → on garde le même padding */
.fox-hl__item--banner .fox-hl__row {
    /* léger ajustement : top padding réduit, le bandeau apporte déjà du visuel */
    padding-top: 14px;
}

.fox-hl__image-cell {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fox-img-bg);
    border-radius: var(--fox-radius-sm);
    overflow: hidden;
}

.fox-hl__image-link {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.fox-hl__image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .25s ease;
}

.fox-hl__item:hover .fox-hl__image {
    transform: scale(1.05);
}

/* ── Bloc central ─────────────────────────────────────────────────────────── */
.fox-hl__main {
    min-width: 0; /* permet au texte long de s'élider correctement dans le grid */
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fox-hl__product-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--fox-text);
    margin: 0;
    line-height: 1.35;
}

.fox-hl__product-title a {
    color: inherit;
    text-decoration: none;
}

.fox-hl__product-title a:hover {
    color: var(--fox-accent);
}

.fox-hl__desc {
    font-size: 14px;
    color: var(--fox-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* render_features() / render_stars_block() utilisent leurs propres classes
 * (fox-hl-features, fox-hl-stars…). On les hérite des conventions Fox. */

/* ── Bloc droit (prix + bouton) ───────────────────────────────────────────── */
.fox-hl__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 130px;
}

/* ── Bloc prix (sortie de Fox_Design::render_price_block) ─────────────────
 * Structure HTML générée :
 *   <div class="fox-hl__price-block has-promo">
 *     <span class="fox-hl__price-before">139,99 €</span>     ← optionnel
 *     <span class="fox-hl__price fox-price-current">119,99 €</span>
 *     <span class="fox-promo-badge">-15%</span>              ← optionnel
 *   </div>
 *
 * Layout vertical : ancien prix au-dessus, prix actuel en bas, badge promo
 * inline à droite du prix actuel. Aligné à droite pour matcher .fox-hl__cta. */
.fox-hl__price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    line-height: 1;
}

.fox-hl__price {
    font-size: 20px;
    font-weight: 800;
    color: var(--fox-price);
    letter-spacing: -.03em;
    line-height: 1;
    white-space: nowrap;
}

.fox-hl__price-before {
    font-size: 13px;
    font-weight: 500;
    color: var(--fox-text-muted);
    text-decoration: line-through;
    line-height: 1;
    white-space: nowrap;
}

/* Si promo : on met le badge sur la même ligne que le prix actuel pour
 * un rendu plus dense, en utilisant flex-direction: row sur un sous-conteneur
 * implicite. Comme render_price_block ne crée pas ce sous-conteneur, on
 * applique gap horizontal + alignement via le selector .has-promo. */
.fox-hl__price-block.has-promo {
    /* flex-direction reste column, mais on aligne les éléments à droite
     * et on garde le badge promo en flow naturel sous le prix.
     * Pour avoir le badge à droite du prix actuel, voir override ci-dessous. */
}

.fox-hl__price-block .fox-promo-badge {
    /* fox-promo-badge est une classe globale (cf box.php, horizontal.php),
     * on l'ajuste juste à notre contexte avec un léger margin-top. */
    margin-top: 2px;
}

.fox-hl__btn {
    display: inline-block;
    padding: 8px 16px;
    background: var(--fox-accent);
    color: var(--fox-btn-text);
    border-radius: var(--fox-radius-sm);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: background .15s ease;
    white-space: nowrap;
}

.fox-hl__btn:hover {
    background: var(--fox-accent-hover);
}

.fox-hl__unavailable {
    font-size: 12px;
    color: var(--fox-text-muted);
    font-style: italic;
}

/* ── 5. Badges ───────────────────────────────────────────────────────────── */

/* Base — partagée par les 3 layouts.
 * Les variantes par layout (banner/stripe/pill) modifient padding, taille,
 * radius, et la façon dont la couleur est appliquée. */
.fox-hl-badge {
    font-family: var(--fox-font);
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.fox-hl-badge__icon {
    font-size: 1em;
    line-height: 1;
}

.fox-hl-badge__text {
    line-height: 1;
}

/* ── Variante 'banner' — bandeau pleine largeur en haut de carte ─────────── */
.fox-hl-badge--layout-banner {
    display: flex; /* override inline-flex pour occuper la largeur */
    padding: 8px 16px;
    font-size: 11px;
    text-transform: uppercase;
    border-radius: 0; /* coins du bandeau alignés avec ceux de la carte via overflow:hidden */
}

/* ── Variante 'stripe' — eyebrow inline coloré (icône + label) ──────────── */
.fox-hl-badge--layout-stripe {
    padding: 0;
    margin: 0 0 2px;
    font-size: 11px;
    text-transform: uppercase;
    background: transparent !important; /* pas de fond, juste texte coloré */
    /* La barre latérale de la carte fait le job visuel principal */
}

/* ── Variante 'pill' — badge arrondi au-dessus du titre ─────────────────── */
.fox-hl-badge--layout-pill {
    padding: 3px 10px;
    font-size: 11px;
    text-transform: uppercase;
    border-radius: 12px;
    align-self: flex-start; /* évite que le pill ne s'étire sur toute la largeur du flex column */
    margin-bottom: 2px;
}

/* ── Couleurs par slug ────────────────────────────────────────────────────
 * Chaque slug définit bg + fg. La fg de stripe override pour matcher l'accent
 * (texte coloré sans fond), tandis que banner et pill utilisent bg + fg classiques.
 */
.fox-hl-badge--top {
    background: var(--fox-hl-top-bg);
    color: var(--fox-hl-top-fg);
}
.fox-hl-badge--value {
    background: var(--fox-hl-value-bg);
    color: var(--fox-hl-value-fg);
}
.fox-hl-badge--easy {
    background: var(--fox-hl-easy-bg);
    color: var(--fox-hl-easy-fg);
}
.fox-hl-badge--pro {
    background: var(--fox-hl-pro-bg);
    color: var(--fox-hl-pro-fg);
}
.fox-hl-badge--eco {
    background: var(--fox-hl-eco-bg);
    color: var(--fox-hl-eco-fg);
}
.fox-hl-badge--budget {
    background: var(--fox-hl-budget-bg);
    color: var(--fox-hl-budget-fg);
}
.fox-hl-badge--niche {
    background: var(--fox-hl-niche-bg);
    color: var(--fox-hl-niche-fg);
}
.fox-hl-badge--neutral {
    background: var(--fox-hl-neutral-bg);
    color: var(--fox-hl-neutral-fg);
}

/* Pour stripe : on neutralise le bg (déjà transparent via la rule layout-stripe)
 * et on force le texte à l'accent du slug pour qu'il vibre comme la barre latérale. */
.fox-hl-badge--layout-stripe.fox-hl-badge--top     { color: var(--fox-hl-top-accent); }
.fox-hl-badge--layout-stripe.fox-hl-badge--value   { color: var(--fox-hl-value-accent); }
.fox-hl-badge--layout-stripe.fox-hl-badge--easy    { color: var(--fox-hl-easy-accent); }
.fox-hl-badge--layout-stripe.fox-hl-badge--pro     { color: var(--fox-hl-pro-accent); }
.fox-hl-badge--layout-stripe.fox-hl-badge--eco     { color: var(--fox-hl-eco-accent); }
.fox-hl-badge--layout-stripe.fox-hl-badge--budget  { color: var(--fox-hl-budget-accent); }
.fox-hl-badge--layout-stripe.fox-hl-badge--niche   { color: var(--fox-hl-niche-accent); }
.fox-hl-badge--layout-stripe.fox-hl-badge--neutral { color: var(--fox-hl-neutral-accent); }

/* ── Couleur libre (custom) ──────────────────────────────────────────────
 * --fox-hl-c est injecté inline sur le badge (par PHP).
 *
 * Stratégie : color-mix() pour générer bg clair (15% opacity) et fg foncé
 * (mélange avec noir 80%). Fallback : si color-mix n'est pas supporté
 * (Safari < 16.4), on tombe sur la couleur brute en bg (légèrement agressif
 * mais lisible) + texte blanc. */
.fox-hl-badge--custom {
    /* fallback pour navigateurs sans color-mix() */
    background: var(--fox-hl-c, var(--fox-hl-neutral-bg));
    color: #fff;
}

@supports (background: color-mix(in srgb, red, blue)) {
    .fox-hl-badge--custom {
        background: color-mix(in srgb, var(--fox-hl-c) 15%, white);
        color: color-mix(in srgb, var(--fox-hl-c) 75%, black);
    }
}

/* Variante stripe pour custom : pas de bg, texte = couleur libre */
.fox-hl-badge--layout-stripe.fox-hl-badge--custom {
    color: var(--fox-hl-c, var(--fox-hl-neutral-accent));
}

/* ── 6. Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .fox-hl__row {
        grid-template-columns: 80px 1fr;
        grid-template-areas:
            "img main"
            "cta cta";
        row-gap: 12px;
    }

    .fox-hl__image-cell {
        grid-area: img;
        width: 80px;
        height: 80px;
    }

    .fox-hl__main {
        grid-area: main;
    }

    .fox-hl__cta {
        grid-area: cta;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-width: 0;
    }

    .fox-hl__btn {
        flex-shrink: 0;
    }

    .fox-hl__product-title {
        font-size: 15px;
    }

    .fox-hl__title {
        font-size: 18px;
    }
}