/**
 * Vitrine — module Commerce
 */

.section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.section-header h2 { margin: 0 0 2px; font-size: var(--font-size-lg); }
.section-header p { margin: 0; }

/* ── Bannières ── */

.banner-list { display: flex; flex-direction: column; gap: var(--space-sm); }

.banner-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

/* Bannière terminée : atténuée sans être cachée. La retirer de la
   liste ferait croire à une suppression. */
.banner-row.is-expired { opacity: 0.55; }

.banner-row.is-dragging { opacity: 0.4; }

.banner-row__grip {
    color: var(--text-tertiary);
    cursor: grab;
    flex-shrink: 0;
}

.banner-row__grip:active { cursor: grabbing; }

.banner-row__thumb {
    flex-shrink: 0;
    width: 88px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--bg-surface-secondary);
    color: var(--text-tertiary);
    overflow: hidden;
}

.banner-row__thumb img { width: 100%; height: 100%; object-fit: cover; }

.banner-row__body { flex: 1; min-width: 0; }
.banner-row__body strong { display: block; font-size: var(--font-size-sm); }

.banner-row__body span {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.banner-row__body em {
    font-style: normal;
    font-size: 11px;
    color: var(--text-tertiary);
}

.banner-row__actions { display: flex; gap: 2px; flex-shrink: 0; }

/* ── Mise en avant ──

   Deux colonnes côte à côte : voir ce qui est retenu et ce qui
   reste disponible en même temps évite les allers-retours. */
.featured-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.featured-col h3 {
    margin: 0 0 var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.featured-col h3 span {
    display: inline-block;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    background: var(--bg-surface-secondary);
    font-size: 11px;
    text-align: center;
}

/* Hauteur plafonnée : une liste de cent produits pousserait le reste
   de la page hors de vue. */
.featured-list {
    max-height: 480px;
    overflow-y: auto;
    padding-right: 4px;
}

.featured-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px var(--space-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    margin-bottom: 6px;
}

.featured-row.is-dragging { opacity: 0.4; }

.featured-row__grip { color: var(--text-tertiary); cursor: grab; flex-shrink: 0; }

.featured-row__thumb {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--bg-surface-secondary);
    color: var(--text-tertiary);
    overflow: hidden;
}

.featured-row__thumb img { width: 100%; height: 100%; object-fit: cover; }

.featured-row > span {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Catégories ── */

.category-list { display: flex; flex-direction: column; gap: var(--space-sm); }

.category-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.category-row__thumb {
    --accent: var(--bg-surface-secondary);

    flex-shrink: 0;
    width: 64px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--text-tertiary);
    overflow: hidden;
}

.category-row__thumb img { width: 100%; height: 100%; object-fit: cover; }

.category-row__body { flex: 1; min-width: 0; }
.category-row__body strong { display: block; font-size: var(--font-size-sm); }

.category-row__body em {
    font-style: normal;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

/* ── Choix d'image ── */

.media-pick {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.media-pick__preview {
    flex-shrink: 0;
    width: 120px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface-secondary);
    color: var(--text-tertiary);
    overflow: hidden;
}

.media-pick__preview img { width: 100%; height: 100%; object-fit: cover; }

.form-input--color { width: 64px; height: 38px; padding: 3px; cursor: pointer; }


@media (max-width: 900px) {
    .featured-split { grid-template-columns: 1fr; }
    .featured-list { max-height: 320px; }
}

/* ── Barre d'enregistrement ──

   Fixée en bas, centrée, elle n'apparaît qu'une fois quelque chose
   modifié. Un bouton toujours visible se fait oublier. */
.save-bar {
    position: fixed;
    left: 50%;
    bottom: var(--space-lg);
    transform: translateX(-50%);
    z-index: 60;

    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    box-shadow: var(--shadow-lg);
}

.save-bar__hint {
    font-size: var(--font-size-sm);
    color: var(--warning-dark, #b45309);
    white-space: nowrap;
}

/* ── Champ média ──

   L'aperçu EST le bouton : deux éléments côte à côte, une vignette
   morte et un bouton, faisaient hésiter sur quoi cliquer. */
.media-drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-sm);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.media-drop:hover { border-color: var(--primary-500); }

.media-drop__preview {
    flex-shrink: 0;
    width: 96px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--bg-surface-secondary);
    color: var(--text-tertiary);
    overflow: hidden;
}

.media-drop__preview img { width: 100%; height: 100%; object-fit: cover; }

.media-drop__text { flex: 1; min-width: 0; }
.media-drop__text strong { display: block; font-size: var(--font-size-sm); }

.media-drop__text em {
    font-style: normal;
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.media-drop__clear {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-tertiary);
    font-size: 12px;
}

.media-drop__clear:hover { background: var(--bg-surface-secondary); color: var(--danger, #dc2626); }

.form-label__opt {
    margin-left: 6px;
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--text-tertiary);
}

.form-sep { margin: var(--space-lg) 0; border: 0; border-top: 1px solid var(--border-color); }

.form-section-title {
    margin: 0 0 var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

/* ── Durée par bannière ── */

.banner-row__duration {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.banner-row__duration input { width: 58px; text-align: center; }

.banner-row__duration span { font-size: var(--font-size-xs); color: var(--text-tertiary); }

/* Bannière éteinte : atténuée, mais toujours là. */
.banner-row.is-off { opacity: 0.5; }


/* ── Ligne d'interrupteur ──

   Le libellé à gauche, l'interrupteur à droite. Le composant
   `.form-switch` du back-office ne porte que le contrôle ; c'est à
   la page de l'aligner. */
.switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.switch-row > label:first-child,
.switch-row > span:first-child {
    font-size: var(--font-size-sm);
    cursor: pointer;
}

/* ── Disposition ──

   Réglages à gauche, liste des bannières à droite : on règle d'un
   côté en voyant la liste de l'autre, plutôt qu'en faisant défiler
   entre deux cartes. */
.sf-split {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.8fr);
    gap: var(--space-lg);
    align-items: start;
}

/* Colonne principale : largeur libre, elle porte la liste. */
.sf-split__main { min-width: 0; }

/* Réglages collants : ils restent visibles pendant qu'on fait défiler
   la liste des bannières, à côté. */
.sf-split__side > .card {
    position: sticky;
    top: var(--space-lg);
}

/* Cartes espacées : collées, elles se lisent comme un seul bloc et
   on ne distingue plus les sujets. */
.shop-panel .card + .card,
.sf-split + .card { margin-top: var(--space-lg); }

.sf-split .card { margin: 0; }

/* Réglages aérés : un groupe par ligne, séparés d'un filet léger. */
.sf-split__side .form-group + .form-group {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}

.sf-split__side .form-row {
    display: block;
}

.sf-split__side .form-row .form-group + .form-group {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
}

/* La bascule de durée tient sur deux lignes dans une colonne
   étroite : l'empiler vaut mieux que la tronquer. */
.sf-split__side .btn-toggle { width: 100%; }
.sf-split__side .btn-toggle__option { flex: 1; text-align: center; font-size: var(--font-size-xs); }

@media (max-width: 1100px) {
    .sf-split { grid-template-columns: 1fr; }
    .sf-split__side .card { position: static; }
}