/* Brand colours */
:root {
    --cream: #FAF6F0;
    --crust: #C8793A;
    --dark: #1A1208;
}

body.greyscale {
    filter: grayscale(100%);
}

/* Prevent horizontal overflow on the whole page */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Typography */
body {
    font-family: 'DM Sans', sans-serif;
    background-color: var(--cream);
    color: var(--dark);
}

h1, h2, h3, h4, h5 {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
}

/* Navbar */
.navbar {
    background-color: var(--dark);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.navbar-brand {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    color: white !important;
}

.navbar-brand span {
    color: var(--crust);
}

/* Hero */
.hero {
    background-color: var(--dark);
    color: white;
    padding: 2.5rem 0;
}

@media (min-width: 992px) {
    .hero {
        padding: 3rem 0;
    }
}

.hero h1 {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    color: white;
}

.hero h1 span {
    color: var(--crust);
    font-style: italic;
}

.hero p {
    color: #a8a29e;
}

.hero small {
    color: #a8a29e;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* Product card */
.card {
    border-color: #e8ddd0;
    background: white;
    border-radius: 1rem;
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.card-img-wrapper {
    overflow: hidden;
    aspect-ratio: 1;
}

.card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card:hover .card-img-top {
    transform: scale(1.05);
}

.card-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(0.9rem, 2vw, 1.25rem);
}

.card-text {
    color: #78716c;
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    line-height: 1.6;
}

.product-price {
    color: var(--crust);
    font-weight: 700;
    font-size: clamp(0.85rem, 1.8vw, 1.1rem);
}

.stock-count {
    color: #a8a29e;
    font-size: 0.75rem;
}

/* Buttons */
.btn-dark {
    background-color: var(--dark);
    border-color: var(--dark);
}

.btn-dark:hover {
    background-color: var(--crust);
    border-color: var(--crust);
}

.btn-light {
    background-color: white;
    color: var(--dark);
    font-weight: 600;
    border-radius: 2rem;
    padding: 0.75rem 2rem;
    border: none;
}

.btn-light:hover {
    background-color: #f5f0eb;
    color: var(--dark);
}

/* Cart drawer */
#cart-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1040;
}

#cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-width: 380px;
    background: white;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
}

#cart-drawer.open {
    transform: translateX(0);
}

#cart-overlay.open {
    display: block;
}

#cart-drawer h5 {
    font-family: 'Playfair Display', serif;
}

/* Footer */
footer {
    background-color: var(--dark);
    color: #a8a29e;
}

footer p:first-child {
    font-family: 'Playfair Display', serif;
    color: white;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

/* Manage tables — always scrollable within their container */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table td, .table th {
    white-space: nowrap;
}

/* ── Mobile & tablet improvements ── */

@media (max-width: 576px) {
    /* Hero */
    .hero {
        padding: 2.5rem 0;
    }
    .hero h1 {
        font-size: 1.9rem;
    }
    .hero p {
        font-size: 0.95rem;
    }

    .card-text {
        display: none;
    }

    /* Cart — leave room at top for navbar and bottom for safe area */
    #cart-drawer {
        top: 0;
        height: 100dvh;
        max-height: 100dvh;
    }
}

@media (max-width: 768px) {
    /* Touch-friendly button sizes */
    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn-sm {
        min-height: 36px;
    }

    /* About image — hide on mobile */
    .about-image-wrapper {
        display: none;
    }
}

/* Mobile menu collapse border */
#mobileMenu {
    border-top: 1px solid rgba(255,255,255,0.1);
}

.category-btn.active {
    background-color: white;
    color: var(--dark);
    border-color: white;
}

/* Cart drawer +/- buttons — larger touch targets on mobile */
@media (max-width: 768px) {
    #cart-items .btn-outline-secondary {
        min-width: 36px;
        min-height: 36px;
        font-size: 1.1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}