body {
    margin: 0;
    font-family: 'Arial', sans-serif;
    color: #4e3629;
    background-color: #fff8f0;
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background-color: #f6e0c9;
}
.logo {
    font-size: 1.5rem;
    font-weight: bold;
}
nav a {
    text-decoration: none;
    margin-left: 20px;
    color: #4e3629;
    font-weight: bold;
}
nav a:hover {
    color: #a0522d;
}

/* Hero */
.hero {
    background: url('images/bakery.jpeg') center/cover no-repeat;
    color: white;
    padding: 100px 20px;
    text-align: center;
}
.hero-text {
    background: rgba(0, 0, 0, 0.5);
    padding: 30px;
    border-radius: 10px;
}
.hero h1 {
    font-size: 2.5rem;
}
.btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #d2691e;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}
.btn:hover {
    background-color: #a0522d;
}

/* Featured Section */
.featured {
    padding: 50px 20px;
    text-align: center;
}
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.card {
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.card img {
    width: 100%;
    border-radius: 10px;
}

/* Tips Section */
.tips {
    background-color: #f6e0c9;
    padding: 40px 20px;
    text-align: center;
}
.tips ul {
    list-style: none;
    padding: 0;
}
.tips li {
    margin: 8px 0;
}

/* Footer */
footer {
    background: #4e3629;
    color: white;
    text-align: center;
    padding: 15px;
}

/* ===== Base ===== */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: #4e3629;
  background: #fff8f0;
}
a { color: inherit; }
img { max-width: 100%; display:block; border-radius: 10px; }

/* ===== Header / Nav ===== */
header {
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 20px; background:#f6e0c9; position: sticky; top:0; z-index:10;
}
.logo { font-weight:700; font-size:1.2rem; }
nav a { text-decoration:none; margin-left:16px; font-weight:700; }
nav a.active { text-decoration: underline; }
.cart-link { position:relative; padding-right:6px; }
.badge {
  position: absolute; top: -8px; right: -12px;
  background:#d2691e; color:#fff; font-size:12px; font-weight:700;
  padding:2px 6px; border-radius:20px; min-width: 20px; text-align:center;
}

/* ===== Hero ===== */
.hero {
  background: url('images/bakery.jpeg') center/cover no-repeat;
  color: white; padding: 100px 16px; text-align:center;
}
.hero-text { background:rgba(0,0,0,0.45); display:inline-block; padding:24px; border-radius:12px; }
.hero h1 { margin:0 0 8px; font-size:2.2rem; }
.btn {
  display:inline-block; margin-top:12px; padding:10px 18px; background:#d2691e;
  color:white; text-decoration:none; border-radius:6px; border:none; cursor:pointer;
}
.btn:hover { background:#a0522d; }
.btn-secondary { background:#8b6a4a; }
.btn-secondary:hover { background:#6d523a; }
.btn-outline {
  background:transparent; color:#d2691e; border:2px solid #d2691e;
}
.btn-outline:hover { background:#ffe5d2; }

/* ===== Sections ===== */
.featured, .tips, .cart-page { padding: 40px 16px; }
.featured h2, .cart-page h1 { text-align:center; margin-bottom:8px; }
.featured p { text-align:center; margin:0 auto 18px; max-width:720px; }

/* ===== Product Grid ===== */
.grid {
  display:grid; gap:20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card { background:#fff; border-radius:12px; padding:14px; box-shadow:0 4px 10px rgba(0,0,0,0.08); }
.card h3 { margin:10px 0 6px; }
.price-line { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.price { font-weight:700; }

/* ===== Tips ===== */
.tips { background:#f6e0c9; text-align:center; }
.tips ul { list-style:none; padding:0; margin:12px 0; }
.tips li { margin:6px 0; }

/* ===== Footer ===== */
footer {
  background:#4e3629; color:#fff; text-align:center; padding:16px;
}

/* ===== Toast ===== */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 24px; background:#4e3629; color:#fff; padding:10px 14px;
  border-radius: 8px; opacity:0; pointer-events:none; transition: opacity .25s;
}
.toast.show { opacity: 1; }

/* ===== Cart Page ===== */
.cart-page h1 { margin: 10px 0 20px; }
.cart-container { background:#fff; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,0.08); padding:16px; }

.cart-item {
  display:grid; grid-template-columns: 80px 1fr auto; gap:12px; align-items:center;
  padding:10px 0; border-bottom:1px solid #eee;
}
.cart-item:last-child { border-bottom:none; }
.cart-item img { width:80px; height:80px; object-fit:cover; border-radius:8px; }
.item-title { font-weight:700; margin-bottom:4px; }
.item-price { font-size:14px; color:#6b4b3a; }

.qty-controls { display:inline-flex; align-items:center; gap:8px; }
.qty-btn {
  width:28px; height:28px; border-radius:6px; border:1px solid #ccc; background:#fff; cursor:pointer;
}
.remove-btn {
  background:transparent; border:none; color:#a33; cursor:pointer; font-weight:700;
}

.cart-actions {
  display:flex; gap:12px; margin-top:14px; justify-content:flex-end; flex-wrap: wrap;
}

.checkout { margin-top:30px; }
.checkout-form { background:#fff; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,0.08); padding:16px; max-width:720px; margin: 0 auto; }
.form-row { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.form-row input, .form-row select, .form-row textarea {
  padding:10px; border:1px solid #ddd; border-radius:8px; background:#fffdf9;
}

.totals {
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  padding:10px 0; border-top:1px dashed #e0cdb9; border-bottom:1px dashed #e0cdb9; margin: 12px 0;
}
.muted { color:#7a6354; }

.checkout-buttons { display:flex; gap:12px; flex-wrap:wrap; }

/* Small screens */
@media (max-width: 520px) {
  .cart-item { grid-template-columns: 60px 1fr; }
  .cart-item .item-right { grid-column: 1 / -1; display:flex; justify-content:space-between; align-items:center; }
}

/* ===== Shop toolbar ===== */
.toolbar {
  display: grid;
  grid-template-columns: 1fr 180px 180px;
  gap: 12px;
  margin: 16px 0 24px;
}
.toolbar input, .toolbar select {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fffdf9;
}
@media (max-width: 720px) {
  .toolbar { grid-template-columns: 1fr; }
}

/* ===== Chips & Helpers ===== */
.chip-row { display:flex; flex-wrap:wrap; gap:8px; margin: 6px 0 18px; }
.chip { border:1px solid #ddd; background:#fff; padding:6px 10px; border-radius:20px; cursor:pointer; }
.chip:hover { background:#fff3e6; }

/* ===== Recipe cards ===== */
.recipe-card .price-line { gap:8px; }
.fav-btn { min-width:44px; }
.fav-btn.is-fav { background:#d2691e; color:#fff; }

/* Two-column layout inside modal */
.two-col { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 720px){ .two-col { grid-template-columns: 1fr; } }

/* ===== Modal ===== */
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100; padding:16px; }
.modal-content { max-width:900px; margin: 30px auto; background:#fff; border-radius:12px; padding:16px; position:relative; }
.modal-close { position:absolute; top:10px; right:10px; background:transparent; border:none; font-size:24px; cursor:pointer; }
.modal-actions { display:flex; gap:10px; margin-top:10px; }

/* Print-friendly tweaks */
@media print {
  header, .toolbar, .chip-row, .modal-close, .modal-actions, .cart-link, footer { display:none !important; }
  .modal { position:static; background:#fff; padding:0; }
  .modal-content { box-shadow:none; margin:0; }
}

/* ===== Recipe modal: full-height + internal scrolling ===== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  padding: 16px;
  background: rgba(0,0,0,.55);
  z-index: 2000;                 /* above Bootstrap offcanvas (1045) */
  overflow: auto;                /* allow whole overlay to scroll if needed */
  -webkit-overflow-scrolling: touch;
}

.modal-content {
  position: relative;
  max-width: 900px;
  margin: min(5vh, 30px) auto;   /* keeps space top/bottom on small screens */
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  /* key bits: */
  max-height: 90vh;              /* contain to viewport */
  overflow: auto;                /* scroll inside the panel */
  -webkit-overflow-scrolling: touch;
}

.modal-content img {
  height: auto;
  max-width: 100%;
  border-radius: 12px;
}

/* make buttons sticky on long recipes */
.modal-actions {
  position: sticky;
  bottom: 0;
  background: linear-gradient(#fff0, #fff 30%);
  padding-top: 8px;
  margin-top: 8px;
}

/* better tap targets on mobile */
@media (max-width: 720px) {
  .modal-content { padding: 14px; }
  .modal-actions { gap: 8px; }
}