/* --- GLOBAL BACKGROUND --- */
body {
    background-image: 
        linear-gradient(rgba(30, 20, 15, 0.9), rgba(30, 20, 15, 0.9)),
        url('https://static.wixstatic.com/media/bb1b05_b7055e521a2b41949ff5fcf0c3f34469~mv2.jpg/v1/crop/x_65,y_0,w_3870,h_839/fill/w_3870,h_838,al_c,q_90,enc_avif,quality_auto/WOOD%20BACKGROUND%20TRY%202.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    color: #ffffff;
}

/* --- HEADER & NAVBAR STYLES --- */
.crossroad-header-wrapper {
    background-image: url('https://static.wixstatic.com/media/bb1b05_b7055e521a2b41949ff5fcf0c3f34469~mv2.jpg/v1/crop/x_65,y_0,w_3870,h_839/fill/w_3870,h_838,al_c,q_90,enc_avif,quality_auto/WOOD%20BACKGROUND%20TRY%202.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 30px;
    padding-bottom: 0;
    border-bottom: 1px solid #ddd;
}

.crossroad-logo-container { text-align: center; padding-bottom: 20px; }

.header-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; 
}

.header-logo { 
    max-height: 80px; 
    width: auto; 
    max-width: 280px;
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.2)); 
}

.header-separator {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #000;
    line-height: 1;
}

.separator-pipe { font-size: 3rem; font-weight: 300; }
.separator-text { font-size: 0.85rem; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; color: #000 !important; white-space: nowrap; }

@media (max-width: 768px) {
    .header-logo { max-height: 50px; max-width: 150px; }
    .separator-pipe { font-size: 2rem; }
    .separator-text { font-size: 0.7rem; }
    .header-logo-wrapper { gap: 10px; }
}

.crossroad-navbar { 
    background: #ffffff; 
    padding: 0; 
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    margin-top: 25px; /* Added spacing above nav */
}

@media (min-width: 992px) {
    .navbar-nav { width: 100%; justify-content: center; }
    .nav-item { 
        border-right: 1px solid #e0e0e0; 
        flex-grow: 1; 
        text-align: center; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
    }
    .nav-item:last-child { border-right: none; }
    .nav-item:first-child { border-left: 1px solid #e0e0e0; }
    .crossroad-nav-link { 
        padding: 20px 10px !important; 
        font-size: 13px; 
    }
}

@media (max-width: 991px) {
    .navbar-toggler { margin: 10px auto; border-color: #333; }
    .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
    .navbar-collapse { background-color: #ffffff; border-top: 3px solid #b92b27; padding: 0 15px 15px 15px; }
    .nav-item { border-bottom: 1px solid #eee; width: 100%; text-align: left; }
    .nav-item:last-child { border-bottom: none; }
    .crossroad-nav-link { padding: 15px 10px !important; font-size: 16px; }
}

.crossroad-nav-link { 
    color: #3e2b26 !important; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 1.5px; 
    width: 100%; 
    display: block; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}
.crossroad-nav-link:hover { color: #b92b27 !important; background-color: #f9f9f9; }
.crossroad-nav-link.active { color: #b92b27 !important; }

.main-content { padding-top: 50px; padding-bottom: 50px; }

/* --- GALLERY & FORM STYLES --- */
.preview-container {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    margin-bottom: 20px;
    text-align: center;
}

/* Flex wrapper for Side-by-Side */
.preview-flex-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0; /* Strict no gap */
}

.preview-side-container {
    width: 50%;
    text-align: center;
    margin: 0;
    padding: 0;
}

.preview-label {
    color: #000;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.preview-img-side {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    display: block;
}

.thumbnail-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.thumbnail-item {
    width: 80px;
    height: 60px;
    cursor: pointer;
    border: 3px solid transparent;
    opacity: 0.6;
    transition: all 0.2s ease;
    object-fit: cover;
    border-radius: 4px;
    background: #fff;
}

@media (max-width: 576px) {
    .thumbnail-item { width: 60px; height: 45px; gap: 5px; }
    .main-content { padding-top: 20px; }
    h2 { font-size: 1.8rem; }
}

.thumbnail-item:hover { opacity: 1; transform: scale(1.05); }
.thumbnail-item.active {
    border-color: #b92b27;
    opacity: 1;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.card-body { color: #333; }

/* --- CART & NOTIFICATION STYLES --- */
.cart-bar-wrapper {
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1020;
    margin-top: 10px; /* Added spacing above cart bar */
}

#notificationToast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1055;
    min-width: 300px;
    display: none; 
}

/* Modal tweaks */
.modal-body { color: #333; }

/* --- CUSTOM BROWN BUTTON --- */
.btn-brown {
    background-color: #3e2b26; /* Matches nav link dark brown */
    border-color: #3e2b26;
    color: #ffffff;
}
.btn-brown:hover, .btn-brown:focus, .btn-brown:active {
    background-color: #2c1e1a; /* Slightly darker on hover */
    border-color: #2c1e1a;
    color: #ffffff !important;
}