/* KINSTILL - Bannières avec photo en filigrane
   La photo reste derrière le contenu de la bannière (atténuée, fondue sur les bords),
   le crédit photo est placé dans le flux (jamais superposé au texte). */

.kinstill-hero-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--light, #FAF8F5);
}

/* Couche photo : confinée à la bannière, ne déborde jamais sur les sections suivantes */
.kinstill-banner-media-layer {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.kinstill-banner-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
    /* Flou très léger (netteté conservée) */
    filter: blur(0.6px);
    transition: opacity 0.5s ease;
    /* Fondu doux vers le bas : aucune coupure franche avec le contenu suivant */
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}
.kinstill-banner-photo.fade-out { opacity: 0; }
.kinstill-banner-photo.fade-in { opacity: 0.85; }

/* Voile : zone centrale plus claire pour garder le texte lisible, visages visibles sur les côtés */
.kinstill-banner-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 34% 72% at 50% 50%, rgba(250, 248, 245, 0.78) 0%, rgba(250, 248, 245, 0.45) 60%, rgba(250, 248, 245, 0) 100%);
}

/* Contenu toujours au premier plan */
.kinstill-banner-content,
.kinstill-hero-banner > .container {
    position: relative;
    z-index: 1;
}
.kinstill-banner-card,
.kinstill-hero-banner .kinstill-hero-plate {
    position: relative;
    z-index: 1;
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Crédit photo : dans le flux, sous le contenu, aligné à droite -> pas de superposition */
.kinstill-banner-credit {
    position: relative;
    z-index: 1;
    align-self: flex-end;
    margin: 1.25rem 1rem 0 auto;
    padding-right: 0.5rem;
    font-size: 0.7rem;
    line-height: 1.3;
}
.watermark-credit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--ink, #2C3539);
    backdrop-filter: blur(4px);
}
.watermark-credit-badge a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.watermark-credit-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent, #769784);
}

/* Mode sombre */
html[data-theme="dark"] .kinstill-hero-banner { background-color: #0f172a; }
html[data-theme="dark"] .kinstill-banner-photo { opacity: 0.7; }
html[data-theme="dark"] .kinstill-banner-scrim {
    background:
        radial-gradient(ellipse 34% 72% at 50% 50%, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0.45) 60%, rgba(15, 23, 42, 0) 100%);
}
html[data-theme="dark"] .watermark-credit-badge { background: rgba(15, 23, 42, 0.75); color: #e2e8f0; }

/* Mobile : photo plus discrète pour préserver la lisibilité */
@media (max-width: 640px) {
    .kinstill-banner-photo { opacity: 0.5; }
    .kinstill-banner-scrim {
        background: linear-gradient(to bottom, rgba(250, 248, 245, 0.7), rgba(250, 248, 245, 0.85));
    }
    html[data-theme="dark"] .kinstill-banner-scrim {
        background: linear-gradient(to bottom, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.85));
    }
}


/* ===== Carte de bannière (titre, badge) ===== */
.kinstill-banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary, #4A6B7C);
    background: rgba(74, 107, 124, 0.12);
    margin-bottom: 0.9rem;
}

/* ===== Page My Library : zone "Personal Library" ===== */
.library-page .kinstill-hero-banner { padding: 3.5rem 1rem 3rem; }
.library-page .kinstill-banner-card {
    max-width: 40rem;
    padding: 2rem 1.75rem 1.75rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 18px 50px -20px rgba(44, 53, 57, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.7);
}
.library-page .kinstill-banner-card h1 { margin: 0 0 0.4rem; }
.library-page .kinstill-banner-card p { margin: 0 auto; max-width: 30rem; opacity: 0.85; }

.library-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 1.5rem 0 0;
    padding: 0;
}
.library-hero-stat {
    padding: 0.8rem 0.5rem;
    border-radius: 1rem;
    background: rgba(250, 248, 245, 0.9);
    border: 1px solid rgba(74, 107, 124, 0.15);
}
.library-hero-stat dt {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--primary, #4A6B7C);
}
.library-hero-stat dd {
    margin: 0.15rem 0 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink, #2C3539);
}
#library-stat-latest { font-size: 1.15rem; padding-top: 0.2rem; }

.library-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 1.25rem;
}
.library-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.55rem 1.3rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--primary, #4A6B7C);
    background: #fff;
    border: 1px solid rgba(74, 107, 124, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.library-hero-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(44, 53, 57, 0.5); }
.library-hero-btn.is-primary { background: var(--primary, #4A6B7C); color: #fff; border-color: transparent; }
.library-hero-btn.is-primary:hover { background: #5a7a8a; }

html[data-theme="dark"] .library-page .kinstill-banner-card {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(148, 163, 184, 0.2);
    color: #e2e8f0;
}
html[data-theme="dark"] .library-hero-stat { background: rgba(30, 41, 59, 0.85); border-color: rgba(148, 163, 184, 0.2); }
html[data-theme="dark"] .library-hero-stat dd { color: #f1f5f9; }
html[data-theme="dark"] .library-hero-btn { background: #1e293b; color: #e2e8f0; border-color: rgba(148, 163, 184, 0.3); }
html[data-theme="dark"] .library-hero-btn.is-primary { background: var(--primary, #4A6B7C); color: #fff; }

@media (max-width: 480px) {
    .library-page .kinstill-banner-card { padding: 1.5rem 1rem; }
    .library-hero-stat dd { font-size: 1.25rem; }
    .library-hero-btn { width: 100%; justify-content: center; }
}

/* ===== My Library : photo bien plus visible ===== */
.library-page .kinstill-hero-banner { min-height: 30rem; padding-top: 4rem; padding-bottom: 3.5rem; }
.library-page .kinstill-banner-photo,
.library-page .kinstill-banner-photo.fade-in {
    opacity: 1;
    filter: blur(0.4px);
    -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}
/* Plus de voile derrière la photo : seule la carte protège le texte */
.library-page .kinstill-banner-scrim { background: linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(0,0,0,0)); }
.library-page .kinstill-banner-card {
    max-width: 34rem;
    background: rgba(255, 255, 255, 0.82);
}
html[data-theme="dark"] .library-page .kinstill-banner-photo { opacity: 0.9; }
html[data-theme="dark"] .library-page .kinstill-banner-card { background: rgba(15, 23, 42, 0.8); }

/* =====================================================================
   SYSTÈME GLOBAL DES BANNIÈRES (cohérence sur toutes les pages)
   Photo nette et pleinement visible + carte de texte vitrée, centrée,
   étroite : les visages restent libres sur les côtés.
   ===================================================================== */
.kinstill-hero-banner {
    min-height: clamp(21rem, 44vw, 30rem);
    padding: 3.5rem 1rem 2.75rem;
    justify-content: center;
}
.kinstill-banner-photo,
.kinstill-banner-photo.fade-in {
    opacity: 1;
    filter: blur(0.4px);
    -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
}
.kinstill-banner-scrim { background: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0)); }

.kinstill-banner-card,
.kinstill-hero-banner .kinstill-hero-plate {
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
    padding: 1.75rem 1.5rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.50);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.60);
    box-shadow: 0 20px 48px -15px rgba(44, 53, 57, 0.22);
    color: var(--ink, #2C3539);
}
/* Évite une double carte quand le conteneur et la plaque sont imbriqués */
.kinstill-banner-card .kinstill-hero-plate {
    background: transparent; border: 0; box-shadow: none; padding: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none; max-width: none;
}
.kinstill-banner-card > :first-child { margin-top: 0; }
.kinstill-banner-card > :last-child { margin-bottom: 0; }

/* Crédit photo discret et lisible sous la carte */
.kinstill-banner-credit { margin-top: 1.25rem; }

html[data-theme="dark"] .kinstill-banner-photo,
html[data-theme="dark"] .kinstill-banner-photo.fade-in { opacity: 0.92; }
html[data-theme="dark"] .kinstill-banner-card,
html[data-theme="dark"] .kinstill-hero-banner .kinstill-hero-plate {
    background: rgba(15, 23, 42, 0.54);
    border: 1px solid rgba(148, 163, 184, 0.20);
    box-shadow: 0 20px 48px -15px rgba(0, 0, 0, 0.45);
    color: #e2e8f0;
}
html[data-theme="dark"] .kinstill-banner-card .kinstill-hero-plate { background: transparent; border: 0; }

@media (max-width: 640px) {
    .kinstill-hero-banner { min-height: 19rem; padding: 2.5rem 0.75rem 2rem; }
    .kinstill-banner-photo,
    .kinstill-banner-photo.fade-in { opacity: 1; }
    .kinstill-banner-card,
    .kinstill-hero-banner .kinstill-hero-plate { padding: 1.25rem 1rem; background: rgba(255, 255, 255, 0.88); }
    html[data-theme="dark"] .kinstill-banner-card { background: rgba(15, 23, 42, 0.86); }
}

/* LIBRARY PAGE FULL BACKGROUND WATERMARK */
.library-page {
    background-image: url('https://images.unsplash.com/photo-1519689680058-324335c77eba?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&auto=format&fit=crop&w=1920&q=85');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}

/* No overlay - photo fully visible */

.library-page .kinstill-subpage-hero {
    background: transparent;
    border-bottom: none;
}

.library-page .kinstill-banner-media-layer {
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none;
}

.library-page .kinstill-banner-photo,
.library-page .kinstill-banner-photo.fade-in {
    opacity: 1 !important;
    filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.library-page .kinstill-banner-scrim {
    display: none;
}

.library-page .kinstill-banner-content {
    position: relative;
    z-index: 2;
}

.library-main-container {
    position: relative;
    z-index: 2;
}

/* ALL OTHER PAGES - PHOTO AS FULL PAGE BACKGROUND (no overlay) */
body:not(.upcoming-page) {
    position: relative;
}

body:not(.upcoming-page) main {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* La bannière héro : on enlève le clipping pour laisser passer la couche fixe */
body:not(.upcoming-page) .kinstill-subpage-hero,
body:not(.upcoming-page) .kinstill-hero-banner {
    background: transparent !important;
    overflow: visible !important;
    isolation: auto !important;
}

/* La couche photo du hero est étirée en fond de page fixe */
body:not(.upcoming-page) .kinstill-subpage-hero .kinstill-banner-media-layer {
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none;
}

body:not(.upcoming-page) .kinstill-subpage-hero .kinstill-banner-photo,
body:not(.upcoming-page) .kinstill-subpage-hero .kinstill-banner-photo.fade-in {
    opacity: 1 !important;
    filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Retirer le voile radial pour laisser la photo pleinement visible */
body:not(.upcoming-page) .kinstill-subpage-hero .kinstill-banner-scrim {
    display: none !important;
}

/* Category pages : photo du hero en fond de page */
body:not(.upcoming-page) .category-hero-visual {
    display: none !important;
}
body:not(.upcoming-page) .category-hero {
    background: transparent !important;
}

/* Le contenu au-dessus de la photo de fond */
body:not(.upcoming-page) header {
    position: relative;
    z-index: 50;
}

body:not(.upcoming-page) .kinstill-banner-content,
body:not(.upcoming-page) .kinstill-banner-card,
body:not(.upcoming-page) .kinstill-hero-plate,
body:not(.upcoming-page) .kinstill-banner-credit {
    position: relative;
    z-index: 2;
}

body:not(.upcoming-page) .kinstill-banner-card,
body:not(.upcoming-page) .kinstill-hero-plate {
    background: rgba(255, 255, 255, 0.50);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.60);
    box-shadow: 0 20px 48px -15px rgba(44, 53, 57, 0.22);
}

html[data-theme="dark"] body:not(.upcoming-page) .kinstill-banner-card,
html[data-theme="dark"] body:not(.upcoming-page) .kinstill-hero-plate {
    background: rgba(15, 23, 42, 0.54);
    border: 1px solid rgba(148, 163, 184, 0.20);
    box-shadow: 0 20px 48px -15px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   ZONE DE TEXTE EN BANNIÈRE : EXTRÊME GAUCHE (PAGE D'ACCUEIL & CATÉGORIES)
   1. Alignée à l'extrême gauche pour dégager la photo et les visages à droite
   2. Verre dépoli semi-transparent (laisse voir l'image) mais dense pour lire le texte
   ========================================================================== */
#hero-banner .kinstill-banner-content,
.category-hero .category-page-inner,
.category-hero .kinstill-banner-content,
.catalog-section .catalog-inner,
.catalog-section .kinstill-banner-content,
.premium-hero .kinstill-banner-content {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-left: clamp(1.25rem, 4vw, 3.5rem) !important;
    padding-right: clamp(1.25rem, 4vw, 3.5rem) !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.category-hero .category-hero-layout {
    display: flex !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    grid-template-columns: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#hero-banner .kinstill-banner-card,
.category-hero .category-hero-copy,
.category-hero .kinstill-banner-card,
.catalog-section .catalog-heading,
.catalog-section .kinstill-banner-card,
.premium-hero .kinstill-banner-card {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    box-shadow: 0 20px 48px -15px rgba(44, 53, 57, 0.22) !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
    max-width: 44rem !important;
    width: 100% !important;
    padding: clamp(2rem, 3.5vw, 2.65rem) clamp(1.75rem, 3vw, 2.35rem) !important;
    border-radius: 1.75rem !important;
    position: relative !important;
    z-index: 2 !important;
}

#hero-banner .kinstill-banner-card p,
.category-hero .category-hero-copy p,
.category-hero .category-hero-copy > p:last-child,
.catalog-section .catalog-heading p,
.catalog-section .catalog-heading > p:last-child,
.premium-hero .kinstill-banner-card p {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
}

#hero-banner .kinstill-banner-card h1,
.category-hero .category-hero-copy h1,
.category-hero .category-hero-copy [data-category-title],
.catalog-section .catalog-heading h1,
.premium-hero .kinstill-banner-card h1 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    color: #0f172a !important;
    font-weight: 800 !important;
}

.category-hero .category-hero-copy .pathway-eyebrow,
.catalog-section .catalog-heading .pathway-eyebrow {
    margin-left: 0 !important;
    text-align: left !important;
    margin-bottom: 0.6rem !important;
}

#hero-banner .hero-action-card {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ==========================================================================
   FORMULAIRE "UPDATE MY PATH" DANS LA BANNIÈRE HÉROÏQUE DU CATALOGUE
   Intégration transparente dans la carte vitrée à l'extrême gauche
   ========================================================================== */
.catalog-section .pathway-form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    margin: 1.35rem 0 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.catalog-section .pathway-controls {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    margin-bottom: 1.15rem !important;
}

.catalog-section .pathway-controls label {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: #1e293b !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.45rem !important;
}

.catalog-section .pathway-controls select {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1.5px solid rgba(74, 107, 124, 0.3) !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    padding: 0.65rem 0.85rem !important;
    min-height: 2.85rem !important;
    width: 100% !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
}

.catalog-section .pathway-controls select:focus {
    border-color: var(--primary, #4A6B7C) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(74, 107, 124, 0.25) !important;
}

.catalog-section .pathway-form-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    margin-top: 1rem !important;
    padding-top: 1.15rem !important;
    border-top: 1px solid rgba(74, 107, 124, 0.18) !important;
}

.catalog-section .pathway-summary {
    color: #334155 !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.catalog-section .pathway-submit {
    min-height: 2.75rem !important;
    padding: 0.65rem 1.45rem !important;
    background: var(--primary, #4A6B7C) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.925rem !important;
    border-radius: 9999px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(74, 107, 124, 0.32) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.catalog-section .pathway-submit:hover {
    background: #385564 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(74, 107, 124, 0.42) !important;
}

/* Dark mode pour le formulaire dans le hero */
html[data-theme="dark"] .catalog-section .pathway-controls label {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .catalog-section .pathway-controls select {
    background: rgba(30, 41, 59, 0.90) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
    color: #f8fafc !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .catalog-section .pathway-controls select option {
    background: #1e293b !important;
    color: #f8fafc !important;
}

html[data-theme="dark"] .catalog-section .pathway-controls select:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
}

html[data-theme="dark"] .catalog-section .pathway-form-footer {
    border-top-color: rgba(148, 163, 184, 0.22) !important;
}

html[data-theme="dark"] .catalog-section .pathway-summary {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .catalog-section .pathway-submit {
    background: var(--primary, #4A6B7C) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .catalog-section .pathway-submit:hover {
    background: #5a7a8a !important;
}

/* ==========================================================================
   SECTION GRILLE DES CATÉGORIES (AU-DESSOUS DU HERO)
   ========================================================================== */
.catalog-grid-section {
    position: relative !important;
    z-index: 2 !important;
    padding-top: 1.5rem !important;
    padding-bottom: 4rem !important;
}

.catalog-grid-section .catalog-inner {
    width: min(100% - 2.5rem, 90rem) !important;
    max-width: 90rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.catalog-grid-section .catalog-topic-grid {
    margin-top: 0 !important;
}

/* Voile adapté : éclaircissement doux à gauche pour la lisibilité du texte, transparence maximale à droite pour la photo et les visages */
#hero-banner .kinstill-banner-scrim,
.category-hero .kinstill-banner-scrim,
.catalog-section .kinstill-banner-scrim,
.premium-hero .kinstill-banner-scrim {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    background: linear-gradient(
        90deg,
        rgba(250, 248, 245, 0.85) 0%,
        rgba(250, 248, 245, 0.60) 38%,
        rgba(250, 248, 245, 0.20) 70%,
        rgba(250, 248, 245, 0.04) 100%
    ) !important;
}

/* Cadrage photo à droite pour laisser respirer l'image */
#hero-banner .kinstill-banner-photo,
.category-hero .kinstill-banner-photo,
.catalog-section .kinstill-banner-photo,
.premium-hero .kinstill-banner-photo {
    object-position: right 20% !important;
}

/* Badge crédit photo calé à droite pour ne pas gêner la zone de texte à gauche */
#hero-banner #kinstill-watermark-credit,
.category-hero #kinstill-subpage-watermark-credit,
.catalog-section #kinstill-subpage-watermark-credit,
.premium-hero #kinstill-subpage-watermark-credit {
    align-self: flex-end !important;
    margin-left: auto !important;
    margin-right: clamp(1.25rem, 4vw, 3.5rem) !important;
}

html[data-theme="dark"] #hero-banner .kinstill-banner-card,
html[data-theme="dark"] .category-hero .category-hero-copy,
html[data-theme="dark"] .category-hero .kinstill-banner-card,
html[data-theme="dark"] .catalog-section .catalog-heading,
html[data-theme="dark"] .catalog-section .kinstill-banner-card,
html[data-theme="dark"] .premium-hero .kinstill-banner-card {
    background: rgba(15, 23, 42, 0.62) !important;
    border-color: rgba(148, 163, 184, 0.20) !important;
    box-shadow: 0 20px 48px -15px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] #hero-banner .kinstill-banner-card h1,
html[data-theme="dark"] .category-hero .category-hero-copy h1,
html[data-theme="dark"] .category-hero .category-hero-copy [data-category-title],
html[data-theme="dark"] .catalog-section .catalog-heading h1,
html[data-theme="dark"] .premium-hero .kinstill-banner-card h1 {
    color: #f8fafc !important;
}

html[data-theme="dark"] #hero-banner .kinstill-banner-card p,
html[data-theme="dark"] .category-hero .category-hero-copy p,
html[data-theme="dark"] .category-hero .category-hero-copy > p:last-child,
html[data-theme="dark"] .catalog-section .catalog-heading p,
html[data-theme="dark"] .catalog-section .catalog-heading > p:last-child,
html[data-theme="dark"] .premium-hero .kinstill-banner-card p {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] #hero-banner .kinstill-banner-scrim,
html[data-theme="dark"] .category-hero .kinstill-banner-scrim,
html[data-theme="dark"] .catalog-section .kinstill-banner-scrim,
html[data-theme="dark"] .premium-hero .kinstill-banner-scrim {
    background: linear-gradient(
        90deg,
        rgba(15, 23, 42, 0.88) 0%,
        rgba(15, 23, 42, 0.65) 40%,
        rgba(15, 23, 42, 0.25) 75%,
        rgba(15, 23, 42, 0.05) 100%
    ) !important;
}

@media (max-width: 640px) {
    #hero-banner,
    .category-hero,
    .catalog-section,
    .premium-hero {
        min-height: auto !important;
        padding-top: 2.75rem !important;
        padding-bottom: 3.25rem !important;
    }
    #hero-banner .kinstill-banner-content,
    .category-hero .category-page-inner,
    .catalog-section .catalog-inner,
    .premium-hero .kinstill-banner-content {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    #hero-banner .kinstill-banner-card,
    .category-hero .category-hero-copy,
    .catalog-section .catalog-heading,
    .premium-hero .kinstill-banner-card {
        background: rgba(255, 255, 255, 0.75) !important;
        padding: 1.75rem 1.25rem !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
    html[data-theme="dark"] #hero-banner .kinstill-banner-card,
    html[data-theme="dark"] .category-hero .category-hero-copy,
    html[data-theme="dark"] .catalog-section .catalog-heading,
    html[data-theme="dark"] .premium-hero .kinstill-banner-card {
        background: rgba(15, 23, 42, 0.70) !important;
    }
    #hero-banner .kinstill-banner-scrim,
    .category-hero .kinstill-banner-scrim,
    .catalog-section .kinstill-banner-scrim,
    .premium-hero .kinstill-banner-scrim {
        background: linear-gradient(
            to bottom,
            rgba(250, 248, 245, 0.70) 0%,
            rgba(250, 248, 245, 0.85) 100%
        ) !important;
    }
    html[data-theme="dark"] #hero-banner .kinstill-banner-scrim,
    html[data-theme="dark"] .category-hero .kinstill-banner-scrim,
    html[data-theme="dark"] .catalog-section .kinstill-banner-scrim,
    html[data-theme="dark"] .premium-hero .kinstill-banner-scrim {
        background: linear-gradient(
            to bottom,
            rgba(15, 23, 42, 0.75) 0%,
            rgba(15, 23, 42, 0.90) 100%
        ) !important;
    }
    #hero-banner #kinstill-watermark-credit,
    .category-hero #kinstill-subpage-watermark-credit,
    .catalog-section #kinstill-subpage-watermark-credit,
    .premium-hero #kinstill-subpage-watermark-credit {
        margin-right: 1rem !important;
    }
    /* Sur mobile : recentrage naturel des images pour une visibilité idéale plein écran */
    #hero-banner .kinstill-banner-photo,
    .category-hero .kinstill-banner-photo,
    .catalog-section .kinstill-banner-photo,
    .premium-hero .kinstill-banner-photo {
        object-position: center top !important;
    }
    .featured-hero {
        margin-top: 1.75rem !important;
        margin-bottom: 2rem !important;
    }
    .featured-hero-image-wrap img {
        object-position: center center !important;
    }
    .featured-article-image,
    .category-article-image {
        object-position: center center !important;
    }
}

/* ==========================================================================
   OPTIMISATIONS MOBILES ROBUSTES (max-width: 768px)
   1) Résolution absolue de la superposition des sections et pages catégories
   2) Zone de texte d'adresse email claire, contrastée et visible (Option B)
   AUCUN IMPACT SUR LA VERSION DESKTOP (> 768px).
   ========================================================================== */
@media (max-width: 768px) {
    /* --- 1. ZONE D'ACTION HERO MOBILE (1. Explore my path | 2. Champ e-mail | 3. Join newsletter) --- */
    #hero-banner .hero-action-card,
    .hero-action-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        gap: 0.75rem !important;
        box-sizing: border-box !important;
    }

    /* 1. Bouton "Explore my path" */
    #hero-banner .hero-action-card button[data-open-profile],
    .hero-action-card button[data-open-profile],
    .hero-action-card > button:first-child {
        width: 100% !important;
        max-width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;
        border-radius: 9999px !important;
        background-color: var(--primary, #4A6B7C) !important;
        color: #ffffff !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        box-shadow: 0 3px 12px rgba(74, 107, 124, 0.28) !important;
        border: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        transition: transform 0.15s ease, background-color 0.2s ease !important;
    }

    #hero-banner .hero-action-card button[data-open-profile]:active,
    .hero-action-card button[data-open-profile]:active {
        transform: scale(0.985) !important;
    }

    /* Formulaire conteneur */
    #hero-banner .hero-action-card form,
    .hero-action-card form,
    .hero-newsletter-form {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 0.75rem !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. Champ e-mail enveloppé */
    #hero-banner .hero-action-card .hero-email-input-wrap,
    .hero-action-card .hero-email-input-wrap,
    .hero-email-input-wrap {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        display: block !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #hero-banner .hero-action-card input[type="email"],
    .hero-action-card input[type="email"],
    #hero-email {
        width: 100% !important;
        max-width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;
        border-radius: 9999px !important;
        border: 2px solid var(--primary, #4A6B7C) !important;
        background-color: #ffffff !important;
        background-image: none !important;
        color: #0f172a !important;
        padding-left: 2.85rem !important;
        padding-right: 1.25rem !important;
        font-size: 16px !important; /* Prévient le zoom automatique iOS Safari */
        font-weight: 500 !important;
        line-height: normal !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
        box-sizing: border-box !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    #hero-banner .hero-action-card input[type="email"]:focus,
    .hero-action-card input[type="email"]:focus,
    #hero-email:focus {
        outline: none !important;
        border-color: var(--secondary, #CC6B52) !important;
        box-shadow: 0 0 0 3px rgba(204, 107, 82, 0.22) !important;
        background-color: #ffffff !important;
    }

    #hero-banner .hero-action-card input[type="email"]::placeholder,
    .hero-action-card input[type="email"]::placeholder,
    #hero-email::placeholder {
        color: #64748b !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        opacity: 1 !important;
    }

    /* Icône SVG à l'intérieur du champ e-mail */
    .hero-email-input-wrap .hero-email-icon {
        position: absolute !important;
        left: 1rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 1.15rem !important;
        height: 1.15rem !important;
        color: var(--primary, #4A6B7C) !important;
        display: block !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }

    /* Mode sombre pour champ e-mail */
    html[data-theme="dark"] #hero-banner .hero-action-card input[type="email"],
    html[data-theme="dark"] .hero-action-card input[type="email"],
    html[data-theme="dark"] #hero-email {
        background-color: #0f172a !important;
        border-color: #38bdf8 !important;
        color: #f8fafc !important;
        background-image: none !important;
    }

    html[data-theme="dark"] #hero-banner .hero-action-card input[type="email"]::placeholder,
    html[data-theme="dark"] .hero-action-card input[type="email"]::placeholder,
    html[data-theme="dark"] #hero-email::placeholder {
        color: #94a3b8 !important;
    }

    html[data-theme="dark"] #hero-banner .hero-action-card input[type="email"]:focus,
    html[data-theme="dark"] .hero-action-card input[type="email"]:focus,
    html[data-theme="dark"] #hero-email:focus {
        border-color: #38bdf8 !important;
        box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
        background-color: #0f172a !important;
    }

    html[data-theme="dark"] .hero-email-input-wrap .hero-email-icon {
        color: #38bdf8 !important;
    }

    /* 3. Bouton "Join newsletter" */
    #hero-banner .hero-action-card button[type="submit"],
    .hero-action-card button[type="submit"],
    .hero-newsletter-submit {
        width: 100% !important;
        max-width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;
        border-radius: 9999px !important;
        background-color: var(--accent, #769784) !important;
        color: #ffffff !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.015em !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        box-shadow: 0 3px 12px rgba(118, 151, 132, 0.35) !important;
        border: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        transition: transform 0.15s ease, background-color 0.2s ease !important;
    }

    #hero-banner .hero-action-card button[type="submit"]:active,
    .hero-action-card button[type="submit"]:active,
    .hero-newsletter-submit:active {
        transform: scale(0.985) !important;
    }

    /* --- 2. RÉSOLUTION ABSOLUE DES SUPERPOSITIONS DANS LES CATÉGORIES --- */
    /* A. Pages catégories (/categories/*.html) : désactivation de la bannière collante qui masque les articles */
    .category-sticky-banner {
        position: static !important;
        top: auto !important;
        z-index: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        padding: 0.85rem 1rem !important;
        margin-block: 0 1.25rem !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .category-sticky-name {
        font-size: 1.1rem !important;
        display: block !important;
        margin: 0 !important;
        white-space: normal !important;
    }

    .category-profile-sticky {
        align-self: flex-start !important;
        max-width: 100% !important;
        white-space: normal !important;
    }

    .category-article-carousel {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.75rem !important;
        padding-bottom: 0.5rem !important;
    }

    .category-carousel-card {
        flex: 0 0 14rem !important;
        min-width: 14rem !important;
        max-width: 14rem !important;
    }

    /* En-tête héroïque de catégorie : flux fluide sans hauteur fixe superposée */
    .category-hero {
        padding-top: 1.25rem !important;
        padding-bottom: 1.5rem !important;
        min-height: auto !important;
        height: auto !important;
    }

    .category-hero-layout {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .category-hero-copy {
        padding: 0 !important;
        max-width: 100% !important;
    }

    .category-hero-visual {
        display: none !important;
    }

    /* Onglets de stages et filtres de configuration familiale */
    .category-filter-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.85rem !important;
    }

    .category-stage-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        gap: 0.4rem !important;
    }

    .category-stage-tab {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .category-family-field {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Grille des articles dans la catégorie : 1 colonne propre sans chevauchement */
    .category-article-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        width: 100% !important;
    }

    .category-article-card {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        position: relative !important;
        transform: none !important;
    }

    .category-article-card:hover,
    .category-article-card:focus-visible {
        transform: none !important;
    }

    /* B. Section catalogue de catégories (free-article.html) */
    .catalog-section.kinstill-hero-banner {
        display: block !important;
        overflow: visible !important;
    }

    .catalog-section .kinstill-banner-media-layer {
        max-height: 380px !important;
    }

    .catalog-topic-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        width: 100% !important;
        margin-top: 1.5rem !important;
    }

    .category-card.article-card {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        position: relative !important;
        transform: none !important;
        box-shadow: 0 4px 16px rgba(36, 48, 54, 0.06) !important;
    }

    .category-card.article-card:hover,
    .category-card.article-card:focus-visible {
        transform: none !important;
    }

    .category-card-image {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
        object-fit: cover !important;
    }

    /* C. Section Thèmes de catégories (index.html) : pas d'infobulles fixes envahissantes sur mobile */
    .theme-purpose-tooltip {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .theme-purpose-link {
        transform: none !important;
    }

    .theme-purpose-link:hover,
    .theme-purpose-link:focus-visible {
        transform: none !important;
    }
}

/* ===== Décalage intelligent et ergonomique des visuels vers la droite & aération du carrousel (Desktop & Tablettes) ===== */
/* Décalage vertical du carrousel pour laisser respirer la photo héroïque tout en restant harmonieux */
.featured-hero {
    margin-top: clamp(2.5rem, 5vw, 4.5rem) !important;
    margin-bottom: clamp(2.5rem, 4vw, 3.5rem) !important;
}

/* 1. Bannière Héroïque principale : espace vertical augmenté pour dévoiler la photo en hauteur sans écraser le contenu */
#hero-banner {
    min-height: clamp(28rem, 62vh, 44rem);
    padding-top: clamp(4rem, 8vw, 7rem) !important;
    padding-bottom: clamp(4.5rem, 9vw, 8rem) !important;
}

#hero-banner .kinstill-banner-photo {
    object-position: right 20% !important;
}

/* 2. Carrousel "Featured for your family" : l'image s'ancre sur la droite et prend une belle ampleur */
.featured-hero-image-wrap img {
    object-position: right center !important;
}

@media (min-width: 860px) {
    /* Équilibre 1.55fr / 1.45fr pour donner une belle place ergonomique à l'image à droite */
    .carousel-slide {
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.45fr) !important;
    }
}

/* 3. Cartes d'articles en vedette : cadrage doux légèrement décalé vers la droite sur desktop */
.featured-article-image,
.category-article-image {
    object-position: 65% center;
}

/* ===== Bannière de synchronisation du ciblage dans Assisted Copywriting Journey ===== */
.deepseek-journey-targeting-banner {
    background: linear-gradient(135deg, #F0FDFA 0%, #F8FAFC 100%);
    border: 1.5px solid #A7F3D0;
    border-radius: 14px;
    padding: 1.15rem 1.25rem;
    margin-bottom: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.05);
}

.journey-targeting-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.journey-targeting-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Nunito', sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    color: #065F46;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.journey-targeting-title svg {
    width: 16px;
    height: 16px;
    color: #0D9488;
}

.journey-targeting-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background: #CCFBF1;
    color: #0F766E;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    border: 1px solid #99F6E4;
}

.journey-targeting-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #059669;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
    animation: pulseJourneyTargeting 2s infinite;
}

@keyframes pulseJourneyTargeting {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.9); }
}

.journey-targeting-pills {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.journey-targeting-guidance-box {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    background: #FFFFFF;
    border: 1px solid #CCFBF1;
    border-radius: 10px;
    padding: 0.75rem 0.95rem;
}

.journey-targeting-guidance-box .guidance-icon {
    width: 16px;
    height: 16px;
    color: #0D9488;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.journey-targeting-guidance-text {
    margin: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 0.825rem;
    color: #134E4A;
    line-height: 1.5;
}

.journey-targeting-guidance-text strong {
    color: #047857;
    font-weight: 800;
}

html[data-theme="dark"] .deepseek-journey-targeting-banner {
    background: linear-gradient(135deg, #132A26 0%, #1E293B 100%);
    border-color: #0D9488;
}

html[data-theme="dark"] .journey-targeting-title {
    color: #6EE7B7;
}

html[data-theme="dark"] .journey-targeting-guidance-box {
    background: #111827;
    border-color: #1F2937;
}

html[data-theme="dark"] .journey-targeting-guidance-text {
    color: #A7F3D0;
}

/* ==========================================================================
   FREE ARTICLES CATALOG — 5-COLUMN GRID ON DESKTOP SCREENS
   Applies to .catalog-topic-grid and .featured-article-grid on free-article.html
   ========================================================================== */
@media (min-width: 1200px) {
    .catalog-grid-section .catalog-topic-grid,
    .catalog-section .catalog-topic-grid,
    [data-parenting-pathway] .catalog-topic-grid,
    .catalog-topic-grid {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 1.35rem !important;
        width: 100% !important;
        margin-top: 0 !important;
    }

    .featured-articles-section .featured-article-grid,
    [data-published-catalog] {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 1.35rem !important;
        width: 100% !important;
    }

    .catalog-grid-section .catalog-inner,
    .catalog-inner,
    .featured-inner {
        width: min(100% - 2.5rem, 90rem) !important;
        max-width: 90rem !important;
    }
}

@media (min-width: 900px) and (max-width: 1199px) {
    .catalog-grid-section .catalog-topic-grid,
    .catalog-section .catalog-topic-grid,
    [data-parenting-pathway] .catalog-topic-grid,
    .catalog-topic-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1.25rem !important;
        width: 100% !important;
        margin-top: 0 !important;
    }

    .featured-articles-section .featured-article-grid,
    [data-published-catalog] {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1.25rem !important;
        width: 100% !important;
    }
}

@media (min-width: 601px) and (max-width: 899px) {
    .catalog-grid-section .catalog-topic-grid,
    .catalog-section .catalog-topic-grid,
    [data-parenting-pathway] .catalog-topic-grid,
    .catalog-topic-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.15rem !important;
        width: 100% !important;
        margin-top: 0 !important;
    }

    .featured-articles-section .featured-article-grid,
    [data-published-catalog] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.15rem !important;
        width: 100% !important;
    }
}