/* ══════════════════════════════════════════════
   Palladium Commerce — Core Styles
   Clean, modern e-commerce UI
   ══════════════════════════════════════════════ */

/* ── Variables ── */
:root {
    --commerce-primary: #2563eb;
    --commerce-primary-hover: color-mix(in srgb, var(--commerce-primary) 85%, black);
    --commerce-primary-light: color-mix(in srgb, var(--commerce-primary) 8%, transparent);
    --commerce-success: #16a34a;
    --commerce-success-light: rgba(22, 163, 74, 0.08);
    --commerce-danger: #dc2626;
    --commerce-danger-light: rgba(220, 38, 38, 0.08);
    --commerce-warning: #f59e0b;
    --commerce-warning-light: rgba(245, 158, 11, 0.08);
    --commerce-bg: #ffffff;
    --commerce-bg-alt: #f8fafc;
    --commerce-border: #e2e8f0;
    --commerce-text: #1e293b;
    --commerce-text-muted: #64748b;
    --commerce-radius: 10px;
    --commerce-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --commerce-shadow-md: 0 4px 6px rgba(0,0,0,.04), 0 2px 4px rgba(0,0,0,.03);
    --commerce-shadow-lg: 0 10px 25px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.04);
    --commerce-transition: 0.2s ease;
    --commerce-focus-ring: 0 0 0 3px color-mix(in srgb, var(--commerce-primary) 25%, transparent);
}

/* ── Skip link ── */
.commerce-skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--commerce-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    z-index: 10001;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 0 0 var(--commerce-radius) 0;
}
.commerce-skip-link:focus {
    top: 0;
}

/* ── Global accessibility: focus-visible ── */
.commerce-btn:focus-visible,
.commerce-search-input:focus-visible,
.commerce-form-group input:focus-visible,
.commerce-form-group select:focus-visible,
.commerce-filter-tag:focus-visible,
.commerce-size-btn:focus-visible,
.commerce-color-swatch:focus-visible,
.commerce-payment-tab:focus-visible,
.commerce-quantity-control button:focus-visible,
.commerce-coupon-form input:focus-visible,
.commerce-reviews-input:focus-visible,
.commerce-reviews-textarea:focus-visible,
.commerce-filter-group input:focus-visible,
.commerce-filter-group select:focus-visible {
    outline: none;
    box-shadow: var(--commerce-focus-ring);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Smooth state transitions ── */
@keyframes commerce-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes commerce-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes commerce-scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes commerce-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.commerce-animate-in { animation: commerce-fade-in 0.3s ease both; }
.commerce-animate-slide { animation: commerce-slide-up 0.4s ease both; }

/* ── Skeleton loading placeholder ── */
.commerce-skeleton {
    background: linear-gradient(90deg, var(--commerce-bg-alt) 25%, #eef2f7 50%, var(--commerce-bg-alt) 75%);
    background-size: 200% 100%;
    animation: commerce-skeleton-shimmer 1.5s ease infinite;
    border-radius: var(--commerce-radius);
}
@keyframes commerce-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Product Grid ── */
.commerce-product-grid {
    display: grid;
    gap: var(--commerce-grid-gap, 1.5rem);
    grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
}

/* Tablet 1024-769: drop to 2 columns so cards don't squeeze. */
@media (max-width: 1024px) {
    .commerce-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .commerce-product-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 480px) {
    .commerce-product-grid { grid-template-columns: 1fr; }
}

/* ── Product Card ── */
.commerce-card {
    background: var(--commerce-bg);
    border: 1px solid var(--commerce-border);
    border-radius: var(--commerce-radius);
    overflow: hidden;
    transition: box-shadow var(--commerce-transition), transform var(--commerce-transition);
    display: flex;
    flex-direction: column;
}
.commerce-card:hover {
    box-shadow: var(--commerce-shadow-lg);
    transform: translateY(-3px);
}
.commerce-card:active {
    transform: translateY(0);
    box-shadow: var(--commerce-shadow);
}

.commerce-card-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--commerce-bg-alt);
}
.commerce-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--commerce-transition);
}
.commerce-card:hover .commerce-card-image img { transform: scale(1.05); }

/* ── Card image carousel ── */
.commerce-card-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.9);
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s, background .15s;
    z-index: 2;
    padding: 0;
    color: var(--commerce-text);
}
.commerce-card-carousel-btn.prev { left: 6px; }
.commerce-card-carousel-btn.next { right: 6px; }
.commerce-card-image:hover .commerce-card-carousel-btn { opacity: 1; }
.commerce-card-carousel-btn:hover { background: #fff; }
.commerce-card-carousel-btn:focus-visible {
    opacity: 1;
    outline: 2px solid var(--commerce-primary, var(--pd-emerald, #1AD598));
    outline-offset: 2px;
}

/* Disabled state for quantity steppers — without this users see clicks vanish silently. */
.commerce-quantity-control button:disabled,
.commerce-qty-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.commerce-card-carousel-dots {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 2;
    opacity: 0;
    transition: opacity .2s;
}
.commerce-card-image:hover .commerce-card-carousel-dots { opacity: 1; }

.commerce-card-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.6);
    cursor: pointer;
    padding: 0;
    transition: background .15s, transform .15s;
}
.commerce-card-carousel-dot.active {
    background: #fff;
    transform: scale(1.3);
    box-shadow: 0 0 3px rgba(0,0,0,.3);
}
.commerce-card-carousel-dot:hover { background: rgba(255,255,255,.9); }

@media (max-width: 768px) {
    .commerce-card-carousel-btn { opacity: 1; width: 32px; height: 32px; }
    .commerce-card-carousel-dots { opacity: 1; }
}

.commerce-card-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: var(--commerce-danger);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.commerce-card-body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.commerce-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--commerce-text);
    line-height: 1.3;
}

.commerce-card-sku {
    font-size: 0.75rem;
    color: var(--commerce-text-muted);
    font-family: monospace;
    opacity: 0.7;
}

.commerce-card-desc {
    font-size: 0.85rem;
    color: var(--commerce-text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.commerce-card-price {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

.commerce-price-current {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--commerce-text);
}

.commerce-price-original {
    font-size: 0.85rem;
    color: var(--commerce-text-muted);
    text-decoration: line-through;
}

.commerce-card-actions {
    padding: 0 1rem 1rem;
}

/* ── Buttons ── */
.commerce-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.4rem;
    border: none;
    border-radius: var(--commerce-radius);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--commerce-transition);
    width: 100%;
    position: relative;
    text-decoration: none;
    line-height: 1.4;
    letter-spacing: -0.01em;
}
.commerce-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}
.commerce-btn-primary {
    background: var(--commerce-primary);
    color: white;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--commerce-primary) 25%, transparent);
}
.commerce-btn-primary:hover:not(:disabled) {
    background: var(--commerce-primary-hover);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--commerce-primary) 30%, transparent);
    transform: translateY(-1px);
}
.commerce-btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--commerce-primary) 20%, transparent);
}

.commerce-btn-outline {
    background: var(--commerce-bg);
    border: 1.5px solid var(--commerce-border);
    color: var(--commerce-text);
}
.commerce-btn-outline:hover:not(:disabled) {
    border-color: var(--commerce-primary);
    color: var(--commerce-primary);
    background: var(--commerce-primary-light);
}

.commerce-btn-secondary {
    background: var(--commerce-bg-muted, #f1f5f9);
    border: 1.5px solid var(--commerce-border);
    color: var(--commerce-text);
}
.commerce-btn-secondary:hover:not(:disabled) {
    background: var(--commerce-bg-hover, #e2e8f0);
    border-color: var(--commerce-text-muted, #64748b);
}
.commerce-btn-ghost {
    background: transparent;
    border: none;
    color: var(--commerce-text-muted, #64748b);
    padding: 0.5rem 0.8rem;
}
.commerce-btn-ghost:hover:not(:disabled) {
    color: var(--commerce-text);
    background: var(--commerce-bg-muted, #f1f5f9);
}
.commerce-btn-icon {
    padding: 0.4rem;
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.commerce-btn-sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
.commerce-btn-lg { padding: 0.85rem 1.8rem; font-size: 1rem; }

/* ── Product Detail ── */
.commerce-detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}
@media (max-width: 768px) {
    .commerce-detail-layout { grid-template-columns: 1fr; }
}

.commerce-detail-gallery { position: relative; }
.commerce-detail-main-image {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--commerce-radius);
    background: var(--commerce-bg-alt);
}
.commerce-detail-main-image img {
    transition: opacity 0.3s ease;
}
.commerce-detail-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--commerce-text-muted);
    font-size: 0.9rem;
}
.commerce-detail-thumbnails {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.commerce-detail-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color var(--commerce-transition), opacity var(--commerce-transition);
    opacity: 0.7;
}
.commerce-detail-thumb:hover { opacity: 1; }
.commerce-detail-thumb.active {
    border-color: var(--commerce-primary);
    opacity: 1;
}

/* ── Vidéos produit (Video1..3, v55) ──────────────────────────────────
   Vignette vidéo dans la galerie (option « Afficher les vidéos ») : même
   gabarit que .commerce-detail-thumb, un badge ▶ par-dessus le poster. La
   lecture est le lightbox pb-video (pb-widgets.js), aucun état Blazor. */
.commerce-detail-thumb--video {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto; overflow: hidden; background: #0B1929; color: #fff;
}
.commerce-detail-thumb--video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.commerce-detail-thumb--video .pb-video-play {
    width: 28px; height: 28px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.commerce-detail-thumb--video .pb-video-play::after { border-width: 6px 0 6px 10px; }
.commerce-slide--video { position: relative; background: #0B1929; aspect-ratio: 16 / 9; }
.commerce-slide--video img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Bloc « Vidéos produit » : grille de cartes 16/9 (fenêtre) ou lecteurs intégrés. */
/* Bloc vidéos : BORNÉ. Un lecteur 16/9 étalé sur toute la largeur de la page donne une image
   haute comme l'écran et casse le rythme de la fiche (constat MOB, 16/09/2026). On le garde dans
   la largeur de lecture, centré, et le titre reprend la graisse des autres titres de section. */
.commerce-detail-videos { --cx-video-cols: 2; max-width: var(--cx-video-max, 860px); margin-inline: auto; }
.commerce-detail-videos--list { --cx-video-max: 640px; }
.commerce-detail-videos-title {
    font-size: 1.05rem; font-weight: 600; letter-spacing: .01em;
    margin: 0 0 .75rem; color: var(--commerce-text, inherit);
}
.commerce-detail-videos-grid {
    display: grid; gap: var(--commerce-grid-gap, 12px);
    grid-template-columns: repeat(var(--cx-video-cols, 2), minmax(0, 1fr));
}
.commerce-detail-videos--list .commerce-detail-videos-grid { grid-template-columns: 1fr; }
/* Dans un onglet, le lecteur occupe la colonne de lecture sans la faire déborder. */
.commerce-tabs-panel .commerce-detail-videos { margin-inline: 0; }
.commerce-video-card {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden; display: block;
    border-radius: var(--cx-image-radius, var(--commerce-radius, 10px));
    background: linear-gradient(135deg, #0E2236, #0B1929);
}
.commerce-video-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.commerce-video-card video, .commerce-video-card iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.commerce-video-card--tile::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .08), transparent 60%);
}
@media (max-width: 767.98px) {
    .commerce-detail-videos-grid { grid-template-columns: 1fr; }
}

.commerce-detail-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}
.commerce-detail-sku {
    font-size: 0.8rem;
    color: var(--commerce-text-muted);
    margin-bottom: 1rem;
}
.commerce-detail-price-block {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.commerce-detail-price-main {
    font-size: 1.5rem !important;
}
/* Mentions sous le prix : « TTC · la pièce · dont TVA 500,00 € » (bloc prix en colonne). */
.commerce-detail-price-block { flex-wrap: wrap; }
.commerce-detail-price-meta {
    flex-basis: 100%;
    font-size: 0.8rem;
    color: var(--commerce-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: baseline;
}
.commerce-detail-price-meta-sep { opacity: .6; }
/* « TTC » collé au prix : petit, discret, sur la même ligne de base que le montant. */
.commerce-detail-price-tax {
    font-size: 0.45em;
    font-weight: 600;
    color: var(--commerce-text-muted);
    margin-left: 0.35em;
    vertical-align: baseline;
    letter-spacing: .02em;
}
/* Les lignes « dont éco-participation… » passent sous le prix dans le bloc en ligne. */
.commerce-detail-price-block .commerce-detail-contributions { flex-basis: 100%; }
.commerce-detail-price-tax__sep { opacity: .55; }
/* Carte et sélecteur rapide : « TTC » collé au montant, comme sur la fiche. */
.commerce-card-price-tax { font-size: .6em; font-weight: 600; color: var(--commerce-text-muted); margin-left: .3em; }

/* Pastilles « Nouveau » / « Best of » (grille + fiche). Forme classique ; le design se règle par
   variables (--cx-flag-new-bg, --cx-flag-new-color, --cx-flag-best-bg, --cx-flag-best-color). */
.commerce-card-flags { position: absolute; top: .6rem; left: .6rem; display: flex; flex-direction: column; gap: .3rem; z-index: 2; pointer-events: none; }
.commerce-detail-flags { display: flex; gap: .4rem; margin-bottom: .5rem; }
.commerce-flag {
    display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: .22rem .55rem; border-radius: 999px; line-height: 1.2; white-space: nowrap;
}
.commerce-flag--new { background: var(--cx-flag-new-bg, var(--commerce-primary, #15715E)); color: var(--cx-flag-new-color, #fff); }
.commerce-flag--best { background: var(--cx-flag-best-bg, #F5A524); color: var(--cx-flag-best-color, #1b1b1b); }

/* Flèches image précédente / suivante : dans le cadre principal et dans le zoom. */
.commerce-detail-main-image { position: relative; }
.commerce-gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 2.2rem; height: 2.2rem; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(255,255,255,.88); color: #1b1b1b; font-size: 1rem; line-height: 1;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.18);
    opacity: .85; transition: opacity .15s, transform .15s;
}
.commerce-gallery-nav:hover { opacity: 1; }
.commerce-gallery-nav--prev { left: .6rem; }
.commerce-gallery-nav--next { right: .6rem; }
.commerce-gallery-nav--zoom { width: 3rem; height: 3rem; font-size: 1.4rem; background: rgba(255,255,255,.92); }
/* Vidéo lue dans le cadre principal de la galerie (même gabarit que la photo). */
.commerce-detail-main-video { display: flex; align-items: center; justify-content: center; background: #0b0f0c; cursor: default; }
.commerce-detail-main-video iframe, .commerce-detail-main-video video { width: 100%; height: 100%; border: 0; display: block; background: #0b0f0c; }
.commerce-detail-thumb--video { cursor: pointer; }
.commerce-gallery-nav--zoom.commerce-gallery-nav--prev { left: 2vw; }
.commerce-gallery-nav--zoom.commerce-gallery-nav--next { right: 2vw; }

/* Filtres : barre « Tout déplier · Tout plier » et arbre Famille › Collection. */
.commerce-filters-toolbar { display: flex; align-items: center; gap: .5rem; padding: .25rem 0 .6rem; font-size: .8rem; }
.commerce-filters-toolbar__btn { background: none; border: none; padding: 0; color: var(--commerce-text-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font: inherit; font-size: .8rem; }
.commerce-filters-toolbar__btn:hover { color: var(--commerce-primary, #15715E); }
.commerce-filters-toolbar__sep { opacity: .5; }
/* Sélecteurs préfixés .commerce-filter-acc : la règle générique « .commerce-filter-acc
   .commerce-filter-checkbox { padding: .45rem 0 } », de même poids et plus bas dans le fichier,
   annulait le retrait — sur Babylone (22/09/2026) le filet recouvrait la première lettre de
   « FIXATION MURALE ». */
.commerce-filter-acc .commerce-filter-tree .commerce-filter-checkbox--root,
.commerce-filter-tree .commerce-filter-checkbox--root { margin-top: .45rem; padding-top: .35rem; border-top: 1px solid var(--commerce-border, #e5e7eb); }
.commerce-filter-acc .commerce-filter-tree .commerce-filter-checkbox--root:first-child,
.commerce-filter-tree .commerce-filter-checkbox--root:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.commerce-filter-tree .commerce-filter-checkbox--root .commerce-filter-checkbox-label { font-weight: 700; letter-spacing: .01em; }
.commerce-filter-acc .commerce-filter-tree .commerce-filter-checkbox--child,
.commerce-filter-tree .commerce-filter-checkbox--child { padding-left: 1.5rem; position: relative; }
.commerce-filter-tree__branch { position: absolute; left: .45rem; top: 0; bottom: 50%; width: .6rem; border-left: 1px solid var(--commerce-border, #d7dbe0); border-bottom: 1px solid var(--commerce-border, #d7dbe0); border-radius: 0 0 0 4px; pointer-events: none; }
.commerce-detail-tax-note {
    font-size: 0.8rem;
    color: var(--commerce-text-muted);
    margin-bottom: 1rem;
}
/* Rating display */
.commerce-detail-rating {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
}

.commerce-rating-stars { display: flex; gap: 1px; }
.commerce-rating-stars .star { color: #ddd; font-size: 1.1rem; }
.commerce-rating-stars .star.filled { color: #f59e0b; }
.commerce-rating-value { font-weight: 600; }
.commerce-rating-count { color: var(--commerce-text-muted); font-size: 0.85rem; }

.commerce-detail-description {
    margin-top: 2rem;
    line-height: 1.6;
    color: var(--commerce-text);
    border-top: 1px solid var(--commerce-border);
    padding-top: 1.5rem;
}
.commerce-detail-qty-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.commerce-detail-add-btn {
    margin-top: 1rem;
    padding: 0.8rem 1.5rem;
    font-size: 0.95rem;
}

/* ── Variant selectors ── */
.commerce-variant-selectors {
    margin-bottom: 1.5rem;
}
.commerce-variant-group {
    margin-bottom: 1rem;
}
.commerce-variant-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--commerce-text);
}

/* Color swatches */
.commerce-color-options {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.commerce-color-swatch {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--commerce-border);
    cursor: pointer;
    position: relative;
    transition: all var(--commerce-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.commerce-color-swatch:hover {
    transform: scale(1.1);
    box-shadow: var(--commerce-shadow);
}
.commerce-color-swatch.selected {
    border-color: var(--commerce-primary);
    box-shadow: 0 0 0 2px var(--commerce-primary);
}
.commerce-color-swatch.unavailable {
    opacity: 0.3;
    cursor: not-allowed;
    position: relative;
}
.commerce-color-swatch.unavailable::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: var(--commerce-danger);
    transform: rotate(-45deg);
}
.commerce-color-check {
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
/* Pastille = image d'échantillon (coloris ERP, bicolores) : la coche reste lisible */
.commerce-color-swatch.has-image .commerce-color-check {
    background: rgba(0,0,0,.45);
    border-radius: 50%;
    width: 1.3em;
    height: 1.3em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Pastille dans les filtres du catalogue (facette couleur) */
.commerce-filter-swatch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--commerce-border);
    flex-shrink: 0;
    display: inline-block;
}

/* Size / text buttons */
.commerce-size-options {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.commerce-size-btn {
    min-width: 44px;
    height: 44px;
    padding: 0 0.75rem;
    border: 1px solid var(--commerce-border);
    border-radius: 6px;
    background: var(--commerce-bg);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all var(--commerce-transition);
}
.commerce-size-btn:hover {
    border-color: var(--commerce-primary);
}
.commerce-size-btn.selected {
    background: var(--commerce-primary);
    color: white;
    border-color: var(--commerce-primary);
}
.commerce-size-btn.unavailable {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
}

.commerce-variant-unavailable {
    color: var(--commerce-danger);
    font-size: 0.85rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

/* ── Search Bar ── */
.commerce-search-wrapper {
    position: relative;
    max-width: 500px;
    width: 100%;
}

.commerce-search-input {
    width: 100%;
    padding: 0.7rem 1rem 0.7rem 2.5rem;
    border: 1px solid var(--commerce-border);
    border-radius: var(--commerce-radius);
    font-size: 0.9rem;
    background: var(--commerce-bg);
    transition: border-color var(--commerce-transition), box-shadow var(--commerce-transition);
}
.commerce-search-input:focus {
    outline: none;
    border-color: var(--commerce-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.commerce-search-icon {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--commerce-text-muted);
    pointer-events: none;
}

.commerce-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--commerce-bg);
    border: 1px solid var(--commerce-border);
    border-radius: var(--commerce-radius);
    box-shadow: var(--commerce-shadow-lg);
    margin-top: 4px;
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
}

.commerce-search-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--commerce-border);
    cursor: pointer;
    transition: background var(--commerce-transition);
}
.commerce-search-item:last-child { border-bottom: none; }
.commerce-search-item:hover,
.commerce-search-item.is-highlighted { background: var(--commerce-bg-alt); }

.commerce-search-item-img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    background: var(--commerce-bg-alt);
}

.commerce-search-item-info { flex: 1; min-width: 0; }
.commerce-search-item-name { font-size: 0.85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.commerce-search-item-price { font-size: 0.8rem; color: var(--commerce-primary); font-weight: 600; }

/* ── Filters ── */
.commerce-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    background: var(--commerce-bg);
    border: 1px solid var(--commerce-border);
    border-radius: var(--commerce-radius);
    margin-bottom: 1.5rem;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.commerce-filters.sidebar {
    flex-direction: column;
}

.commerce-filter-group {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.commerce-filter-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--commerce-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

/* Filter heading (collapsible) */
.commerce-filter-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--commerce-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.commerce-filter-heading:hover { color: var(--commerce-text); }

.commerce-filter-arrow {
    transition: transform 0.2s ease;
    font-size: 0.7rem;
}

.commerce-filter-arrow.open { transform: rotate(180deg); }

/* Price range row */
.commerce-filter-price-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.commerce-filter-price-row input {
    flex: 1;
    min-width: 0;
}

.commerce-filter-price-sep {
    color: var(--commerce-text-muted);
    font-size: 0.85rem;
}

/* Checkbox filter */
.commerce-filter-check {
    display: flex !important;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    text-transform: none !important;
    margin-bottom: 0 !important;
}

.commerce-filter-check input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* Tags */
.commerce-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.commerce-filter-tag {
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--commerce-border);
    border-radius: 20px;
    background: var(--commerce-bg);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--commerce-text);
}

.commerce-filter-tag:hover { border-color: var(--commerce-primary); }
.commerce-filter-tag.active {
    background: var(--commerce-primary);
    color: white;
    border-color: var(--commerce-primary);
}

/* Rating filter */
.commerce-filter-rating {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.commerce-filter-rating-btn {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s ease;
    color: var(--commerce-text);
}

.commerce-filter-rating-btn:hover { background: var(--commerce-bg-alt, #f5f5f5); }
.commerce-filter-rating-btn.active {
    border-color: var(--commerce-primary);
    background: rgba(37, 99, 235, 0.05);
}

.commerce-filter-rating-btn .star { color: #ddd; font-size: 1rem; }
.commerce-filter-rating-btn .star.filled { color: #f59e0b; }
.commerce-filter-rating-label { font-size: 0.78rem; color: var(--commerce-text-muted); margin-left: 0.3rem; }

/* Reset button */
.commerce-filter-reset {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.5rem;
    background: none;
    border: 1px solid var(--commerce-border);
    border-radius: 6px;
    color: var(--commerce-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    justify-content: center;
    transition: all 0.15s ease;
}

.commerce-filter-reset:hover {
    color: var(--commerce-danger, #ef4444);
    border-color: var(--commerce-danger, #ef4444);
}

/* Active count */
.commerce-filter-active-count {
    font-size: 0.78rem;
    color: var(--commerce-primary);
    font-weight: 600;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--commerce-border);
}

.commerce-filter-group select,
.commerce-filter-group input {
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--commerce-border);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--commerce-bg);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* ── Cart ── */
.commerce-cart-container { max-width: 800px; margin: 0 auto; }

.commerce-cart-item {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--commerce-border);
    align-items: center;
    transition: opacity 0.25s ease, transform 0.25s ease;
    animation: commerce-fade-in 0.3s ease both;
}
.commerce-cart-item:last-child { border-bottom: none; }
.commerce-cart-item.removing {
    opacity: 0;
    transform: translateX(-20px);
}

.commerce-cart-item-img {
    width: 80px;
    height: 80px;
    border-radius: var(--commerce-radius);
    object-fit: cover;
    background: var(--commerce-bg-alt);
    flex-shrink: 0;
}

.commerce-cart-item-info { flex: 1; min-width: 0; }
.commerce-cart-item-name { font-weight: 600; font-size: 1.15rem; line-height: 1.25; } /* lisible d'un coup d'œil (recette MOB 22/09/2026) */
.commerce-cart-item-options { font-size: 0.8rem; color: var(--commerce-text-muted); }
.commerce-cart-item-price { font-weight: 600; color: var(--commerce-text); }

/* ── Cart page bundle grouping ── */
.commerce-cart-bundle {
    border: 1.5px solid var(--commerce-primary, #2563eb);
    border-radius: var(--commerce-radius, 8px);
    margin-bottom: 1rem;
    overflow: hidden;
}
.commerce-cart-bundle-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--commerce-primary-light, rgba(37, 99, 235, 0.05));
    border-bottom: 1px solid var(--commerce-border);
}
.commerce-cart-bundle-meta {
    font-size: 0.8rem;
    color: var(--commerce-text-muted);
    margin-top: 0.15rem;
}
.commerce-cart-bundle-addon {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem 0.6rem 2rem;
    border-bottom: 1px solid var(--commerce-border);
    font-size: 0.9rem;
}
.commerce-cart-bundle-addon:last-child { border-bottom: none; }
.commerce-cart-bundle-base {
    background: var(--commerce-bg-alt, #f8fafc);
}
.commerce-cart-addon-img {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}
.commerce-cart-addon-name { flex: 1; min-width: 0; }
.commerce-cart-addon-price {
    font-weight: 500;
    color: var(--commerce-text-muted);
    white-space: nowrap;
    font-size: 0.85rem;
}
.commerce-cart-addon-included {
    color: var(--commerce-success, #16a34a);
    font-style: italic;
}
.commerce-cart-discount-badge {
    display: inline-block;
    background: var(--commerce-success-light);
    color: var(--commerce-success);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    margin-left: 0.5rem;
    vertical-align: middle;
}
.commerce-cart-addon-remove {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    opacity: 0;
    transition: opacity var(--commerce-transition);
}
.commerce-cart-bundle-addon:hover .commerce-cart-addon-remove {
    opacity: 1;
}
.commerce-cart-item-total .commerce-price-original {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
}

.commerce-quantity-control {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid var(--commerce-border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color var(--commerce-transition);
}
.commerce-quantity-control:hover { border-color: var(--commerce-primary); }
.commerce-quantity-control button {
    width: 44px;
    height: 44px;
    border: none;
    background: var(--commerce-bg-alt);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--commerce-transition), color var(--commerce-transition);
}
.commerce-quantity-control button:hover:not(:disabled) {
    background: var(--commerce-primary-light);
    color: var(--commerce-primary);
}
.commerce-quantity-control button:disabled { opacity: 0.4; cursor: not-allowed; }
.commerce-quantity-control span {
    width: 42px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.commerce-cart-remove {
    background: none;
    border: none;
    color: var(--commerce-text-muted);
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1.2rem;
    transition: color var(--commerce-transition);
}
.commerce-cart-remove:hover { color: var(--commerce-danger); }

/* Coupon */
.commerce-coupon-form {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
}
.commerce-coupon-form input {
    flex: 1;
    padding: 0.6rem 1rem;
    border: 1px solid var(--commerce-border);
    border-radius: var(--commerce-radius);
    font-size: 0.9rem;
}

/* Totals */
.commerce-totals {
    background: var(--commerce-bg-alt);
    border-radius: var(--commerce-radius);
    border: 1px solid var(--commerce-border);
    padding: 1.5rem;
    margin-top: 1.5rem;
}
.commerce-totals-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: var(--commerce-text);
}
.commerce-totals-row.discount { color: var(--commerce-success); }
.commerce-totals-row.grand-total {
    border-top: 2px solid var(--commerce-border);
    margin-top: 0.75rem;
    padding-top: 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--commerce-text);
}

/* ── Mini Cart (dropdown) ── */
.commerce-minicart-wrapper {
    position: relative;
    display: inline-block;
}

.commerce-minicart-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    color: inherit;
    transition: color 0.2s ease;
}


.commerce-minicart-label {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.commerce-minicart-toggle { gap: 6px; }

/* ═══ Category Menu ═══ */
.commerce-category-menu { font-size: 0.9rem; }
.commerce-category-list, .commerce-category-sublist {
    list-style: none;
    padding: 0;
    margin: 0;
}
.commerce-category-sublist {
    padding-left: 1rem;
    margin-top: 0.25rem;
}
.commerce-category-item { margin-bottom: 0.25rem; }
.commerce-category-link {
    display: block;
    padding: 0.35rem 0.5rem;
    color: var(--commerce-text);
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.15s ease;
}
.commerce-category-link:hover { background: var(--commerce-bg-alt, #f5f5f5); color: var(--commerce-primary); }
.commerce-category-item.depth-0 > .commerce-category-link { font-weight: 600; }

/* ═══ Liens de catégories (bloc « Liens de catégories », pied de page / colonne) ═══
   Présentation NEUTRE : le contexte décide de la couleur, du survol et de l'espacement — dans le
   pied de page Babylone, les colonnes voisines sont réglées par « .footer a » et l'écart de la
   colonne. D'où :where() : spécificité nulle, la moindre règle de l'hôte l'emporte, et le bloc se
   fond dans la colonne au lieu d'y coller la décoration d'un arbre de catégories. */
:where(.commerce-category-links) { display: flex; flex-direction: column; gap: var(--cx-catlinks-gap, 0.75rem); }
:where(.commerce-category-links-item) > a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
:where(.commerce-category-links-item) > a:hover { color: var(--commerce-primary); }

/* ═══ Category Grid ═══ */
.commerce-category-grid {
    display: grid;
    grid-template-columns: repeat(var(--cat-grid-columns, 4), 1fr);
    gap: 1rem;
}
@media (max-width: 768px) { .commerce-category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .commerce-category-grid { grid-template-columns: 1fr; } }

.commerce-category-card {
    display: block;
    text-decoration: none;
    color: var(--commerce-text);
    border-radius: var(--commerce-radius, 8px);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.commerce-category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.commerce-category-card-image {
    aspect-ratio: 1;
    overflow: hidden;
    background: #f1f5f9;
}
.commerce-category-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.commerce-category-card:hover .commerce-category-card-image img { transform: scale(1.05); }

.commerce-category-card-placeholder {
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
}

.commerce-category-card-title {
    padding: 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
}

/* ═══ Card Heart (image corner) ═══ */
.commerce-card-heart {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    color: #64748b;
    transition: all 0.2s ease;
    z-index: 2;
}

.commerce-card-heart:hover {
    transform: scale(1.1);
    color: #e11d48;
}

.commerce-card-heart.active {
    color: #e11d48;
    background: #fff;
}

/* ═══ Card Heart (bottom button) ═══ */
.commerce-card-heart-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 0.5rem;
    background: none;
    border: none;
    border-top: 1px solid var(--commerce-border);
    cursor: pointer;
    color: var(--commerce-text-muted);
    font-size: 0.85rem;
    transition: all 0.15s ease;
}

.commerce-card-heart-bottom:hover {
    color: #e11d48;
    background: #fef2f2;
}

.commerce-card-heart-bottom.active {
    color: #e11d48;
}

/* ═══ Product Detail Wishlist Toggle ═══ */
.commerce-detail-wishlist {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--commerce-border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--commerce-text-muted);
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.commerce-detail-wishlist:hover {
    border-color: #e11d48;
    color: #e11d48;
}

.commerce-detail-wishlist.active {
    border-color: #e11d48;
    color: #e11d48;
    background: #fef2f2;
}

/* ═══ Wishlist Button ═══ */
.commerce-wishlist-wrapper {
    position: relative;
    display: inline-block;
}

.commerce-wishlist-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.commerce-wishlist-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.commerce-wishlist-label {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.commerce-wishlist-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: #e11d48;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

.commerce-minicart-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.commerce-minicart-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--commerce-primary);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

.commerce-minicart-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: white;
    /* The panel is always white: keep its text dark even when the header
       colors the trigger (light nav color + -webkit-text-fill-color inherit
       and paint over — same pitfall as the language/user dropdowns). */
    color: #1e293b;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
    z-index: 1000;
    overflow: hidden;
    animation: minicart-fade .18s ease;
    transform-origin: top right;
}

@keyframes minicart-fade {
    from { opacity: 0; transform: scale(.96) translateY(-6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 480px) {
    .commerce-minicart-dropdown {
        width: 90vw;
        max-width: calc(100vw - 1rem);
        right: .5rem;
    }
}

.commerce-minicart-dropdown,
.commerce-minicart-dropdown * {
    -webkit-text-fill-color: currentColor !important;
}

.commerce-minicart-empty {
    padding: 2rem;
    text-align: center;
    color: var(--commerce-text-muted);
    font-size: 0.9rem;
}

.commerce-minicart-items {
    max-height: 260px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.commerce-minicart-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--commerce-border);
}
.commerce-minicart-item:last-child { border-bottom: none; }

.commerce-minicart-bundle {
    border-bottom: 1px solid var(--commerce-border);
}
.commerce-minicart-bundle-header {
    background: var(--commerce-primary-light, rgba(37, 99, 235, 0.05));
    border-bottom: none;
}
.commerce-minicart-addon {
    padding: 0.3rem 1rem 0.3rem 2rem;
    border-bottom: none;
    font-size: 0.85em;
}
.commerce-minicart-addon-name { color: #64748b; }
.commerce-minicart-addon-price { color: #94a3b8; font-size: 0.85em; margin-left: auto; }

.commerce-minicart-img {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--commerce-bg-subtle, #f5f5f5);
}

.commerce-minicart-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.commerce-minicart-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--commerce-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.commerce-minicart-price {
    font-size: 0.78rem;
    color: var(--commerce-text-muted);
}

.commerce-minicart-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}

/* Le panneau passe TOUJOURS au-dessus de son propre fond de fermeture. Le CSS d'un en-tête importé
   (Babylone : z-index 96) le plaçait dessous : sur /account, Commander, Voir le panier, +/− et ✕ ne
   recevaient plus aucun clic — seules les pages dont les jetons de thème relevaient le panneau à 10000
   y échappaient (28/09/2026). */
.commerce-minicart-backdrop + .commerce-minicart-dropdown {
    z-index: 1000 !important;
}

.commerce-minicart-qty-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.commerce-minicart-qty-btn {
    width: 22px;
    height: 22px;
    border: 1px solid var(--commerce-border);
    background: var(--commerce-bg-subtle, #f5f5f5);
    border-radius: 4px;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--commerce-text);
    transition: background 0.15s;
}
.commerce-minicart-qty-btn:hover:not(:disabled) { background: var(--commerce-border); }
.commerce-minicart-qty-btn:disabled { opacity: 0.4; cursor: default; }

.commerce-minicart-qty-val {
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    color: var(--commerce-text);
}

.commerce-minicart-line-total {
    margin-left: auto;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--commerce-text);
    white-space: nowrap;
}

.commerce-minicart-remove {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--commerce-text-muted);
    padding: 2px 4px;
    border-radius: 3px;
    line-height: 1;
}
.commerce-minicart-remove:hover:not(:disabled) { color: var(--commerce-danger, #e53e3e); }
.commerce-minicart-remove:disabled { opacity: 0.4; cursor: default; }


.commerce-minicart-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--commerce-border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.commerce-minicart-subtotal {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--commerce-text);
}
.commerce-minicart-subtotal span:last-child { font-weight: 700; }

.commerce-minicart-checkout {
    display: block;
    text-align: center;
    padding: 0.55rem;
    background: var(--commerce-primary);
    color: white;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background var(--commerce-transition);
}
.commerce-minicart-checkout:hover { background: var(--commerce-primary-hover); filter: brightness(1.08); }

.commerce-minicart-viewcart {
    display: block;
    text-align: center;
    padding: 0.45rem;
    color: var(--commerce-primary);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--commerce-border);
    border-radius: 6px;
    transition: all var(--commerce-transition);
}
.commerce-minicart-viewcart:hover { border-color: var(--commerce-primary); }

/* ── Checkout ── */
.commerce-checkout-container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .commerce-checkout-container { grid-template-columns: 1fr; }
}

.commerce-checkout-section {
    margin-bottom: 1.5rem;
    background: var(--commerce-bg);
    border: 1px solid var(--commerce-border);
    border-radius: var(--commerce-radius);
    padding: 1.5rem;
    animation: commerce-fade-in 0.3s ease both;
}
/* Carnet d'adresses dans le tunnel (recette Laura 29/09/2026). */
.commerce-saved-addresses { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.commerce-saved-addresses__title { font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--commerce-text-muted, #6b7280); margin-bottom: .5rem; padding: 0; }
.commerce-saved-addresses__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; }
.commerce-saved-address { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--commerce-border, #e5e7eb); border-radius: var(--commerce-radius, 10px); cursor: pointer; background: var(--commerce-bg, #fff); transition: border-color .15s, box-shadow .15s; font-size: .88rem; line-height: 1.35; }
.commerce-saved-address:hover { border-color: var(--commerce-primary, #2563eb); }
.commerce-saved-address.is-selected { border-color: var(--commerce-primary, #2563eb); box-shadow: 0 0 0 2px color-mix(in srgb, var(--commerce-primary, #2563eb) 18%, transparent); }
.commerce-saved-address input[type="radio"] { margin-top: .2rem; flex: 0 0 auto; accent-color: var(--commerce-primary, #2563eb); }
.commerce-saved-address__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.commerce-saved-address__label { font-weight: 600; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.commerce-saved-address__default { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--commerce-primary, #2563eb); }
.commerce-saved-address__text { color: var(--commerce-text-muted, #6b7280); overflow-wrap: anywhere; }
.commerce-saved-address--new { align-items: center; }
.commerce-checkout-section h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--commerce-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.commerce-form-group {
    margin-bottom: 1rem;
}
.commerce-form-group label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--commerce-text);
    letter-spacing: -0.01em;
}
.commerce-form-group input,
.commerce-form-group select {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1.5px solid var(--commerce-border);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--commerce-bg);
    transition: border-color var(--commerce-transition), box-shadow var(--commerce-transition);
}
.commerce-form-group input:focus,
.commerce-form-group select:focus {
    outline: none;
    border-color: var(--commerce-primary);
    box-shadow: var(--commerce-focus-ring);
}
.commerce-form-group input.is-invalid {
    border-color: var(--commerce-danger);
    box-shadow: 0 0 0 3px var(--commerce-danger-light);
}
.commerce-form-hint {
    font-size: 0.78rem;
    color: var(--commerce-danger);
    margin-top: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.commerce-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ── Checkout Stepper ── */
.commerce-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 2rem;
    padding: 1.25rem 0;
    position: relative;
}
.commerce-stepper-step {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    position: relative;
    z-index: 1;
}
.commerce-stepper-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    border: 2px solid var(--commerce-border);
    background: var(--commerce-bg);
    color: var(--commerce-text-muted);
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.commerce-stepper-step.is-active .commerce-stepper-dot {
    background: var(--commerce-primary);
    border-color: var(--commerce-primary);
    color: white;
    box-shadow: 0 0 0 4px var(--commerce-primary-light);
}
.commerce-stepper-step.is-done .commerce-stepper-dot {
    background: var(--commerce-success);
    border-color: var(--commerce-success);
    color: white;
}
.commerce-stepper-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--commerce-text-muted);
    white-space: nowrap;
}
.commerce-stepper-step.is-active .commerce-stepper-label { color: var(--commerce-text); }
.commerce-stepper-step.is-done .commerce-stepper-label { color: var(--commerce-success); }
.commerce-stepper-line {
    width: 60px;
    height: 2px;
    background: var(--commerce-border);
    margin: 0 0.75rem;
    transition: background 0.3s ease;
}
.commerce-stepper-line.is-done { background: var(--commerce-success); }

/* ── Toast / Feedback ── */
.commerce-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--commerce-text);
    color: white;
    border-radius: var(--commerce-radius);
    font-size: 0.88rem;
    font-weight: 500;
    box-shadow: var(--commerce-shadow-lg);
    z-index: 10000;
    animation: commerce-slide-up 0.3s ease both;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.commerce-toast.is-success { background: var(--commerce-success); }
.commerce-toast.is-error { background: var(--commerce-danger); }

/* ── Payment Provider Tabs ── */
.commerce-payment-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.commerce-payment-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border: 2px solid var(--commerce-border);
    border-radius: 8px;
    background: var(--commerce-card-bg, #fff);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--commerce-text-secondary, #555);
    transition: border-color .15s, color .15s, background .15s;
}
.commerce-payment-tab:hover:not(:disabled) {
    border-color: var(--commerce-primary, #2563eb);
    color: var(--commerce-primary, #2563eb);
}
.commerce-payment-tab.active {
    border-color: var(--commerce-primary, #2563eb);
    color: var(--commerce-primary, #2563eb);
    background: color-mix(in srgb, var(--commerce-primary, #2563eb) 5%, transparent);
}
.commerce-payment-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.commerce-payment-tab-icon {
    display: flex;
    width: 1.25rem;
    height: 1.25rem;
}
.commerce-payment-tab-icon svg {
    width: 100%;
    height: 100%;
}
.commerce-payment-content {
    min-height: 100px;
}
.commerce-transfer-details {
    background: var(--commerce-bg, #f8f9fa);
    border: 1px solid var(--commerce-border);
    border-radius: 8px;
    padding: 1.25rem;
}
.commerce-transfer-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}
.commerce-transfer-table th {
    text-align: left;
    padding: 0.5rem 1rem 0.5rem 0;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--commerce-text-secondary, #555);
    white-space: nowrap;
    vertical-align: top;
}
.commerce-transfer-table td {
    padding: 0.5rem 0;
    font-size: 0.9rem;
}
.commerce-transfer-table code {
    font-size: 0.85rem;
    letter-spacing: 0.03em;
}

/* ── Stock Badge ── */
.commerce-stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 500;
}
.commerce-stock-badge.in-stock { color: var(--commerce-success); }
.commerce-stock-badge.low-stock { color: var(--commerce-warning); }
.commerce-stock-badge.out-of-stock { color: var(--commerce-danger); }

/* « À partir de » devant le prix d'un produit à déclinaisons de prix variables. */
.commerce-price-from {
    font-size: 0.75rem;
    color: var(--commerce-text-muted, #64748b);
    margin-right: 0.25rem;
}

/* Pastille « Plusieurs options » : signale en liste les produits à déclinaisons
   (tailles/couleurs) avant même d'ouvrir la fiche. */
.commerce-variant-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--commerce-primary, #2563eb) 12%, transparent);
    color: var(--commerce-primary, #2563eb);
    border: 1px solid color-mix(in srgb, var(--commerce-primary, #2563eb) 25%, transparent);
    white-space: nowrap;
}

/* ── Pagination ── */
/* ═══ Grid toolbar & view toggle ═══ */
.commerce-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    grid-column: 1 / -1;
    flex-wrap: wrap;
}

.commerce-grid-toolbar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.commerce-grid-toolbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.commerce-sort-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.commerce-sort-bar label {
    color: var(--commerce-text-muted);
    white-space: nowrap;
}

.commerce-sort-bar select {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--commerce-border);
    border-radius: 6px;
    background: var(--commerce-surface);
    color: var(--commerce-text);
    font-size: 0.85rem;
    cursor: pointer;
}

.commerce-sort-bar select:focus {
    outline: none;
    border-color: var(--commerce-primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.commerce-result-count {
    font-size: 0.82rem;
    color: var(--commerce-text-muted);
    white-space: nowrap;
}

.commerce-view-toggle {
    display: flex;
    gap: 2px;
    border: 1px solid var(--commerce-border);
    border-radius: 6px;
    overflow: hidden;
}

.commerce-view-toggle button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background: var(--commerce-bg);
    border: none;
    cursor: pointer;
    color: var(--commerce-text-muted);
    transition: all 0.15s ease;
}

.commerce-view-toggle button:hover { color: var(--commerce-text); }
.commerce-view-toggle button.active {
    background: var(--commerce-primary);
    color: white;
}

/* ═══ List mode — full-width article rows (image left · content · actions right) ═══ */
.commerce-product-grid.commerce-list-mode {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.commerce-list-mode .commerce-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
}

.commerce-list-mode .commerce-card-image {
    width: 34%;
    max-width: 300px;
    min-width: 180px;
    aspect-ratio: 4 / 3;
    flex-shrink: 0;
    border-radius: var(--commerce-radius) 0 0 var(--commerce-radius);
}
.commerce-list-mode .commerce-card-image img {
    border-radius: var(--commerce-radius) 0 0 var(--commerce-radius);
}

.commerce-list-mode .commerce-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 1.5rem;
}
.commerce-list-mode .commerce-card-title { font-size: 1.2rem; }

/* The description is what makes a row read as an "article" — show it, clamped. */
.commerce-list-mode .commerce-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--commerce-text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.commerce-list-mode .commerce-card-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 0.6rem;
    padding: 1.25rem 1.5rem;
    min-width: 190px;
    flex-shrink: 0;
    border-top: none;
}

/* Collapse to a stacked card on small screens. */
@media (max-width: 640px) {
    .commerce-list-mode .commerce-card { flex-direction: column; }
    .commerce-list-mode .commerce-card-image {
        width: 100%;
        max-width: none;
        aspect-ratio: 16 / 9;
        border-radius: var(--commerce-radius) var(--commerce-radius) 0 0;
    }
    .commerce-list-mode .commerce-card-image img { border-radius: var(--commerce-radius) var(--commerce-radius) 0 0; }
    .commerce-list-mode .commerce-card-actions { align-items: stretch; min-width: 0; }
}

.commerce-pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
    margin-top: 1rem;
    grid-column: 1 / -1;
    width: 100%;
}
.commerce-pagination button {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--commerce-border);
    border-radius: 6px;
    background: var(--commerce-bg);
    cursor: pointer;
    height: auto;
    width: auto;
    min-height: 44px;
    min-width: 44px;
    flex: none;
    font-size: 0.85rem;
    transition: all var(--commerce-transition);
}
.commerce-pagination button:hover { border-color: var(--commerce-primary); }
.commerce-pagination button.active {
    background: var(--commerce-primary);
    color: white;
    border-color: var(--commerce-primary);
}

/* ── Quantity Discount Info ── */
.commerce-qty-discounts {
    background: var(--commerce-bg-alt);
    border: 1px solid var(--commerce-border);
    border-radius: var(--commerce-radius);
    padding: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
}
.commerce-qty-discounts-title {
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--commerce-success);
}
.commerce-qty-discount-row {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0;
}

/* ── Editor placeholders ── */
.commerce-grid-placeholder,
.commerce-card-placeholder,
.commerce-search-placeholder,
.commerce-filter-placeholder,
.commerce-cart-placeholder,
.commerce-cartbtn-placeholder,
.commerce-checkout-placeholder,
.commerce-featured-placeholder,
.commerce-detail-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border: 2px dashed var(--commerce-border);
    border-radius: var(--commerce-radius);
    background: var(--commerce-bg-alt);
    text-align: center;
    gap: 0.5rem;
    min-height: 120px;
    color: var(--commerce-text-muted);
}
.placeholder-icon { opacity: 0.5; }
.commerce-grid-placeholder span,
.commerce-card-placeholder span,
.commerce-search-placeholder span,
.commerce-filter-placeholder span,
.commerce-cart-placeholder span,
.commerce-cartbtn-placeholder span,
.commerce-checkout-placeholder span,
.commerce-featured-placeholder span,
.commerce-detail-placeholder span {
    font-weight: 600;
    font-size: 0.9rem;
}
.commerce-grid-placeholder small,
.commerce-search-placeholder small,
.commerce-cart-placeholder small,
.commerce-checkout-placeholder small,
.commerce-detail-placeholder small {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* ── Card qty+add row ── */
.commerce-card-qty-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.commerce-card-qty-row .commerce-quantity-control {
    flex-shrink: 0;
}
.commerce-card-qty-row .commerce-btn {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    padding: 0.5rem 0.6rem;
}

/* ── Fixed pages ── */
.commerce-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem;
}
.commerce-page-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
    color: var(--commerce-text);
}

.commerce-cart-layout {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 768px) {
    .commerce-cart-layout { grid-template-columns: 1fr; }
}

.commerce-cart-sidebar .commerce-totals {
    margin-top: 0;
}

.commerce-cart-item-total {
    font-weight: 600;
    min-width: 80px;
    text-align: right;
    font-size: 0.95rem;
}

.commerce-coupon-section {
    margin-bottom: 1rem;
}
.commerce-coupon-section .commerce-coupon-form {
    margin: 0;
}
.commerce-coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.9rem;
    background: var(--commerce-success-light);
    color: var(--commerce-success);
    border: 1px solid color-mix(in srgb, var(--commerce-success) 20%, transparent);
    border-radius: 8px;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    animation: commerce-fade-in 0.2s ease both;
}

.commerce-error-message {
    background: var(--commerce-danger-light);
    color: var(--commerce-danger);
    border: 1px solid color-mix(in srgb, var(--commerce-danger) 15%, transparent);
    padding: 0.75rem 1rem;
    border-radius: var(--commerce-radius);
    font-size: 0.88rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    animation: commerce-fade-in 0.2s ease both;
}

/* ── Order success ── */
.commerce-order-success {
    text-align: center;
    padding: 3rem 1rem;
}
.commerce-order-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--commerce-success);
    color: white;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}
.commerce-order-success h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
.commerce-order-success p {
    color: var(--commerce-text-muted);
    font-size: 0.95rem;
}

/* ── Loading spinner ── */
.commerce-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 1rem;
    color: var(--commerce-text-muted);
    font-size: 0.9rem;
}
.commerce-spinner {
    width: 28px;
    height: 28px;
    border: 2.5px solid var(--commerce-border);
    border-top-color: var(--commerce-primary);
    border-radius: 50%;
    animation: commerce-spin 0.7s linear infinite;
}
.commerce-spinner-sm { width: 18px; height: 18px; border-width: 2px; }
.commerce-spinner-lg { width: 40px; height: 40px; border-width: 3px; }
@keyframes commerce-spin { to { transform: rotate(360deg); } }

/* ── Empty state ── */
.commerce-empty {
    text-align: center;
    padding: 3.5rem 1.5rem;
    color: var(--commerce-text-muted);
    animation: commerce-fade-in 0.4s ease both;
}
.commerce-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--commerce-bg-alt);
    border-radius: 50%;
    color: var(--commerce-text-muted);
}
.commerce-empty-icon svg { opacity: 0.5; }
.commerce-empty-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--commerce-text);
}
.commerce-empty-text {
    font-size: 0.9rem;
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ── My Orders ── */
.commerce-orders-list { display: flex; flex-direction: column; gap: 1rem; }
.commerce-order-card {
    border: 1px solid var(--commerce-border);
    border-radius: var(--commerce-radius);
    overflow: hidden;
    background: var(--commerce-bg);
}
.commerce-order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--commerce-bg-alt);
    border-bottom: 1px solid var(--commerce-border);
    font-size: 0.9rem;
}
.commerce-order-date {
    color: var(--commerce-text-muted);
    margin-left: 1rem;
    font-size: 0.8rem;
}
.commerce-order-status {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    letter-spacing: 0.03em;
}
.commerce-status-pending { background: #fef3c7; color: #92400e; }
.commerce-status-confirmed { background: #d1fae5; color: #065f46; }
.commerce-status-processing { background: #dbeafe; color: #1e40af; }
.commerce-status-shipped { background: #e0e7ff; color: #3730a3; }
.commerce-status-delivered { background: #d1fae5; color: #065f46; }
.commerce-status-cancelled { background: #fee2e2; color: #991b1b; }
.commerce-status-refunded { background: #f3e8ff; color: #6b21a8; }
.commerce-status-paymentfailed { background: #fee2e2; color: #991b1b; }
.commerce-order-items { padding: 0.75rem 1.25rem; }
.commerce-order-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.85rem;
}
.commerce-order-item + .commerce-order-item { border-top: 1px solid var(--commerce-border); }
.commerce-order-item-img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
.commerce-order-item-info { flex: 1; min-width: 0; }
.commerce-order-item-name { display: block; font-weight: 500; }
.commerce-order-item-options { display: block; font-size: 0.75rem; color: var(--commerce-text-muted); }
.commerce-order-item-qty { color: var(--commerce-text-muted); white-space: nowrap; }
.commerce-order-item-total { font-weight: 600; white-space: nowrap; }
.commerce-order-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--commerce-border);
    font-size: 0.9rem;
}
.commerce-order-discount { color: var(--commerce-success); font-size: 0.8rem; }
.commerce-order-tracking {
    padding: 0.5rem 1.25rem 0.75rem;
    font-size: 0.8rem;
    color: var(--commerce-text-muted);
}

/* ── Account Pages ── */
.commerce-account-dashboard { max-width: 860px; margin: 0 auto; }
.commerce-account-header { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 0 2rem; }
.commerce-account-avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--commerce-primary, #2563eb); color: #fff; font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.commerce-account-name { margin: 0 0 .2rem; font-size: 1.35rem; font-weight: 700; }
.commerce-account-email { margin: 0; color: var(--commerce-text-muted); font-size: .9rem; }
.commerce-account-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.commerce-account-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border-radius: 10px; border: 1px solid var(--commerce-border); background: #fff; text-decoration: none; color: var(--commerce-text); transition: box-shadow .15s, border-color .15s; }
.commerce-account-card:hover { border-color: var(--commerce-primary, #2563eb); box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.commerce-account-card-icon { color: var(--commerce-primary, #2563eb); flex-shrink: 0; }
.commerce-account-card-body { flex: 1; min-width: 0; }
.commerce-account-card-body strong { display: block; font-size: .95rem; margin-bottom: .2rem; }
.commerce-account-card-body span { font-size: .82rem; color: var(--commerce-text-muted); }
.commerce-account-card-arrow { color: var(--commerce-text-muted); flex-shrink: 0; }
.commerce-account-back { margin-bottom: 1rem; font-size: .9rem; }
.commerce-account-back a { color: var(--commerce-primary, #2563eb); text-decoration: none; }

.commerce-address-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.commerce-address-card { border: 1px solid var(--commerce-border); border-radius: 10px; padding: 1.25rem; background: #fff; font-size: .9rem; }
.commerce-address-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.commerce-address-badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.commerce-badge { background: var(--commerce-primary, #2563eb); color: #fff; font-size: .72rem; padding: .15rem .5rem; border-radius: 20px; font-weight: 600; }
.commerce-badge-alt { background: var(--commerce-success, #16a34a); }
.commerce-address-oneline { margin: .15rem 0; color: var(--commerce-text-muted); }
.commerce-address-card-actions { display: flex; gap: 1rem; margin-top: 1rem; }
.commerce-address-add { border: 2px dashed var(--commerce-border); border-radius: 10px; background: none; cursor: pointer; padding: 1.5rem; display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--commerce-text-muted); font-size: .95rem; width: 100%; transition: border-color .15s, color .15s; }
.commerce-address-add:hover { border-color: var(--commerce-primary, #2563eb); color: var(--commerce-primary, #2563eb); }
.commerce-address-form-wrap { max-width: 600px; }
.commerce-address-form { display: flex; flex-direction: column; gap: .9rem; }
.commerce-form-row { display: flex; flex-direction: column; gap: .3rem; }
.commerce-form-row label { font-size: .85rem; font-weight: 600; }
.commerce-form-row input { padding: .55rem .75rem; border: 1px solid var(--commerce-border); border-radius: 6px; font-size: .9rem; }
.commerce-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; flex-direction: row; }
.commerce-form-checks { display: flex; flex-direction: column; gap: .5rem; }
.commerce-form-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.commerce-link-btn { background: none; border: none; cursor: pointer; color: var(--commerce-primary, #2563eb); font-size: .88rem; padding: 0; }
.commerce-link-btn-danger { color: var(--commerce-danger, #dc2626); }
.commerce-error-msg { color: var(--commerce-danger, #dc2626); font-size: .85rem; }
.commerce-input { padding: .55rem .75rem; border: 1px solid var(--commerce-border); border-radius: 6px; font-size: .9rem; width: 100%; }

.commerce-payment-list { display: flex; flex-direction: column; gap: .75rem; max-width: 540px; }
.commerce-payment-card { display: flex; align-items: center; gap: 1rem; border: 1px solid var(--commerce-border); border-radius: 10px; padding: 1rem 1.25rem; background: #fff; }
.commerce-payment-card-info { flex: 1; }
.commerce-payment-card-info strong { display: block; }
.commerce-payment-card-info span { font-size: .82rem; color: var(--commerce-text-muted); }
.commerce-payment-notice { display: flex; align-items: flex-start; gap: .5rem; margin-top: 1.5rem; padding: 1rem; border-radius: 8px; background: #f0f9ff; border: 1px solid #bae6fd; font-size: .85rem; color: #0369a1; max-width: 540px; }

.commerce-order-detail-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: .5rem; }
.commerce-order-detail-tracking { display: flex; align-items: center; gap: .5rem; background: #f9fafb; border: 1px solid var(--commerce-border); border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1.5rem; font-size: .9rem; }
.commerce-order-detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; align-items: start; }
@media (max-width: 768px) { .commerce-order-detail-grid { grid-template-columns: 1fr; } }
.commerce-order-items { display: flex; flex-direction: column; gap: .5rem; }
.commerce-order-item { display: flex; align-items: center; gap: 1rem; padding: .75rem; border: 1px solid var(--commerce-border); border-radius: 8px; background: #fff; }
.commerce-order-item-info { flex: 1; min-width: 0; }
.commerce-order-item-name { display: block; font-weight: 600; font-size: .9rem; }
.commerce-order-item-variant, .commerce-order-item-sku { display: block; font-size: .78rem; color: var(--commerce-text-muted); }
.commerce-order-item-qty { color: var(--commerce-text-muted); font-size: .9rem; white-space: nowrap; }
.commerce-order-item-price { font-weight: 700; white-space: nowrap; }
.commerce-order-totals { border: 1px solid var(--commerce-border); border-radius: 8px; overflow: hidden; background: #fff; }
.commerce-totals-row { display: flex; justify-content: space-between; padding: .65rem 1rem; border-bottom: 1px solid var(--commerce-border); font-size: .9rem; }
.commerce-totals-row:last-child { border-bottom: none; }
.commerce-totals-discount { color: var(--commerce-success, #16a34a); }
.commerce-totals-grand { font-weight: 700; font-size: 1rem; }
.commerce-order-address { font-size: .9rem; line-height: 1.6; color: var(--commerce-text-muted); }
.commerce-section-title { font-size: 1rem; font-weight: 700; margin: 0 0 .75rem; }

.commerce-status-badge { padding: .3rem .8rem; border-radius: 20px; font-size: .8rem; font-weight: 600; }
.commerce-status-pending { background: #fef3c7; color: #92400e; }
.commerce-status-confirmed, .commerce-status-processing { background: #dbeafe; color: #1e40af; }
.commerce-status-shipped { background: #e0e7ff; color: #3730a3; }
.commerce-status-delivered { background: #dcfce7; color: #166534; }
.commerce-status-cancelled, .commerce-status-refunded, .commerce-status-paymentfailed { background: #fee2e2; color: #991b1b; }

.commerce-data-section { display: flex; flex-direction: column; gap: 1rem; max-width: 640px; }
.commerce-data-card { display: flex; align-items: flex-start; gap: 1.25rem; border: 1px solid var(--commerce-border); border-radius: 10px; padding: 1.25rem; background: #fff; }
.commerce-data-card-icon { color: var(--commerce-primary, #2563eb); flex-shrink: 0; padding-top: .1rem; }
.commerce-data-card-body { flex: 1; }
.commerce-data-card-body strong { display: block; margin-bottom: .35rem; }
.commerce-data-card-body p { margin: 0; font-size: .88rem; color: var(--commerce-text-muted); }
.commerce-data-card-danger .commerce-data-card-icon { color: var(--commerce-danger, #dc2626); }
.commerce-order-number-link { color: var(--commerce-text); text-decoration: none; }
.commerce-order-number-link:hover { color: var(--commerce-primary, #2563eb); text-decoration: underline; }
.commerce-data-delete-confirm { margin-top: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.commerce-btn-danger { background: var(--commerce-danger, #dc2626); color: #fff; border: none; border-radius: 6px; padding: .6rem 1.2rem; cursor: pointer; font-size: .9rem; }
.commerce-btn-danger:hover:not(:disabled) { background: #b91c1c; }

/* ── Order Confirmation ── */
.commerce-confirmation { max-width: 900px; margin: 0 auto; }
.commerce-confirmation-hero {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--commerce-success, #16a34a) 8%, transparent), color-mix(in srgb, var(--commerce-primary, #2563eb) 6%, transparent));
    border: 1px solid color-mix(in srgb, var(--commerce-success, #16a34a) 20%, transparent);
    margin-bottom: 2rem;
}
.commerce-confirmation-hero.is-pending {
    background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 8%, transparent), color-mix(in srgb, #f59e0b 4%, transparent));
    border-color: color-mix(in srgb, #f59e0b 25%, transparent);
}
.commerce-confirmation-icon { margin-bottom: 1rem; color: var(--commerce-success, #16a34a); }
.commerce-confirmation-hero.is-pending .commerce-confirmation-icon { color: #f59e0b; }
.commerce-confirmation-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 .5rem; }
.commerce-confirmation-order-number { font-size: 1rem; color: var(--commerce-text-secondary, #555); margin: 0 0 .75rem; }
.commerce-confirmation-message { font-size: .9rem; color: var(--commerce-text-muted); margin: 0; max-width: 500px; margin-inline: auto; line-height: 1.5; }

.commerce-confirmation-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
@media (max-width: 700px) { .commerce-confirmation-grid { grid-template-columns: 1fr; } }

.commerce-confirmation-card {
    background: var(--commerce-card-bg, #fff);
    border: 1px solid var(--commerce-border);
    border-radius: 10px;
    padding: 1.25rem;
}
.commerce-confirmation-card-title { font-size: .95rem; font-weight: 600; margin: 0 0 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--commerce-border); }
.commerce-confirmation-sidebar { display: flex; flex-direction: column; gap: 1rem; }

.commerce-confirmation-items { display: flex; flex-direction: column; gap: 0; }
.commerce-confirmation-item {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .875rem 0;
    border-bottom: 1px solid var(--commerce-border);
}
.commerce-confirmation-item:last-child { border-bottom: none; }
.commerce-confirmation-item-img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.commerce-confirmation-item-placeholder { background: var(--commerce-bg, #f8f9fa); display: flex; align-items: center; justify-content: center; color: var(--commerce-text-muted); }
.commerce-confirmation-item-info { flex: 1; min-width: 0; }
.commerce-confirmation-item-name { font-size: .9rem; font-weight: 500; margin-bottom: .15rem; }
.commerce-confirmation-item-options { font-size: .78rem; color: var(--commerce-text-muted); }
.commerce-confirmation-item-qty { font-size: .78rem; color: var(--commerce-text-muted); }
.commerce-confirmation-item-price { font-size: .9rem; font-weight: 600; white-space: nowrap; }

.commerce-confirmation-totals { display: flex; flex-direction: column; gap: .5rem; }
.commerce-confirmation-row { display: flex; justify-content: space-between; font-size: .88rem; }
.commerce-confirmation-row.is-discount { color: var(--commerce-success, #16a34a); }
.commerce-confirmation-row.is-total { padding-top: .75rem; margin-top: .25rem; border-top: 1px solid var(--commerce-border); font-weight: 700; font-size: 1rem; }

.commerce-confirmation-payment { display: flex; justify-content: space-between; align-items: center; font-size: .88rem; }
.commerce-confirmation-payment-status { font-size: .78rem; font-weight: 600; padding: .2rem .6rem; border-radius: 20px; }
.commerce-confirmation-payment-status.is-paid { background: color-mix(in srgb, var(--commerce-success, #16a34a) 12%, transparent); color: var(--commerce-success, #16a34a); }
.commerce-confirmation-payment-status.is-pending { background: color-mix(in srgb, #f59e0b 12%, transparent); color: #b45309; }

.commerce-confirmation-address { font-size: .85rem; line-height: 1.6; color: var(--commerce-text-secondary, #555); }

.commerce-confirmation-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; padding-bottom: 2rem; }

/* ── Reviews ── */
.commerce-reviews { margin-top: 2rem; }
.commerce-reviews-loading { text-align: center; padding: 2rem; color: var(--commerce-text-muted); }

.commerce-reviews-summary {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    padding: 1.5rem;
    background: var(--commerce-bg-alt);
    border-radius: var(--commerce-radius);
    margin-bottom: 1.5rem;
}
@media (max-width: 600px) { .commerce-reviews-summary { flex-direction: column; align-items: center; } }

.commerce-reviews-average { text-align: center; min-width: 100px; }
.commerce-reviews-average-number { font-size: 2.5rem; font-weight: 700; line-height: 1; display: block; }
.commerce-reviews-average-stars { margin: .35rem 0; }
.commerce-reviews-average-stars .star { font-size: 1.1rem; color: #d1d5db; }
.commerce-reviews-average-stars .star.filled { color: #f59e0b; }
.commerce-reviews-total { font-size: .85rem; color: var(--commerce-text-muted); }

.commerce-reviews-distribution { flex: 1; display: flex; flex-direction: column; gap: .35rem; min-width: 200px; }
.commerce-reviews-bar-row { display: flex; align-items: center; gap: .5rem; }
.commerce-reviews-bar-label { font-size: .8rem; min-width: 32px; text-align: right; color: var(--commerce-text-muted); }
.commerce-reviews-bar-track { flex: 1; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
.commerce-reviews-bar-fill { height: 100%; background: #f59e0b; border-radius: 4px; transition: width .3s ease; }
.commerce-reviews-bar-count { font-size: .8rem; min-width: 24px; color: var(--commerce-text-muted); }

.commerce-reviews-form {
    border: 1px solid var(--commerce-border);
    border-radius: var(--commerce-radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.commerce-reviews-form h4 { margin: 0 0 .75rem; font-size: 1rem; font-weight: 600; }
.commerce-reviews-form-stars { margin-bottom: .75rem; }
.commerce-reviews-form-stars .star { font-size: 1.5rem; cursor: pointer; color: #d1d5db; transition: color .15s; }
.commerce-reviews-form-stars .star.filled { color: #f59e0b; }
/* Le survol est calculé par le composant (étoiles 1..n allumées) : plus de règle « ~ » qui allumait les suivantes. */
.commerce-reviews-form-stars .star.selectable:focus-visible { outline: 2px solid var(--commerce-primary, #2563eb); outline-offset: 2px; border-radius: 4px; }
.commerce-reviews-form-stars__value { margin-left: .5rem; font-size: .85rem; color: var(--commerce-text-muted, #6b7280); vertical-align: middle; }
.commerce-reviews-photos { margin: .5rem 0 .75rem; }
.commerce-reviews-photos__label { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; color: var(--commerce-text-muted, #6b7280); }
.commerce-reviews-photos__tray { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.commerce-reviews-photos__item { position: relative; width: 64px; height: 64px; }
.commerce-reviews-photos__item img { width: 64px; height: 64px; object-fit: cover; border-radius: .4rem; border: 1px solid var(--commerce-border, #e5e7eb); }
.commerce-reviews-photos__item button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--commerce-border, #e5e7eb); background: #fff; color: #991b1b; font-size: .8rem; line-height: 1; cursor: pointer; }
.commerce-review-photos { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0; }
.commerce-review-photos img { width: 72px; height: 72px; object-fit: cover; border-radius: .4rem; border: 1px solid var(--commerce-border, #e5e7eb); }
.commerce-reviews-input,
.commerce-reviews-textarea {
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid var(--commerce-border);
    border-radius: 6px;
    font-size: .9rem;
    margin-bottom: .5rem;
    font-family: inherit;
    box-sizing: border-box;
}
.commerce-reviews-textarea { resize: vertical; }
.commerce-reviews-error { color: var(--commerce-danger); font-size: .85rem; margin-bottom: .5rem; }
.commerce-reviews-thankyou {
    text-align: center;
    padding: 1rem;
    background: color-mix(in srgb, var(--commerce-success) 8%, transparent);
    border-radius: var(--commerce-radius);
    color: var(--commerce-success);
    font-size: .9rem;
    margin-bottom: 1.5rem;
}
.commerce-reviews-login-prompt {
    text-align: center;
    padding: 1rem;
    background: var(--commerce-bg-alt);
    border-radius: var(--commerce-radius);
    font-size: .9rem;
    margin-bottom: 1.5rem;
}
.commerce-reviews-login-prompt a { color: var(--commerce-primary); text-decoration: underline; }

.commerce-reviews-list { display: flex; flex-direction: column; gap: .75rem; }
.commerce-review-card {
    border: 1px solid var(--commerce-border);
    border-radius: var(--commerce-radius);
    padding: 1rem 1.25rem;
}
.commerce-review-header { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.commerce-review-stars .star { font-size: .95rem; color: #d1d5db; }
.commerce-review-stars .star.filled { color: #f59e0b; }
.commerce-review-verified { font-size: .75rem; color: var(--commerce-success); font-weight: 500; }
.commerce-review-title { font-weight: 600; font-size: .95rem; margin-bottom: .25rem; }
.commerce-review-comment { font-size: .9rem; line-height: 1.5; color: var(--commerce-text); margin-bottom: .5rem; }
.commerce-review-meta { display: flex; gap: .75rem; font-size: .8rem; color: var(--commerce-text-muted); }
.commerce-reviews-empty { text-align: center; padding: 2rem; color: var(--commerce-text-muted); font-size: .9rem; }

/* ── Related Products ── */
.commerce-related { margin-top: 3rem; }
.commerce-related-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--commerce-border);
}
.commerce-related-swiper { overflow: hidden; padding: 0.25rem 0; }
.commerce-related-swiper .swiper-button-prev,
.commerce-related-swiper .swiper-button-next {
    width: 36px; height: 36px;
    background: var(--commerce-bg, #fff);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    color: var(--commerce-text);
    transition: transform .15s, box-shadow .15s;
}
.commerce-related-swiper .swiper-button-prev:hover,
.commerce-related-swiper .swiper-button-next:hover { transform: scale(1.08); box-shadow: 0 3px 12px rgba(0,0,0,.18); }
.commerce-related-swiper .swiper-button-prev::after,
.commerce-related-swiper .swiper-button-next::after { font-size: 14px; font-weight: 700; }
.commerce-card-compact {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: .5rem;
    overflow: hidden;
    border: 1px solid var(--commerce-border);
    transition: box-shadow .2s, transform .2s;
}
.commerce-card-compact:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.commerce-card-compact .commerce-card-image { aspect-ratio: 1; overflow: hidden; background: var(--commerce-bg-muted, #f8f9fa); }
.commerce-card-compact .commerce-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.commerce-card-compact:hover .commerce-card-image img { transform: scale(1.05); }
.commerce-card-compact .commerce-card-image-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--commerce-bg-muted, #f8f9fa);
}
.commerce-card-compact .commerce-card-body { padding: .75rem; }
.commerce-card-compact .commerce-card-title {
    font-size: .85rem; font-weight: 500; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: .35rem;
}
.commerce-card-compact .commerce-card-price { font-size: .85rem; }

/* ══════════════════════════════════════════════
   Faceted Filters Widget (ProductFiltersWidget)
   ══════════════════════════════════════════════ */

/* ── Mobile toggle button ── */
.commerce-filters-mobile-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 1rem;
    background: var(--commerce-bg);
    border: 1px solid var(--commerce-border);
    border-radius: var(--commerce-radius);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--commerce-text);
    transition: border-color var(--commerce-transition);
}
.commerce-filters-mobile-toggle:hover { border-color: var(--commerce-primary); }

@media (max-width: 768px) {
    .commerce-filters-mobile-toggle { display: flex; }
    .commerce-filters-panel { display: none; }
    .commerce-filters-panel.open { display: block; }
}

/* ── Drawer mode (mobile) ── */
@media (max-width: 768px) {
    /* Un thème de site peut rendre la racine sticky pour la sidebar desktop
       (ex. bridge Babylone). Or position:sticky crée TOUJOURS un stacking
       context (même z-index:auto) : le tiroir fixe z-1001 restait piégé
       dessous le header du site et la grille peignait par-dessus. En mobile,
       la racine doit rester statique. (Double classe : gagner sur la règle
       thème à spécificité simple, quelle que soit l'ordre de chargement.) */
    .commerce-filters.commerce-filters { position: static; }

    .commerce-filters-panel.open {
        position: fixed;
        inset: 0;
        z-index: 1001;
        background: var(--commerce-bg);
        overflow-y: auto;
        padding: 0 1rem 5rem;
        animation: commerce-slide-in-right 0.25s ease both;
    }
    .commerce-filters-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 0;
        border-bottom: 1px solid var(--commerce-border);
        margin-bottom: 1rem;
        position: sticky;
        top: 0;
        background: var(--commerce-bg);
        z-index: 1;
    }
    .commerce-filters-drawer-title {
        font-size: 1.1rem;
        font-weight: 700;
    }
    .commerce-filters-drawer-close {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.5rem;
        color: var(--commerce-text-muted);
        transition: color 0.15s;
    }
    .commerce-filters-drawer-close:hover { color: var(--commerce-text); }
    .commerce-filters-drawer-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1rem;
        background: var(--commerce-bg);
        border-top: 1px solid var(--commerce-border);
        z-index: 1002;
    }
    .commerce-filters-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1000;
    }
}

@keyframes commerce-slide-in-right {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

/* Hide drawer elements on desktop */
@media (min-width: 769px) {
    .commerce-filters-drawer-header,
    .commerce-filters-drawer-footer,
    .commerce-filters-backdrop { display: none; }
}

/* ── Active filters bar ── */
.commerce-filters-active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    flex-wrap: wrap; /* colonne étroite / thème qui grossit le bouton : passe à la ligne au lieu de se chevaucher (Babylone 22/09/2026) */
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--commerce-border);
}
.commerce-filters-active-count {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--commerce-primary);
}
.commerce-filters-clear {
    flex: 0 0 auto;
    white-space: nowrap;
    background: none;
    border: none;
    font-size: 0.8rem;
    color: var(--commerce-danger);
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    transition: background 0.15s;
}
.commerce-filters-clear:hover { background: var(--commerce-danger-light); }

/* ── Loading ── */
.commerce-filters-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* ── Filter sections ── */
.commerce-filter-section {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--commerce-border);
}
.commerce-filter-section:last-of-type { border-bottom: none; }

.commerce-filter-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--commerce-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

.commerce-filter-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--commerce-border);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--commerce-bg);
    cursor: pointer;
}
.commerce-filter-select:focus {
    outline: none;
    border-color: var(--commerce-primary);
    box-shadow: var(--commerce-focus-ring);
}

/* ── Chevron animation ── */
.commerce-filter-chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.commerce-filter-chevron.open { transform: rotate(180deg); }

/* ── Checkbox list ── */
.commerce-filter-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.commerce-filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    cursor: pointer;
    font-size: 0.85rem;
}
.commerce-filter-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--commerce-primary);
}
.commerce-filter-checkbox-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ── Filtres en sections dépliables ───────────────────────────────────────────
   Un critère = un en-tête cliquable pleine largeur + son panneau, séparés par un
   filet. Le libellé est à gauche, le nombre et la case à droite : l'œil descend
   une seule colonne. */
.commerce-filter-acc { border-bottom: 1px solid var(--commerce-border); }
.commerce-filter-acc__h { margin: 0; font-size: inherit; font-weight: inherit; }
.commerce-filter-acc__btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .95rem 0;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}
.commerce-filter-acc__title { flex: 1; font-size: .95rem; font-weight: 600; }
.commerce-filter-acc__badge {
    min-width: 20px;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--commerce-primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}
.commerce-filter-acc__chev {
    flex-shrink: 0;
    color: var(--commerce-text-muted);
    transition: transform .18s ease;
}
.commerce-filter-acc.is-open .commerce-filter-acc__chev { transform: rotate(180deg); }
.commerce-filter-acc__btn:hover .commerce-filter-acc__title { text-decoration: underline; }
.commerce-filter-acc__btn:focus-visible { outline: 2px solid var(--commerce-primary); outline-offset: 2px; }
.commerce-filter-acc__panel { padding-bottom: .9rem; }
.commerce-filter-acc--plain { padding: .85rem 0; }

/* Case à cocher : libellé à gauche, compte puis case à droite (repère IKEA). */
.commerce-filter-acc .commerce-filter-checkbox,
.commerce-filter-acc--plain .commerce-filter-checkbox {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem 0;
    cursor: pointer;
    font-size: .9rem;
}
.commerce-check { position: relative; display: inline-flex; flex-shrink: 0; width: 22px; height: 22px; }
.commerce-check input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.commerce-check__box {
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--commerce-text-muted);
    border-radius: 4px;
    background: #fff;
    transition: background .12s, border-color .12s;
}
.commerce-check input:checked + .commerce-check__box {
    background: var(--commerce-primary) no-repeat center / 14px 14px;
    border-color: var(--commerce-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
}
.commerce-check input:focus-visible + .commerce-check__box { outline: 2px solid var(--commerce-primary); outline-offset: 2px; }

/* Facette Catégories en arbre : famille en gras, collection en retrait. */
.commerce-filter-checkbox--root .commerce-filter-checkbox-label { font-weight: 600; }
.commerce-filter-checkbox--child { padding-left: 1.1rem; }
.commerce-filter-checkbox--child .commerce-filter-checkbox-label { font-size: 0.85rem; color: var(--commerce-text-muted); }

/* Facette Couleur : grandes pastilles cliquables, nom et nombre dessous. */
.commerce-filter-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: .85rem .5rem;
    padding: .35rem 0 .2rem;
}
.commerce-filter-swatch-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 2px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: .78rem;
    line-height: 1.25;
    color: var(--commerce-text-muted);
}
.commerce-filter-swatch--lg {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px var(--commerce-border), inset 0 0 0 1px rgba(255, 255, 255, .55);
    transition: transform .12s ease, box-shadow .12s ease;
}
.commerce-filter-swatch__tick {
    opacity: 0;
    color: #fff;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .55));
    transition: opacity .12s ease;
}
.commerce-filter-swatch-btn:hover .commerce-filter-swatch--lg { transform: scale(1.06); }
.commerce-filter-swatch-btn.is-selected .commerce-filter-swatch--lg {
    box-shadow: 0 0 0 2px var(--commerce-bg, #fff), 0 0 0 4px var(--commerce-primary);
}
.commerce-filter-swatch-btn.is-selected .commerce-filter-swatch__tick { opacity: 1; }
.commerce-filter-swatch-btn:focus-visible { outline: 2px solid var(--commerce-primary); outline-offset: 3px; border-radius: 8px; }
.commerce-filter-swatch-label {
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.commerce-filter-swatch-count { font-size: .72rem; opacity: .7; }
.commerce-filter-swatch-btn.is-selected .commerce-filter-swatch-label { color: var(--commerce-text); font-weight: 600; }
.commerce-price-on-request {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--commerce-text-muted);
}
/* Panier bloqué : un article sans tarif ne peut pas partir en paiement. */
.commerce-cart-blocked {
    margin-bottom: .6rem;
    padding: .6rem .75rem;
    border-radius: var(--pd-radius-md, 8px);
    background: rgba(245, 158, 11, .12);
    color: #92400e;
    font-size: .85rem;
}
.commerce-cart-checkout-btn[disabled],
.commerce-minicart-checkout[disabled] {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(.4);
}
/* Le bouton du mini-panier est un <a> stylé : la version bloquée est un <button>, à aligner. */
button.commerce-minicart-checkout { width: 100%; border: 0; font: inherit; }

/* Paiement : radio particulier / professionnel (même habillage que les modes de livraison). */
.commerce-customer-type { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.commerce-customer-type__legend {
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0;
    margin-bottom: 0.4rem;
    float: none;
    width: auto;
}
/* Sélecteurs doublés (.commerce-form-group …) : les règles génériques du formulaire
   (« .commerce-form-group label { display:block } », « .commerce-form-group input { width:100% ;
   padding ; border } ») et « .commerce-radio-group { flex-direction:column } » l'emportaient
   sur la pastille — sur Babylone (22/09/2026) chaque option s'étirait sur toute la largeur avec
   la puce radio de 470 px flottant au milieu. */
.commerce-form-group .commerce-radio-group--inline,
.commerce-radio-group--inline { display: flex; flex-direction: row; gap: 0.6rem; flex-wrap: wrap; }
/* Option compacte (pastille) : le thème du site peut donner une hauteur fixe aux
   .commerce-shipping-option — celle-ci a sa propre classe et reste petite. */
.commerce-form-group .commerce-ctype-option,
.commerce-ctype-option {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--commerce-border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--commerce-text);
    background: transparent;
    transition: border-color .15s, background .15s;
}
.commerce-form-group .commerce-ctype-option input,
.commerce-ctype-option input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: none;
    accent-color: var(--commerce-primary);
    cursor: pointer;
}
.commerce-form-group .commerce-ctype-option.is-selected,
.commerce-ctype-option.is-selected {
    border-color: var(--commerce-primary);
    background: var(--commerce-primary-light, rgba(21, 113, 94, .06));
    font-weight: 600;
}
.commerce-ctype-option:hover { border-color: var(--commerce-primary); }

/* Saisie d'adresse assistée (ticket 11536) : propositions de communes (Colibase) sous le code
   postal / la ville, et d'adresses (Base Adresse Nationale) sous la rue. */
.commerce-geo-field, .commerce-form-group:has(> .commerce-geo-suggest) { position: relative; }
.commerce-geo-suggest {
    position: absolute; left: 0; right: 0; top: calc(100% - .35rem); z-index: 30;
    background: var(--commerce-bg, #fff); border: 1.5px solid var(--commerce-border); border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: .25rem; max-height: 17rem; overflow: auto;
}
.commerce-geo-suggest__head { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--commerce-text-muted); padding: .35rem .6rem .2rem; }
.commerce-geo-suggest__item {
    display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; width: 100%;
    background: none; border: 0; border-radius: 6px; padding: .45rem .6rem; cursor: pointer; text-align: left;
    font: inherit; font-size: .9rem; color: var(--commerce-text);
}
.commerce-geo-suggest__item:hover, .commerce-geo-suggest__item.is-active, .commerce-geo-suggest__item:focus-visible { background: var(--commerce-primary-light, rgba(21,113,94,.08)); outline: none; }
.commerce-geo-suggest__main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.commerce-geo-suggest__sub { flex: 0 0 auto; font-size: .8rem; color: var(--commerce-text-muted); font-variant-numeric: tabular-nums; }
.commerce-geo-nocity { color: var(--commerce-text-muted); }
.commerce-form-group select { appearance: auto; }
.commerce-filter-count {
    font-size: 0.75rem;
    color: var(--commerce-text-muted);
    background: var(--commerce-bg-alt);
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    flex-shrink: 0;
}

.commerce-filter-show-more {
    background: none;
    border: none;
    color: var(--commerce-primary);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.35rem 0;
    text-align: left;
}
.commerce-filter-show-more:hover { text-decoration: underline; }

/* ── Price range inputs ── */
.commerce-filter-price {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.commerce-filter-price-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.commerce-filter-price-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.commerce-filter-price-label {
    font-size: 0.72rem;
    color: var(--commerce-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.commerce-filter-input {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--commerce-border);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--commerce-bg);
    box-sizing: border-box;
}
.commerce-filter-input:focus {
    outline: none;
    border-color: var(--commerce-primary);
    box-shadow: var(--commerce-focus-ring);
}
/* Champs prix : immunisés contre une feuille de site qui cible « .commerce-filter-input » comme une case à
   cocher (Babylone : « width:16px; height:16px » → deux carrés de 16 px, saisie impossible — recette Laura
   29/09/2026). Spécificité supérieure + !important sur les dimensions seulement. */
.commerce-filter-price-field .commerce-filter-input {
    appearance: auto !important;
    -webkit-appearance: textfield !important;
    display: block;
    width: 100% !important;
    min-width: 0;
    height: auto !important;
    min-height: 2.4rem !important;
    padding: 0.45rem 0.6rem !important;
    font-size: 0.9rem;
    line-height: 1.3;
    box-sizing: border-box;
}
.commerce-filter-price-sep {
    color: var(--commerce-text-muted);
    font-size: 0.85rem;
    padding-top: 1rem;
}
.commerce-filter-price-range {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--commerce-text-muted);
}

/* ── Toggle (stock) ── */
.commerce-filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.3rem 0;
}
.commerce-filter-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--commerce-primary);
}

/* ── Layout: top (horizontal) ── */
.commerce-filters[data-layout="top"] {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}
.commerce-filters[data-layout="top"] .commerce-filter-section {
    flex: 1 1 180px;
    min-width: 150px;
    border-bottom: none;
    border-right: 1px solid var(--commerce-border);
    padding: 0 0.75rem;
}
.commerce-filters[data-layout="top"] .commerce-filter-section:last-of-type { border-right: none; }
.commerce-filters[data-layout="top"] .commerce-filters-active { width: 100%; }

/* ── Focus visible for new elements ── */
.commerce-filter-select:focus-visible,
.commerce-filter-input:focus-visible,
.commerce-filter-checkbox input:focus-visible,
.commerce-filter-toggle input:focus-visible,
.commerce-filters-mobile-toggle:focus-visible,
.commerce-filters-clear:focus-visible,
.commerce-filter-show-more:focus-visible,
.commerce-filter-heading:focus-visible {
    outline: none;
    box-shadow: var(--commerce-focus-ring);
}

/* ══════════════════════════════════════════════
   Pricing Table
   ══════════════════════════════════════════════ */

.commerce-pricing-table {
    padding: 2rem 0;
}

.commerce-pricing-group-toggle {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 2rem;
    background: #f1f5f9;
    border-radius: 999px;
    padding: 4px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.commerce-pricing-pill-slider {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / var(--pill-count, 2));
    transform: translateX(calc(var(--pill-active, 0) * 100%));
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.04);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}

.commerce-pricing-group-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.25s ease, transform 0.15s ease;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    flex: 1;
    justify-content: center;
}

.commerce-pricing-group-pill:hover {
    color: #334155;
}

.commerce-pricing-group-pill:active {
    transform: scale(0.97);
}

.commerce-pricing-group-pill.active {
    color: #0f172a;
    font-weight: 600;
}

.commerce-pricing-group-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--commerce-primary, #1AD598);
    color: #fff;
    line-height: 1.2;
    animation: commerce-badge-pop 0.4s ease both;
}

@keyframes commerce-badge-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.commerce-pricing-group-pill.active .commerce-pricing-group-badge {
    background: var(--commerce-primary, #1AD598);
}

.commerce-pricing-columns {
    display: grid;
    grid-template-columns: repeat(var(--pricing-columns, 4), 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

.commerce-pricing-ungrouped {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.commerce-pricing-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow 0.2s, transform 0.2s;
}

.commerce-pricing-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.commerce-pricing-highlighted {
    border: 2px solid var(--commerce-primary);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--commerce-primary) 12%, transparent);
    padding-top: 3rem;
}

.commerce-pricing-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: var(--commerce-primary, #2563eb);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.4em 1.5em;
    border-radius: 9999px;
    white-space: nowrap;
}

.commerce-pricing-custom {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--commerce-primary) 60%, #0f172a) 0%,
        color-mix(in srgb, var(--commerce-primary) 80%, #0f172a) 100%);
    color: #fff;
    border-color: transparent;
}

.commerce-pricing-custom .commerce-pricing-subtitle,
.commerce-pricing-custom .commerce-pricing-custom-cta p {
    color: rgba(255,255,255,0.85);
}

.commerce-pricing-custom .commerce-pricing-check {
    color: color-mix(in srgb, var(--commerce-primary) 50%, white);
}

.commerce-pricing-header {
    margin-bottom: 1rem;
}

.commerce-pricing-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    line-height: 1.2;
}

.commerce-pricing-subtitle {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

.commerce-pricing-price {
    margin-bottom: 1.25rem;
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.commerce-pricing-amount {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.commerce-pricing-period {
    font-size: 0.875rem;
    color: #64748b;
}

.commerce-pricing-custom .commerce-pricing-period {
    color: rgba(255,255,255,0.7);
}

.commerce-pricing-custom-cta {
    min-height: 3.5rem;
}

.commerce-pricing-cta {
    margin-bottom: 1.5rem;
}

.commerce-pricing-cta .commerce-btn {
    width: 100%;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transition: all 0.15s;
}

.commerce-btn-outline {
    background: transparent;
    border: 2px solid var(--commerce-primary, #2563eb);
    color: var(--commerce-primary, #2563eb);
}

.commerce-btn-outline:hover {
    background: var(--commerce-primary, #2563eb);
    color: #fff;
}

.commerce-pricing-custom .commerce-btn-primary {
    background: #fff;
    color: var(--commerce-primary, #2563eb);
    border: 2px solid #fff;
}

.commerce-pricing-custom .commerce-btn-primary:hover {
    background: rgba(255,255,255,0.9);
}

.commerce-pricing-features {
    flex: 1;
}

.commerce-pricing-inherit {
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: #334155;
}

.commerce-pricing-custom .commerce-pricing-inherit {
    color: rgba(255,255,255,0.9);
}

.commerce-pricing-addons-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: #334155;
    margin: 0.75rem 0 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
}

.commerce-pricing-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.commerce-pricing-features li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0;
    font-size: 0.92rem;
    line-height: 1.4;
}

.commerce-pricing-feature-name {
    flex: 1 1 auto;
    min-width: 0;
}

.commerce-pricing-feature-value {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--commerce-primary);
    background: color-mix(in srgb, var(--commerce-primary) 12%, transparent);
    letter-spacing: -0.01em;
}

.commerce-pricing-highlighted .commerce-pricing-feature-value {
    background: color-mix(in srgb, var(--commerce-primary) 22%, transparent);
}

.commerce-pricing-check {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--commerce-primary, #2563eb);
    margin-top: 1px;
}

.commerce-pricing-footer {
    text-align: center;
    font-size: 0.85rem;
    color: #94a3b8;
    font-style: italic;
    margin-top: 2rem;
}

@media (max-width: 1024px) {
    .commerce-pricing-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .commerce-pricing-columns {
        grid-template-columns: 1fr;
    }
    .commerce-pricing-card {
        padding: 1.5rem 1rem;
    }
    .commerce-pricing-group-toggle {
        width: 100%;
    }
    .commerce-pricing-group-pill {
        flex: 1;
        justify-content: center;
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* ── Bundle Configurator ── */
.commerce-bundle-configurator {
    max-width: 640px;
    margin: 0 auto;
}
.commerce-bundle-config-header {
    margin-bottom: 1.5rem;
}
.commerce-bundle-config-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.5rem;
}
.commerce-bundle-config-desc {
    color: #64748b;
    margin: 0;
}
.commerce-bundle-config-group {
    margin-bottom: 1.5rem;
}
.commerce-bundle-config-group-title {
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}
.commerce-bundle-config-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: border-color 0.2s, background 0.2s;
}
.commerce-bundle-config-item.commerce-bundle-config-required {
    background: color-mix(in srgb, var(--commerce-primary) 3%, transparent);
    border-color: color-mix(in srgb, var(--commerce-primary) 20%, transparent);
}
.commerce-bundle-config-item.commerce-bundle-config-selected {
    border-color: var(--commerce-primary);
    background: var(--commerce-primary-light);
}
.commerce-bundle-config-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.commerce-bundle-config-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.commerce-bundle-config-item-name {
    font-weight: 500;
    color: #1e293b;
}
.commerce-bundle-config-item-price {
    font-size: 0.9em;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    margin-left: auto;
}
/* Required item: filled, non-interactive check (ships with the bundle) */
.commerce-bundle-config-checkbox-locked {
    background: var(--commerce-primary, #2563eb);
    border-color: var(--commerce-primary, #2563eb);
    color: #fff;
}
.commerce-bundle-config-badge-required {
    font-size: 0.75rem;
    color: var(--commerce-primary, #2563eb);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.commerce-btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
}
.commerce-bundle-config-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.5rem;
    margin-top: 1rem;
    border-top: 2px solid #e2e8f0;
}
.commerce-bundle-config-price {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}
.commerce-bundle-config-amount {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
}
.commerce-bundle-config-period {
    font-size: 0.9rem;
    color: #94a3b8;
}

/* ── Custom Bundle Builder mode ── */
.commerce-custom-builder-item {
    cursor: pointer;
    user-select: none;
}
.commerce-custom-builder-item:hover {
    border-color: var(--commerce-primary, #2563eb);
}
.commerce-bundle-config-item-desc {
    font-size: 0.8rem;
    color: var(--commerce-text-muted, #64748b);
    line-height: 1.3;
}
.commerce-custom-builder-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}
.commerce-custom-builder-check.checked {
    background: var(--commerce-primary, #2563eb);
    border-color: var(--commerce-primary, #2563eb);
    color: #fff;
}
.commerce-custom-builder-check svg {
    width: 14px;
    height: 14px;
}
.commerce-custom-builder-footer {
    position: sticky;
    bottom: 0;
    background: var(--commerce-bg, #fff);
    padding-bottom: 1rem;
    z-index: 1;
}

/* ── Real checkbox control (keyboard + screen-reader operable) ── */
.commerce-bundle-config-clickable {
    cursor: pointer;
    user-select: none;
}
.commerce-bundle-config-check {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}
.commerce-check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.commerce-bundle-config-checkbox {
    width: 22px;
    height: 22px;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    transition: all 0.2s;
}
.commerce-bundle-config-selected .commerce-bundle-config-checkbox {
    background: var(--commerce-primary, #2563eb);
    border-color: var(--commerce-primary, #2563eb);
}
.commerce-bundle-config-checkbox svg {
    width: 14px;
    height: 14px;
}
.commerce-check-input:focus-visible + .commerce-bundle-config-checkbox,
.commerce-check-input:focus-visible + .commerce-custom-builder-check {
    outline: 2px solid var(--commerce-primary, #2563eb);
    outline-offset: 2px;
}

/* ── Quantity Discount Tiers ── */
.commerce-qty-tiers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--commerce-bg-alt, #f8fafc);
    border-top: 1px solid var(--commerce-border);
}
.commerce-qty-tier {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--commerce-bg, #fff);
    border: 1px solid var(--commerce-border);
    color: var(--commerce-text-muted);
    transition: all var(--commerce-transition);
}
.commerce-qty-tier.active {
    background: var(--commerce-primary);
    border-color: var(--commerce-primary);
    color: #fff;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--commerce-primary) 25%, transparent);
}
.commerce-bundle-config-original-price {
    text-decoration: line-through;
    color: var(--commerce-text-muted);
    font-size: 0.85em;
    margin-left: 0.5rem;
}
.commerce-bundle-config-savings {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--commerce-success, #16a34a);
    background: color-mix(in srgb, var(--commerce-success, #16a34a) 8%, transparent);
    margin-left: 0.5rem;
}

/* ── Bundle Configurator: "summary" layout (sticky recap card) ── */
.commerce-bundle-config-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}
.commerce-bundle-summary {
    position: sticky;
    top: 24px;
    background: var(--commerce-bg, #fff);
    border: 1px solid var(--commerce-border, #e2e8f0);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}
.commerce-bundle-summary-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 14px;
}
.commerce-bundle-summary-line {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--commerce-bg-alt, #f1f5f9);
}
.commerce-bundle-summary-line-price {
    color: var(--commerce-text-muted, #64748b);
    white-space: nowrap;
}
.commerce-bundle-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 16px 0 4px;
}
.commerce-bundle-summary-total-label {
    font-weight: 700;
}
.commerce-bundle-summary-total-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--commerce-primary, #2563eb);
    white-space: nowrap;
}
.commerce-bundle-summary-note {
    font-size: 0.78rem;
    color: var(--commerce-text-muted, #64748b);
    margin: 0 0 14px;
}
.commerce-bundle-summary-btn {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}
.commerce-bundle-summary-secure {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--commerce-text-muted, #64748b);
    text-align: center;
    margin: 6px 0 0;
}
/* Base (free) tier card at the top of the items column */
.commerce-bundle-base-card {
    background: var(--commerce-bg-alt, #f8fafc);
    border: 1px solid var(--commerce-border, #e2e8f0);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 22px;
}
.commerce-bundle-base-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.commerce-bundle-base-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
}
.commerce-bundle-base-amount {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--commerce-primary, #2563eb);
}
.commerce-bundle-base-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.commerce-bundle-base-chip {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    padding: 5px 11px;
    border-radius: 6px;
    border: 1px solid var(--commerce-border, #e2e8f0);
    background: var(--commerce-bg, #fff);
    color: var(--commerce-text-muted, #475569);
}
@media (max-width: 992px) {
    .commerce-bundle-config-layout {
        grid-template-columns: 1fr;
    }
    .commerce-bundle-summary {
        position: static;
    }
}

/* ── Addon Add to Cart Button (atomic widget for templates) ── */
.commerce-addon-add-to-cart {
    display: inline-flex;
}
.commerce-addon-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    padding: 0.4rem 0.85rem;
}
.commerce-addon-btn-price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border-radius: var(--commerce-radius, 8px);
    background: var(--commerce-primary, #2563eb);
    color: #fff;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
}
.commerce-addon-btn-price:hover:not(:disabled) {
    background: var(--commerce-primary-hover, #1d4ed8);
}
.commerce-addon-btn-price:disabled {
    opacity: 0.7;
    cursor: default;
}
.commerce-addon-btn-price-label {
    font-size: 0.95rem;
    font-weight: 700;
}
.commerce-addon-btn-price-period {
    font-size: 0.75rem;
    opacity: 0.8;
}
.commerce-addon-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   Feature Comparison Table
   ══════════════════════════════════════════════ */

.commerce-feature-comparison {
    max-width: 100%;
    margin: 2rem auto;
}

.commerce-comparison-wrapper {
    overflow-x: auto;
    border: 1px solid var(--commerce-border);
    border-radius: calc(var(--commerce-radius) + 4px);
    background: var(--commerce-bg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .04);
}

.commerce-comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.92rem;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.commerce-comparison-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--commerce-bg);
}

.commerce-comparison-table th,
.commerce-comparison-table td {
    padding: 0.9rem 1.1rem;
    text-align: center;
    border-bottom: 1px solid color-mix(in srgb, var(--commerce-border) 60%, transparent);
}

.commerce-comparison-table thead th {
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
    border-bottom: 2px solid var(--commerce-border);
}

.commerce-comparison-feature-col {
    text-align: left;
    min-width: 200px;
    width: 30%;
    background: var(--commerce-bg);
    position: sticky;
    left: 0;
    z-index: 1;
}

.commerce-comparison-plan-col {
    min-width: 140px;
    vertical-align: bottom;
    position: relative;
}

.commerce-comparison-plan-col.highlighted {
    background: color-mix(in srgb, var(--commerce-primary) 10%, var(--commerce-bg));
    box-shadow: inset 0 3px 0 0 var(--commerce-primary);
    border-left: 1px solid color-mix(in srgb, var(--commerce-primary) 25%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--commerce-primary) 25%, transparent);
}

.commerce-comparison-plan-name {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--commerce-text);
    margin-bottom: 0.35rem;
}

.commerce-comparison-plan-col.highlighted .commerce-comparison-plan-name {
    color: var(--commerce-primary);
}

.commerce-comparison-plan-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--commerce-text);
    letter-spacing: -0.02em;
}

.commerce-comparison-plan-col.highlighted .commerce-comparison-plan-price {
    color: var(--commerce-primary);
}

.commerce-comparison-period {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--commerce-text-muted);
    opacity: 0.85;
    margin-left: 0.15rem;
}

.commerce-comparison-section-row td {
    text-align: left;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--commerce-text-muted);
    background: var(--commerce-bg-alt);
    padding: 0.5rem 1rem;
    border-bottom: 2px solid var(--commerce-border);
    user-select: none;
    transition: color 0.2s ease;
}

.commerce-comparison-section-row:hover td {
    color: var(--commerce-text);
}

.commerce-comparison-section-chevron {
    display: inline-flex;
    align-items: center;
    margin-right: 0.35rem;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    vertical-align: middle;
}

.commerce-comparison-section-chevron.collapsed {
    transform: rotate(-90deg);
}

.commerce-comparison-feature-row:not(.section-collapsed) {
    animation: commerce-row-expand 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--row-i, 0) * 40ms);
}

.commerce-comparison-feature-row.section-collapsed {
    display: none;
}

@keyframes commerce-row-expand {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.commerce-comparison-feature-name {
    text-align: left;
    font-weight: 500;
    color: var(--commerce-text);
    background: var(--commerce-bg);
    position: sticky;
    left: 0;
    z-index: 1;
}

.commerce-comparison-cell {
    vertical-align: middle;
}

.commerce-comparison-cell.highlighted {
    background: color-mix(in srgb, var(--commerce-primary) 4%, var(--commerce-bg));
    border-left: 1px solid color-mix(in srgb, var(--commerce-primary) 25%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--commerce-primary) 25%, transparent);
}

.commerce-comparison-feature-row:nth-child(even) .commerce-comparison-cell.highlighted {
    background: color-mix(in srgb, var(--commerce-primary) 7%, var(--commerce-bg));
}

.commerce-comparison-yes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--commerce-success);
    background: color-mix(in srgb, var(--commerce-success) 14%, transparent);
}

.commerce-comparison-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: color-mix(in srgb, var(--commerce-text-muted) 70%, transparent);
    background: color-mix(in srgb, var(--commerce-text-muted) 8%, transparent);
    opacity: 0.85;
}

.commerce-comparison-text {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--commerce-text);
    background: color-mix(in srgb, var(--commerce-primary) 8%, transparent);
}

.commerce-comparison-cell.highlighted .commerce-comparison-text {
    color: var(--commerce-primary);
    background: color-mix(in srgb, var(--commerce-primary) 15%, transparent);
}

.commerce-comparison-feature-row:nth-child(even) td {
    background: color-mix(in srgb, var(--commerce-bg-alt) 60%, var(--commerce-bg));
}

.commerce-comparison-feature-row:nth-child(even) .commerce-comparison-feature-name {
    background: color-mix(in srgb, var(--commerce-bg-alt) 60%, var(--commerce-bg));
}

.commerce-comparison-feature-row:hover td {
    background: color-mix(in srgb, var(--commerce-primary) 4%, var(--commerce-bg));
}
.commerce-comparison-feature-row:hover .commerce-comparison-feature-name {
    background: color-mix(in srgb, var(--commerce-primary) 4%, var(--commerce-bg));
    color: var(--commerce-primary);
}

.commerce-comparison-hidden {
    display: none;
}

.commerce-comparison-toggle {
    display: flex;
    justify-content: center;
    padding: 1rem 0 0.5rem;
}

.commerce-comparison-toggle .commerce-btn {
    width: auto;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.45rem 1.2rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: var(--commerce-text-muted);
    border: 1px solid transparent;
    gap: 0.3rem;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.commerce-comparison-toggle .commerce-btn:hover {
    background: #e2e8f0;
    color: var(--commerce-text);
}

.commerce-comparison-toggle .commerce-btn:active {
    transform: scale(0.97);
}

.commerce-comparison-toggle-chevron {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.commerce-comparison-toggle-chevron.open {
    transform: rotate(180deg);
}

.commerce-has-tooltip {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    text-decoration-color: var(--commerce-text-muted);
    cursor: help;
    position: relative;
}

.commerce-has-tooltip:hover {
    text-decoration-color: var(--commerce-primary);
}

.commerce-has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1e293b;
    color: #f8fafc;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    white-space: normal;
    max-width: 240px;
    width: max-content;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10;
}

.commerce-has-tooltip::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: #1e293b;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 10;
}

.commerce-has-tooltip:hover::after,
.commerce-has-tooltip:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.commerce-comparison-empty {
    text-align: center;
    color: var(--commerce-text-muted);
    padding: 2rem 0;
}

@media (max-width: 768px) {
    .commerce-comparison-table {
        font-size: 0.8rem;
    }
    .commerce-comparison-table th,
    .commerce-comparison-table td {
        padding: 0.5rem 0.5rem;
    }
    .commerce-comparison-feature-col {
        min-width: 120px;
    }
    .commerce-comparison-plan-col {
        min-width: 100px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   PRICING + COMPARISON · VISUAL POLISH v2 (sexy)
   Overrides earlier minimalist styling. Modern SaaS look.
   ════════════════════════════════════════════════════════════════════ */

.commerce-pricing-table {
    --pc-radius: 20px;
    --pc-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .04);
    --pc-shadow-md: 0 4px 12px rgba(15, 23, 42, .06), 0 16px 40px rgba(15, 23, 42, .08);
    --pc-shadow-glow: 0 8px 32px color-mix(in srgb, var(--commerce-primary) 28%, transparent),
                      0 24px 60px color-mix(in srgb, var(--commerce-primary) 12%, transparent);
}

/* ── Cards ────────────────────────────────────────────────────────── */
.commerce-pricing-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: var(--pc-radius, 20px);
    padding: 2.25rem 1.75rem 2rem;
    box-shadow: var(--pc-shadow-sm);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1),
                box-shadow .35s cubic-bezier(.16, 1, .3, 1),
                border-color .25s ease;
    /* visible (not hidden): the "Most Popular" badge floats above the top
       edge via translateY(-50%) and must not be clipped. The ::before
       gradient border uses a mask and clips to its own box regardless. */
    overflow: visible;
    position: relative;
}

.commerce-pricing-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--commerce-primary) 25%, transparent),
        transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.commerce-pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pc-shadow-md);
    border-color: color-mix(in srgb, var(--commerce-primary) 22%, rgba(15, 23, 42, .08));
}
.commerce-pricing-card:hover::before { opacity: 1; }

/* Highlighted plan — gradient halo + lift */
.commerce-pricing-highlighted {
    border: 1.5px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg,
            var(--commerce-primary),
            color-mix(in srgb, var(--commerce-primary) 55%, #6366f1)) border-box;
    box-shadow: var(--pc-shadow-glow);
    transform: translateY(-6px);
}
.commerce-pricing-highlighted:hover {
    transform: translateY(-10px);
}

/* "Most Popular" badge — gradient pill above card */
.commerce-pricing-badge {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: .5em 1.3em;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    background: linear-gradient(135deg,
        var(--commerce-primary),
        color-mix(in srgb, var(--commerce-primary) 50%, #6366f1));
    box-shadow: 0 6px 16px color-mix(in srgb, var(--commerce-primary) 40%, transparent);
}

/* ── Header / pricing typography ──────────────────────────────────── */
.commerce-pricing-name {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.commerce-pricing-subtitle {
    font-size: .88rem;
    line-height: 1.45;
    color: #64748b;
}

.commerce-pricing-price {
    margin: 1.25rem 0 1.5rem;
    align-items: baseline;
    gap: .15rem;
}

.commerce-pricing-amount {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -.035em;
    background: linear-gradient(180deg, #0f172a 30%, color-mix(in srgb, #0f172a 55%, transparent));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.commerce-pricing-highlighted .commerce-pricing-amount {
    background: linear-gradient(135deg,
        var(--commerce-primary),
        color-mix(in srgb, var(--commerce-primary) 55%, #6366f1));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.commerce-pricing-period {
    font-size: .8rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: lowercase;
    letter-spacing: .02em;
}

/* ── CTA ──────────────────────────────────────────────────────────── */
.commerce-pricing-cta .commerce-btn {
    padding: .85rem 1.5rem;
    font-size: .92rem;
    font-weight: 700;
    border-radius: 12px;
    letter-spacing: .01em;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.commerce-pricing-cta .commerce-btn:hover { transform: translateY(-1px); }
.commerce-pricing-cta .commerce-btn:active { transform: translateY(0); }

.commerce-pricing-highlighted .commerce-pricing-cta .commerce-btn-primary {
    background: linear-gradient(135deg,
        var(--commerce-primary),
        color-mix(in srgb, var(--commerce-primary) 55%, #6366f1));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--commerce-primary) 35%, transparent);
}
.commerce-pricing-highlighted .commerce-pricing-cta .commerce-btn-primary:hover {
    box-shadow: 0 12px 28px color-mix(in srgb, var(--commerce-primary) 45%, transparent);
}

/* ── Feature list ─────────────────────────────────────────────────── */
.commerce-pricing-features li {
    padding: .55rem 0;
    font-size: .92rem;
    color: #334155;
    border-bottom: 1px dashed rgba(15, 23, 42, .06);
}
.commerce-pricing-features li:last-child { border-bottom: 0; }

.commerce-pricing-check {
    width: 16px;
    height: 16px;
    padding: 3px;
    background: color-mix(in srgb, var(--commerce-primary) 14%, transparent);
    border-radius: 50%;
    color: var(--commerce-primary);
    box-sizing: content-box;
}

.commerce-pricing-feature-value {
    padding: .2rem .55rem;
    font-size: .78rem;
    font-weight: 800;
    color: var(--commerce-primary);
    background: color-mix(in srgb, var(--commerce-primary) 11%, transparent);
    border-radius: 7px;
    letter-spacing: -.015em;
}
.commerce-pricing-highlighted .commerce-pricing-feature-value {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--commerce-primary) 18%, transparent),
        color-mix(in srgb, var(--commerce-primary) 28%, transparent));
}

/* ── Comparison table polish ──────────────────────────────────────── */
.commerce-comparison-wrapper {
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: var(--pc-shadow-sm, 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .04));
    overflow: hidden;
}

.commerce-comparison-table thead th {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
    background: linear-gradient(180deg, #f8fafc, #fff);
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.commerce-comparison-plan-col.highlighted {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--commerce-primary) 9%, #fff),
            color-mix(in srgb, var(--commerce-primary) 3%, #fff));
    box-shadow: inset 0 4px 0 0 var(--commerce-primary);
    border-left: 1px solid color-mix(in srgb, var(--commerce-primary) 22%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--commerce-primary) 22%, transparent);
}

.commerce-comparison-plan-name {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.commerce-comparison-plan-price {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
    background: linear-gradient(180deg, #0f172a 30%, color-mix(in srgb, #0f172a 55%, transparent));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    margin-top: .35rem;
}
.commerce-comparison-plan-col.highlighted .commerce-comparison-plan-price {
    background: linear-gradient(135deg,
        var(--commerce-primary),
        color-mix(in srgb, var(--commerce-primary) 55%, #6366f1));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.commerce-comparison-period {
    -webkit-text-fill-color: #94a3b8;
    color: #94a3b8;
    font-size: .8rem;
    font-weight: 600;
    margin-left: .2rem;
    background: none;
}

/* Section header row */
.commerce-comparison-section-row td {
    padding: .7rem 1.1rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: color-mix(in srgb, var(--commerce-primary) 80%, #0f172a);
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--commerce-primary) 6%, transparent),
            transparent 70%);
    border-top: 1px solid rgba(15, 23, 42, .06);
    border-bottom: 1px solid rgba(15, 23, 42, .06);
}

/* Cells / icons */
.commerce-comparison-yes {
    width: 30px;
    height: 30px;
    color: #fff;
    background: linear-gradient(135deg,
        var(--commerce-success, #16a34a),
        color-mix(in srgb, var(--commerce-success, #16a34a) 70%, #059669));
    box-shadow: 0 4px 10px color-mix(in srgb, var(--commerce-success, #16a34a) 30%, transparent);
}

.commerce-comparison-cell.highlighted .commerce-comparison-yes {
    background: linear-gradient(135deg,
        var(--commerce-primary),
        color-mix(in srgb, var(--commerce-primary) 55%, #6366f1));
    box-shadow: 0 4px 10px color-mix(in srgb, var(--commerce-primary) 35%, transparent);
}

.commerce-comparison-no {
    width: 24px;
    height: 24px;
    color: #cbd5e1;
    background: rgba(15, 23, 42, .04);
    opacity: 1;
}

.commerce-comparison-text {
    padding: .3rem .7rem;
    font-size: .85rem;
    font-weight: 700;
    color: #0f172a;
    background: color-mix(in srgb, var(--commerce-primary) 10%, #f8fafc);
    border: 1px solid color-mix(in srgb, var(--commerce-primary) 16%, transparent);
    border-radius: 999px;
    letter-spacing: -.01em;
}
.commerce-comparison-cell.highlighted .commerce-comparison-text {
    color: var(--commerce-primary);
    background: color-mix(in srgb, var(--commerce-primary) 16%, #fff);
    border-color: color-mix(in srgb, var(--commerce-primary) 35%, transparent);
}

.commerce-comparison-feature-row td {
    transition: background .15s ease;
}
.commerce-comparison-feature-row:hover td {
    background: color-mix(in srgb, var(--commerce-primary) 5%, #fff);
}
.commerce-comparison-feature-row:hover .commerce-comparison-cell.highlighted {
    background: color-mix(in srgb, var(--commerce-primary) 9%, #fff);
}

.commerce-comparison-feature-name {
    font-weight: 600;
    color: #1e293b;
}

/* Toggle button */
.commerce-comparison-toggle .commerce-btn {
    padding: .65rem 1.6rem;
    font-size: .85rem;
    font-weight: 700;
    border-radius: 999px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--commerce-primary) 8%, #fff),
        color-mix(in srgb, var(--commerce-primary) 3%, #fff));
    color: var(--commerce-primary);
    border: 1px solid color-mix(in srgb, var(--commerce-primary) 25%, transparent);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .05);
}
.commerce-comparison-toggle .commerce-btn:hover {
    background: var(--commerce-primary);
    color: #fff;
    border-color: var(--commerce-primary);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--commerce-primary) 35%, transparent);
}

/* Group pills (Monthly / Yearly) */
.commerce-pricing-group-toggle {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border-radius: 999px;
    padding: 4px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06);
}
.commerce-pricing-group-pill {
    font-weight: 700;
    letter-spacing: -.005em;
}
.commerce-pricing-pill-slider {
    border-radius: 999px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
}

/* Card entrance animation */
@keyframes commerce-card-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.commerce-pricing-card {
    animation: commerce-card-rise .55s cubic-bezier(.16, 1, .3, 1) both;
}
.commerce-pricing-card:nth-child(2) { animation-delay: .08s; }
.commerce-pricing-card:nth-child(3) { animation-delay: .16s; }
.commerce-pricing-card:nth-child(4) { animation-delay: .24s; }

/* ── Dark theme support (Palladium admin theme tokens) ────────────── */
[data-bs-theme="dark"] .commerce-pricing-card,
.theme-dark .commerce-pricing-card {
    background: #111c2e;
    border-color: rgba(255, 255, 255, .08);
    color: #e2e8f0;
}
[data-bs-theme="dark"] .commerce-pricing-amount,
.theme-dark .commerce-pricing-amount {
    background: linear-gradient(180deg, #f8fafc 30%, #94a3b8);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-bs-theme="dark"] .commerce-pricing-highlighted,
.theme-dark .commerce-pricing-highlighted {
    background:
        linear-gradient(#111c2e, #111c2e) padding-box,
        linear-gradient(135deg,
            var(--commerce-primary),
            color-mix(in srgb, var(--commerce-primary) 55%, #6366f1)) border-box;
}
[data-bs-theme="dark"] .commerce-comparison-wrapper,
.theme-dark .commerce-comparison-wrapper {
    background: #0e1a2a;
    border-color: rgba(255, 255, 255, .08);
}
[data-bs-theme="dark"] .commerce-comparison-table thead th,
.theme-dark .commerce-comparison-table thead th {
    background: linear-gradient(180deg, #182740, #111c2e);
}
[data-bs-theme="dark"] .commerce-comparison-feature-name,
.theme-dark .commerce-comparison-feature-name {
    background: #111c2e;
    color: #e2e8f0;
}
[data-bs-theme="dark"] .commerce-comparison-feature-row:nth-child(even) td,
.theme-dark .commerce-comparison-feature-row:nth-child(even) td {
    background: #0e1a2a;
}

@media (max-width: 768px) {
    .commerce-pricing-highlighted,
    .commerce-pricing-card:hover { transform: none; }
    .commerce-pricing-amount { font-size: 2.4rem; }
}

/* ===========================================================================
   PRODUCT GRID — Skeleton, empty state, OOS button, toast, spinner-inline
   =========================================================================== */

/* Skeleton cards while products load. Mirrors the real card grid so there's
   no layout shift when the data arrives. */
.commerce-skeleton-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(var(--grid-columns, 3), 1fr);
}
.commerce-skeleton-card {
    background: var(--commerce-bg, #fff);
    border-radius: var(--pd-radius, 6px);
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.commerce-skeleton-img {
    aspect-ratio: 1 / 1;
    border-radius: var(--pd-radius-sm, 4px);
    margin-bottom: 12px;
}
.commerce-skeleton-line {
    height: 12px;
    border-radius: 4px;
    margin: 8px 0;
}
.commerce-skeleton-line.w-80 { width: 80%; }
.commerce-skeleton-line.w-50 { width: 50%; }
.commerce-skeleton-line.w-30 { width: 30%; }
.commerce-skeleton-img,
.commerce-skeleton-line {
    background: linear-gradient(
        90deg,
        rgba(148,163,184,.08) 0%,
        rgba(148,163,184,.18) 50%,
        rgba(148,163,184,.08) 100%
    );
    background-size: 200% 100%;
    animation: commerce-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes commerce-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (max-width: 1024px) {
    .commerce-skeleton-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .commerce-skeleton-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .commerce-skeleton-img,
    .commerce-skeleton-line { animation: none; }
}

/* Empty state — illustration + CTA */
.commerce-empty-illustration {
    width: 96px;
    height: 96px;
    color: var(--commerce-text-muted, #94A3B8);
    margin: 0 auto 1rem;
    display: block;
}

/* Out-of-stock — clearly distinguishable from a normal disabled/loading button */
.commerce-btn-oos {
    background: rgba(239, 68, 68, .08);
    color: #B91C1C;
    border: 1px solid rgba(239, 68, 68, .25);
    cursor: not-allowed;
    font-weight: 600;
    padding: .55rem 1rem;
    border-radius: var(--pd-radius, 6px);
    width: 100%;
}

/* Inline spinner for buttons in-flight */
.commerce-spinner-inline {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    margin-right: 6px;
    animation: commerce-spin .7s linear infinite;
}
@keyframes commerce-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .commerce-spinner-inline { animation-duration: 2s; }
}

/* Toast for transient error/success messages */
.commerce-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    padding: 14px 18px;
    border-radius: var(--pd-radius-md, 8px);
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    max-width: 360px;
    animation: commerce-toast-in .2s ease;
}
.commerce-toast-error {
    background: #FEE2E2;
    color: #991B1B;
    border-left: 4px solid #DC2626;
}
.commerce-toast-success {
    background: #DCFCE7;
    color: #166534;
    border-left: 4px solid #16A34A;
}
.commerce-toast-close {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
@keyframes commerce-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@media (max-width: 480px) {
    .commerce-toast {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }
}

/* Placeholder text — was inheriting the browser's near-invisible default */
.commerce-search-input::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
    color: var(--pd-text-secondary, #94A3B8);
    opacity: .85;
}

/* Visually hidden but available to AT */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* Rafraîchissement de la grille (prix, tri, filtre) : les cartes restent en place, atténuées —
   plus de squelette qui les remplace (recette Laura 29/09/2026 : « les images disparaissent »). */
.commerce-product-grid.is-refreshing .commerce-card { opacity: .55; transition: opacity .15s ease; pointer-events: none; }
.commerce-product-grid.is-refreshing .commerce-grid-toolbar { opacity: .7; }

/* Defensive truncation for any user-supplied product name spliced into a
   layout row. Prevents a 500-char product title from blowing out the cart
   line or mini-cart item. */
.commerce-product-name,
.commerce-minicart-item-name,
.commerce-cart-line-name,
.commerce-card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* ===========================================================================
   CHECKOUT — extracted from CheckoutPage.razor inline styles
   Lifted from style="..." attributes so the page is themable + diffable.
   =========================================================================== */
.commerce-checkbox-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 500;
}
.commerce-native-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--commerce-primary);
    margin: 0;
    flex-shrink: 0;
}
.commerce-section-spacer { margin-top: 1.25rem; }
.commerce-mt-1 { margin-top: 1rem; }
.commerce-mt-075 { margin-top: .75rem; }
.commerce-mt-15 { margin-top: 1.5rem; }
.commerce-tabular { font-variant-numeric: tabular-nums; white-space: nowrap; }
.commerce-radio-group {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.commerce-shipping-option {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border: 1.5px solid var(--commerce-border);
    border-radius: var(--pd-radius-md, 8px);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: transparent;
}
.commerce-shipping-option.is-selected {
    border-color: var(--commerce-primary);
    background: var(--commerce-primary-light, rgba(99, 102, 241, .04));
}
.commerce-shipping-option__body { flex: 1; }
.commerce-shipping-option__title { font-weight: 500; }
.commerce-shipping-option__meta {
    display: block;
    font-size: .78rem;
    color: var(--commerce-text-muted);
}
.commerce-shipping-option__price {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.commerce-shipping-calculating {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 0;
    color: var(--commerce-text-muted);
    font-size: .9rem;
}
.commerce-alert-icon {
    flex-shrink: 0;
    margin-top: 1px;
}
.commerce-spinner-on-primary {
    border-top-color: white;
    border-color: rgba(255, 255, 255, .3);
}
.commerce-checkout-payment-mount { min-height: 120px; }
.commerce-checkout-offline {
    text-align: center;
    padding: 1.5rem 0;
}
.commerce-checkout-offline > p {
    margin-bottom: 1rem;
    color: var(--commerce-text-muted);
}
.commerce-checkout-sidebar {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.commerce-promo-remove { font-size: .8rem; }
.commerce-form-hint-spaced { margin-top: .5rem; }
.commerce-totals-heading {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 600;
}
.commerce-totals-count {
    font-weight: 400;
    color: var(--commerce-text-muted);
    font-size: .85rem;
    margin-left: .25rem;
}
.commerce-totals-line {
    font-size: .85rem;
    gap: .5rem;
}
.commerce-totals-line__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.commerce-totals-line__qty { color: var(--commerce-text-muted); }
.commerce-totals-divider {
    border-top: 1px solid var(--commerce-border);
    margin-top: .75rem;
    padding-top: .75rem;
}
.commerce-trust-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--commerce-border);
    font-size: .78rem;
    color: var(--commerce-text-muted);
}
.commerce-trust-row > svg { flex-shrink: 0; }
.commerce-page-empty-cta { width: auto; margin-top: 1rem; }
.commerce-loading-padded { padding: 2rem; }
.commerce-checkout-order-meta {
    font-size: .85rem;
    color: var(--commerce-text-muted);
    margin-bottom: 1.25rem;
}

/* ── Quick-add variant picker on product cards (grid + list) ── */
.commerce-card-variant-panel {
    margin-top: .6rem;
    padding: .75rem;
    border: 1px solid var(--commerce-border, rgba(0, 0, 0, .12));
    border-radius: 10px;
    background: var(--commerce-surface, rgba(0, 0, 0, .02));
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-align: left;
}
.commerce-card-variant-label {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .8rem;
    color: var(--commerce-text-muted, #6b7280);
    margin: 0;
}
.commerce-card-variant-select {
    width: 100%;
    padding: .4rem .55rem;
    border: 1px solid var(--commerce-border, rgba(0, 0, 0, .15));
    border-radius: 8px;
    background: var(--commerce-bg, #fff);
    font-size: .875rem;
    color: inherit;
}
.commerce-card-variant-select:focus-visible {
    outline: 2px solid var(--commerce-primary, #14807E);
    outline-offset: 1px;
}
.commerce-card-variant-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-top: .15rem;
}
.commerce-card-variant-footer .commerce-btn { flex: 1 1 auto; justify-content: center; }
.commerce-card-variant-price { font-weight: 700; white-space: nowrap; }
.commerce-card-variant-link {
    font-size: .8rem;
    color: var(--commerce-text-muted, #6b7280);
    text-decoration: underline;
    align-self: center;
}
.commerce-card-variant-link:hover { color: var(--commerce-primary, #14807E); }

/* ═══════════════════════════════════════════════════════════════════════
   Product page polish (moved here from ProductDetailWidget.razor, 2026-09-02).
   Scoped to .commerce-product-detail — the monolithic widget root class AND the
   class carried by the composed layout produced by « Décomposer » / the block
   « Fiche produit (blocs) » — so the monolith, the atomic blocks and the editor
   canvas (which loads this file) all share the same look. Brand via
   var(--commerce-primary), spacing-led, no hover transforms (client taste).
   ═══════════════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────────
   Product-detail polish — scoped to .commerce-product-detail (the
   widget root class on Babylone) so it targets this site and out-ranks
   the single-class bridge rules without touching other tenants.
   Brand var(--commerce-primary, #15715E) · spacing-led · NO hover transforms (client taste).
   ─────────────────────────────────────────────────────────────── */
.commerce-product-detail .commerce-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
@media (max-width: 980px) {
    .commerce-product-detail .commerce-detail-layout { grid-template-columns: 1fr; gap: 26px; }
}

/* Gallery — sticky on desktop so the info column scrolls past it */
.commerce-product-detail .commerce-detail-gallery { position: sticky; top: 24px; }
@media (max-width: 980px) { .commerce-product-detail .commerce-detail-gallery { position: static; } }
.commerce-product-detail .commerce-detail-main-image {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    background: #f5f1e8;
    border: 1px solid #ece3d2;
    box-shadow: 0 1px 2px rgba(16,34,54,.06), 0 14px 34px -14px rgba(16,34,54,.20);
}
.commerce-product-detail .commerce-detail-no-image {
    display: flex; align-items: center; justify-content: center;
    color: #a99e8c; font-size: .9rem;
}
.commerce-product-detail .commerce-detail-thumbnails { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.commerce-product-detail .commerce-detail-thumb {
    width: 72px; height: 72px; object-fit: cover; border-radius: 10px; cursor: pointer;
    border: 1px solid #e2d9c9; background: #faf7f0; opacity: .8;
    transition: opacity .15s, border-color .15s, box-shadow .15s;
}
.commerce-product-detail .commerce-detail-thumb:hover { opacity: 1; }
.commerce-product-detail .commerce-detail-thumb.active {
    opacity: 1; border-color: var(--commerce-primary, #15715E); box-shadow: 0 0 0 2px rgba(21,113,94,.25);
}

/* Info column */
.commerce-product-detail .commerce-detail-info { display: flex; flex-direction: column; }
.commerce-product-detail .commerce-detail-title {
    font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.1rem); line-height: 1.14; font-weight: 700;
    color: #0E2236; letter-spacing: -.01em; margin: 0 0 8px;
}
.commerce-product-detail .commerce-detail-sku {
    font-size: .73rem; letter-spacing: .08em; text-transform: uppercase; color: #9a958a; margin-bottom: 14px;
}
.commerce-product-detail .commerce-detail-price-block { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.commerce-product-detail .commerce-detail-price-main { font-size: 1.9rem; font-weight: 700; color: var(--commerce-primary, #15715E); }
.commerce-product-detail .commerce-price-original { font-size: 1.05rem; color: #a99e8c; text-decoration: line-through; }

/* Quantity stepper */
.commerce-product-detail .commerce-detail-qty-row { display: flex; align-items: center; gap: 14px; margin: 6px 0 16px; }
.commerce-product-detail .commerce-quantity-control { display: inline-flex; align-items: center; border: 1px solid #d9cfbd; border-radius: 10px; overflow: hidden; }
.commerce-product-detail .commerce-quantity-control button { width: 40px; height: 40px; border: none; background: #faf7f0; font-size: 1.1rem; line-height: 1; cursor: pointer; color: #0E2236; }
.commerce-product-detail .commerce-quantity-control button:hover { background: #efe9dd; }
.commerce-product-detail .commerce-quantity-control span { min-width: 46px; text-align: center; font-weight: 600; }

/* Size / variant buttons */
.commerce-product-detail .commerce-variant-group { margin-bottom: 14px; }
.commerce-product-detail .commerce-size-options { display: flex; flex-wrap: wrap; gap: 8px; }
.commerce-product-detail .commerce-size-btn {
    padding: 9px 16px; border: 1px solid #d9cfbd; background: #fff; border-radius: 9px;
    font: inherit; font-weight: 600; font-size: .9rem; color: #3a4a59; cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.commerce-product-detail .commerce-size-btn:hover { border-color: var(--commerce-primary, #15715E); color: var(--commerce-primary, #15715E); }
.commerce-product-detail .commerce-size-btn.selected { background: var(--commerce-primary, #15715E); border-color: var(--commerce-primary, #15715E); color: #fff; }
.commerce-product-detail .commerce-size-btn.unavailable { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

/* Add-to-cart — full-width primary, colour/shadow change only (no lift) */
.commerce-product-detail .commerce-detail-add-btn {
    width: 100%; padding: 15px 20px; font-size: 1rem; font-weight: 700; border-radius: 12px;
    background: var(--commerce-primary, #15715E); border: 1px solid var(--commerce-primary, #15715E); color: #fff; cursor: pointer;
    box-shadow: 0 8px 20px -8px rgba(21,113,94,.55); transition: background .15s, box-shadow .15s;
}
.commerce-product-detail .commerce-detail-add-btn:hover:not(:disabled) { background: #115a4b; box-shadow: 0 10px 24px -8px rgba(21,113,94,.7); }
.commerce-product-detail .commerce-detail-add-btn:disabled { background: #c7c0b2; border-color: #c7c0b2; box-shadow: none; cursor: not-allowed; }
.commerce-product-detail .commerce-detail-fav { width: 100%; justify-content: center; }

.commerce-detail-tabs { margin-top: 2.5rem; }
.commerce-tabs-nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid #e2d9c9; }
.commerce-tab-btn { background: none; border: none; padding: 14px 18px; font: inherit; font-weight: 600; color: #7a6f62; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.commerce-tab-btn:hover { color: var(--commerce-primary, #15715E); }
.commerce-tab-btn.active { color: var(--commerce-primary, #15715E); border-bottom-color: var(--commerce-primary, #15715E); }
.commerce-tabs-panel { padding: 22px 2px; line-height: 1.65; }
.commerce-spec-table { width: 100%; border-collapse: collapse; }
.commerce-spec-table th, .commerce-spec-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid #efe9dd; vertical-align: top; }
.commerce-spec-table th { width: 38%; font-weight: 600; color: #5a5043; }
.commerce-detail-fav { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 11px 18px; background: none; border: 1px solid #d9cfbd; border-radius: 10px; color: #5a5043; font: inherit; font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s; }
.commerce-detail-fav:hover { color: var(--commerce-primary, #15715E); border-color: var(--commerce-primary, #15715E); }
.commerce-detail-fav.active { color: #C0392B; border-color: #e3c7c1; }
.commerce-notify-stock { margin-top: 16px; padding: 16px; background: #faf6ee; border: 1px solid #ece3d2; border-radius: 12px; }
.commerce-notify-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 8px; color: #2b2118; }
.commerce-notify-row { display: flex; gap: 8px; flex-wrap: wrap; }
.commerce-notify-input { flex: 1; min-width: 180px; padding: 10px 12px; border: 1px solid #d9cfbd; border-radius: 8px; font-size: .92rem; }
.commerce-notify-input:focus { outline: none; border-color: var(--commerce-primary, #15715E); box-shadow: 0 0 0 3px rgba(21,113,94,.15); }
.commerce-notify-done { color: var(--commerce-primary, #15715E); font-weight: 600; font-size: .9rem; margin: 0; }
.commerce-detail-reassurance { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid #efe9dd; display: flex; flex-direction: column; gap: 8px; font-size: .88rem; color: #5a5043; }
.commerce-detail-reassurance li { position: relative; padding-left: 20px; }
.commerce-detail-reassurance li::before { content: "✓"; position: absolute; left: 0; color: var(--commerce-primary, #15715E); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════════
   Réglages ▸ Style — per-block CSS variables (server: CommerceStyleTraits.BuildVars,
   canvas: commerce-plugin.js cxStyleVars). Every fallback equals the value the rule had
   before this block existed: a block with no style trait set renders identically. Kept
   after every rule it overrides, at equal or higher specificity.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* — Title — */
.commerce-detail-title { color: var(--cx-color, inherit); font-size: var(--cx-font-size, 1.5rem); font-weight: var(--cx-font-weight, 700); text-transform: var(--cx-text-transform, none); letter-spacing: var(--cx-letter-spacing, normal); line-height: var(--cx-line-height, 1.2); text-align: var(--cx-align, inherit); font-family: var(--cx-font-family, inherit); }
.commerce-product-detail .commerce-detail-title { color: var(--cx-color, #0E2236); font-size: var(--cx-font-size, clamp(1.6rem, 1.2rem + 1.5vw, 2.1rem)); letter-spacing: var(--cx-letter-spacing, -.01em); line-height: var(--cx-line-height, 1.14); }

/* — SKU — */
.commerce-detail-sku { color: var(--cx-color, var(--commerce-text-muted)); font-size: var(--cx-font-size, 0.8rem); font-weight: var(--cx-font-weight, inherit); text-transform: var(--cx-text-transform, none); letter-spacing: var(--cx-letter-spacing, normal); text-align: var(--cx-align, inherit); }
.commerce-product-detail .commerce-detail-sku { color: var(--cx-color, #9a958a); font-size: var(--cx-font-size, .73rem); text-transform: var(--cx-text-transform, uppercase); letter-spacing: var(--cx-letter-spacing, .08em); }

/* — Price — */
.commerce-detail-price-block { justify-content: var(--cx-justify, flex-start); }
.commerce-price-current.commerce-detail-price-main { color: var(--cx-price-color, var(--commerce-text)); font-size: var(--cx-price-size, 1.5rem) !important; font-weight: var(--cx-font-weight, 700); }
.commerce-product-detail .commerce-price-current.commerce-detail-price-main { color: var(--cx-price-color, var(--commerce-primary, #15715E)); }
.commerce-detail-price-block .commerce-price-original { color: var(--cx-compare-color, var(--commerce-text-muted)); font-size: var(--cx-compare-size, 0.85rem); }
.commerce-product-detail .commerce-detail-price-block .commerce-price-original { color: var(--cx-compare-color, #a99e8c); font-size: var(--cx-compare-size, 1.05rem); }

/* — Add to cart — */
.commerce-detail-add-block { display: flex; flex-direction: column; align-items: var(--cx-items, stretch); }
.commerce-detail-add-block .commerce-detail-qty-row { justify-content: var(--cx-justify, flex-start); }
.commerce-detail-add-block .commerce-quantity-control button { width: var(--cx-qty-size, 44px); height: var(--cx-qty-size, 44px); }
.commerce-product-detail .commerce-detail-add-block .commerce-quantity-control button { width: var(--cx-qty-size, 40px); height: var(--cx-qty-size, 40px); }
.commerce-btn.commerce-btn-primary.commerce-detail-add-btn { background: var(--cx-btn-bg, var(--commerce-primary)); color: var(--cx-btn-color, white); border-radius: var(--cx-btn-radius, var(--commerce-radius)); padding: var(--cx-btn-pad, 0.8rem 1.5rem); font-size: var(--cx-btn-font-size, 0.95rem); width: var(--cx-btn-width, 100%); }
.commerce-btn.commerce-btn-primary.commerce-detail-add-btn:hover:not(:disabled) { background: var(--cx-btn-hover-bg, var(--commerce-primary-hover)); }
.commerce-product-detail .commerce-detail-add-btn { background: var(--cx-btn-bg, var(--commerce-primary, #15715E)); border-color: var(--cx-btn-bg, var(--commerce-primary, #15715E)); color: var(--cx-btn-color, #fff); border-radius: var(--cx-btn-radius, 12px); padding: var(--cx-btn-pad, 15px 20px); font-size: var(--cx-btn-font-size, 1rem); width: var(--cx-btn-width, 100%); }
.commerce-product-detail .commerce-detail-add-btn:hover:not(:disabled) { background: var(--cx-btn-hover-bg, #115a4b); }
.commerce-addon-add-to-cart.commerce-btn-primary { background: var(--cx-btn-bg, var(--commerce-primary)); color: var(--cx-btn-color, white); border-radius: var(--cx-btn-radius, var(--commerce-radius)); }

/* — Variants — */
.commerce-variant-selectors { text-align: var(--cx-align, inherit); color: var(--cx-color, inherit); font-size: var(--cx-font-size, inherit); }
.commerce-color-options, .commerce-size-options { justify-content: var(--cx-justify, flex-start); }
.commerce-color-swatch { width: var(--cx-swatch-size, 44px); height: var(--cx-swatch-size, 44px); border-radius: var(--cx-swatch-radius, 50%); }
.commerce-color-swatch.selected { border-color: var(--cx-selected-color, var(--commerce-primary)); box-shadow: 0 0 0 2px var(--cx-selected-color, var(--commerce-primary)); }
.commerce-size-btn { min-width: var(--cx-swatch-size, 44px); height: var(--cx-swatch-size, 44px); border-radius: var(--cx-option-radius, 6px); }
.commerce-size-btn:hover { border-color: var(--cx-selected-color, var(--commerce-primary)); }
.commerce-size-btn.selected { background: var(--cx-selected-color, var(--commerce-primary)); border-color: var(--cx-selected-color, var(--commerce-primary)); }
.commerce-product-detail .commerce-size-btn { border-radius: var(--cx-option-radius, 9px); }
.commerce-product-detail .commerce-size-btn:hover { border-color: var(--cx-selected-color, var(--commerce-primary, #15715E)); color: var(--cx-selected-color, var(--commerce-primary, #15715E)); }
.commerce-product-detail .commerce-size-btn.selected { background: var(--cx-selected-color, var(--commerce-primary, #15715E)); border-color: var(--cx-selected-color, var(--commerce-primary, #15715E)); }

/* — Gallery — */
.commerce-detail-main-image { aspect-ratio: var(--cx-img-ratio, 1); border-radius: var(--cx-img-radius, var(--commerce-radius)); }
/* Photo produit ENTIÈRE par défaut (demande MOB, 16/09/2026) : une pergola rognée par « cover »
   perd sa structure. Le trait de style « Image fit » (--cx-img-fit) permet de revenir au remplissage
   bloc par bloc. C'est cette règle qui décide : posée en !important, elle bat tout style inline. */
.commerce-detail-main-image > img { object-fit: var(--cx-img-fit, contain) !important; }
.commerce-product-detail .commerce-detail-main-image { aspect-ratio: var(--cx-img-ratio, 4 / 3); border-radius: var(--cx-img-radius, 16px); }
.commerce-detail-thumb { width: var(--cx-thumb-size, 60px); height: var(--cx-thumb-size, 60px); border-radius: var(--cx-thumb-radius, 4px); }
.commerce-detail-thumb.active { border-color: var(--cx-selected-color, var(--commerce-primary)); }
.commerce-product-detail .commerce-detail-thumb { width: var(--cx-thumb-size, 72px); height: var(--cx-thumb-size, 72px); border-radius: var(--cx-thumb-radius, 10px); }
.commerce-product-detail .commerce-detail-thumb.active { border-color: var(--cx-selected-color, var(--commerce-primary, #15715E)); }
.commerce-detail-gallery--thumbs-left, .commerce-detail-gallery--thumbs-right { display: grid; grid-template-columns: var(--cx-thumb-size, 72px) minmax(0, 1fr); gap: 12px; align-items: start; }
.commerce-detail-gallery--thumbs-right { grid-template-columns: minmax(0, 1fr) var(--cx-thumb-size, 72px); }
.commerce-detail-gallery--thumbs-left .commerce-detail-main-image, .commerce-detail-gallery--thumbs-right .commerce-detail-main-image { grid-row: 1; }
.commerce-detail-gallery--thumbs-left .commerce-detail-main-image { grid-column: 2; }
.commerce-detail-gallery--thumbs-right .commerce-detail-main-image { grid-column: 1; }
.commerce-detail-gallery--thumbs-left .commerce-detail-thumbnails, .commerce-detail-gallery--thumbs-right .commerce-detail-thumbnails { grid-row: 1; flex-direction: column; flex-wrap: nowrap; margin-top: 0; overflow: visible; }
.commerce-detail-gallery--thumbs-left .commerce-detail-thumbnails { grid-column: 1; }
.commerce-detail-gallery--thumbs-right .commerce-detail-thumbnails { grid-column: 2; }

/* — Stock — */
.commerce-detail-stock { text-align: var(--cx-align, inherit); }
/* Mode démonstration : les boutons d'achat restent visibles — le client doit voir la
   boutique telle qu'elle sera — mais annoncent qu'ils ne mènent nulle part. Le refus
   réel est côté serveur ; ceci n'est que la politesse de le dire avant le clic. */
html[data-pd-demo] .commerce-detail-add-btn,
html[data-pd-demo] .commerce-card-add,
html[data-pd-demo] .commerce-addon-add-btn { opacity: .72; cursor: not-allowed; }
/* Disponibilité par dépôt (stock multi-entrepôts venu de l'ERP) : discret, sous le badge. */
.commerce-stock-warehouses { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.commerce-stock-warehouses li { display: flex; align-items: baseline; gap: 8px; font-size: .82rem; color: var(--fg-muted, #6b7280); }
.commerce-stock-warehouse-name { flex: 1 1 auto; }
.commerce-stock-warehouse-qty { font-variant-numeric: tabular-nums; font-weight: 600; }
.commerce-stock-badge { font-size: var(--cx-font-size, 0.8rem); font-weight: var(--cx-font-weight, 500); text-transform: var(--cx-text-transform, none); letter-spacing: var(--cx-letter-spacing, normal); }
.commerce-stock-badge.in-stock { color: var(--cx-stock-in, var(--commerce-success)); }
.commerce-stock-badge.low-stock { color: var(--cx-stock-low, var(--commerce-warning)); }
.commerce-stock-badge.out-of-stock { color: var(--cx-stock-out, var(--commerce-danger)); }

/* — Rating — */
.commerce-detail-rating { justify-content: var(--cx-justify, flex-start); font-size: var(--cx-font-size, 0.9rem); color: var(--cx-color, inherit); }
.commerce-rating-stars .star { color: var(--cx-star-empty, #ddd); font-size: var(--cx-star-size, 1.1rem); }
.commerce-rating-stars .star.filled { color: var(--cx-star-color, #f59e0b); }

/* — Tabs — */
.commerce-detail-tabs .commerce-tabs-nav { justify-content: var(--cx-justify, flex-start); }
.commerce-detail-tabs .commerce-tab-btn { color: var(--cx-tab-color, #7a6f62); font-size: var(--cx-font-size, inherit); font-weight: var(--cx-font-weight, 600); text-transform: var(--cx-text-transform, none); letter-spacing: var(--cx-letter-spacing, normal); }
.commerce-detail-tabs .commerce-tab-btn:hover, .commerce-detail-tabs .commerce-tab-btn.active { color: var(--cx-active-color, var(--commerce-primary, #15715E)); }
.commerce-detail-tabs .commerce-tab-btn.active { border-bottom-color: var(--cx-active-color, var(--commerce-primary, #15715E)); }
.commerce-detail-tabs--pills .commerce-tabs-nav { border-bottom: 0; gap: 8px; }
.commerce-detail-tabs--pills .commerce-tab-btn { border: 1px solid var(--commerce-border, #e2d9c9); border-radius: 999px; padding: 9px 16px; margin-bottom: 0; }
.commerce-detail-tabs--pills .commerce-tab-btn.active { background: var(--cx-active-color, var(--commerce-primary, #15715E)); color: #fff; border-color: var(--cx-active-color, var(--commerce-primary, #15715E)); }
.commerce-detail-tabs--boxed .commerce-tabs-nav { gap: 0; }
.commerce-detail-tabs--boxed .commerce-tab-btn { border: 1px solid var(--commerce-border, #e2d9c9); border-bottom: 0; border-radius: 8px 8px 0 0; margin-bottom: -1px; background: var(--commerce-bg-alt, #f8fafc); }
.commerce-detail-tabs--boxed .commerce-tab-btn.active { background: var(--commerce-bg, #fff); border-bottom: 1px solid var(--commerce-bg, #fff); }

/* — Reassurance — */
.commerce-detail-reassurance { color: var(--cx-color, #5a5043); font-size: var(--cx-font-size, .88rem); font-weight: var(--cx-font-weight, inherit); text-align: var(--cx-align, inherit); }
.commerce-detail-reassurance li { padding-left: var(--cx-reass-pad, 20px); }
.commerce-detail-reassurance li::before { content: var(--cx-reass-icon, "✓"); color: var(--cx-icon-color, var(--commerce-primary, #15715E)); }
.commerce-detail-reassurance--inline { flex-direction: row; flex-wrap: wrap; gap: 8px 22px; justify-content: var(--cx-justify, flex-start); }
.commerce-detail-reassurance--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }

/* — Wishlist / favourite — */
.commerce-detail-wishlist { justify-content: var(--cx-justify, center); }
.commerce-detail-wishlist:not(.commerce-detail-fav) { border-radius: var(--cx-btn-radius, 8px); }
.commerce-detail-wishlist.commerce-detail-fav { border-radius: var(--cx-btn-radius, 10px); }
.commerce-detail-wishlist.active { color: var(--cx-active-color, #e11d48); border-color: var(--cx-active-color, #e11d48); }
.commerce-detail-wishlist.commerce-detail-fav.active { color: var(--cx-active-color, #C0392B); border-color: var(--cx-active-color, #e3c7c1); }
.commerce-detail-wishlist--solid, .commerce-detail-wishlist--solid:hover { background: var(--cx-btn-bg, var(--commerce-primary, #15715E)); color: var(--cx-btn-color, #fff); border-color: var(--cx-btn-bg, var(--commerce-primary, #15715E)); }
.commerce-detail-wishlist--link, .commerce-detail-wishlist--link:hover { border: 0; background: none; padding: 0; text-decoration: underline; }

/* — Description — */
.commerce-detail-description { color: var(--cx-color, var(--commerce-text)); line-height: var(--cx-line-height, 1.6); font-size: var(--cx-font-size, inherit); font-weight: var(--cx-font-weight, inherit); text-align: var(--cx-align, inherit); font-family: var(--cx-font-family, inherit); }

/* — Cards (grid, featured, related, wishlist) — */
.commerce-card-badge { background: var(--cx-badge-bg, var(--commerce-danger)); color: var(--cx-badge-color, white); }
.commerce-card .commerce-price-current { color: var(--cx-price-color, var(--commerce-text)); }
.commerce-card-actions .commerce-btn-primary { background: var(--cx-btn-bg, var(--commerce-primary)); color: var(--cx-btn-color, white); border-radius: var(--cx-btn-radius, var(--commerce-radius)); }
.commerce-card-actions .commerce-btn-primary:hover:not(:disabled) { background: var(--cx-btn-hover-bg, var(--commerce-primary-hover)); }

/* ═══ Author intent — a SET style trait beats theme/site CSS (unset traits emit nothing) ═══ */
[style*="--cx-color:"] .commerce-detail-title, .commerce-detail-title[style*="--cx-color:"], [style*="--cx-color:"] .commerce-detail-sku, .commerce-detail-sku[style*="--cx-color:"], [style*="--cx-color:"] .commerce-detail-description, .commerce-detail-description[style*="--cx-color:"], [style*="--cx-color:"] .commerce-detail-reassurance, .commerce-detail-reassurance[style*="--cx-color:"], [style*="--cx-color:"] .commerce-variant-selectors, .commerce-variant-selectors[style*="--cx-color:"], [style*="--cx-color:"] .commerce-detail-rating, .commerce-detail-rating[style*="--cx-color:"], [style*="--cx-color:"] .commerce-detail-stock, .commerce-detail-stock[style*="--cx-color:"] { color: var(--cx-color) !important; }
[style*="--cx-font-size:"] .commerce-detail-title, .commerce-detail-title[style*="--cx-font-size:"], [style*="--cx-font-size:"] .commerce-detail-sku, .commerce-detail-sku[style*="--cx-font-size:"], [style*="--cx-font-size:"] .commerce-detail-description, .commerce-detail-description[style*="--cx-font-size:"], [style*="--cx-font-size:"] .commerce-detail-reassurance, .commerce-detail-reassurance[style*="--cx-font-size:"], [style*="--cx-font-size:"] .commerce-variant-selectors, .commerce-variant-selectors[style*="--cx-font-size:"], [style*="--cx-font-size:"] .commerce-detail-rating, .commerce-detail-rating[style*="--cx-font-size:"], [style*="--cx-font-size:"] .commerce-detail-stock, .commerce-detail-stock[style*="--cx-font-size:"], [style*="--cx-font-size:"] .commerce-stock-badge, .commerce-stock-badge[style*="--cx-font-size:"], [style*="--cx-font-size:"] .commerce-tab-btn, .commerce-tab-btn[style*="--cx-font-size:"] { font-size: var(--cx-font-size) !important; }
[style*="--cx-font-weight:"] .commerce-detail-title, .commerce-detail-title[style*="--cx-font-weight:"], [style*="--cx-font-weight:"] .commerce-detail-sku, .commerce-detail-sku[style*="--cx-font-weight:"], [style*="--cx-font-weight:"] .commerce-detail-description, .commerce-detail-description[style*="--cx-font-weight:"], [style*="--cx-font-weight:"] .commerce-detail-reassurance, .commerce-detail-reassurance[style*="--cx-font-weight:"], [style*="--cx-font-weight:"] .commerce-variant-selectors, .commerce-variant-selectors[style*="--cx-font-weight:"], [style*="--cx-font-weight:"] .commerce-detail-rating, .commerce-detail-rating[style*="--cx-font-weight:"], [style*="--cx-font-weight:"] .commerce-detail-stock, .commerce-detail-stock[style*="--cx-font-weight:"], [style*="--cx-font-weight:"] .commerce-stock-badge, .commerce-stock-badge[style*="--cx-font-weight:"], [style*="--cx-font-weight:"] .commerce-tab-btn, .commerce-tab-btn[style*="--cx-font-weight:"], [style*="--cx-font-weight:"] .commerce-detail-price-main, .commerce-detail-price-main[style*="--cx-font-weight:"] { font-weight: var(--cx-font-weight) !important; }
[style*="--cx-text-transform:"] .commerce-detail-title, .commerce-detail-title[style*="--cx-text-transform:"], [style*="--cx-text-transform:"] .commerce-detail-sku, .commerce-detail-sku[style*="--cx-text-transform:"], [style*="--cx-text-transform:"] .commerce-detail-description, .commerce-detail-description[style*="--cx-text-transform:"], [style*="--cx-text-transform:"] .commerce-detail-reassurance, .commerce-detail-reassurance[style*="--cx-text-transform:"], [style*="--cx-text-transform:"] .commerce-variant-selectors, .commerce-variant-selectors[style*="--cx-text-transform:"], [style*="--cx-text-transform:"] .commerce-detail-rating, .commerce-detail-rating[style*="--cx-text-transform:"], [style*="--cx-text-transform:"] .commerce-detail-stock, .commerce-detail-stock[style*="--cx-text-transform:"], [style*="--cx-text-transform:"] .commerce-stock-badge, .commerce-stock-badge[style*="--cx-text-transform:"], [style*="--cx-text-transform:"] .commerce-tab-btn, .commerce-tab-btn[style*="--cx-text-transform:"] { text-transform: var(--cx-text-transform) !important; }
[style*="--cx-letter-spacing:"] .commerce-detail-title, .commerce-detail-title[style*="--cx-letter-spacing:"], [style*="--cx-letter-spacing:"] .commerce-detail-sku, .commerce-detail-sku[style*="--cx-letter-spacing:"], [style*="--cx-letter-spacing:"] .commerce-detail-description, .commerce-detail-description[style*="--cx-letter-spacing:"], [style*="--cx-letter-spacing:"] .commerce-detail-reassurance, .commerce-detail-reassurance[style*="--cx-letter-spacing:"], [style*="--cx-letter-spacing:"] .commerce-variant-selectors, .commerce-variant-selectors[style*="--cx-letter-spacing:"], [style*="--cx-letter-spacing:"] .commerce-detail-rating, .commerce-detail-rating[style*="--cx-letter-spacing:"], [style*="--cx-letter-spacing:"] .commerce-detail-stock, .commerce-detail-stock[style*="--cx-letter-spacing:"], [style*="--cx-letter-spacing:"] .commerce-stock-badge, .commerce-stock-badge[style*="--cx-letter-spacing:"], [style*="--cx-letter-spacing:"] .commerce-tab-btn, .commerce-tab-btn[style*="--cx-letter-spacing:"] { letter-spacing: var(--cx-letter-spacing) !important; }
[style*="--cx-line-height:"] .commerce-detail-title, .commerce-detail-title[style*="--cx-line-height:"], [style*="--cx-line-height:"] .commerce-detail-sku, .commerce-detail-sku[style*="--cx-line-height:"], [style*="--cx-line-height:"] .commerce-detail-description, .commerce-detail-description[style*="--cx-line-height:"], [style*="--cx-line-height:"] .commerce-detail-reassurance, .commerce-detail-reassurance[style*="--cx-line-height:"], [style*="--cx-line-height:"] .commerce-variant-selectors, .commerce-variant-selectors[style*="--cx-line-height:"], [style*="--cx-line-height:"] .commerce-detail-rating, .commerce-detail-rating[style*="--cx-line-height:"], [style*="--cx-line-height:"] .commerce-detail-stock, .commerce-detail-stock[style*="--cx-line-height:"] { line-height: var(--cx-line-height) !important; }
[style*="--cx-font-family:"] .commerce-detail-title, .commerce-detail-title[style*="--cx-font-family:"], [style*="--cx-font-family:"] .commerce-detail-sku, .commerce-detail-sku[style*="--cx-font-family:"], [style*="--cx-font-family:"] .commerce-detail-description, .commerce-detail-description[style*="--cx-font-family:"], [style*="--cx-font-family:"] .commerce-detail-reassurance, .commerce-detail-reassurance[style*="--cx-font-family:"], [style*="--cx-font-family:"] .commerce-variant-selectors, .commerce-variant-selectors[style*="--cx-font-family:"], [style*="--cx-font-family:"] .commerce-detail-rating, .commerce-detail-rating[style*="--cx-font-family:"], [style*="--cx-font-family:"] .commerce-detail-stock, .commerce-detail-stock[style*="--cx-font-family:"] { font-family: var(--cx-font-family) !important; }
[style*="--cx-align:"] .commerce-detail-title, .commerce-detail-title[style*="--cx-align:"], [style*="--cx-align:"] .commerce-detail-sku, .commerce-detail-sku[style*="--cx-align:"], [style*="--cx-align:"] .commerce-detail-description, .commerce-detail-description[style*="--cx-align:"], [style*="--cx-align:"] .commerce-detail-reassurance, .commerce-detail-reassurance[style*="--cx-align:"], [style*="--cx-align:"] .commerce-variant-selectors, .commerce-variant-selectors[style*="--cx-align:"], [style*="--cx-align:"] .commerce-detail-rating, .commerce-detail-rating[style*="--cx-align:"], [style*="--cx-align:"] .commerce-detail-stock, .commerce-detail-stock[style*="--cx-align:"] { text-align: var(--cx-align) !important; }
[style*="--cx-justify:"] .commerce-detail-price-block, .commerce-detail-price-block[style*="--cx-justify:"], [style*="--cx-justify:"] .commerce-detail-rating, .commerce-detail-rating[style*="--cx-justify:"], [style*="--cx-justify:"] .commerce-tabs-nav, .commerce-tabs-nav[style*="--cx-justify:"], [style*="--cx-justify:"] .commerce-color-options, .commerce-color-options[style*="--cx-justify:"], [style*="--cx-justify:"] .commerce-size-options, .commerce-size-options[style*="--cx-justify:"], [style*="--cx-justify:"] .commerce-detail-qty-row, .commerce-detail-qty-row[style*="--cx-justify:"], [style*="--cx-justify:"] .commerce-detail-reassurance--inline, .commerce-detail-reassurance--inline[style*="--cx-justify:"], [style*="--cx-justify:"] .commerce-detail-wishlist, .commerce-detail-wishlist[style*="--cx-justify:"] { justify-content: var(--cx-justify) !important; }
[style*="--cx-items:"] .commerce-detail-add-block, .commerce-detail-add-block[style*="--cx-items:"] { align-items: var(--cx-items) !important; }
[style*="--cx-price-color:"] .commerce-detail-price-main, .commerce-detail-price-main[style*="--cx-price-color:"], [style*="--cx-price-color:"] .commerce-card .commerce-price-current, [style*="--cx-price-color:"] .commerce-pricing-amount, .commerce-pricing-amount[style*="--cx-price-color:"] { color: var(--cx-price-color) !important; }
[style*="--cx-price-size:"] .commerce-detail-price-main, .commerce-detail-price-main[style*="--cx-price-size:"] { font-size: var(--cx-price-size) !important; }
[style*="--cx-compare-color:"] .commerce-price-original, .commerce-price-original[style*="--cx-compare-color:"] { color: var(--cx-compare-color) !important; }
[style*="--cx-compare-size:"] .commerce-price-original, .commerce-price-original[style*="--cx-compare-size:"] { font-size: var(--cx-compare-size) !important; }
[style*="--cx-btn-bg:"] .commerce-detail-add-btn, .commerce-detail-add-btn[style*="--cx-btn-bg:"], [style*="--cx-btn-bg:"] .commerce-addon-add-to-cart, .commerce-addon-add-to-cart[style*="--cx-btn-bg:"], [style*="--cx-btn-bg:"] .commerce-card-actions .commerce-btn-primary, [style*="--cx-btn-bg:"] .commerce-detail-wishlist--solid, .commerce-detail-wishlist--solid[style*="--cx-btn-bg:"] { background: var(--cx-btn-bg) !important; border-color: var(--cx-btn-bg) !important; }
[style*="--cx-btn-color:"] .commerce-detail-add-btn, .commerce-detail-add-btn[style*="--cx-btn-color:"], [style*="--cx-btn-color:"] .commerce-addon-add-to-cart, .commerce-addon-add-to-cart[style*="--cx-btn-color:"], [style*="--cx-btn-color:"] .commerce-card-actions .commerce-btn-primary, [style*="--cx-btn-color:"] .commerce-detail-wishlist--solid, .commerce-detail-wishlist--solid[style*="--cx-btn-color:"] { color: var(--cx-btn-color) !important; }
[style*="--cx-btn-radius:"] .commerce-detail-add-btn, .commerce-detail-add-btn[style*="--cx-btn-radius:"], [style*="--cx-btn-radius:"] .commerce-addon-add-to-cart, .commerce-addon-add-to-cart[style*="--cx-btn-radius:"], [style*="--cx-btn-radius:"] .commerce-card-actions .commerce-btn-primary, [style*="--cx-btn-radius:"] .commerce-detail-wishlist--solid, .commerce-detail-wishlist--solid[style*="--cx-btn-radius:"], [style*="--cx-btn-radius:"] .commerce-detail-wishlist, .commerce-detail-wishlist[style*="--cx-btn-radius:"] { border-radius: var(--cx-btn-radius) !important; }
[style*="--cx-btn-pad:"] .commerce-detail-add-btn, .commerce-detail-add-btn[style*="--cx-btn-pad:"], [style*="--cx-btn-pad:"] .commerce-addon-add-to-cart, .commerce-addon-add-to-cart[style*="--cx-btn-pad:"], [style*="--cx-btn-pad:"] .commerce-card-actions .commerce-btn-primary, [style*="--cx-btn-pad:"] .commerce-detail-wishlist--solid, .commerce-detail-wishlist--solid[style*="--cx-btn-pad:"] { padding: var(--cx-btn-pad) !important; }
[style*="--cx-btn-font-size:"] .commerce-detail-add-btn, .commerce-detail-add-btn[style*="--cx-btn-font-size:"], [style*="--cx-btn-font-size:"] .commerce-addon-add-to-cart, .commerce-addon-add-to-cart[style*="--cx-btn-font-size:"], [style*="--cx-btn-font-size:"] .commerce-card-actions .commerce-btn-primary, [style*="--cx-btn-font-size:"] .commerce-detail-wishlist--solid, .commerce-detail-wishlist--solid[style*="--cx-btn-font-size:"] { font-size: var(--cx-btn-font-size) !important; }
[style*="--cx-btn-width:"] .commerce-detail-add-btn, .commerce-detail-add-btn[style*="--cx-btn-width:"], [style*="--cx-btn-width:"] .commerce-addon-add-to-cart, .commerce-addon-add-to-cart[style*="--cx-btn-width:"], [style*="--cx-btn-width:"] .commerce-card-actions .commerce-btn-primary, [style*="--cx-btn-width:"] .commerce-detail-wishlist--solid, .commerce-detail-wishlist--solid[style*="--cx-btn-width:"] { width: var(--cx-btn-width) !important; }
[style*="--cx-qty-size:"] .commerce-quantity-control button { width: var(--cx-qty-size) !important; height: var(--cx-qty-size) !important; }
[style*="--cx-swatch-size:"] .commerce-color-swatch, .commerce-color-swatch[style*="--cx-swatch-size:"] { width: var(--cx-swatch-size) !important; height: var(--cx-swatch-size) !important; }
[style*="--cx-swatch-size:"] .commerce-size-btn, .commerce-size-btn[style*="--cx-swatch-size:"] { min-width: var(--cx-swatch-size) !important; height: var(--cx-swatch-size) !important; }
[style*="--cx-swatch-radius:"] .commerce-color-swatch, .commerce-color-swatch[style*="--cx-swatch-radius:"] { border-radius: var(--cx-swatch-radius) !important; }
[style*="--cx-option-radius:"] .commerce-size-btn, .commerce-size-btn[style*="--cx-option-radius:"] { border-radius: var(--cx-option-radius) !important; }
[style*="--cx-selected-color:"] .commerce-color-swatch.selected, .commerce-color-swatch.selected[style*="--cx-selected-color:"], [style*="--cx-selected-color:"] .commerce-size-btn.selected, .commerce-size-btn.selected[style*="--cx-selected-color:"], [style*="--cx-selected-color:"] .commerce-detail-thumb.active, .commerce-detail-thumb.active[style*="--cx-selected-color:"] { border-color: var(--cx-selected-color) !important; }
[style*="--cx-selected-color:"] .commerce-size-btn.selected, .commerce-size-btn.selected[style*="--cx-selected-color:"] { background: var(--cx-selected-color) !important; }
[style*="--cx-img-ratio:"] .commerce-detail-main-image, .commerce-detail-main-image[style*="--cx-img-ratio:"] { aspect-ratio: var(--cx-img-ratio) !important; }
[style*="--cx-img-radius:"] .commerce-detail-main-image, .commerce-detail-main-image[style*="--cx-img-radius:"] { border-radius: var(--cx-img-radius) !important; }
[style*="--cx-img-fit:"] .commerce-detail-main-image > img { object-fit: var(--cx-img-fit) !important; }
[style*="--cx-thumb-size:"] .commerce-detail-thumb, .commerce-detail-thumb[style*="--cx-thumb-size:"] { width: var(--cx-thumb-size) !important; height: var(--cx-thumb-size) !important; }
[style*="--cx-thumb-radius:"] .commerce-detail-thumb, .commerce-detail-thumb[style*="--cx-thumb-radius:"] { border-radius: var(--cx-thumb-radius) !important; }
[style*="--cx-stock-in:"] .commerce-stock-badge.in-stock, .commerce-stock-badge.in-stock[style*="--cx-stock-in:"] { color: var(--cx-stock-in) !important; }
[style*="--cx-stock-low:"] .commerce-stock-badge.low-stock, .commerce-stock-badge.low-stock[style*="--cx-stock-low:"] { color: var(--cx-stock-low) !important; }
[style*="--cx-stock-out:"] .commerce-stock-badge.out-of-stock, .commerce-stock-badge.out-of-stock[style*="--cx-stock-out:"] { color: var(--cx-stock-out) !important; }
[style*="--cx-star-color:"] .commerce-rating-stars .star.filled, [style*="--cx-star-color:"] .commerce-review-stars .star.filled { color: var(--cx-star-color) !important; }
[style*="--cx-star-empty:"] .commerce-rating-stars .star, [style*="--cx-star-empty:"] .commerce-review-stars .star { color: var(--cx-star-empty) !important; }
[style*="--cx-star-size:"] .commerce-rating-stars .star { font-size: var(--cx-star-size) !important; }
[style*="--cx-active-color:"] .commerce-tab-btn.active, .commerce-tab-btn.active[style*="--cx-active-color:"], [style*="--cx-active-color:"] .commerce-tab-btn:hover, .commerce-tab-btn:hover[style*="--cx-active-color:"], [style*="--cx-active-color:"] .commerce-detail-wishlist.active, .commerce-detail-wishlist.active[style*="--cx-active-color:"] { color: var(--cx-active-color) !important; }
[style*="--cx-active-color:"] .commerce-tab-btn.active, .commerce-tab-btn.active[style*="--cx-active-color:"], [style*="--cx-active-color:"] .commerce-detail-wishlist.active, .commerce-detail-wishlist.active[style*="--cx-active-color:"] { border-color: var(--cx-active-color) !important; }
[style*="--cx-tab-color:"] .commerce-tab-btn:not(.active), .commerce-tab-btn:not(.active)[style*="--cx-tab-color:"] { color: var(--cx-tab-color) !important; }
[style*="--cx-reass-icon:"] .commerce-detail-reassurance li::before { content: var(--cx-reass-icon) !important; }
[style*="--cx-reass-pad:"] .commerce-detail-reassurance li { padding-left: var(--cx-reass-pad) !important; }
[style*="--cx-icon-color:"] .commerce-detail-reassurance li::before { color: var(--cx-icon-color) !important; }
[style*="--cx-badge-bg:"] .commerce-card-badge, .commerce-card-badge[style*="--cx-badge-bg:"] { background: var(--cx-badge-bg) !important; }
[style*="--cx-badge-color:"] .commerce-card-badge, .commerce-card-badge[style*="--cx-badge-color:"] { color: var(--cx-badge-color) !important; }
.commerce-detail-tabs--pills[style*="--cx-active-color:"] .commerce-tab-btn.active { background: var(--cx-active-color) !important; color: #fff !important; }
.commerce-detail-tabs--boxed[style*="--cx-active-color:"] .commerce-tab-btn.active { background: var(--commerce-bg, #fff) !important; }
[style*="--cx-btn-hover-bg:"] .commerce-detail-add-btn:hover:not(:disabled), [style*="--cx-btn-hover-bg:"] .commerce-card-actions .commerce-btn-primary:hover:not(:disabled), [style*="--cx-btn-hover-bg:"] .commerce-addon-add-to-cart:hover:not(:disabled) { background: var(--cx-btn-hover-bg) !important; }
[style*="--cx-selected-color:"] .commerce-color-swatch.selected { box-shadow: 0 0 0 2px var(--cx-selected-color) !important; }

/* — Product meta (brand / family / sub-family / reference) — */
.commerce-detail-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; font-size: var(--cx-font-size, .85rem); color: var(--cx-color, var(--commerce-text-muted)); font-weight: var(--cx-font-weight, inherit); text-transform: var(--cx-text-transform, none); letter-spacing: var(--cx-letter-spacing, normal); text-align: var(--cx-align, inherit); justify-content: var(--cx-justify, flex-start); }
.commerce-detail-meta--stack { flex-direction: column; gap: 4px; }
.commerce-detail-meta__item { display: inline-flex; gap: 6px; align-items: baseline; }
.commerce-detail-meta__label { opacity: .75; }
.commerce-detail-meta__label::after { content: ' :'; }
.commerce-detail-meta__value { font-weight: 600; color: var(--cx-color, var(--commerce-text)); }
[style*="--cx-color:"] .commerce-detail-meta, .commerce-detail-meta[style*="--cx-color:"], .commerce-detail-meta[style*="--cx-color:"] .commerce-detail-meta__value { color: var(--cx-color) !important; }
[style*="--cx-font-size:"] .commerce-detail-meta, .commerce-detail-meta[style*="--cx-font-size:"] { font-size: var(--cx-font-size) !important; }
[style*="--cx-align:"] .commerce-detail-meta, .commerce-detail-meta[style*="--cx-align:"] { text-align: var(--cx-align) !important; justify-content: var(--cx-justify) !important; }

/* Gallery: side thumbnails fall back below the main image on phones (a 72px rail beside a
   ~300px image is unreadable) — same rule Elementor applies to its side-thumbs gallery. */
@media (max-width: 480px) { /* thumbs on mobile */
    .commerce-detail-gallery--thumbs-left, .commerce-detail-gallery--thumbs-right { grid-template-columns: minmax(0, 1fr); }
    .commerce-detail-gallery--thumbs-left .commerce-detail-main-image, .commerce-detail-gallery--thumbs-right .commerce-detail-main-image { grid-column: 1; grid-row: 1; }
    .commerce-detail-gallery--thumbs-left .commerce-detail-thumbnails, .commerce-detail-gallery--thumbs-right .commerce-detail-thumbnails { grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; margin-top: 10px; }
}

/* ═══ Decomposed cart / checkout pages (« Panier (blocs) », « Paiement (blocs) ») ═══
   The blocks reuse the monolith's inner classes; these rules cover the block roots,
   the composed layouts (bootstrap columns instead of the monolith's CSS grid) and the
   Réglages ▸ Style variables of the new blocks. */
.commerce-cart-page--composed .commerce-page-title, .commerce-checkout-page--composed .commerce-page-title { margin-bottom: 1.5rem; }
[class*="col-"].commerce-cart-sidebar, [class*="col-"].commerce-checkout-sidebar { align-self: flex-start; }
[class*="col-"].commerce-checkout-sidebar { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.commerce-cart-items.commerce-loading { padding: 3rem 1rem; }
.commerce-cart-items .commerce-cart-item-img, .commerce-cart-items .commerce-cart-addon-img { width: var(--cx-thumb-size, 80px); height: var(--cx-thumb-size, 80px); border-radius: var(--cx-img-radius, var(--commerce-radius)); }
.commerce-cart-item-img--empty { display: flex; align-items: center; justify-content: center; }
.commerce-cart-items--compact .commerce-cart-item { padding: .75rem 0; gap: .75rem; }
.commerce-cart-items--compact .commerce-cart-item-img { width: var(--cx-thumb-size, 56px); height: var(--cx-thumb-size, 56px); }
.commerce-cart-items .commerce-cart-item-name { color: var(--cx-color, inherit); font-size: var(--cx-font-size, inherit); }
.commerce-cart-items .commerce-cart-item-total { color: var(--cx-price-color, inherit); }
.commerce-cart-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.25rem; align-items: var(--cx-items, stretch); }
.commerce-cart-actions--inline { flex-direction: row; flex-wrap: wrap; justify-content: var(--cx-justify, flex-start); }
.commerce-cart-actions .commerce-btn { width: var(--cx-btn-width, 100%); }
.commerce-cart-actions--inline .commerce-btn { width: var(--cx-btn-width, auto); flex: 1 1 auto; }
.commerce-empty-cta { width: auto !important; margin-top: 1.25rem; display: inline-flex; align-items: center; gap: .5rem; }
.commerce-cart-empty .commerce-empty-title { color: var(--cx-color, var(--commerce-text)); font-size: var(--cx-font-size, 1.15rem); font-weight: var(--cx-font-weight, 600); text-transform: var(--cx-text-transform, none); }
.commerce-cart-totals, .commerce-checkout-summary { font-size: var(--cx-font-size, inherit); color: var(--cx-color, inherit); }
.commerce-cart-totals .commerce-totals-row, .commerce-checkout-summary .commerce-totals-row { font-weight: var(--cx-font-weight, inherit); }
.commerce-cart-totals .commerce-totals-row.grand-total, .commerce-checkout-summary .commerce-totals-row.grand-total { color: var(--cx-price-color, inherit); }
.commerce-totals-row--detail { font-size: .8rem; padding-left: 1rem; }
.commerce-totals-muted { color: var(--commerce-text-muted); font-size: .85rem; }
.commerce-totals-row--strong { font-weight: 600; }
.commerce-totals-line__img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; margin-right: .5rem; vertical-align: middle; }
.commerce-coupon-title { font-size: .95rem; font-weight: 600; margin: 0 0 .5rem; }
.commerce-checkout-continue { margin-top: 1rem; text-align: var(--cx-align, inherit); }
.commerce-checkout-continue .commerce-btn { width: var(--cx-btn-width, 100%); }
.commerce-checkout-continue-note { margin: .5rem 0 0; font-size: .8rem; color: var(--commerce-text-muted); }
.commerce-checkout-contact, .commerce-checkout-billing, .commerce-checkout-shipping, .commerce-checkout-shipping-method { color: var(--cx-color, inherit); }
.commerce-checkout-contact label, .commerce-checkout-billing label, .commerce-checkout-shipping label, .commerce-checkout-shipping-method .commerce-shipping-option__title { font-size: var(--cx-font-size, inherit); }
.commerce-checkout-shipping-method .commerce-shipping-option.is-selected { border-color: var(--cx-selected-color, var(--commerce-primary)); box-shadow: 0 0 0 1px var(--cx-selected-color, var(--commerce-primary)); }
/* Stepper: active colour + « bar » style */
.commerce-checkout-stepper .commerce-stepper-label { font-size: var(--cx-font-size, inherit); color: var(--cx-color, inherit); }
.commerce-checkout-stepper .commerce-stepper-step.is-active .commerce-stepper-dot { background: var(--cx-active-color, var(--commerce-primary)); border-color: var(--cx-active-color, var(--commerce-primary)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cx-active-color, var(--commerce-primary)) 15%, transparent); }
.commerce-stepper--bar { gap: .5rem; }
.commerce-stepper--bar .commerce-stepper-dot, .commerce-stepper--bar .commerce-stepper-line { display: none; }
.commerce-stepper--bar .commerce-stepper-step { flex: 1 1 0; flex-direction: row; justify-content: center; padding-bottom: .6rem; border-bottom: 3px solid var(--commerce-border); }
.commerce-stepper--bar .commerce-stepper-step.is-active { border-bottom-color: var(--cx-active-color, var(--commerce-primary)); }
.commerce-stepper--bar .commerce-stepper-step.is-done { border-bottom-color: var(--commerce-success); }
/* Payment tabs variants + active colour */
.commerce-payment-tabs--list { flex-direction: column; }
.commerce-payment-tabs--list .commerce-payment-tab { justify-content: flex-start; }
.commerce-payment-tabs--compact .commerce-payment-tab { padding: .5rem .75rem; font-size: .85rem; }
.commerce-checkout-payment .commerce-payment-tab.active { border-color: var(--cx-active-color, var(--commerce-primary)); color: var(--cx-active-color, var(--commerce-primary)); }
/* Author intent — a SET button trait beats the site's CSS on the cart / checkout buttons */
[style*="--cx-btn-bg:"] .commerce-cart-checkout-btn, [style*="--cx-btn-bg:"] .commerce-checkout-continue-btn, [style*="--cx-btn-bg:"].commerce-checkout-payment .commerce-btn-primary, [style*="--cx-btn-bg:"].commerce-cart-empty .commerce-empty-cta, [style*="--cx-btn-bg:"].commerce-cart-coupon .commerce-btn { background: var(--cx-btn-bg) !important; border-color: var(--cx-btn-bg) !important; }
[style*="--cx-btn-color:"] .commerce-cart-checkout-btn, [style*="--cx-btn-color:"] .commerce-checkout-continue-btn, [style*="--cx-btn-color:"].commerce-checkout-payment .commerce-btn-primary, [style*="--cx-btn-color:"].commerce-cart-empty .commerce-empty-cta, [style*="--cx-btn-color:"].commerce-cart-coupon .commerce-btn { color: var(--cx-btn-color) !important; }
[style*="--cx-btn-hover-bg:"] .commerce-cart-checkout-btn:hover, [style*="--cx-btn-hover-bg:"] .commerce-checkout-continue-btn:hover, [style*="--cx-btn-hover-bg:"].commerce-checkout-payment .commerce-btn-primary:hover { background: var(--cx-btn-hover-bg) !important; border-color: var(--cx-btn-hover-bg) !important; }
[style*="--cx-btn-radius:"] .commerce-cart-checkout-btn, [style*="--cx-btn-radius:"] .commerce-cart-continue-btn, [style*="--cx-btn-radius:"] .commerce-checkout-continue-btn, [style*="--cx-btn-radius:"].commerce-checkout-payment .commerce-btn, [style*="--cx-btn-radius:"].commerce-cart-empty .commerce-empty-cta, [style*="--cx-btn-radius:"].commerce-cart-coupon .commerce-btn, [style*="--cx-btn-radius:"].commerce-cart-coupon input { border-radius: var(--cx-btn-radius) !important; }
[style*="--cx-btn-pad:"] .commerce-cart-checkout-btn, [style*="--cx-btn-pad:"] .commerce-checkout-continue-btn, [style*="--cx-btn-pad:"].commerce-checkout-payment .commerce-btn-primary { padding: var(--cx-btn-pad) !important; }
[style*="--cx-btn-font-size:"] .commerce-cart-checkout-btn, [style*="--cx-btn-font-size:"] .commerce-checkout-continue-btn, [style*="--cx-btn-font-size:"].commerce-checkout-payment .commerce-btn-primary { font-size: var(--cx-btn-font-size) !important; }
[style*="--cx-color:"].commerce-cart-totals, [style*="--cx-color:"].commerce-checkout-summary, [style*="--cx-color:"].commerce-cart-totals .commerce-totals-row, [style*="--cx-color:"].commerce-checkout-summary .commerce-totals-row, [style*="--cx-color:"].commerce-cart-items .commerce-cart-item-name, [style*="--cx-color:"].commerce-checkout-stepper .commerce-stepper-label, [style*="--cx-color:"].commerce-cart-empty .commerce-empty-title { color: var(--cx-color) !important; }
[style*="--cx-font-size:"].commerce-cart-totals .commerce-totals-row, [style*="--cx-font-size:"].commerce-checkout-summary .commerce-totals-row, [style*="--cx-font-size:"].commerce-cart-items .commerce-cart-item-name, [style*="--cx-font-size:"].commerce-checkout-stepper .commerce-stepper-label, [style*="--cx-font-size:"].commerce-cart-empty .commerce-empty-title, [style*="--cx-font-size:"].commerce-checkout-contact label, [style*="--cx-font-size:"].commerce-checkout-billing label { font-size: var(--cx-font-size) !important; }
[style*="--cx-price-color:"].commerce-cart-totals .commerce-totals-row.grand-total, [style*="--cx-price-color:"].commerce-checkout-summary .commerce-totals-row.grand-total, [style*="--cx-price-color:"].commerce-cart-items .commerce-cart-item-total { color: var(--cx-price-color) !important; }
@media (max-width: 768px) {
    [class*="col-"].commerce-checkout-sidebar { position: static; }
    .commerce-cart-actions--inline { flex-direction: column; }
}

/* ── Rétractation (page /retractation) ───────────────────────────────────── */
.commerce-withdrawal { max-width: 720px; }
.commerce-withdrawal-card {
  background: var(--commerce-surface, #fff);
  border: 1px solid var(--commerce-border, #e2e8f0);
  border-radius: 12px;
  padding: 1.5rem;
  font-size: .92rem;
  line-height: 1.6;
}
.commerce-withdrawal-card p { margin: 0 0 .75rem; }
.commerce-withdrawal-intro { font-size: 1rem; }
.commerce-withdrawal-deadline {
  display: inline-block;
  background: #fff7ed; color: #9a3412;
  border-radius: 999px; padding: .25rem .75rem;
  font-size: .85rem; font-weight: 600;
}
.commerce-withdrawal-items { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.commerce-withdrawal-items td { padding: .5rem 0; border-bottom: 1px solid var(--commerce-border, #e2e8f0); }
.commerce-withdrawal-variant { display: block; font-size: .78rem; color: var(--commerce-muted, #64748b); }
.commerce-withdrawal-qty { text-align: right; width: 60px; color: var(--commerce-muted, #64748b); }
.commerce-withdrawal-total { text-align: right; width: 120px; font-weight: 600; white-space: nowrap; }
.commerce-withdrawal-amount {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 1rem; margin: 0 0 1.25rem;
}
.commerce-withdrawal-amount strong { font-size: 1.15rem; }
.commerce-withdrawal-reason { display: block; margin-bottom: 1rem; }
.commerce-withdrawal-reason span {
  display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem;
}
.commerce-withdrawal-reason .commerce-input { width: 100%; }
.commerce-withdrawal-submit { width: 100%; font-size: 1rem; padding: .85rem 1rem; }
.commerce-withdrawal-help { font-size: .8rem; color: var(--commerce-muted, #64748b); margin-top: .85rem; }
.commerce-withdrawal-error {
  background: #fee2e2; color: #991b1b;
  border-radius: 8px; padding: .55rem .75rem; font-size: .85rem; margin-bottom: .75rem;
}
.commerce-withdrawal-blocked { font-size: 1rem; }
.commerce-withdrawal-done { border-color: #059669; }
.commerce-withdrawal-badge {
  display: inline-block; background: #d1fae5; color: #065f46;
  border-radius: 999px; padding: .3rem .85rem;
  font-size: .85rem; font-weight: 700; margin-bottom: .75rem;
}
.commerce-withdrawal-number strong { display: block; font-size: 1.35rem; letter-spacing: .02em; }
.commerce-withdrawal-next { margin: 0 0 1.25rem; padding-left: 1.1rem; font-size: .88rem; }
.commerce-withdrawal-next li { margin-bottom: .3rem; }

/* ── Contributions environnementales sous le prix (fiche article) ────────── */
.commerce-detail-contributions {
  list-style: none;
  margin: .2rem 0 0;
  padding: 0;
  font-size: .82rem;
  color: var(--commerce-muted, #64748b);
  line-height: 1.5;
}
.commerce-detail-contributions li::before { content: "· "; opacity: .6; }
.commerce-cart-item-contributions { font-size: .78rem; color: var(--commerce-muted, #64748b); margin-top: .15rem; }

/* ── Tunnel : case « facturation identique » hors du cadre + légende de l'astérisque (recette Laura 23/09/2026) ── */
.commerce-billing-same {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: -.5rem 0 1.5rem .25rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--commerce-text, inherit);
}
.commerce-billing-same .commerce-native-checkbox { width: 18px; height: 18px; flex: 0 0 auto; }
.commerce-required-legend {
  margin: -.25rem 0 .75rem;
  font-size: .8rem;
  color: var(--commerce-muted, #64748b);
}
/* Deux colonnes dans le tunnel (prénom / nom, code postal / ville, SIREN / SIRET) : la règle de la carte
   d'adresse du compte (.commerce-form-row en colonne) ne doit pas empiler les champs ici. */
.commerce-checkout-section .commerce-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) {
  .commerce-checkout-section .commerce-form-row { grid-template-columns: 1fr; }
}

/* ── Zoom : vidéo agrandie et bouton d'ouverture sur le lecteur (recette Laura 23/09/2026) ── */
.commerce-zoom-video { width: min(96vw, 1280px); aspect-ratio: 16 / 9; max-height: 90vh; cursor: default; box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #000; }
.commerce-zoom-video iframe, .commerce-zoom-video video { width: 100%; height: 100%; border: 0; display: block; }
.commerce-detail-main-video { position: relative; }
.commerce-gallery-zoom {
  position: absolute; top: .6rem; right: .6rem; z-index: 3;
  width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.92); color: #0b0f0c; font-size: 1.1rem; line-height: 1;
  cursor: zoom-in; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.commerce-gallery-zoom:hover { background: #fff; }

/* ── Compte client ▸ Mes adresses : composant d'adresse assistée dans la grille pal-* ── */
.pal-address-geo .commerce-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.pal-address-geo .commerce-form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.pal-address-geo .commerce-form-group input, .pal-address-geo .commerce-form-group select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--pal-border, #e2e8f0); border-radius: 8px; font-size: 14px; background: var(--pal-input-bg, #fff);
}
@media (max-width: 640px) { .pal-address-geo .commerce-form-row { grid-template-columns: 1fr; } }

/* ── Impression du récapitulatif de commande (recette Laura 23/09/2026) ─────────
   La page imprimée ne garde que la commande : ni entête, ni pied de page, ni menu du compte,
   ni bandeau de démonstration, ni boutons. */
.pal-account-page-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
@media print {
  header, footer, nav, aside,
  .pd-demo-banner, .pd-demo-badge, .pd-a11y-widget, #pd-a11y, .commerce-toast, .commerce-no-print,
  .pal-account-sidebar, .commerce-btn, .commerce-confirmation-actions, .commerce-order-messages,
  .commerce-return-form, .commerce-withdrawal-box { display: none !important; }
  body { background: #fff !important; color: #000 !important; padding-top: 0 !important; }
  .pal-account-shell { display: block !important; }
  .pal-account-main, .commerce-confirmation, .commerce-page { max-width: none !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; }
  .pal-card, .commerce-checkout-section, .commerce-card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
  a { text-decoration: none !important; color: inherit !important; }
}

/* ── Composition d'un produit fabriqué (onglet « Composition », mode IKEA — 24/09/2026) ── */
.commerce-packages-intro { margin: 0 0 14px; font-weight: 600; color: #3b342b; }
.commerce-packages-table thead th { width: auto; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #8a7f70; font-weight: 600; }
.commerce-packages-table th.num, .commerce-packages-table td.num { text-align: right; white-space: nowrap; width: 1%; }
.commerce-packages-table tfoot th { width: auto; text-align: right; }
.commerce-packages-table tfoot td, .commerce-packages-table tfoot th { border-bottom: 0; border-top: 2px solid #e3dccd; }

/* ── Pictogrammes de la fiche article Colibase (Bois FSC, Fragile, À monter…) — 24/09/2026 ── */
/* Normes / pictogrammes Colibase en « puces » (28/09/2026) : fond blanc — les logos JPEG de Colibase ont un
   fond blanc qui découpait des carrés sur la page —, logo et libellé côte à côte, sans retour à la ligne.
   Variables : --cx-picto-size (logo, trait « IconSize »), --cx-picto-bg, --cx-picto-border, --cx-picto-color. */
.commerce-pictos { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 18px; padding: 0; --cx-picto-size: 34px; }
.commerce-picto { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; width: auto; text-align: left; min-height: calc(var(--cx-picto-size) + 10px); padding: 5px 14px 5px 5px; background: var(--cx-picto-bg, #fff); border: 1px solid var(--cx-picto-border, #e6dfd2); border-radius: 999px; box-shadow: 0 1px 2px rgba(59, 52, 43, .04); }
.commerce-picto img { flex: none; width: var(--cx-picto-size); height: var(--cx-picto-size); object-fit: contain; display: block; border-radius: 6px; }
.commerce-picto-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: var(--cx-picto-size); height: var(--cx-picto-size); padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .03em; color: #5a5043; background: #f3eee4; }
.commerce-picto-label { font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--cx-picto-color, #3b342b); white-space: nowrap; }
/* Sans libellés (trait « ShowLabels » décoché) : pastilles rondes, logo seul, libellé en info-bulle. */
.commerce-pictos--nolabels .commerce-picto { padding: 5px; }
.commerce-pictos--nolabels .commerce-picto-label { display: none; }

/* ── Liens ERP (articles associés / de remplacement) et notices téléchargeables — 24/09/2026 ── */
.commerce-related-strip + .commerce-related-strip { margin-top: 2.25rem; }
.commerce-card-link-note { font-size: 12px; line-height: 1.35; color: #7a6f60; margin: 2px 0 4px; }
.commerce-replacement-notice { margin: 12px 0 4px; padding: 12px 14px; border: 1px solid #e3dccd; border-radius: 10px; background: #faf7f1; }
.commerce-replacement-intro { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #3b342b; }
.commerce-replacement-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.commerce-replacement-item { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 4px 12px; text-decoration: none; color: inherit; }
.commerce-replacement-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; grid-row: span 2; }
.commerce-replacement-name { font-weight: 600; font-size: 14px; }
.commerce-replacement-note { grid-column: 2; font-size: 12px; color: #7a6f60; }
.commerce-replacement-price { grid-column: 3; grid-row: 1; font-weight: 600; white-space: nowrap; }
.commerce-replacement-item:hover .commerce-replacement-name { text-decoration: underline; }
.commerce-docs { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 8px; }
.commerce-doc-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid #e3dccd; border-radius: 10px; text-decoration: none; color: inherit; background: #fff; }
.commerce-doc-link:hover { border-color: #cfc6b6; background: #faf7f1; }
.commerce-doc-icon { display: inline-flex; color: #8a7f70; }
.commerce-doc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.commerce-doc-title { font-weight: 600; }
.commerce-doc-meta { font-size: 12px; color: #7a6f60; }
@media print { .commerce-replacement-notice, .commerce-docs { display: none !important; } }

/* Composition : totaux du produit entier quand les colis n'ont pas leur propre poids / volume (25/09/2026). */
.commerce-packages-totals { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: .75rem 0 0; font-size: .95em; }

/* ── « Produits mis en avant » : en-tête de section + habillage éditorial (29/09/2026) ─────────────
   Classes pcard* volontairement partagées avec les cartes importées des sites (la feuille du site,
   servie après celle-ci, garde le dernier mot) ; tout le reste est préfixé cx-showcase / cx-badge. */
.cx-showcase { --cx-sc-gap: var(--commerce-grid-gap, 28px); color: inherit; }
.cx-showcase__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 44px); }
/* Deux classes exprès : la feuille du site (.eyebrow, .h2, .btn-inline) ne doit pas reprendre la main sur les couleurs de l'en-tête. */
.cx-showcase .cx-showcase__eyebrow { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--commerce-primary, #14807E); margin-bottom: 10px; }
.cx-showcase .cx-showcase__title { margin: 0; font-family: var(--font-display, var(--cx-font-family, Georgia, 'Times New Roman', serif)); font-weight: 400; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; letter-spacing: -.01em; color: inherit; }
.cx-showcase .cx-showcase__cta { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 13px; letter-spacing: .13em; text-transform: uppercase; color: inherit; text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid currentColor; transition: gap .2s ease, opacity .2s ease; }
.cx-showcase .cx-showcase__cta:hover { gap: 14px; opacity: .85; }
.cx-showcase .cx-showcase__cta .ico { width: 16px; height: 16px; }
.cx-showcase .cx-showcase__grid { display: grid; grid-template-columns: repeat(var(--cx-cols, 4), minmax(0, 1fr)); gap: var(--cx-sc-gap); }
@media (max-width: 1100px) { .cx-showcase .cx-showcase__grid { grid-template-columns: repeat(var(--cx-cols-md, 3), minmax(0, 1fr)); } }
@media (max-width: 760px) { .cx-showcase .cx-showcase__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 460px) { .cx-showcase .cx-showcase__grid { grid-template-columns: minmax(0, 1fr); } }
.cx-showcase .cx-showcase__card { position: relative; display: flex; flex-direction: column; border-radius: var(--commerce-radius, 6px); background: transparent; color: inherit; transition: transform .25s ease, box-shadow .25s ease; }
.cx-showcase--solid .cx-showcase__card { background: var(--cx-card-bg, #F6F1E8); color: var(--cx-card-text, #16140F); padding: 16px; box-shadow: 0 1px 0 rgba(0, 0, 0, .04); }
.cx-showcase--solid .cx-showcase__card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .45); }
.cx-showcase .pcard__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: max(0px, calc(var(--commerce-radius, 6px) - 2px)); background: var(--cx-media-bg, #E9E2D6); color: inherit; }
.cx-showcase .pcard__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.cx-showcase .cx-showcase__placeholder { background: linear-gradient(135deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .12)); }
.cx-showcase .cx-showcase__card:hover .pcard__img { transform: scale(1.04); }
.cx-showcase .pcard__flags { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.cx-showcase .cx-badge { display: inline-block; padding: 5px 9px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; color: #fff; background: var(--cx-badge-bg, #14807E); white-space: nowrap; }
.cx-showcase .cx-badge--promo { background: var(--cx-badge-promo, #B85042); }
.cx-showcase .cx-badge--new { background: var(--cx-badge-new, #14807E); }
.cx-showcase .cx-badge--best { background: var(--cx-badge-best, #7A6A4F); }
.commerce-card-badge.cx-badge--promo { background: var(--cx-badge-promo, var(--cx-badge-bg, #B85042)); }
.commerce-card-badge.cx-badge--new { background: var(--cx-badge-new, var(--cx-badge-bg, #14807E)); }
.commerce-card-badge.cx-badge--best { background: var(--cx-badge-best, var(--cx-badge-bg, #7A6A4F)); }
.cx-showcase .pcard__fav { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 999px; background: rgba(246, 241, 232, .92); color: #16140F; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px); text-decoration: none; }
.cx-showcase .pcard__fav .ico { width: 19px; height: 19px; }
.cx-showcase .pcard__body { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; }
.cx-showcase .pcard__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--commerce-primary, #14807E); }
.cx-showcase .pcard__name { margin: 0; font-family: var(--font-display, var(--cx-font-family, Georgia, serif)); font-weight: 500; font-size: 1.35rem; line-height: 1.15; letter-spacing: -.01em; }
.cx-showcase .pcard__name a { color: inherit; text-decoration: none; }
.cx-showcase .pcard__desc { margin: 0; font-size: .92rem; line-height: 1.45; color: inherit; opacity: .8; }
.cx-showcase .pcard__name, .cx-showcase .pcard__price, .cx-showcase .pcard__specs { color: inherit; }
.cx-showcase .pcard__specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cx-showcase .pcard__specs span { font-size: 11px; padding: 4px 9px; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: 999px; }
.cx-showcase .pcard__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 12px; }
.cx-showcase .pcard__price { font-size: var(--cx-price-size, 1.2rem); font-weight: 700; color: var(--cx-price-color, inherit); }
.cx-showcase .pcard__price small { font-size: .7em; font-weight: 500; opacity: .75; margin-right: 4px; }
.cx-showcase .pcard__price s { font-size: .8em; font-weight: 400; opacity: .6; margin-left: 6px; color: var(--cx-compare-color, inherit); }
.cx-showcase .pcard__cta { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--commerce-primary, #14807E); text-decoration: none; white-space: nowrap; transition: gap .2s ease; }
.cx-showcase .pcard__cta:hover { gap: 10px; }
.cx-showcase .pcard__cta .ico { width: 18px; height: 18px; }
.cx-showcase .pcard__body .commerce-card-actions { margin-top: 10px; }
.cx-showcase--commerce .commerce-card-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--commerce-primary, #2563eb); margin-bottom: 4px; }
.cx-showcase--commerce .commerce-card-desc { font-size: .9rem; opacity: .8; margin: 4px 0 6px; }
.cx-showcase--commerce .commerce-card-title a { color: inherit; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .cx-showcase *, .cx-showcase *::before, .cx-showcase *::after { transition: none !important; } }

/* /retractation sans commande : liste des commandes ouvertes à la rétractation (recette Laura 29/09/2026). */
.commerce-withdrawal-orders { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.commerce-withdrawal-order { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; padding: .8rem 1rem; border: 1px solid var(--commerce-border, #e5e7eb); border-radius: var(--commerce-radius, 10px); text-decoration: none; color: inherit; }
.commerce-withdrawal-order:hover { border-color: var(--commerce-primary, #2563eb); }
.commerce-withdrawal-order__number { font-weight: 700; }
.commerce-withdrawal-order__meta { color: var(--commerce-text-muted, #6b7280); font-size: .88rem; }
@media (max-width: 600px) { .commerce-withdrawal-order { grid-template-columns: 1fr; } }

/* Filtres : mise à jour en cours (recette Laura 30/09/2026 : « ça prend longtemps » sans retour visuel). */
.commerce-filters-panel.is-busy .commerce-filter-acc, .commerce-filters-panel.is-busy .commerce-filter-acc--plain { opacity: .6; transition: opacity .15s; }
.commerce-filters-panel.is-busy { cursor: progress; }
.commerce-filters-busy { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--commerce-text-muted, #6b7280); margin: 0 0 .75rem; }
/* Avis : « Votre avis » (fiche produit) et aides de saisie. */
.commerce-review-own { border: 1px solid var(--commerce-border, #e5e7eb); border-radius: var(--commerce-radius, 10px); padding: 1rem 1.1rem; margin-bottom: 1.25rem; background: var(--commerce-bg, #fff); }
.commerce-review-own__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.commerce-review-own__title { font-weight: 700; }
.commerce-review-own__state { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: .15rem .5rem; border-radius: 999px; background: #f3f4f6; color: #374151; }
.commerce-review-own__state.is-approved { background: #dcfce7; color: #166534; }
.commerce-review-own__state.is-pending { background: #fef3c7; color: #92400e; }
.commerce-review-own__state.is-rejected { background: #fee2e2; color: #991b1b; }
.commerce-review-own__actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.commerce-review-own__confirm { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; }
.commerce-btn.commerce-btn-sm { padding: .35rem .7rem; font-size: .82rem; }
.commerce-btn.commerce-btn-danger { background: #991b1b; color: #fff; border-color: #991b1b; }
.commerce-reviews-hint { font-size: .8rem; color: var(--commerce-text-muted, #6b7280); margin: -.35rem 0 .6rem; }
.commerce-reviews-hint.is-short { color: #991b1b; }
.commerce-reviews-form__actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }