/*==================================================
    HOME.CSS
    My Lolita Wardrobe — Homepage
    A slightly more refined, classic-lolita take on
    the shared style — quieter colours, serif accents,
    more breathing room.
==================================================*/


/*==============================
    ELEGANT SECTION ORNAMENT
    Overrides the playful sparkle-heart motif from
    style.css on the homepage with a quieter, more
    classic divider.
==============================*/

main section h2::after{

    content:"";

    display:block;

    width:120px;

    height:1px;

    margin:10px auto 0;

    background:linear-gradient(90deg,transparent,var(--gold-line),transparent);

}

main section h2{

    text-align:center;

    letter-spacing:.5px;

}



/*==============================
    WELCOME
==============================*/

.welcome p{

    max-width:640px;

    margin:0 auto 14px;

    color:var(--ink-soft);

    text-align:center;

    line-height:1.85;

}

.welcome p:first-of-type::first-letter{

    font-family:'Cormorant Garamond',serif;

    font-size:2.6rem;

    color:var(--wine);

    font-weight:700;

    padding-right:4px;

}



/*==============================
    FEATURED DRESS — ELEGANT CARD
==============================*/

#featuredCard{

    display:grid;

    grid-template-columns:260px 1fr;

    gap:35px;

    text-align:left;

    align-items:center;

    max-width:780px;

    margin:0 auto;

}

#featuredImage{

    grid-column:1;

    grid-row:1 / -1;

    width:100%;

    border:1px solid var(--gold-line);

    outline:6px solid #fff;

    box-shadow:0 0 0 1px var(--gold-line),0 10px 25px rgba(0,0,0,.12);

    border-radius:18px;

    margin-bottom:0;

}

#featuredName,
#featuredBrand,
#featuredCut,
#featuredTags,
#featuredCard button,
#featuredCard > a{

    grid-column:2;

}

#featuredBrand{

    text-transform:uppercase;

    letter-spacing:2.5px;

    font-size:.78rem;

    color:var(--rose);

    margin-bottom:4px;

}

#featuredName{

    font-family:'Cormorant Garamond',serif;

    font-style:italic;

    font-size:2rem;

    line-height:1.2;

    color:var(--wine-deep);

}

#featuredCut{

    font-size:.95rem;

    margin:6px 0 2px;

}

#featuredTags{

    justify-content:flex-start;

}

#featuredCard .button,
#featuredCard button{

    display:inline-block;

    margin:6px 10px 0 0;

}

#rerollFeature{

    background:none;

    color:var(--wine);

    border:1px solid var(--gold-line);

    box-shadow:none;

}

#rerollFeature:hover{

    background:#f9f7f5;

    transform:none;

}



/*==============================
    COLLECTION AT A GLANCE
    A quieter ledger-style stat row instead of
    dashed candy boxes.
==============================*/

.glance .statgrid{

    grid-template-columns:repeat(3,1fr);

    gap:0;

}

.glance .stat{

    background:none;

    border:none;

    border-right:1px solid #eee5d5;

    border-radius:0;

    padding:6px 10px;

}

.glance .stat:last-child{

    border-right:none;

}

.glance .stat span{

    font-family:'Cormorant Garamond',serif;

    font-weight:700;

    color:var(--wine-deep);

}

.glance .stat p{

    font-size:.82rem;

    letter-spacing:.5px;

    color:var(--ink-soft);

    text-transform:uppercase;

}



/*==============================
    RESPONSIVE
==============================*/

@media (max-width:700px){

#featuredCard{

    grid-template-columns:1fr;

    text-align:center;

}

#featuredImage{

    grid-column:1;

    grid-row:auto;

    max-width:240px;

    margin:0 auto;

}

#featuredName,
#featuredBrand,
#featuredCut,
#featuredTags,
#featuredCard button,
#featuredCard > a{

    grid-column:1;

}

#featuredTags{

    justify-content:center;

}

.glance .statgrid{

    grid-template-columns:1fr;

}

.glance .stat{

    border-right:none;

    border-bottom:1px solid #eee5d5;

}

}