/* Basic reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body { height: 100%; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#222; background:#fff; }
img { max-width:100%; height:auto; display:block; }

:root{
  /* Brand palette */
  --accent:#d94a1a;    /* warm red/orange */
  --accent-2:#f7c96b;  /* soft yellow */
  --bg:#fff2e6;        /* light beige */
  --muted:#6b5a4a;     /* muted brown */
  --ink:#1f1f1f;
  --container:1100px;
  --card:#ffffff;
  --card-muted:#fffaf0;
  --shadow:0 12px 30px rgba(0,0,0,0.08);
}

.container{ max-width:var(--container); margin:0 auto; padding:1rem; }

/* Header */
.site-header{ 
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(90deg,#fff 0%, #fff8f2 100%);
  border-bottom: 1px solid #f0e7e0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.header-inner{ 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 0.75rem 1rem; 
  gap: 1rem; 
  flex-wrap: wrap; 
}
/* Add padding to body to account for fixed header */
body {
  padding-top: 80px;
}
.logo-wrap {
  display: block;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.logo-wrap:hover {
  opacity: 0.9;
}
.logo-img{ height:46px; object-fit:contain; }
.tag{ font-size:0.9rem; color:var(--muted); margin-top:0.25rem; }
.main-nav{ display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; }
.main-nav a{ text-decoration:none; color:var(--muted); padding:0.45rem 0.6rem; border-radius:6px; }
.main-nav a:hover{ background:#fff1e9; color:var(--ink); }
.main-nav .nav-cta{ background:var(--accent); color:white; padding:0.5rem 0.75rem; border-radius:8px; }

/* Hero */
.hero{ background: linear-gradient(135deg, #fff4ea 0%, #fff8f2 60%); padding:3rem 0; }
.hero-inner{ display:flex; gap:2rem; align-items:center; }
.hero-copy h2{ font-size:2rem; color:#222; margin-bottom:0.5rem; }
.hero-copy p{ color:var(--muted); margin-bottom:1rem; }
.btn-primary{ display:inline-block; background:var(--accent); color:white; padding:0.75rem 1rem; border-radius:10px; text-decoration:none; font-weight:700; box-shadow:var(--shadow); border:none; cursor:pointer; }
.btn-primary:hover{ filter:brightness(0.95); }
.hero-art{ flex:1; display:flex; justify-content:center; align-items:center; }
.hero-meta{ margin-top:0.8rem; color:var(--muted); display:flex; gap:1rem; font-size:0.95rem; flex-wrap:wrap; }

/* About */
.about{ padding:2rem 0; }
.about h3{ margin-bottom:0.5rem; }
.about p{ color:var(--muted); max-width:65ch; }
.about-list{ margin-top:0.75rem; color:var(--muted); list-style:none; }
.about-list li{ margin-bottom:0.25rem; }

/* Photos */
.photos{ padding:2rem 0; }
.photo-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:12px;
}
.photo{
  background:var(--card);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.photo img{
  width:100%;
  height:200px;
  object-fit:cover;
  transition: transform .3s ease;
  cursor: zoom-in;
}
.photo:hover img{ transform: scale(1.03); }
.photo figcaption{
  padding:8px 10px;
  font-size:0.9rem;
  color:var(--muted);
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.85);
  display:none; align-items:center; justify-content:center; flex-direction:column;
  padding:24px; z-index:1000;
}
.lightbox.show{ display:flex; }
.lightbox img{ max-width: min(95vw, 1100px); max-height: 80vh; object-fit:contain; }
.lightbox-caption{ color:#fff; margin-top:10px; text-align:center; }
.lightbox-close{
  position:absolute; top:12px; right:12px;
  background:transparent; border:none; color:#fff; font-size:2rem; cursor:pointer;
}

/* Menu */
.menu{ padding:2rem 0; }
.menu h3{ margin-bottom:1rem; }
.menu-intro{ color:var(--muted); margin-bottom:1rem; }

/* Grid of category cards */
.menu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1rem;
  align-items: start;
}

/* Card */
.menu-category.card{
  background:linear-gradient(180deg,#fff,#fff8f2);
  padding:1rem;
  border-radius:12px;
  box-shadow:var(--shadow);
  border-left:6px solid var(--accent-2);
  min-width:0;
  height: auto;
  display: flex;
  flex-direction: column;
}
.menu-category.card h4{ 
  margin-bottom:0.5rem; 
  color:var(--accent); 
  font-size:1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.menu-category.card h4::after {
  content: "▼";
  font-size: 0.8em;
  transition: transform 0.3s ease;
}
.menu-category.card.collapsed h4::after {
  transform: rotate(-90deg);
}
.menu-category.card .category-content {
  max-height: 2000px;
  opacity: 1;
  transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
  overflow: hidden;
}
.menu-category.card.collapsed .category-content {
  max-height: 0;
  opacity: 0;
  margin: 0;
}

/* Product rows — FIX for overlap/wrap */
.product-row{
  display:flex;
  gap:0.75rem;
  align-items:flex-start;          /* <— prevent vertical overlap */
  justify-content:space-between;
  padding:0.6rem 0;
  border-bottom:1px dashed rgba(0,0,0,0.05);
  flex-wrap:wrap;                  /* <— allow wrapping on narrow widths */
}
.product-info{ flex:1 1 180px; min-width:180px; }
.product-name{ font-weight:700; }
.product-desc{ color:var(--muted); font-size:0.9rem; }
.product-actions{
  display:flex;
  gap:0.5rem;
  align-items:center;
  flex-wrap:wrap;                  /* <— wrap controls to next line instead of overlapping */
  justify-content:flex-end;
  min-width:220px;                 /* space for price + controls on desktop */
}
.product-price{ color:var(--accent); font-weight:800; min-width:80px; text-align:right; }
.add-btn{ 
  background:var(--accent); 
  color:white; 
  border:none; 
  padding:0.45rem 0.6rem; 
  border-radius:8px; 
  cursor:pointer; 
  position: relative;
  overflow: hidden;
}
.add-btn.added::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ripple 0.6s ease-out;
}
@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.5;
  }
  100% {
    width: 150px;
    height: 150px;
    opacity: 0;
  }
}
.toast-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--accent);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 1000;
  transform: translateY(150%);
  transition: transform 0.3s ease;
}
.toast-notification.show {
  transform: translateY(0);
}
select.size-select{ padding:0.35rem; border-radius:6px; border:1px solid #e6e0db; min-width:120px; }
.qty-minus, .qty-plus{ background:transparent; border:1px solid rgba(0,0,0,0.10); padding:6px 8px; border-radius:6px; cursor:pointer; font-weight:700; }
.remove-btn{ background:transparent; border:0; color:var(--muted); text-decoration:underline; cursor:pointer; margin-left:8px; }

/* PDF menu box */
.menu-pdf{ margin-top:1rem; background:var(--card-muted); padding:0.9rem; border-radius:10px; border:1px solid rgba(0,0,0,0.05); }
.menu-pdf a{ color:var(--accent); font-weight:700; text-decoration:underline; }

/* Cart styles */
#cartContents{ margin-top:1rem; }
.cart-list{ display:flex; flex-direction:column; gap:0.6rem; }
.cart-item{ display:flex; flex-direction:column; align-items:stretch; gap:0.6rem; padding:0.6rem; background:rgba(217,74,26,0.05); border-radius:10px; }
.cart-item-header{ display:flex; justify-content:space-between; align-items:center; gap:0.6rem; }
.cart-item-controls{ display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; justify-content:flex-end; }
.cart-item-total{ font-weight:600; }
.cart-supplements{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.35rem; }
.cart-supplements li{ display:flex; justify-content:space-between; align-items:center; gap:0.4rem; background:#fff; padding:0.35rem 0.5rem; border-radius:8px; font-size:0.9rem; }
.cart-supplements button{ margin-left:0.25rem; font-size:0.8rem; padding:0.2rem 0.5rem; border-radius:20px; border:1px solid #ddd; background:#fff; cursor:pointer; }
.supplement-options{ display:flex; flex-wrap:wrap; gap:0.4rem; }
.supplement-options button,
.supplement-toggle{ background:#fff; border:1px solid #ddd; border-radius:999px; padding:0.35rem 0.65rem; font-size:0.85rem; cursor:pointer; transition:all 0.2s ease; }
.supplement-options button:hover,
.supplement-toggle:hover,
.cart-supplements button:hover{ border-color:#e5590f; color:#e5590f; }
.cart-total{ margin-top:0.6rem; text-align:right; font-size:1.05rem; }
.cart-actions{ margin-top:0.8rem; display:flex; gap:0.6rem; justify-content:flex-end; }
.btn-secondary{ background:#fff; border:1px solid #ccc; padding:0.5rem 0.75rem; border-radius:10px; }

/* Order form */
.order-cta{ text-align:center; padding:2rem 0; }
.order-form{
  max-width:760px; margin:0 auto; text-align:left; background:#fff; padding:1rem 1.25rem;
  border-radius:12px; box-shadow:var(--shadow);
}
.form-row{ margin-bottom:0.85rem; display:flex; flex-direction:column; }
label{ font-weight:600; margin-bottom:0.35rem; }
input, textarea, select{ padding:0.5rem; border:1px solid #e6e0db; border-radius:8px; }
.note-suggestions{ margin-top:0.5rem; display:flex; flex-wrap:wrap; gap:0.5rem; }
.note-suggestion{
  background:#f4f2f0;
  border:1px solid #e0d8d2;
  border-radius:999px;
  padding:0.35rem 0.75rem;
  font-size:0.85rem;
  cursor:pointer;
  transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.note-suggestion:hover,
.note-suggestion:focus{
  background:#ffe6d5;
  border-color:#e5590f;
  color:#b64005;
  outline:none;
}
.note-suggestion.active{
  background:#e5590f;
  border-color:#e5590f;
  color:#fff;
}

/* Footer */
.site-footer{ border-top:1px solid #f0e7e0; padding:1rem 0; margin-top:2rem; background:#fff; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.5rem; }
.site-footer small{ color:var(--muted); }
.site-footer a{ color:var(--muted); text-decoration:none; }

/* Responsive tweaks */
@media (max-width:900px){
  .menu-grid{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
  .product-actions{ min-width:180px; }
}
@media (max-width:800px){
  .hero-inner{ flex-direction:column; text-align:center; }
  .hero-art{ order:-1; }
}
@media (max-width:520px){
  .product-actions{ min-width:0; width:100%; justify-content:flex-start; }
  .product-price{ text-align:left; }
}