:root {
    --mimosa: #f6c90e;
    --mimosa-dark: #dd9933;
    --leaf: #4a6b3a;
    --ink: #2b2b2b;
    --paper: #fffdf6;
    --line: #ece4c8;
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6;
}

a { color: var(--leaf); }

.container { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.site-header {
    display: flex; flex-wrap: wrap; gap: 1rem;
    justify-content: space-between; align-items: center;
    padding: 1rem 1.5rem; border-bottom: 1px solid var(--line);
}
.site-header .logo { font-size: 1.6rem; color: var(--leaf); text-decoration: none; font-style: italic; }
.site-header nav { display: flex; gap: 1.25rem; }
.site-header nav a { text-decoration: none; }

.site-footer { text-align: center; padding: 2rem 1rem; color: #777; border-top: 1px solid var(--line); }

.hero { text-align: center; padding: 4rem 1rem; }
.hero h1 { font-size: clamp(2.5rem, 8vw, 5rem); margin: 0; color: var(--leaf); font-style: italic; }

.button {
    display: inline-block; padding: .7rem 1.4rem; border: 0; border-radius: var(--radius);
    background: var(--mimosa-dark); color: #fff; font: inherit; text-decoration: none; cursor: pointer;
}
.button:hover { background: #c4842a; }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
.product-card { text-decoration: none; color: inherit; }
.product-card img, .product-card .placeholder {
    width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--line);
}
.product-card h3 { margin: .5rem 0 0; font-size: 1.05rem; }
.price { font-weight: bold; color: var(--mimosa-dark); margin: .25rem 0; }
.sold-out { color: #a33; font-style: italic; }

.product { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.product img { width: 100%; border-radius: var(--radius); }
@media (min-width: 768px) { .product { grid-template-columns: 1fr 1fr; } }

form label { display: block; margin: .75rem 0; }
input[type=number] { width: 5rem; }
input { font: inherit; padding: .4rem .6rem; border: 1px solid #ccc; border-radius: 6px; }
form.login { max-width: 360px; }
form.login input { width: 100%; }
form.inline { display: flex; gap: .5rem; align-items: center; }

table.cart { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
table.cart th, table.cart td { padding: .6rem; border-bottom: 1px solid var(--line); text-align: left; }

.flash { padding: .75rem 1rem; border-radius: var(--radius); }
.flash-success { background: #eef6e8; }
.flash-error { background: #fbeaea; }