@import url('https://googleapis.com');

:root { 
    --primary-pink: #ffafcc; 
    --text-cocoa: #4a2c2a; 
    --bg-warm: #e9d5d2; 
    --card-white: #ffffff; 
}

body { 
    font-family: 'Montserrat', sans-serif; 
    background-color: var(--bg-warm); 
    background-image: url("https://transparenttextures.com"); 
    color: var(--text-cocoa); 
    margin: 0; 
    line-height: 1.7; 
}

/* --- HEADER AND NAVIGATION LOGIC --- */
.boutique-header { 
    padding: 30px 15px 10px 15px; 
    text-align: center; 
}

.header-metadata { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    max-width: 1300px; 
    margin: 0 auto; 
    gap: 15px; 
}

.meta-side { 
    font-size: 0.65rem; 
    text-transform: uppercase; 
    letter-spacing: 3px; 
    color: #8b6e6a; 
    font-weight: 500; 
    text-align: center !important; 
}

/* Strip decorative divider horizontal bars on mobile screens to prevent right-side spillovers */
.meta-left::before, .meta-right::after { 
    display: none !important; 
}

.main-logo { 
    max-width: 130px; 
    height: auto; 
    border-radius: 2px; 
    box-shadow: 0 15px 35px rgba(74, 44, 42, 0.12); 
    border: 6px solid var(--card-white); 
}

.decorative-line { 
    width: 60px; 
    height: 1px; 
    background: var(--text-cocoa); 
    margin: 20px auto 0; 
    opacity: 0.2; 
}

/* --- BRAND MOTTO TEXT CORES --- */
.motto-container { 
    text-align: center; 
    padding: 20px 15px; 
}

.motto-text { 
    font-family: 'Playfair Display', serif; 
    font-style: italic; 
    font-size: 1.2rem; 
    margin: 0; 
    opacity: 0.9; 
    line-height: 1.4;
}

.motto-divider { 
    font-size: 0.8rem; 
    margin-top: 5px; 
    opacity: 0.4; 
}

/* --- THE ADAPTIVE FLUID GRID SYSTEMS --- */
.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 15px; 
    box-sizing: border-box;
}

#product-grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 30px; 
    padding: 20px 0 100px 0; 
    align-items: start; 
}

/* Remove alternating layout spacing rows safely inside standard single columns */
.product-card:nth-child(even) { 
    margin-top: 0px; 
}

.product-card { 
    background: var(--card-white); 
    padding: 15px 15px 30px 15px; 
    box-shadow: 0 20px 45px rgba(0,0,0,0.06); 
    transition: 0.5s ease; 
    position: relative; 
    overflow: hidden; 
    box-sizing: border-box;
}

/* --- IMAGE DISPLAY CONTAINER PROPERTIES --- */
.img-container { 
    overflow: hidden; 
    height: auto; 
    aspect-ratio: 1 / 1; 
    margin-bottom: 20px; 
    position: relative; 
} 

.img-container img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: 1s ease; 
}

.bespoke-img-height { 
    height: auto !important; 
    aspect-ratio: 1 / 1 !important; 
} 

.bespoke-card-premium { 
    border: 1px dashed var(--primary-pink) !important; 
}

.img-vignette { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 120px; 
    background: linear-gradient(to top, #ffffff 20%, transparent 100%); 
    z-index: 2; 
}

.glitz-overlay { 
    position: absolute; 
    top: 0; 
    left: -150%; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6), transparent); 
    transform: skewX(-25deg); 
    transition: 0.8s; 
    z-index: 5; 
}

.bespoke-card-premium:hover .glitz-overlay { 
    left: 150%; 
}

.bespoke-badge { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
    background: var(--text-cocoa); 
    color: white; 
    padding: 6px 12px; 
    font-size: 0.55rem; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    z-index: 10; 
}

.product-name { 
    font-family: 'Playfair Display', serif; 
    font-size: 1.5rem; 
    font-style: italic; 
    font-weight: 700; 
    margin: 5px 0 15px 0; 
}

/* --- ACCESSIBLE CALL TO ACTION ELEMENTS --- */
.btnAddAction, .btnBespokeAction { 
    background: transparent; 
    color: var(--text-cocoa); 
    border: 1px solid var(--text-cocoa); 
    padding: 12px 20px; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-size: 0.65rem; 
    font-weight: 600; 
    cursor: pointer; 
    transition: 0.3s; 
    text-decoration: none; 
    display: inline-block; 
}

.btnAddAction:hover, .btnBespokeAction:hover { 
    background: var(--text-cocoa); 
    color: white; 
}

/* Native Mobile Safe Sticky Layout Position overrides */
.floating-tray { 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    top: auto; 
    background: var(--text-cocoa); 
    padding: 12px 20px; 
    box-shadow: 4px 4px 0px var(--primary-pink); 
    z-index: 1000; 
    text-decoration: none; 
    color: white; 
    font-size: 0.65rem; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
}

.admin-access { 
    position: static; 
    text-align: center; 
    padding: 20px 0; 
    font-size: 0.65rem; 
    opacity: 0.5; 
}

/* --- OVERLAY MODALS AND FORMS --- */
.contact-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(74, 44, 42, 0.85); 
    display: none; 
    justify-content: center; 
    align-items: center; 
    z-index: 2000; 
    backdrop-filter: blur(5px); 
    padding: 15px; 
    box-sizing: border-box;
}

.contact-card { 
    background: var(--card-white); 
    padding: 30px 20px; 
    width: 100%; 
    max-width: 450px; 
    position: relative; 
    border: 1px solid var(--primary-pink); 
    text-align: center; 
    box-sizing: border-box;
}

.close-btn { 
    position: absolute; 
    top: 10px; 
    right: 15px; 
    background: none; 
    border: none; 
    font-size: 1.5rem; 
    cursor: pointer; 
    color: var(--text-cocoa); 
    opacity: 0.5; 
}

.input-group { 
    margin-bottom: 20px; 
    text-align: left; 
}

.input-group label { 
    display: block; 
    font-size: 0.65rem; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    margin-bottom: 8px; 
    color: var(--text-cocoa); 
}

.input-group input, .input-group textarea { 
    width: 100%; 
    padding: 12px; 
    border: 1px solid rgba(74, 44, 42, 0.1); 
    background: #fdfdfd; 
    font-family: 'Montserrat', sans-serif; 
    color: var(--text-cocoa); 
    box-sizing: border-box; 
}

.contact-trigger { 
    text-align: center; 
    padding: 30px 0; 
}

.contact-trigger a { 
    color: var(--text-cocoa); 
    font-size: 0.7rem; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    text-decoration: none; 
    border-bottom: 1px solid var(--primary-pink); 
    padding-bottom: 5px; 
}

.boutique-notification { 
    position: fixed; 
    top: 20px; 
    left: 15px; 
    right: 15px; 
    transform: none; 
    background: var(--card-white); 
    color: var(--text-cocoa); 
    padding: 15px 20px; 
    border: 1px solid var(--primary-pink); 
    box-shadow: 0 15px 45px rgba(74, 44, 42, 0.1); 
    z-index: 2000; 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    transition: opacity 0.6s ease; 
    box-sizing: border-box;
}

.boutique-notification p { 
    margin: 0; 
    font-family: 'Playfair Display', serif; 
    font-style: italic; 
    font-size: 0.85rem; 
}

/* --- THE ADAPTIVE BREAKPOINT MEDIA SCREEN QUERY ENGINE --- */
@media (min-width: 650px) {
    .boutique-header { padding: 50px 20px 10px 20px; }
    
    .header-metadata { 
        flex-direction: row; 
        gap: 30px; 
    }
    
    .meta-side { flex: 1; letter-spacing: 5px; }
    .meta-left { text-align: right !important; display: block; }
    .meta-right { text-align: left !important; display: block; }
    
    .meta-left::before { content: ''; display: inline-block; width: 40px; height: 1px; background: var(--text-cocoa); vertical-align: middle; margin-right: 15px; opacity: 0.2; }
    .meta-right::after { content: ''; display: inline-block; width: 40px; height: 1px; background: var(--text-cocoa); vertical-align: middle; margin-left: 15px; opacity: 0.2; }
    
    .main-logo { max-width: 165px; border: 8px solid var(--card-white); }
    .motto-text { font-size: 1.4rem; }
    
    #product-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 40px; 
    }
    
    .product-card:nth-child(even) { 
        margin-top: 40px; 
    }
    
    .floating-tray { 
        top: 30px; 
        right: 30px; 
        bottom: auto; 
        letter-spacing: 3px; 
    }
    
    .admin-access { position: fixed; bottom: 15px; left: 15px; text-align: left; padding: 0; }
    .boutique-notification { top: 30px; left: 50%; right: auto; transform: translateX(-50%); padding: 15px 30px; }
    .boutique-notification p { font-size: 0.9rem; }
    .contact-card { padding: 40px; }
}

@media (min-width: 980px) {
    #product-grid { 
        grid-template-columns: repeat(3, 1fr); 
        gap: 60px; 
    }
    .header-metadata { gap: 50px; }
    .product-card:nth-child(even) { margin-top: 60px; }
}