/*==================================================
CEILO WEBSITE
Part 1
Reset • Variables • Typography • Layout
==================================================*/


/*=========================
GOOGLE FONTS
=========================*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');


/*=========================
RESET
=========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

    overflow-x:hidden;

}

body{

    font-family:'Poppins',sans-serif;

    background:#FDFBF8;

    color:#4A4A4A;

    line-height:1.7;

}


/*=========================
COLOUR PALETTE
=========================*/

:root{

    --background:#FDFBF8;

    --white:#FFFFFF;

    --text:#4A4A4A;

    --heading:#343434;

    --accent:#D4F0F7;

    --accent-dark:#620523;

    --soft:#F6F1EC;

    --border:#ECE5DE;

    --shadow:0 15px 35px rgba(0,0,0,.06);

    --radius:22px;

}


/*=========================
GENERAL
=========================*/

img{

    display:block;

    width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

button{

    font-family:inherit;

}

.cart-link{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:8px 14px;

    border-radius:999px;

    background:var(--accent);

    color:var(--accent-dark);

    font-weight:600;

    transition:background .2s ease;

}

.nav-cart-link{

    display:none;

}

.nav-overlay{

    display:none;

}

.cart-link:hover{

    background:var(--accent-dark);

}

.container{

    width:min(1200px,92%);

    margin:auto;

}


/*=========================
HEADINGS
=========================*/

h1,
h2,
h3,
h4{

    font-family:'Cormorant Garamond',serif;

    color:var(--heading);

    font-weight:600;

    line-height:1.15;

}

h1{

    font-size:4rem;

}

h2{

    font-size:3rem;

}

h3{

    font-size:2.15rem;

}

p{

    font-size:1rem;

}


/*=========================
SECTION SPACING
=========================*/

section{

    padding:90px 0;

}


/*=========================
SECTION TAG
=========================*/

.section-tag{

    display:inline-block;

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:.8rem;

    font-weight:600;

    color:var(--accent);

    margin-bottom:18px;

}


/*=========================
SECTION HEADINGS
=========================*/

.section-heading{

    text-align:center;

    max-width:700px;

    margin:0 auto 70px;

}

.section-heading h2{

    margin-bottom:18px;

}

.section-description{

    max-width:620px;

    margin:auto;

    color:#666;

}


/*=========================
BUTTONS
=========================*/

.primary-button,
.btn-primary,
.btn-secondary,
.secondary-button,
.product-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

    cursor:pointer;

}

.primary-button,
.btn-primary{

    background:var(--accent);

    color:white;

    padding:16px 34px;

    border-radius:999px;

    font-weight:500;

}

.primary-button:hover,
.btn-primary:hover{

    background:var(--accent-dark);

    transform:translateY(-2px);

}

.secondary-button{

    background:var(--accent-dark);

    color:white;

    padding:16px 34px;

    border-radius:999px;

    font-weight:500;

}

.secondary-button:hover{

    filter:brightness(1.15);

    transform:translateY(-2px);

}

.primary-button:disabled{

    background:#ccc;

    cursor:not-allowed;

    transform:none;

}

.btn-secondary{

    padding:15px 33px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.7);

    color:#fff;

    font-weight:500;

}

.btn-secondary:hover{

    background:rgba(255,255,255,.15);

    border-color:#fff;

}


/*=========================
BACKGROUND SECTIONS
=========================*/

.section-light{

    background:#FDFBF8;

}

.section-white{

    background:#FFFFFF;

}


/*=========================
UTILITY
=========================*/

.hidden{

    display:none;

}

html.nav-lock{

    overflow:hidden;

}
/*==================================================
PART 2
HEADER • NAVIGATION • SHOP NAVIGATION
==================================================*/


/*=========================
HEADER
=========================*/

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    background:rgba(253,251,248,.95);

    border-bottom:1px solid rgba(0,0,0,.05);

    transition:.35s ease;

}


/*=========================
HEADER CONTAINER
=========================*/

.header-container{

    width:min(1300px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:1fr auto 1fr;

    align-items:center;

    padding:22px 0;

    transition:.35s ease;

}

.header-actions{

    grid-column:3;

    justify-self:end;

    display:flex;

    align-items:center;

    gap:12px;

}


/*=========================
LOGO
=========================*/

.logo{

    display:flex;

    align-items:center;

    justify-self:start;

}

.logo img{

    width:140px;

    display:block;

    transition:.35s ease;

}


/*=========================
MAIN NAVIGATION
=========================*/

.main-nav{

    display:flex;

    align-items:center;

    justify-self:center;

    gap:32px;

    transition:.35s ease;

}

.main-nav a{

    position:relative;

    font-size:1rem;

    font-weight:500;

    color:var(--heading);

    transition:.3s ease;

}

.main-nav a:hover{

    color:var(--accent);

}

.main-nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:1.5px;

    background:var(--accent);

    transition:.3s ease;

}

.main-nav a:hover::after{

    width:100%;

}



/*=========================
HEADER SHRINK
=========================*/

body.home-page header{

    background:transparent;

    border-bottom-color:transparent;

}

body.home-page header.scrolled{

    background:rgba(253,251,248,.95);

    border-bottom-color:rgba(0,0,0,.05);

}

header.scrolled{

    box-shadow:0 8px 22px rgba(0,0,0,.07);

}

header.scrolled .header-container{

    padding:4px 0;

}

header.scrolled .logo img{

    width:98px;

}

header.scrolled .main-nav{

    gap:24px;

}

header.scrolled .main-nav a{

    font-size:.86rem;

}

header.scrolled .cart-link{

    padding:6px 12px;

    font-size:.85rem;

}
/*=========================
BODY OFFSET
=========================*/

main{

    padding-top:95px;

}


/*=========================
SHOP HERO
=========================*/

.shop-hero{

    padding:80px 0 55px;

    text-align:center;

    background:var(--accent);

    margin-bottom:60px;

}

.shop-hero .section-tag{

    color:var(--accent-dark);

}

.shop-hero h1{

    max-width:850px;

    margin:0 auto 18px;

}

.shop-intro{

    max-width:700px;

    margin:auto;

    font-size:1.08rem;

    color:#666;

}


/*=========================
SHOP LAYOUT + SIDE TABLE OF CONTENTS
=========================*/

.shop-layout{

    display:grid;

    grid-template-columns:170px 1fr;

    align-items:start;

    gap:36px;

    width:min(1400px,96%);

}

.shop-sections .container{

    width:100%;

    max-width:980px;

}

.collection-navigation{

    position:sticky;

    top:120px;

    margin-top:50px;

    display:flex;

    flex-direction:column;

    gap:4px;

}

.collection-navigation-label{

    font-size:.72rem;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#b8b8b8;

    margin-bottom:10px;

}

.collection-navigation a{

    font-size:.92rem;

    font-weight:500;

    color:#555;

    transition:.25s;

    padding:10px 16px;

    border-radius:12px;

}

.collection-navigation a:hover{

    color:var(--accent-dark);

    background:var(--soft);

}

.collection-navigation a.active{

    color:var(--heading);

    background:var(--soft);

    font-weight:600;

}


/*=========================
MENU TOGGLE (HAMBURGER)
=========================*/

.menu-toggle{

    display:none;

    flex-direction:column;

    justify-content:center;

    gap:6px;

    width:32px;

    height:32px;

    padding:0;

    background:none;

    border:none;

    cursor:pointer;

}

.menu-toggle span{

    display:block;

    width:100%;

    height:2px;

    background:var(--heading);

    border-radius:2px;

    transition:.3s ease;

}

.menu-toggle.active span:nth-child(1){

    transform:translateY(8px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:translateY(-8px) rotate(-45deg);

}


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

@media (max-width:900px){

    .menu-toggle{

        display:flex;

    }

    .header-cart-link{

        display:none;

    }

    .main-nav{

        position:fixed;

        top:0;

        right:0;

        bottom:0;

        width:max-content;

        min-width:54vw;

        flex-direction:column;

        align-items:stretch;

        gap:0;

        background:rgba(253,251,248,.98);

        box-shadow:-12px 0 30px rgba(0,0,0,.12);

        padding:100px 24px 24px;

        overflow-y:auto;

        transform:translateX(100%);

        transition:transform .35s ease;

        z-index:1500;

    }

    .main-nav.nav-open{

        transform:translateX(0);

    }

    .main-nav a{

        padding:14px 0;

        border-bottom:1px solid var(--border);

    }

    .nav-overlay{

        display:block;

        position:fixed;

        inset:0;

        background:rgba(0,0,0,.35);

        opacity:0;

        visibility:hidden;

        transition:opacity .35s ease;

        z-index:1400;

    }

    .nav-overlay.active{

        opacity:1;

        visibility:visible;

    }

    .main-nav .nav-cart-link{

        display:flex;

        align-items:center;

        justify-content:center;

        gap:8px;

        margin-top:14px;

        padding:14px 0;

        border-bottom:none;

        border-radius:999px;

        background:var(--accent-dark);

        color:white;

    }

    .logo img{

        width:130px;

    }

    main{

        padding-top:82px;

    }

    .shop-layout{

        grid-template-columns:1fr;

        gap:20px;

    }

    .collection-navigation{

        position:static;

        flex-direction:row;

        flex-wrap:wrap;

        gap:8px;

    }

    .collection-navigation-label{

        display:none;

    }

}
/*==================================================
PART 3
SHOP PAGE • PRODUCT CARDS
==================================================*/


/*=========================
PRODUCT SECTIONS
=========================*/

.product-section{

    padding:50px 0;

}

.product-section:nth-child(even){

    background:#fff;

}

#plushies{

    background:transparent;

}


/*=========================
PRODUCT GRID
=========================*/

.products-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

}

.featured-footer{

    text-align:center;

    margin-top:50px;

}


/*=========================
PRODUCT CARD
=========================*/

.product-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.06);

    transition:.35s;

    display:flex;

    flex-direction:column;

    height:100%;

}

.product-card:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 45px rgba(0,0,0,.10);

}


/*=========================
CARD IMAGE
=========================*/

.product-card img{

    width:100%;

    height:320px;

    object-fit:cover;

    display:block;

}

/* width matches this image's own aspect ratio at each breakpoint's fixed card-image height, so the card hugs the image with no side margins */
.product-card[data-id="signature-wooden-crib"]{

    width:265px;

    justify-self:start;

}

.product-card[data-id="signature-wooden-crib"] img{

    width:100%;

    height:320px;

    object-fit:contain;

}

@media (max-width:900px){

    .product-card[data-id="signature-wooden-crib"]{

        width:215px;

    }

    .product-card[data-id="signature-wooden-crib"] img{

        height:260px;

    }

}

@media (max-width:600px){

    .product-card[data-id="signature-wooden-crib"]{

        width:124px;

    }

    .product-card[data-id="signature-wooden-crib"] img{

        height:150px;

    }

}


/*=========================
CARD CONTENT
=========================*/

.product-info{

    padding:16px;

    display:flex;

    flex-direction:column;

    flex-grow:1;

}


/*=========================
CATEGORY
=========================*/

.product-category{

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:2px;

    color:var(--accent);

    margin-bottom:8px;

}


/*=========================
TITLE
=========================*/

.product-info h3{

    font-size:1.9rem;

    margin-bottom:10px;

    line-height:1.15;

}


/*=========================
DESCRIPTION
=========================*/

.product-info p{

    font-size:.92rem;

    color:#666;

    line-height:1.6;

    margin-bottom:20px;

}


/*=========================
BOTTOM ROW
=========================*/

.product-bottom{

    margin-top:auto;

    display:flex;

    flex-direction:column;

    align-items:stretch;

}


/*=========================
PRICE
=========================*/

.product-price{

    font-size:1.05rem;

    font-weight:400;

    color:var(--heading);

    margin-bottom:14px;

}


/*=========================
VIEW BUTTON
=========================*/

.product-button{

    padding:10px 18px;

    border-radius:999px;

    background:var(--accent);

    color:#fff;

    font-size:.82rem;

    font-weight:500;

    margin-top:auto;

    width:100%;

    text-align:center;

}

.product-button:hover{

    background:var(--accent-dark);

}


/*=========================
SECTION SPACING
=========================*/

.section-heading{

    margin-bottom:55px;

}


/*=========================
COLLECTION DESCRIPTION
=========================*/

.section-description{

    max-width:620px;

    margin:auto;

}


/*=========================
CUSTOM PIECE
=========================*/

.custom-piece{

    padding:120px 0;

    text-align:center;

    background:#F8F4F1;

}

.custom-piece-content{

    max-width:760px;

    margin:auto;

}

.custom-piece-content h2{

    margin-bottom:20px;

}

.custom-piece-content p{

    margin-bottom:35px;

    color:#666;

}


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

@media (max-width:900px){

    .products-grid{

        grid-template-columns:1fr;

        gap:28px;

    }

    .product-card img{

        height:260px;

    }

    .product-info{

        padding:20px;

    }

    .product-info h3{

        font-size:1.6rem;

    }

}

@media (max-width:600px){

    .products-grid{

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

        gap:14px;

    }

    .product-card img{

        height:150px;

    }

    .product-info{

        padding:12px;

    }

    .product-category{

        font-size:.62rem;

        margin-bottom:4px;

    }

    .product-info h3{

        font-size:1.05rem;

        margin-bottom:6px;

    }

    .product-info p{

        font-size:.78rem;

        margin-bottom:10px;

    }

    .product-price{

        font-size:.85rem;

        margin-bottom:8px;

    }

    .product-button{

        font-size:.72rem;

        padding:8px 14px;

    }

}
/*==================================================
PART 4
INDIVIDUAL PRODUCT PAGES
==================================================*/


/*=========================
BREADCRUMB
=========================*/

.breadcrumb{

    padding:35px 0 15px;

}

.breadcrumb .container{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

    font-size:.9rem;

    color:#777;

}

.breadcrumb a{

    transition:.3s;

}

.breadcrumb a:hover{

    color:var(--accent);

}


/*=========================
PRODUCT PAGE
=========================*/

.product-page{

    padding:40px 0 100px;

}

.product-layout{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:start;

}


/*=========================
PRODUCT GALLERY
=========================*/

.product-gallery{

    position:sticky;

    top:130px;

}

.main-image{

    overflow:hidden;

    border-radius:24px;

    background:white;

    box-shadow:var(--shadow);

}

.main-image img{

    width:100%;

    height:620px;

    object-fit:cover;

    cursor:zoom-in;

    transition:.35s;

}

.main-image:hover img{

    transform:scale(1.03);

}


/*=========================
THUMBNAILS
=========================*/

.thumbnail-gallery{

    display:grid;

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

    gap:14px;

    margin-top:18px;

}

.thumbnail-gallery img{

    width:100%;

    height:110px;

    object-fit:cover;

    border-radius:16px;

    cursor:pointer;

    transition:.25s;

    border:2px solid transparent;

}

.thumbnail-gallery img:hover{

    transform:translateY(-3px);

}

.thumbnail-gallery img.active-thumb{

    border-color:var(--accent);

}


/*=========================
PRODUCT DETAILS
=========================*/

.product-details h1{

    margin-bottom:12px;

}

.product-details .product-price{

    font-size:1.25rem;

    color:var(--heading);

    font-weight:600;

    margin-bottom:22px;

}

.product-description{

    color:#666;

    line-height:1.9;

    margin-bottom:35px;

}


/*=========================
PURCHASE OPTIONS
=========================*/

.purchase-section{

    margin:40px 0;

}

.purchase-section h3{

    margin-bottom:18px;

    font-size:1.5rem;

}

.option-selector{

    display:grid;

    gap:18px;

}

.option-card{

    display:block;

    cursor:pointer;

}

.option-card input{

    display:none;

}

.option-content{

    padding:22px;

    border:2px solid var(--border);

    border-radius:20px;

    background:white;

    transition:.3s;

}

.option-card input:checked + .option-content{

    border-color:var(--accent);

    background:#fcf8f4;

    box-shadow:0 12px 30px rgba(0,0,0,.05);

}

.option-content h4{

    font-size:1.4rem;

    margin-bottom:8px;

}

.option-content p{

    color:#666;

    margin-bottom:14px;

}

.option-price{

    font-weight:600;

    color:var(--accent-dark);

}


/*=========================
BUTTONS
=========================*/

.product-actions{

    margin:35px 0;

}

.product-actions .primary-button{

    width:100%;

}


/*=========================
PRODUCT INFORMATION
=========================*/

.product-information{

    display:grid;

    gap:18px;

    margin-top:40px;

}

.info-item{

    background:white;

    padding:24px;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.info-item h4{

    margin-bottom:8px;

    font-size:1.3rem;

}

.info-item p{

    color:#666;

    line-height:1.8;

}


/*=========================
RELATED PRODUCTS
=========================*/

.related-products{

    padding:100px 0;

    background:#fff;

}


/*=========================
LIGHTBOX
=========================*/

.lightbox{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.92);

    z-index:5000;

}

.lightbox.active{

    display:flex;

}

.lightbox img{

    width:min(88vw,900px);

    max-height:88vh;

    object-fit:contain;

}

.lightbox-close{

    position:absolute;

    top:30px;

    right:40px;

    border:none;

    background:none;

    color:white;

    font-size:3rem;

    cursor:pointer;

}

.lightbox-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    border:none;

    background:none;

    color:white;

    font-size:3rem;

    cursor:pointer;

}

.lightbox-arrow.left{

    left:35px;

}

.lightbox-arrow.right{

    right:35px;

}


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

@media (max-width:1000px){

    .product-layout{

        grid-template-columns:1fr;

        gap:50px;

    }

    .product-gallery{

        position:static;

    }

    .main-image img{

        height:450px;

    }

}

@media (max-width:700px){

    .thumbnail-gallery{

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

    }

    .main-image img{

        height:350px;

    }

}
/*==================================================
PART 5
HOMEPAGE • FOOTER • ANIMATIONS • RESPONSIVE
==================================================*/


/*=========================
HERO
=========================*/

.hero{

    /* adjust this to change how tall the hero is */
    --hero-height:100vh;

    position:relative;

    min-height:var(--hero-height);

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#FDFBF8;

}

.hero-image{

    position:absolute;

    inset:0;

}

.hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.45));

}

.hero .container{

    position:relative;

    z-index:1;

    display:flex;

    justify-content:flex-end;

}

.hero-content{

    max-width:620px;

}

.hero-tag{

    display:inline-block;

    letter-spacing:3px;

    text-transform:uppercase;

    font-size:.8rem;

    font-weight:600;

    color:#fff;

    margin-bottom:18px;

}

.hero h1{

    font-size:3.7rem;

    color:#fff;

    margin-bottom:24px;

}

.hero-text{

    font-size:1rem;

    color:rgba(255,255,255,.85);

    margin-bottom:32px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}


/*=========================
FEATURED COLLECTIONS
=========================*/

.featured-collections{

    padding:110px 0;

}

.collection-col-3,
.collection-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(280px,1fr));

    gap:35px;

}

.collection-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

    display:flex;

    flex-direction:column;

    height:100%;

}

.collection-card:hover{

    transform:translateY(-8px);

}

.collection-card img{

    width:100%;

    height:300px;

    object-fit:cover;

}
.collection-content{

    padding:28px;

    display:flex;

    flex-direction:column;

    flex-grow:1;

}

.collection-content h3{

    margin-bottom:12px;

    font-size:1.8rem;

}

.collection-content p{

    margin-bottom:14px;

    color:#666;

    font-size:1rem;

}

.collection-link{

    color:#000;

    font-weight:300;

    font-size:.95rem;

    margin-top:auto;

}

.collection-link:hover{

    text-decoration:underline;

}

@media (max-width:900px){

    .collection-grid{

        grid-template-columns:1fr;

        gap:28px;

    }

    .collection-card img{

        height:220px;

    }

}
/*=========================
ABOUT
=========================*/

.about{

    padding:120px 0;

    background:#fff;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about img{

    border-radius:22px;

    box-shadow:var(--shadow);

}

.about p{

    margin-bottom:18px;

    color:#666;

}


/*=========================
FEATURED PRODUCT
=========================*/

.featured-piece{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.featured-piece.reverse{

    direction:rtl;

}

.featured-piece.reverse>*{

    direction:ltr;

}

.featured-piece-image img{

    width:100%;

    border-radius:24px;

    object-fit:cover;

    box-shadow:var(--shadow);

}

.featured-piece-content h3{

    margin:18px 0;

}

.featured-piece-content p{

    margin-bottom:24px;

    color:#666;

}


/*=========================
CUSTOM FEATURES
=========================*/

.custom-features{

    display:flex;

    justify-content:center;

    gap:50px;

    flex-wrap:wrap;

    margin:45px 0;

}

.custom-feature{

    text-align:center;

}

.custom-feature span{

    font-size:2rem;

    display:block;

    margin-bottom:10px;

}

.custom-feature p{

    font-size:.95rem;

}


/*=========================
FOOTER
=========================*/

.site-footer{

    background:#F7F2EE;

    padding:80px 0 25px;

    margin-top:100px;

}

.footer-container{

    width:min(1200px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;

}

.footer-brand img{

    width:160px;

    margin-bottom:20px;

}

.footer-brand p{

    color:#666;

}

.footer-links h4,
.footer-contact h4{

    margin-bottom:20px;

}

.footer-links a,
.footer-contact a{

    display:block;

    margin-bottom:12px;

    color:#666;

    transition:.3s;

}

.footer-links a:hover,
.footer-contact a:hover{

    color:var(--accent);

}

.footer-bottom{

    text-align:center;

    margin-top:60px;

    padding-top:25px;

    border-top:1px solid var(--border);

    color:#888;

}


/*=========================
FADE ANIMATION
=========================*/

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:.7s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}


/*=========================
IMAGE HOVER
=========================*/

img{

    transition:.35s;

}

.product-card:hover img,

.collection-card:hover img{

    transform:scale(1.04);

}


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

@media (max-width:1000px){

    .about-grid,

    .featured-piece{

        grid-template-columns:1fr;

    }

    .featured-piece.reverse{

        direction:ltr;

    }

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-brand img{

        margin:0 auto 20px;

    }

}

@media (max-width:700px){

    h1{

        font-size:3rem;

    }

    h2{

        font-size:2.3rem;

    }

    h3{

        font-size:1.8rem;

    }

    section{

        padding:70px 0;

    }

    .custom-features{

        gap:30px;

    }

    .hero{

        --hero-height:90vh;

    }

    .hero h1{

        font-size:2.4rem;

    }

}
/*==================================================
SHOPPING CART
==================================================*/

.cart-page{

    padding:80px 0;

}

.cart-layout{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:50px;

    align-items:start;

}

/*=========================
CART ITEMS
=========================*/

.cart-items{

    display:flex;

    flex-direction:column;

    background:#fff;

    border-radius:22px;

    box-shadow:0 12px 30px rgba(0,0,0,.05);

    overflow:hidden;

}

.cart-item{

    display:grid;

    grid-template-columns:140px 1fr;

    gap:25px;

    padding:22px;

    align-items:center;

    border-bottom:1px solid var(--border);

}

.cart-item:last-child{

    border-bottom:none;

}

#emptyCart{

    padding:60px 40px;

    text-align:center;

}

.cart-item img{

    width:140px;

    height:140px;

    object-fit:cover;

    border-radius:16px;

}

.cart-item-header{

    display:flex;

    justify-content:space-between;

    align-items:baseline;

    gap:12px;

    margin-bottom:8px;

}

.cart-item-header h3{

    font-size:1.2rem;

    margin-bottom:0;

}

.cart-item-header strong{

    font-size:1.1rem;

    font-weight:600;

    white-space:nowrap;

}

.cart-item-info p{

    color:#777;

    margin-bottom:8px;

}

/*=========================
QUANTITY
=========================*/

.quantity-controls{

    display:flex;

    align-items:center;

    gap:36px;

    margin-top:15px;

}

.quantity-controls button{

    width:34px;

    height:34px;

    border:none;

    border-radius:50%;

    background:#f2f2f2;

    cursor:pointer;

    font-size:1.1rem;

    transition:.3s;

}

.quantity-controls button:hover{

    background:var(--accent);

    color:white;

}

.quantity-number{

    width:30px;

    text-align:center;

}

/*=========================
SUMMARY
=========================*/

.cart-summary{

    position:sticky;

    top:120px;

    background:#fff;

    padding:30px;

    border-radius:22px;

    box-shadow:0 12px 30px rgba(0,0,0,.05);

}

.cart-summary h2{

    margin-bottom:25px;

}

.cart-summary-actions{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:16px;

    margin-top:25px;

}

.summary-row{

    display:flex;

    justify-content:space-between;

    margin-bottom:18px;

}

.summary-row.total{

    font-size:1.2rem;

}

.cart-summary hr{

    margin:20px 0;

    border:none;

    border-top:1px solid #eee;

}

/*=========================
EMPTY CART
=========================*/

#emptyCart{

    text-align:center;

    padding:80px 30px;

    background:#fff;

    border-radius:22px;

    box-shadow:0 12px 30px rgba(0,0,0,.05);

}

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

@media(max-width:900px){

    .cart-layout{

        grid-template-columns:1fr;

    }

    .cart-summary{

        position:static;

    }

    .cart-item{

        grid-template-columns:1fr;

        text-align:center;

    }

    .cart-item img{

        width:100%;

        height:260px;

    }

    .quantity-controls{

        justify-content:center;

    }

}
/*==================================================
CHECKOUT PAGE
==================================================*/

.checkout-page{

    padding:80px 0;

}

.checkout-layout{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:50px;

    align-items:start;

}

/*=========================
FORM
=========================*/

.checkout-form{

    background:#fff;

    padding:40px;

    border-radius:22px;

    box-shadow:0 12px 30px rgba(0,0,0,.05);

}

.checkout-form h2{

    margin-bottom:25px;

}

.checkout-form input,

.checkout-form textarea{

    width:100%;

    padding:16px 18px;

    margin-bottom:18px;

    border:1px solid #ddd;

    border-radius:14px;

    font-size:1rem;

    font-family:inherit;

    transition:.3s;

}

.checkout-form textarea{

    min-height:130px;

    resize:vertical;

}

.checkout-form input:focus,

.checkout-form textarea:focus{

    outline:none;

    border-color:var(--accent);

}

.checkout-form label{

    display:block;

    margin-bottom:14px;

    cursor:pointer;

}

.checkout-form label.field-label{

    margin-bottom:8px;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:.3px;

    color:var(--heading);

}

.checkout-form input[type="radio"]{

    width:auto;

    margin-right:10px;

}

.checkout-form button{

    width:100%;

    margin-top:25px;

}

/*=========================
ORDER SUMMARY
=========================*/

.checkout-summary{

    position:sticky;

    top:120px;

    background:#fff;

    padding:30px;

    border-radius:22px;

    box-shadow:0 12px 30px rgba(0,0,0,.05);

}

.checkout-summary h2{

    margin-bottom:25px;

}

.checkout-item{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:18px;

    padding-bottom:18px;

    border-bottom:1px solid #eee;

}

.checkout-item:last-child{

    border-bottom:none;

}

.checkout-item h4{

    margin-bottom:6px;

    font-size:1rem;

}

.checkout-item p{

    color:#777;

    font-size:.9rem;

}

.checkout-summary hr{

    border:none;

    border-top:1px solid #eee;

    margin:25px 0;

}

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

@media(max-width:900px){

    .checkout-layout{

        grid-template-columns:1fr;

    }

    .checkout-summary{

        position:static;

    }

    .checkout-form{

        padding:28px;

    }

}
/*==================================================
CUSTOM PAGE
PART 3A — HERO + PROCESS
==================================================*/


/*=========================
CUSTOM HERO
=========================*/

.custom-hero{

    padding:90px 0 75px;

    text-align:center;

}

.custom-hero-content{

    max-width:760px;

    margin:auto;

}

.custom-hero h1{

    margin:12px auto 20px;

}

.custom-hero-text{

    max-width:620px;

    margin:auto;

    font-size:1.08rem;

    line-height:1.8;

    color:#666;

}


/*=========================
CUSTOM PROCESS
=========================*/

.custom-process{

    padding:70px 0 90px;

    background:#fdf8f7;

}

.custom-process-heading{

    max-width:760px;

    margin:0 auto 50px;

    text-align:center;

}

.custom-process-heading h2{

    margin:12px auto 18px;

}

.custom-process-heading .section-description{

    max-width:680px;

    margin:auto;

    color:#666;

    line-height:1.8;

}


/*=========================
PROCESS GRID
=========================*/

.process-grid{

    display:grid;

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

    gap:18px;

}

.process-card{

    background:white;

    padding:30px 25px;

    border:1px solid rgba(0,0,0,.06);

    border-radius:20px;

    min-height:220px;

    transition:.3s ease;

}

.process-card:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(0,0,0,.06);

}

.process-number{

    display:block;

    margin-bottom:30px;

    font-family:"Cormorant Garamond",serif;

    font-size:1.3rem;

    color:var(--highlight);

}

.process-card h3{

    margin-bottom:12px;

    font-size:1.25rem;

}

.process-card p{

    color:#777;

    font-size:.92rem;

    line-height:1.7;

}


/*=========================
CUSTOM REQUEST SECTION
=========================*/

.custom-request{

    padding:100px 0;

}

.custom-form-wrapper{

    max-width:900px;

    margin:auto;

}

.custom-form-intro{

    text-align:center;

    max-width:650px;

    margin:0 auto 55px;

}

.custom-form-intro h2{

    margin:12px 0 18px;

}

.custom-form-intro p{

    color:#666;

    line-height:1.8;

}
/*==================================================
CUSTOM PAGE
PART 3B — FORM + FAQ
==================================================*/


/*=========================
FORM
=========================*/

.custom-form{

    background:#fff;

    border:1px solid rgba(0,0,0,.06);

    border-radius:24px;

    padding:45px;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

}


/*=========================
FORM SECTIONS
=========================*/

.form-section{

    padding:35px 0;

    border-bottom:1px solid #eee;

}

.form-section:first-child{

    padding-top:0;

}

.form-section-heading{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:28px;

}

.form-section-heading > span{

    flex-shrink:0;

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--accent);

    color:white;

    font-size:.8rem;

}

.form-section-heading h3{

    margin:0 0 5px;

    font-size:1.3rem;

}

.form-section-heading p{

    margin:0;

    color:#888;

    font-size:.9rem;

}


/*=========================
FORM GRID
=========================*/

.form-grid{

    display:grid;

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

    gap:15px;

}

.form-field{

    display:flex;

    flex-direction:column;

}

.custom-form label.field-label{

    display:block;

    margin-bottom:8px;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:.3px;

    color:var(--heading);

}


/*=========================
FORM INPUTS
=========================*/

.custom-form input,

.custom-form select,

.custom-form textarea{

    width:100%;

    box-sizing:border-box;

    padding:15px 17px;

    margin-bottom:15px;

    border:1px solid #ddd;

    border-radius:12px;

    background:#fdfdfd;

    color:var(--text);

    font-family:inherit;

    font-size:.92rem;

    transition:.25s ease;

}

.custom-form input:focus,

.custom-form select:focus,

.custom-form textarea:focus{

    outline:none;

    border-color:var(--accent);

    background:white;

    box-shadow:0 0 0 3px rgba(248,233,228,.7);

}

.custom-form textarea{

    resize:vertical;

    min-height:130px;

    line-height:1.6;

}

.custom-form select{

    cursor:pointer;

}


/*=========================
SUBMIT
=========================*/

.custom-form-submit{

    padding-top:35px;

    text-align:center;

}

.custom-form-submit p{

    max-width:600px;

    margin:0 auto 25px;

    color:#888;

    font-size:.9rem;

    line-height:1.7;

}

.custom-form-submit .primary-button{

    border:none;

    cursor:pointer;

}


/*=========================
FAQ
=========================*/

.custom-faq{

    padding:90px 0;

    background:#fdf8f7;

}

.custom-faq .section-heading{

    text-align:center;

    margin-bottom:45px;

}

.faq-list{

    max-width:800px;

    margin:auto;

}

.faq-list details{

    background:white;

    border:1px solid rgba(0,0,0,.06);

    border-radius:16px;

    margin-bottom:12px;

    padding:0 25px;

}

.faq-list summary{

    padding:22px 0;

    cursor:pointer;

    font-weight:500;

    list-style:none;

    position:relative;

    padding-right:35px;

}

.faq-list summary::-webkit-details-marker{

    display:none;

}

.faq-list summary::after{

    content:"+";

    position:absolute;

    right:0;

    top:18px;

    font-size:1.4rem;

    font-weight:300;

    color:var(--accent);

}

.faq-list details[open] summary::after{

    content:"−";

}

.faq-list details p{

    padding:0 0 22px;

    margin:0;

    color:#777;

    line-height:1.7;

    font-size:.92rem;

}


/*=========================
FINAL CTA
=========================*/

.custom-final-cta{

    padding:100px 0;

    text-align:center;

}

.custom-final-content{

    max-width:650px;

    margin:auto;

}

.custom-final-content h2{

    margin:12px 0 18px;

}

.custom-final-content p:last-child{

    color:#777;

    line-height:1.8;

}


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

@media(max-width:900px){

    .process-grid{

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

    }

    .custom-form{

        padding:30px;

    }

}


@media(max-width:600px){

    .custom-hero{

        padding:65px 0 55px;

    }

    .custom-process,

    .custom-request,

    .custom-faq,

    .custom-final-cta{

        padding:65px 0;

    }

    .process-grid{

        grid-template-columns:1fr;

    }

    .process-card{

        min-height:auto;

    }

    .custom-form{

        padding:22px;

        border-radius:18px;

    }

    .form-grid{

        grid-template-columns:1fr;

        gap:0;

    }

    .form-section-heading{

        gap:12px;

    }

}