@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Playfair+Display:wght@400;700&display=swap');

/* Vintage Antique Theme */

/* Define custom color variables for easier management */
:root {
    --vintage-primary: #8B7355; /* Muted Gold/Brown for primary actions/accents */
    --vintage-secondary: #4A3B33; /* Deep Brown for secondary elements, text */
    --vintage-accent: #A0522D; /* Sienna/Terracotta for highlights */
    --vintage-background-light: #FDF8F0; /* Warm Off-White/Cream for backgrounds */
    --vintage-background-dark: #362F2D; /* Soft Dark Gray/Brown for text on light backgrounds */
    --vintage-text-light: #FDF8F0; /* Very Light Cream for text on dark backgrounds */
    --vintage-text-dark: #362F2D; /* Dark Brown for main text */
}

/* Apply Lora as default font */
body {
    font-family: 'Lora', serif;
    background-color: var(--vintage-background-light); /* Set a warm background */
    color: var(--vintage-text-dark); /* Default text color */
    padding-top: 70px; /* Add padding to account for fixed navbar */
}

/* Apply Playfair Display to brand and menu links */
.navbar-brand {
    font-family: 'Playfair Display', serif !important;
    font-weight: 700 !important; /* Make Playfair Display stand out */
    text-transform: none; /* Remove uppercase for a more classic feel */
    font-size: 1.8rem !important; /* Larger for brand name */
}

.navbar-nav .nav-link {
    font-family: 'Playfair Display', serif !important;
    font-weight: 400 !important; /* Lighter weight for navigation links */
    font-size: 1.1rem !important; /* Slightly bigger font for navigation links */
}

/* Carousel shorter height */
#heroCarousel .carousel-item img {
    max-height: 350px; /* Set a maximum height for carousel images */
    object-fit: cover; /* Ensure images cover the area without distortion */
}

/* Override Bootstrap's default theme colors using custom variables */
/* This ensures consistency across components that use these variables */
.btn-primary,
.bg-primary,
.text-primary,
.alert-primary {
    background-color: var(--vintage-primary) !important;
    border-color: var(--vintage-primary) !important;
    color: var(--vintage-text-light) !important;
}

.btn-secondary,
.bg-secondary,
.text-secondary,
.alert-secondary {
    background-color: var(--vintage-secondary) !important;
    border-color: var(--vintage-secondary) !important;
    color: var(--vintage-text-light) !important;
}

.btn-info,
.bg-info,
.text-info,
.alert-info {
    background-color: var(--vintage-primary) !important;
    border-color: var(--vintage-primary) !important;
    color: var(--vintage-text-light) !important;
}

.btn-success,
.bg-success,
.text-success,
.alert-success {
    background-color: var(--vintage-secondary) !important; /* Use vintage secondary for success */
    border-color: var(--vintage-secondary) !important;
    color: var(--vintage-text-light) !important;
}

.btn-warning,
.bg-warning,
.text-warning,
.alert-warning {
    background-color: var(--vintage-accent) !important; /* Use vintage accent for warning */
    border-color: var(--vintage-accent) !important;
    color: var(--vintage-text-light) !important;
}

.btn-danger,
.bg-danger,
.text-danger,
.alert-danger {
    background-color: var(--vintage-accent) !important;
    border-color: var(--vintage-accent) !important;
    color: var(--vintage-text-light) !important;
}

.btn-light,
.bg-light,
.text-light,
.alert-light {
    background-color: var(--vintage-background-light) !important;
    border-color: var(--vintage-background-light) !important;
    color: var(--vintage-text-dark) !important;
}

.btn-dark,
.bg-dark,
.text-dark,
.alert-dark {
    background-color: var(--vintage-secondary) !important;
    border-color: var(--vintage-secondary) !important;
    color: var(--vintage-text-light) !important;
}

/* Navbar specific overrides */
.navbar {
    box-shadow: none; /* Remove sharp shadow for a softer vintage look */
    border-bottom: 1px solid var(--vintage-primary); /* Subtle border */
}
.navbar-dark.bg-primary {
    background-color: var(--vintage-secondary) !important; /* Dark brown for navbar background */
}
.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link {
    color: var(--vintage-text-light) !important;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: var(--vintage-primary) !important; /* Muted gold accent on hover */
}
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23FDF8F0' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important; /* Use vintage-text-light for toggler icon */
}

/* Cards */
.card {
    border: 1px solid var(--vintage-primary) !important; /* Subtle vintage border */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.1); /* Softer, more diffused shadow */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    background-color: var(--vintage-background-light) !important;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important; /* Slightly stronger hover shadow */
}
.card-img-top {
    width: 100%;
    height: 200px; /* Fixed height for product images */
    object-fit: cover; /* Ensure images cover the area without distortion */
    border-bottom: 1px solid var(--vintage-primary);
}
.card-body {
    padding: 1.25rem;
}
.card-title {
    color: var(--vintage-text-dark) !important;
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-family: 'Playfair Display', serif;
}
.card-text {
    color: var(--vintage-secondary) !important;
    font-size: 0.95rem;
}
.card-subtitle {
    color: var(--vintage-primary) !important;
    font-size: 1rem;
    font-weight: 700;
}

/* Jumbotron */
.jumbotron {
    background-color: var(--vintage-background-light) !important;
    color: var(--vintage-text-dark) !important;
    border-radius: .5rem; /* Slightly more rounded corners */
    padding: 3rem 2rem; /* More padding */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Softer shadow */
}

/* Forms */
.form-control {
    border-color: var(--vintage-primary) !important;
    color: var(--vintage-text-dark) !important;
    border-radius: .25rem;
}
.form-control:focus {
    border-color: var(--vintage-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(139, 115, 85, 0.25) !important; /* Vintage primary focus glow */
}

/* Text colors */
.text-muted {
    color: var(--vintage-primary) !important;
}

/* Links */
a {
    color: var(--vintage-primary);
    text-decoration: none;
}
a:hover {
    color: var(--vintage-secondary);
    text-decoration: underline;
}

/* Carousel indicators */
.carousel-indicators li {
    background-color: var(--vintage-primary);
}
.carousel-indicators .active {
    background-color: var(--vintage-accent);
}

/* Pagination */
.page-link {
    color: var(--vintage-primary);
    border-color: var(--vintage-primary);
}
.page-item.active .page-link {
    background-color: var(--vintage-primary);
    border-color: var(--vintage-primary);
    color: var(--vintage-text-light);
}
.page-item.disabled .page-link {
    color: var(--vintage-primary);
    border-color: var(--vintage-primary);
}

/* Alerts */
.alert {
    color: var(--vintage-text-dark);
    background-color: var(--vintage-background-light);
    border-color: var(--vintage-primary);
    border-radius: .25rem;
}
.alert-danger {
    color: var(--vintage-text-light);
    background-color: var(--vintage-accent);
    border-color: var(--vintage-accent);
}
.alert-info {
    color: var(--vintage-text-dark);
    background-color: var(--vintage-background-light);
    border-color: var(--vintage-primary);
}

/* Dropdown menus */
.dropdown-item {
    color: var(--vintage-text-dark);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--vintage-background-light);
    color: var(--vintage-primary);
}
.dropdown-divider {
    border-top: 1px solid var(--vintage-primary);
}
.dropdown-header {
    color: var(--vintage-secondary);
}

/* Buttons - general shadow */
.btn {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.08); /* Softer shadow */
    transition: all 0.2s ease-in-out;
}
.btn:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Slightly stronger hover shadow */
}

/* Style for clickable category cards */
.card-link-wrapper {
    color: inherit; /* Inherit text color from parent */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card-link-wrapper:hover {
    text-decoration: none; /* Remove underline on hover */
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important; /* Enhanced shadow on hover */
}

.card-link-wrapper .card {
    border: 1px solid var(--vintage-primary) !important; /* Ensure card border is visible */
    background-color: var(--vintage-background-light) !important; /* Ensure card background is correct */
}

.card-link-wrapper .card-title {
    color: var(--vintage-text-dark) !important;
}

.card-link-wrapper .card-text {
    color: var(--vintage-secondary) !important;
}

.product-description-short {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 3em; /* Approximate height for 2 lines, adjust as needed */
    line-height: 1.5em; /* Should match the line-height of the p tag */
}