.e5b-v2{max-width:1250px;margin:auto;padding-bottom:60px}

.e5b-hero{
display:grid;grid-template-columns:1.6fr .65fr;gap:25px;
padding:36px;border:1px solid #e0e6ef;border-radius:28px;
background:linear-gradient(115deg,#edf3fb,#fff 55%,#fff1f2)
}

.e5b-kicker{
display:block;color:#697891;font-size:10px;font-weight:900;
letter-spacing:.14em
}

.e5b-hero h1{
margin:10px 0 14px;color:#10213d;
font-size:46px;line-height:1.04;letter-spacing:-.04em
}

.e5b-hero h1 strong{color:#e3273d}

.e5b-hero-copy>p{
max-width:720px;color:#53627c;font-size:16px;line-height:1.65
}

.e5b-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}

.e5b-pills span{
padding:8px 12px;border:1px solid #dfe5ee;border-radius:999px;
background:#fff;font-size:12px;font-weight:700
}

.e5b-hero-panel{
align-self:center;padding:24px;border-radius:20px;background:#fff;
box-shadow:0 15px 40px rgba(27,45,75,.08)
}

.e5b-hero-panel>span{
color:#e3273d;font-size:10px;font-weight:900;letter-spacing:.13em
}

.e5b-hero-panel b{
display:block;margin:10px 0;color:#14223c;font-size:22px
}

.e5b-hero-panel p{margin:0;color:#64718a;line-height:1.6}

.e5b-reperes{
display:grid;grid-template-columns:repeat(4,1fr);
gap:13px;margin:18px 0 35px
}

.e5b-reperes article{
display:flex;gap:13px;padding:18px;border:1px solid #e4e8ef;
border-radius:17px;background:#fff
}

.e5b-repere-icon{
flex:0 0 42px;display:grid;place-items:center;
width:42px;height:42px;border-radius:12px;background:#f2f4ff
}

.e5b-reperes h3{margin:2px 0 5px;font-size:14px}
.e5b-reperes p{margin:0;color:#718098;font-size:12px;line-height:1.45}

/* ===== TITRE DE SECTION ===== */

.e5b-section-title{margin:0 0 18px}

.e5b-section-title>span,
.e5b-mission>span{
color:#e3273d;font-size:10px;font-weight:900;letter-spacing:.12em
}

.e5b-section-title h2{
margin:5px 0;font-size:28px;color:#17213a
}

.e5b-section-title p{margin:0;color:#748097}


/* ===== DEUX PARCOURS ===== */

.e5b-paths{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px
}

.e5b-path{
overflow:hidden;border:1px solid #e2e6ee;border-radius:24px;
background:#fff;box-shadow:0 12px 36px rgba(25,37,65,.06);
transition:transform .2s ease,box-shadow .2s ease
}

.e5b-path:hover{
transform:translateY(-4px);
box-shadow:0 20px 48px rgba(25,37,65,.11)
}

.e5b-path.wordpress{border-top:5px solid #21759b}
.e5b-path.prestashop{border-top:5px solid #e3273d}


/* ===== ENTETE WORDPRESS / PRESTASHOP ===== */

.e5b-path-top{
display:flex;align-items:center;gap:15px;padding:23px 25px 17px
}

.e5b-logo{
display:grid;place-items:center;width:56px;height:56px;
border-radius:17px;color:#fff;font-size:25px;font-weight:900
}

.wordpress-logo{background:#21759b}
.presta-logo{background:#e3273d}

.e5b-path-tag{
color:#77849a;font-size:9px;font-weight:900;letter-spacing:.1em
}

.e5b-path-top h2{
margin:3px 0 0;font-size:27px;color:#17213a
}

.e5b-path-top p{margin:2px 0 0;color:#6f7a90}


/* ===== MISSION ===== */

.e5b-mission{
margin:0 25px;padding:18px;border-radius:15px;background:#f7f9fc
}

.wordpress .e5b-mission{
background:linear-gradient(135deg,#f1f8fb,#f8fbfd)
}

.prestashop .e5b-mission{
background:linear-gradient(135deg,#fff4f5,#fffafa)
}

.e5b-mission h3{
margin:6px 0;font-size:17px;color:#17213a
}

.e5b-mission p{
margin:0;color:#65728a;font-size:13px;line-height:1.55
}


/* ===== COMPETENCES ===== */

.e5b-skills{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:9px;padding:20px 25px
}

.e5b-skills div{
display:flex;gap:8px;padding:9px 10px;
border-radius:10px;background:#fafbfc;
color:#48566f;font-size:12.5px;line-height:1.4
}

.e5b-skills span{
color:#16966d;font-weight:900
}


/* ===== BAS DES CARTES ===== */

.e5b-path-bottom{
display:flex;align-items:center;justify-content:space-between;
gap:15px;padding:18px 25px 24px;border-top:1px solid #edf0f4
}

.e5b-path-bottom>div{
display:flex;flex-direction:column
}

.e5b-path-bottom b{
color:#17213a;font-size:13px
}

.e5b-path-bottom span{
color:#8490a3;font-size:11px
}

.e5b-enter{
display:inline-flex;align-items:center;gap:12px;
padding:12px 16px;border-radius:11px;
background:#e3273d;color:#fff!important;
font-size:12px;font-weight:850;text-decoration:none!important;
transition:.18s ease
}

.wordpress .e5b-enter{background:#21759b}

.e5b-enter:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(20,30,60,.16)
}


/* ===== METHODE E5B ===== */

.e5b-method{
display:flex;align-items:center;justify-content:space-between;
gap:30px;margin-top:20px;padding:25px 28px;
border-radius:20px;background:#17213a;color:#fff
}

.e5b-method h2{
margin:5px 0 0;color:#fff;font-size:21px
}

.e5b-method .e5b-kicker{color:#ff6879}

.e5b-method-steps{
display:flex;gap:9px;flex-wrap:wrap
}

.e5b-method-steps span{
display:flex;align-items:center;gap:7px;
padding:10px 12px;border-radius:10px;
background:rgba(255,255,255,.09);
font-size:11px
}

.e5b-method-steps b{color:#ff6879}


/* ===== MOBILE ===== */

@media(max-width:900px){

.e5b-hero{grid-template-columns:1fr}

.e5b-reperes{grid-template-columns:repeat(2,1fr)}

.e5b-paths{grid-template-columns:1fr}

.e5b-method{
align-items:flex-start;
flex-direction:column
}

}

@media(max-width:600px){

.e5b-hero{
padding:24px 20px;
border-radius:20px
}

.e5b-hero h1{font-size:33px}

.e5b-reperes{grid-template-columns:1fr}

.e5b-skills{grid-template-columns:1fr}

.e5b-path-bottom{
align-items:flex-start;
flex-direction:column
}

.e5b-enter{
width:100%;
justify-content:center
}

}


/* ===== E5B PAGES SECONDAIRES ===== */

.e5-case-grid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:14px!important;
margin-top:22px!important
}

.e5-case{
display:flex!important;
flex-direction:column!important;
min-height:145px!important;
padding:20px!important;
border:1px solid #e3e7ef!important;
border-radius:17px!important;
background:#fff!important;
color:#17213a!important;
text-decoration:none!important;
box-shadow:0 7px 24px rgba(28,39,65,.05)!important;
transition:.2s ease!important
}

.e5-case:hover{
transform:translateY(-4px)!important;
border-color:#e3273d!important;
box-shadow:0 16px 35px rgba(28,39,65,.10)!important
}

.e5-case b{
display:block!important;
margin-bottom:7px!important;
font-size:17px!important
}

.e5-case span{
display:inline-block!important;
width:max-content!important;
margin-bottom:12px!important;
padding:5px 8px!important;
border-radius:999px!important;
background:#f1f4f8!important;
color:#65738b!important;
font-size:10px!important;
font-weight:800!important
}

.e5-case p{
margin:auto 0 0!important;
color:#68758b!important;
font-size:13px!important;
line-height:1.5!important
}

.e5-case.soon{
opacity:.72!important;
background:#fafbfc!important
}

.e5-case.soon:after{
content:"Bientôt disponible";
display:inline-block;
width:max-content;
margin-top:12px;
padding:5px 8px;
border-radius:999px;
background:#eef1f5;
color:#7b8596;
font-size:9px;
font-weight:900;
text-transform:uppercase
}

/* bloc secondaire E5B */
.e5b-v2 + .box,
main > .box:has(.eyebrow){
border:1px solid #e3e7ef!important;
border-radius:22px!important;
box-shadow:0 10px 30px rgba(28,39,65,.05)!important
}

/* Les liens de mode deviennent de vrais choix */
main .box a[href*="mode="]{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-width:210px!important;
min-height:54px!important;
margin:15px 10px 5px 0!important;
padding:13px 18px!important;
border:1px solid #e1e5ed!important;
border-radius:14px!important;
background:#fff!important;
color:#17213a!important;
font-weight:850!important;
text-decoration:none!important;
box-shadow:0 7px 20px rgba(25,35,60,.06)!important;
transition:.18s ease!important
}

main .box a[href*="mode="]:hover{
transform:translateY(-3px)!important;
border-color:#e3273d!important;
box-shadow:0 13px 28px rgba(25,35,60,.11)!important
}

main .box a[href*="mode=guide"]{
border-top:4px solid #19a474!important
}

main .box a[href*="mode=autonome"]{
border-top:4px solid #7657ff!important
}

main .box a[href*="mode=examen"]{
border-top:4px solid #e3273d!important
}

@media(max-width:900px){
.e5-case-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important
}
}

@media(max-width:600px){
.e5-case-grid{
grid-template-columns:1fr!important
}

main .box a[href*="mode="]{
width:100%!important;
margin-right:0!important
}
}

/* ===== MODES D'ENTRAINEMENT E5B ===== */

/* Zone contenant les choix */
main .box:has(a[href*="mode="]){
padding:30px!important;
background:
linear-gradient(135deg,#fff 0%,#fff 72%,#f8f9fd 100%)!important
}

main .box:has(a[href*="mode="]) h2{
margin:12px 0 5px!important;
font-size:25px!important;
color:#17213a!important
}

/* Chaque mode */
main .box a[href*="mode="]{
position:relative!important;
display:inline-flex!important;
vertical-align:top!important;
flex-direction:column!important;
align-items:flex-start!important;
justify-content:flex-start!important;
width:calc(33.333% - 15px)!important;
min-width:0!important;
min-height:170px!important;
margin:22px 10px 5px 0!important;
padding:25px 22px 20px!important;
border:1px solid #e2e6ee!important;
border-radius:18px!important;
background:#fff!important;
white-space:normal!important;
line-height:1.5!important;
text-align:left!important;
box-shadow:0 9px 28px rgba(27,39,66,.06)!important
}

/* Gros titre du mode */
main .box a[href*="mode="] b{
display:block!important;
margin-bottom:10px!important;
font-size:18px!important;
color:#17213a!important
}

/* GUIDÉ */
main .box a[href*="mode=guide"]:before{
content:"🎯  MODE GUIDÉ";
display:block;
margin-bottom:14px;
color:#16966d;
font-size:11px;
font-weight:900;
letter-spacing:.08em
}

main .box a[href*="mode=guide"]:after{
content:"Idéal pour apprendre · étapes, indications et objectifs intermédiaires.";
display:block;
margin-top:auto;
padding-top:15px;
color:#69768c;
font-size:12px;
font-weight:500
}

/* AUTONOME */
main .box a[href*="mode=autonome"]:before{
content:"💼  MODE AUTONOME";
display:block;
margin-bottom:14px;
color:#7657ff;
font-size:11px;
font-weight:900;
letter-spacing:.08em
}

main .box a[href*="mode=autonome"]:after{
content:"Tu reçois le contexte professionnel et le résultat attendu, sans procédure détaillée.";
display:block;
margin-top:auto;
padding-top:15px;
color:#69768c;
font-size:12px;
font-weight:500
}

/* EXAMEN */
main .box a[href*="mode=examen"]:before{
content:"⏱  MODE EXAMEN";
display:block;
margin-bottom:14px;
color:#e3273d;
font-size:11px;
font-weight:900;
letter-spacing:.08em
}

main .box a[href*="mode=examen"]:after{
content:"Simulation sans aide : réalise la mission dans les conditions les plus proches de l'épreuve.";
display:block;
margin-top:auto;
padding-top:15px;
color:#69768c;
font-size:12px;
font-weight:500
}

main .box a[href*="mode="]:hover{
transform:translateY(-5px)!important
}

@media(max-width:850px){
main .box a[href*="mode="]{
width:100%!important;
min-height:auto!important;
margin:12px 0!important
}
}


/* ==================================================
   E5B MODE CARDS — OVERRIDE FINAL
   ================================================== */

main .box .e5-mode-grid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:18px!important;
width:100%!important;
margin:24px 0 0!important;
}

/* neutralise les anciennes règles sur les liens mode */
main .box .e5-mode-grid > a.e5-mode-card{
box-sizing:border-box!important;
position:relative!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
justify-content:flex-start!important;

width:100%!important;
min-width:0!important;
max-width:none!important;
min-height:315px!important;

margin:0!important;
padding:24px!important;

border-radius:20px!important;
border:1px solid #e2e7ef!important;

color:#17213a!important;
text-decoration:none!important;
text-align:left!important;
white-space:normal!important;

box-shadow:0 10px 30px rgba(25,35,65,.07)!important;
transition:.2s ease!important;
}

/* GUIDÉ */
main .box .e5-mode-grid > a.guided{
border-top:4px solid #13a36f!important;
background:linear-gradient(145deg,#f0fff8 0%,#fff 60%)!important;
}

/* AUTONOME */
main .box .e5-mode-grid > a.autonomous{
border-top:4px solid #7657ff!important;
background:linear-gradient(145deg,#f5f1ff 0%,#fff 60%)!important;
}

/* EXAMEN */
main .box .e5-mode-grid > a.exam{
border-top:4px solid #e3273d!important;
background:linear-gradient(145deg,#fff1f3 0%,#fff 60%)!important;
}

/* entête */
main .box .e5-mode-head{
display:flex!important;
align-items:center!important;
gap:14px!important;
margin:0 0 17px!important;
}

main .box .e5-mode-icon{
display:grid!important;
place-items:center!important;
flex:0 0 54px!important;
width:54px!important;
height:54px!important;
border-radius:50%!important;
background:#fff!important;
font-size:23px!important;
box-shadow:0 5px 16px rgba(25,35,65,.09)!important;
}

main .box .e5-mode-head span:not(.e5-mode-icon){
display:block!important;
margin:0 0 3px!important;
font-size:10px!important;
font-weight:900!important;
letter-spacing:.08em!important;
}

main .box .guided .e5-mode-head span:not(.e5-mode-icon){
color:#139768!important;
}

main .box .autonomous .e5-mode-head span:not(.e5-mode-icon){
color:#7657ff!important;
}

main .box .exam .e5-mode-head span:not(.e5-mode-icon){
color:#e3273d!important;
}

main .box .e5-mode-head h3{
margin:0!important;
color:#17213a!important;
font-size:20px!important;
line-height:1.2!important;
}

/* description */
main .box .e5-mode-grid > a.e5-mode-card > p{
display:block!important;
min-height:64px!important;
margin:0 0 16px!important;
padding:0!important;
color:#64718a!important;
font-size:13px!important;
font-weight:500!important;
line-height:1.55!important;
}

/* liste */
main .box .e5-mode-card ul{
display:grid!important;
gap:10px!important;
margin:0 0 20px!important;
padding:16px 0 0!important;
border-top:1px solid #e6eaf0!important;
list-style:none!important;
}

main .box .e5-mode-card li{
position:relative!important;
margin:0!important;
padding:0 0 0 27px!important;
color:#526079!important;
font-size:12.5px!important;
line-height:1.4!important;
}

main .box .e5-mode-card li:before{
content:"✓"!important;
position:absolute!important;
left:0!important;
top:0!important;
display:grid!important;
place-items:center!important;
width:18px!important;
height:18px!important;
border-radius:5px!important;
background:#e7f9f0!important;
color:#139768!important;
font-size:10px!important;
font-weight:900!important;
}

/* bouton bas */
main .box .e5-mode-grid > a.e5-mode-card > b{
display:block!important;
width:100%!important;
box-sizing:border-box!important;
margin:auto 0 0!important;
padding:13px 15px!important;
border-radius:10px!important;
color:#fff!important;
font-size:12px!important;
font-weight:850!important;
text-align:center!important;
}

main .box .guided > b{
background:#13a36f!important;
}

main .box .autonomous > b{
background:#7657ff!important;
}

main .box .exam > b{
background:#e3273d!important;
}

main .box .e5-mode-grid > a.e5-mode-card:hover{
transform:translateY(-5px)!important;
box-shadow:0 18px 40px rgba(25,35,65,.12)!important;
}

@media(max-width:900px){
main .box .e5-mode-grid{
grid-template-columns:1fr!important;
}
main .box .e5-mode-grid > a.e5-mode-card{
min-height:auto!important;
}
}


/* ===== E5B MODES FIX FINAL ===== */

.e5-mode-grid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:18px!important;
width:100%!important;
margin:24px 0!important;
}

.e5-mode-grid .e5-mode-card{
box-sizing:border-box!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
width:100%!important;
min-width:0!important;
min-height:310px!important;
margin:0!important;
padding:24px!important;
border:1px solid #e2e7ef!important;
border-radius:20px!important;
color:#17213a!important;
text-decoration:none!important;
white-space:normal!important;
text-align:left!important;
box-shadow:0 10px 30px rgba(25,35,65,.08)!important;
}

.e5-mode-grid .guided{
border-top:4px solid #14a36f!important;
background:linear-gradient(145deg,#effff7,#fff 65%)!important;
}

.e5-mode-grid .autonomous{
border-top:4px solid #7657ff!important;
background:linear-gradient(145deg,#f4f0ff,#fff 65%)!important;
}

.e5-mode-grid .exam{
border-top:4px solid #e3273d!important;
background:linear-gradient(145deg,#fff0f2,#fff 65%)!important;
}

.e5-mode-grid .e5-mode-head{
display:flex!important;
align-items:center!important;
gap:14px!important;
margin-bottom:17px!important;
}

.e5-mode-grid .e5-mode-icon{
display:grid!important;
place-items:center!important;
width:54px!important;
height:54px!important;
flex:0 0 54px!important;
border-radius:50%!important;
background:#fff!important;
font-size:23px!important;
box-shadow:0 5px 15px rgba(25,35,65,.10)!important;
}

.e5-mode-grid .e5-mode-head h3{
margin:3px 0 0!important;
color:#17213a!important;
font-size:20px!important;
}

.e5-mode-grid .e5-mode-head div>span{
font-size:10px!important;
font-weight:900!important;
letter-spacing:.08em!important;
}

.e5-mode-grid .guided .e5-mode-head div>span{color:#139768!important}
.e5-mode-grid .autonomous .e5-mode-head div>span{color:#7657ff!important}
.e5-mode-grid .exam .e5-mode-head div>span{color:#e3273d!important}

.e5-mode-grid .e5-mode-card>p{
display:block!important;
margin:0 0 17px!important;
padding:0!important;
min-height:60px!important;
color:#65728a!important;
font-size:13px!important;
font-weight:500!important;
line-height:1.55!important;
}

.e5-mode-grid .e5-mode-card ul{
display:grid!important;
gap:9px!important;
margin:0 0 20px!important;
padding:16px 0 0!important;
border-top:1px solid #e4e8ef!important;
list-style:none!important;
}

.e5-mode-grid .e5-mode-card li{
position:relative!important;
margin:0!important;
padding:0 0 0 27px!important;
color:#526079!important;
font-size:12.5px!important;
}

.e5-mode-grid .e5-mode-card li:before{
content:"✓"!important;
position:absolute!important;
left:0!important;
top:0!important;
display:grid!important;
place-items:center!important;
width:18px!important;
height:18px!important;
border-radius:5px!important;
background:#e7f9f0!important;
color:#139768!important;
font-size:10px!important;
font-weight:900!important;
}

.e5-mode-grid .e5-mode-card>b{
display:block!important;
box-sizing:border-box!important;
width:100%!important;
margin:auto 0 0!important;
padding:13px 15px!important;
border-radius:10px!important;
color:white!important;
font-size:12px!important;
text-align:center!important;
}

.e5-mode-grid .guided>b{background:#14a36f!important}
.e5-mode-grid .autonomous>b{background:#7657ff!important}
.e5-mode-grid .exam>b{background:#e3273d!important}

@media(max-width:900px){
.e5-mode-grid{
grid-template-columns:1fr!important;
}
.e5-mode-grid .e5-mode-card{
min-height:auto!important;
}
}


/* ===== E5B LARGEUR MODES — FIX ===== */

/* Le conteneur de la page doit exploiter toute la largeur */
.e5-mode-grid{
width:100%!important;
max-width:none!important;
grid-template-columns:repeat(3,minmax(280px,1fr))!important;
gap:20px!important;
}

/* Le parent direct de notre grille */
*:has(> .e5-mode-grid){
width:100%!important;
max-width:none!important;
}

/* Le bloc E5B contenant le sélecteur */
main .box:has(.e5-mode-grid){
width:100%!important;
max-width:none!important;
}

/* Cartes */
.e5-mode-grid > .e5-mode-card{
width:100%!important;
max-width:none!important;
min-width:0!important;
min-height:330px!important;
}

/* Titres plus confortables */
.e5-mode-grid .e5-mode-head h3{
font-size:20px!important;
line-height:1.25!important;
}

/* Texte */
.e5-mode-grid .e5-mode-card > p{
min-height:62px!important;
font-size:13.5px!important;
line-height:1.55!important;
}

/* Boutons pleine largeur */
.e5-mode-grid .e5-mode-card > b{
width:100%!important;
padding:14px 18px!important;
}

/* Desktop */
@media(min-width:1100px){
.e5-mode-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
}

/* Tablette/mobile */
@media(max-width:900px){
.e5-mode-grid{
grid-template-columns:1fr!important;
}
}


/* ===== ZONE MODES PLEINE LARGEUR ===== */

.e5-mode-zone{
display:block!important;
width:100%!important;
max-width:none!important;
box-sizing:border-box!important;
margin-top:26px!important;
}

.e5-mode-intro{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:30px;
width:100%;
margin-bottom:20px;
}

.e5-mode-intro>div:first-child>span{
color:#e3273d;
font-size:10px;
font-weight:900;
letter-spacing:.12em;
}

.e5-mode-intro h2{
margin:5px 0;
font-size:25px;
color:#17213a;
}

.e5-mode-intro p{
margin:0;
color:#718097;
}

.e5-mode-progress{
display:flex;
gap:8px;
}

.e5-mode-progress span{
display:flex;
align-items:center;
gap:6px;
padding:7px 9px;
border-radius:9px;
background:#f3f5f8;
color:#78859a;
font-size:10px;
font-weight:700;
}

.e5-mode-progress b{
display:grid;
place-items:center;
width:19px;
height:19px;
border-radius:50%;
background:#dce2eb;
color:#536079;
}

.e5-mode-progress .active{
background:#fff0f2;
color:#e3273d;
}

.e5-mode-progress .active b{
background:#e3273d;
color:#fff;
}

.e5-mode-zone .e5-mode-grid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:18px!important;
width:100%!important;
max-width:none!important;
}

@media(max-width:900px){
.e5-mode-intro{
align-items:flex-start;
flex-direction:column;
}
.e5-mode-zone .e5-mode-grid{
grid-template-columns:1fr!important;
}
}


/* ===== STYLEHUB LABORATOIRE ===== */

.stylehub-access-v2{
margin-top:24px!important;
padding:25px!important;
border:1px solid #e2e7ef!important;
border-radius:20px!important;
background:linear-gradient(135deg,#f8faff,#fff)!important;
}

.stylehub-access-head span{
color:#7657ff!important;
font-size:10px!important;
font-weight:900!important;
letter-spacing:.12em!important;
}

.stylehub-access-head h3{
margin:5px 0!important;
font-size:21px!important;
color:#17213a!important;
}

.stylehub-access-head p{
margin:0!important;
color:#68758c!important;
font-size:13px!important;
}

.stylehub-access-grid{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:15px!important;
margin-top:20px!important;
}

.stylehub-access-card{
position:relative!important;
display:flex!important;
flex-direction:column!important;
min-height:210px!important;
padding:22px!important;
border:1px solid #e1e6ee!important;
border-radius:17px!important;
background:#fff!important;
text-decoration:none!important;
box-shadow:0 8px 25px rgba(25,35,65,.06)!important;
transition:.2s ease!important;
}

.stylehub-access-card.bo{
border-top:4px solid #7657ff!important;
}

.stylehub-access-card.shop{
border-top:4px solid #e3273d!important;
}

.stylehub-number{
position:absolute!important;
top:17px!important;
right:18px!important;
font-size:11px!important;
font-weight:900!important;
color:#9ba5b5!important;
}

.stylehub-icon{
display:grid!important;
place-items:center!important;
width:46px!important;
height:46px!important;
margin-bottom:15px!important;
border-radius:13px!important;
background:#f3f1ff!important;
font-size:21px!important;
}

.stylehub-access-card.shop .stylehub-icon{
background:#fff0f2!important;
}

.stylehub-access-card small{
display:block!important;
margin-bottom:5px!important;
color:#7b879b!important;
font-size:9px!important;
font-weight:900!important;
letter-spacing:.09em!important;
}

.stylehub-access-card strong{
display:block!important;
color:#17213a!important;
font-size:18px!important;
}

.stylehub-access-card p{
margin:8px 0 18px!important;
color:#68758c!important;
font-size:12.5px!important;
line-height:1.5!important;
}

.stylehub-access-card>b{
display:block!important;
margin-top:auto!important;
padding:11px 13px!important;
border-radius:9px!important;
color:#fff!important;
font-size:11px!important;
text-align:center!important;
}

.stylehub-access-card.bo>b{
background:#7657ff!important;
}

.stylehub-access-card.shop>b{
background:#e3273d!important;
}

.stylehub-access-card:hover{
transform:translateY(-3px)!important;
box-shadow:0 14px 30px rgba(25,35,65,.11)!important;
}

@media(max-width:700px){
.stylehub-access-grid{
grid-template-columns:1fr!important;
}
}