/* --- Pan-African Inspired Color Palette --- */
:root {
  --bg: #fdfdfd;
  --text: #1d1d1f;
  --muted: #5f5f5f;
  --brand-red: #da291c;
  --brand-gold: #ffb703;
  --brand-green: #008751;
  --card: #ffffff;
  --border: #eeeeee;
  --shadow: 0 8px 24px rgba(44, 42, 37, 0.08);
  --radius: 18px;
  --max: 1100px;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;scroll-behavior:smooth}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:100%;max-width:var(--max);margin-inline:auto;padding:0 20px}

/* --- Consistent focus styles --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 183, 3, 0.25);
}

header{position:sticky;top:0;z-index:60;background:rgba(253, 253, 253, 0.85);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2px}
.brand-logo{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,var(--brand-gold),var(--brand-red));display:grid;place-items:center;box-shadow:var(--shadow)}
.brand-logo span{font-family:"Playfair Display",serif;font-size:20px;color:var(--card)}
nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0}
nav a{padding:8px 12px;border-radius:10px; font-weight: 600;}
nav a:hover{background:rgba(0,0,0,.04)}
.cta{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow);font-weight:600;cursor:pointer;color:var(--text)}
.btn.primary{background:var(--brand-gold);color:#1d1d1f;}
.btn.secondary{background:var(--brand-red);color:#fff}

.hamburger{display:none;flex-direction:column;gap:4px;cursor:pointer}
.hamburger span{width:22px;height:2px;background:var(--text);border-radius:2px}
@media (max-width:900px){nav{display:none}.hamburger{display:flex}.drawer{position:fixed;inset:64px 0 auto auto;background:rgba(253, 253, 253, 0.98);border-top:1px solid var(--border);padding:12px 20px}.drawer ul{display:grid;gap:6px}.drawer a{padding:12px;border-radius:10px}.drawer a:hover{background:rgba(0,0,0,.04)}}
/* --- Mobile hamburger upgrade --- */
.hamburger{
  display:none; /* stays hidden on desktop */
  position: relative;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;            /* bigger tap target (44px) */
  padding:0;
  border:1px solid var(--border);
  border-radius:12px;                  /* soft pill */
  background: rgba(253,253,253,.9);    /* subtle frosted bg */
  box-shadow: var(--shadow);
  transition: background .2s ease, box-shadow .2s ease, transform .1s ease;
}
.hamburger:hover{ background:#fff; }
.hamburger:active{ transform: translateY(1px); }

.hamburger span{
  position:absolute;
  width:20px; height:2px;
  background: var(--text);
  border-radius:2px;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}

/* position the 3 lines */
.hamburger span:nth-child(1){ top: 15px; }
.hamburger span:nth-child(2){ top: 21px; }
.hamburger span:nth-child(3){ top: 27px; }

/* morph to "X" when open */
.hamburger[aria-expanded="true"] span:nth-child(1){
  top: 21px; transform: rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2){
  opacity: 0;
}
.hamburger[aria-expanded="true"] span:nth-child(3){
  top: 21px; transform: rotate(-45deg);
}

/* keep good spacing from the Cart button */
.cta{ gap: 12px; }  /* slightly bigger than current */

/* mobile only */
@media (max-width:900px){
  nav{display:none}
  .hamburger{display:flex}
  /* Add a faint backdrop to the drawer so the button sits nicely above */
  .drawer{ box-shadow: var(--shadow); border-top:1px solid var(--border); }
}


.drawer #startOrderBtnMobile {
  margin-top: 8px;
}

.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(1000px 500px at 80% -10%,rgba(255,183,3,.2),transparent 60%),radial-gradient(800px 400px at -10% 10%,rgba(218,41,28,.15),transparent 60%),radial-gradient(600px 400px at 50% 110%,rgba(0,135,81,.15),transparent 60%);z-index:-1}
.hero-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;padding:54px 0 36px;align-items:center}
.kicker{display:inline-flex;gap:8px;align-items:center;color:var(--muted);font-weight:600}
.kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--brand-green)}
h1{font-family:"Playfair Display",serif;font-size:clamp(36px,6vw,56px);line-height:1.05;margin:10px 0 6px}
.sub{font-size:clamp(16px,2.2vw,18px);color:var(--muted);max-width:50ch}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.hero-card{padding:16px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.05);border:1px solid var(--border);font-size:12px}
.hero-img{border-radius:var(--radius);aspect-ratio:4/3;overflow:hidden;border:1px solid var(--border)}
.hero-img img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.hero-wrap{grid-template-columns:1fr}}

section{padding:52px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:18px}
.section-head h2{font-family:"Playfair Display",serif;font-size:clamp(26px,4vw,36px);margin:0}
.section-head p{color:var(--muted);max-width:60ch}

.menu-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.tile{grid-column:span 4;display:flex;flex-direction:column;cursor:pointer}
.tile .poster{aspect-ratio:1/1;border-radius:16px;overflow:hidden;border:1px solid var(--border);background: #f8f8f8;position: relative;}
.tile .poster img {width: 100%;height: 100%;object-fit: contain;}
.tile h3{margin:10px 0 4px}
@media (max-width:1000px){.tile{grid-column:span 6}}
@media (max-width:640px){.tile{grid-column:span 12}}

/* ===== MENU V2 CARDS ===== */
.menu-grid { grid-template-columns: repeat(12, 1fr); gap: 18px; }

.card-v2 { 
  grid-column: span 4;
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 16px; background: var(--card);
  box-shadow: var(--shadow); overflow: hidden; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}
.card-v2:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.08); }

@media (max-width: 1000px) { .card-v2 { grid-column: span 6; } }
@media (max-width: 640px)  { .card-v2 { grid-column: span 12; } }

.card-v2 .poster { position: relative; aspect-ratio: 4/3; background: #f8f8f8; }
.card-v2 .poster .slide-images img { object-fit: cover; } /* switch to cover for stronger hero feel */

.overlay-grad {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%);
  pointer-events: none;
}

.top-row {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; justify-content: space-between; gap: 8px; align-items: center;
}

.ribbon {
  font-weight: 700; font-size: .78rem; letter-spacing: .2px;
  padding: 6px 10px; border-radius: 999px; backdrop-filter: blur(4px);
  color: #083; background: rgba(230,247,238,.95); border: 1px solid rgba(0,0,0,.06);
}
.ribbon.shipping { color: #045; background: rgba(230,240,255,.95); }

.price-chip {
  font-weight: 800; font-size: .9rem;
  color: #1d1d1f; background: #fff7e0; border: 1px solid rgba(0,0,0,.06);
  padding: 6px 10px; border-radius: 10px;
}

.quick-add {
  position: absolute; right: 10px; bottom: 10px;
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--brand-gold); color:#1d1d1f; font-weight: 900; font-size: 20px;
  display: grid; place-items: center; box-shadow: var(--shadow);
  transition: transform .1s ease, filter .15s ease;
}
.quick-add:hover { filter: brightness(1.06); }
.quick-add:active { transform: translateY(1px) scale(.98); }
.quick-add.bump { animation: bump .25s ease; }
@keyframes bump { 0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1)} }

.card-v2 .meta { padding: 12px 14px 14px; }
.card-v2 h3 { margin: 6px 0 4px; font-size: 1.05rem; }
.card-v2 .desc { margin: 0; color: var(--muted); font-size: .95rem; }

.card-v2 .view-btn {
  margin-top: 10px;
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: #fff;
  font-weight: 700; cursor: pointer; transition: background .15s ease;
}
.card-v2 .view-btn:hover { background: #f7f7f7; }


.kiosk{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.box{grid-column:span 6;padding:16px}
.box h3{margin:0 0 6px}
.list{margin:0;padding-left:18px;}
.box p, .list {color: var(--text);opacity: 0.85;}
.list strong {opacity: 1;}
@media (max-width:800px){.box{grid-column:span 12}}

form{display:grid;gap:12px}
input,textarea,select{width:100%;background:var(--card);border:1px solid var(--border);color:var(--text);padding:12px 14px;border-radius:12px}
textarea{min-height:120px;resize:vertical}
label{font-size:14px;color:var(--text)}

.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.gallery .g{grid-column:span 3;border-radius:12px;overflow:hidden;border:1px solid var(--border)}
.gallery .g img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
@media (max-width:900px){.gallery .g{grid-column:span 4}}
@media (max-width:640px){.gallery .g{grid-column:span 6}}

footer{padding:36px 0;border-top:1px solid var(--border);color:var(--muted)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.foot small{color:var(--muted); opacity: 0.8;}
@media (max-width:900px){.foot{grid-template-columns:1fr}}

/* Order Drawer / Cart */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(3px);visibility: hidden; opacity: 0; transition: visibility 0s .2s, opacity .2s ease; z-index:70}
.drawer-cart{position:fixed;top:0;right:0;height:100dvh;width:min(420px,95vw);background:var(--bg);border-left:1px solid var(--border);box-shadow:var(--shadow);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease;z-index:80}
.drawer-cart.open{transform:translateX(0)}
.backdrop.show{visibility: visible; opacity: 1; transition: opacity .2s ease;}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);color:var(--text)}
.cart-body{flex:1;overflow:auto;padding:10px 12px;display:grid;gap:8px; align-content: flex-start;}
.cart-body em {color: var(--muted);}

.cart-item{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--card)}
.cart-info{display:grid;gap:2px}
.cart-title{font-weight:800}
.cart-sub{color:var(--muted);font-size:.95rem}
.cart-price{white-space:nowrap;font-weight:700;margin-left:8px}

.cart-foot{padding:12px 14px;border-top:1px solid var(--border)}
.cart-foot small {color: var(--muted);}
#checkoutBtn:disabled { background: var(--muted) !important; cursor: not-allowed; color: white !important; }

.qty-stack{display:flex;flex-direction:column;gap:6px;align-items:flex-start;width:max-content; margin-top: 8px;}
.qty-row{display:inline-flex;gap:6px;align-items:center}
.qty-row button{width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:#f0f0f0;color:var(--text);cursor:pointer;line-height:1}

.remove-link{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:0 12px;background:var(--brand-red);border:1px solid var(--brand-red);border-radius:8px;color:#fff;font-size:.9rem;cursor:pointer;width:100%;transition:filter .15s ease, transform .05s ease}
.remove-link:hover{filter:brightness(1.08)}
.remove-link:active{transform:translateY(1px)}

/* Item Modal */
.modal{position:fixed;inset:0;display:none;place-items:center;z-index:85}
.modal.show{display:grid}
.sheet{width:min(560px,95vw);background:var(--bg);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);color:var(--text)}
.sheet header{position:unset;background:unset;border-bottom:1px solid var(--border)}
.sheet .content{padding:16px;display:grid;gap:12px;color:var(--text)}
.sheet .actions{display:flex;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid var(--border)}
.option-row{display:grid;gap:10px}
.pill{padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:#f0f0f0;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.option-row .pill span{color:var(--text);font-weight:700}
.option-row .pill strong{color:var(--text)}
.pill:hover{background:#e9e9e9}
.pill[aria-checked="true"]{outline:2px solid var(--brand-gold);box-shadow:0 0 0 3px rgba(255,183,3,.25)}
.pill[aria-checked="true"]:focus-visible {box-shadow: none;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}
::placeholder{color:#a9a299;opacity:1}

/* --- Styles for Image Slideshow --- */
.slide-images {width: 100%;height: 100%;}
.slide-images img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: contain;opacity: 0;transition: opacity 0.3s ease-in-out;visibility: hidden;}
.slide-images img.active {opacity: 1;visibility: visible;}
.slide-btn {position: absolute;top: 50%;transform: translateY(-50%);background: rgba(255, 255, 255, 0.7);color: #1d1d1f;border: none;border-radius: 50%;width: 36px;height: 36px;font-size: 20px;font-weight: bold;cursor: pointer;display: flex;align-items: center;justify-content: center;line-height: 1;opacity: 0;transition: opacity 0.2s ease, background 0.2s ease;z-index: 10;}
.poster:hover .slide-btn {opacity: 1;}
.slide-btn:hover {background: rgba(255, 255, 255, 1);}
.slide-btn.prev {left: 10px;}
.slide-btn.next {right: 10px;}

/* --- Fulfillment Section Styles --- */
.fulfillment-section {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
}
.fulfillment-section h3 {
  margin: 0 0 8px;
  font-family: "Playfair Display", serif;
  font-size: 18px;
}
.fulfillment-options {
  display: grid;
  gap: 8px;
}
.fulfillment-options label {
  display: block;
  cursor: pointer;
}
.fulfillment-options input[type="radio"] {
  appearance: none;
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.fulfillment-options .pill {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fulfillment-options .pill i {
  margin-right: 8px;
  font-size: 1.1rem;
  color: var(--brand-green);
}

.fulfillment-options label:nth-child(2) .pill i {
  color: var(--brand-red); /* make truck red for contrast */
}

.fulfillment-options input[type="radio"]:checked + .pill {
  outline: 2px solid var(--brand-gold);
  box-shadow: 0 0 0 3px rgba(255,183,3,.25);
}
.fulfillment-options .pill:hover {
  background: #e9e9e9;
}
.fulfillment-options .pill span {
  font-weight: 600;
}

/* --- Netlify Forms Improvements --- */
.hidden {
  display: none;
}

form {
  position: relative;
}

/* Form validation styles */
input:invalid, textarea:invalid {
  border-color: #ff6b6b;
}

input:valid, textarea:valid {
  border-color: #51cf66;
}

/* Loading state for form submission */
form.loading {
  opacity: 0.7;
  pointer-events: none;
}

form.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #ffb703;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Placeholder styling */
::placeholder {
  color: #a9a299;
  opacity: 1;
}

:-ms-input-placeholder {
  color: #a9a299;
}

::-ms-input-placeholder {
  color: #a9a299;
}

/* Focus styles for form elements */
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 183, 3, 0.25);
}

/* Required field indicators */
label:has(+ input[required])::after,
label:has(+ textarea[required])::after,
label:has(+ select[required])::after {
  content: " *";
  color: #da291c;
}

/* --- Menu Tabs --- */
.menu-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}

.menu-tab {
  padding: 12px 24px;
  background: #f0f0f0;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.menu-tab:hover {
  background: #e5e5e5;
}

.menu-tab.active {
  background: var(--brand-gold);
  color: #1d1d1f;
  border-color: rgba(0, 0, 0, 0.1);
}

/* --- Availability Badges --- */
.availability-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 8px;
}

.availability-badge.pickup {
  background: #e6f7ee;
  color: var(--brand-green);
}

.availability-badge.shipping {
  background: #e6f0ff;
  color: #0066cc;
}

/* --- Menu Grid Adjustments --- */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.tile {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
}

.tile .poster {
  aspect-ratio: 1/1;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #f8f8f8;
  position: relative;
}

.tile h3 {
  margin: 12px 0 6px;
  font-size: 1.1rem;
}

.tile .availability-badge {
  margin-top: 8px;
}

/* --- Responsive Design for Tabs --- */
@media (max-width: 640px) {
  .menu-tabs {
    flex-direction: column;
    gap: 8px;
  }
  
  .menu-tab {
    text-align: center;
    padding: 10px 16px;
  }
  
  .tile {
    grid-column: span 12;
  }
}

@media (max-width: 1000px) {
  .tile {
    grid-column: span 6;
  }
}

/* --- Cart Item Category Indicators --- */
.cart-item[data-category="pickup"] {
  border-left: 3px solid var(--brand-green);
}

.cart-item[data-category="shipping"] {
  border-left: 3px solid #0066cc;
}

.cart-category-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-left: 8px;
}

.cart-category-badge.pickup {
  background: #e6f7ee;
  color: var(--brand-green);
}

.cart-category-badge.shipping {
  background: #e6f0ff;
  color: #0066cc;
}

/* --- Fulfillment Section Enhancements --- */
.fulfillment-section {
  padding: 16px;
  border-top: 1px solid var(--border);
  background: #fafafa;
  border-radius: 0 0 var(--radius) var(--radius);
}

.fulfillment-section h3 {
  margin: 0 0 12px;
  font-family: "Playfair Display", serif;
  font-size: 18px;
  color: var(--text);
}

.fulfillment-options {
  display: grid;
  gap: 10px;
}

.fulfillment-options label {
  display: block;
  cursor: pointer;
  margin-bottom: 0;
}

.fulfillment-options input[type="radio"] {
  appearance: none;
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.fulfillment-options .pill {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #f8f8f8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
}

.fulfillment-options input[type="radio"]:checked + .pill {
  outline: 2px solid var(--brand-gold);
  box-shadow: 0 0 0 3px rgba(255, 183, 3, 0.25);
  background: #fff;
}

.fulfillment-options .pill:hover {
  background: #f0f0f0;
}

.fulfillment-options .pill span {
  font-weight: 600;
}

.fulfillment-options .pill .fulfillment-description {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 4px;
}

/* --- Empty State for Menu --- */
.menu-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}

.menu-empty-state p {
  margin-bottom: 20px;
}

/* --- Notification Styles --- */
.notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--brand-green);
  color: white;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: var(--shadow);
  z-index: 1000;
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.3s ease;
}

.notification.show {
  opacity: 1;
  transform: translateY(0);
}

.notification.error {
  background: var(--brand-red);
}

/* --- Loading States --- */
.menu-loading {
  opacity: 0.6;
  pointer-events: none;
}

.menu-tab.loading {
  position: relative;
  color: transparent;
}

.menu-tab.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid transparent;
  border-top: 2px solid var(--brand-gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- Cart Validation Styles --- */
.cart-validation-message {
  padding: 10px;
  margin: 10px 0;
  border-radius: 8px;
  background: #fff4e6;
  border: 1px solid #ffd8a8;
  color: #d46b08;
  font-size: 0.9rem;
}

.cart-validation-message.error {
  background: #ffe6e6;
  border-color: #ffa8a8;
  color: #da291c;
}

.brand-logo {
  border-radius: 9px;
  object-fit: contain;
}

/* Adjust size if needed */
.brand-logo {
  width: 36px;
  height: 36px;
}

footer .brand-logo {
  width: 30px;
  height: 30px;
}

.shipping-calculator {
  padding: 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.shipping-input {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

#shippingZipcode {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.shipping-results {
  margin-top: 12px;
}

.shipping-option {
  padding: 10px;
  margin: 5px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.shipping-option:hover {
  background: #f0f0f0;
}

.shipping-option.selected {
  border-color: var(--brand-gold);
  background: #fffaf0;
}

.shipping-option h5 {
  margin: 0 0 4px 0;
  font-size: 14px;
}

.shipping-option p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.social-icons {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.social-icons a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-gold);
  color: #1d1d1f;
  font-size: 18px;
  transition: all 0.2s ease;
}

.social-icons a:hover {
  background: var(--brand-red);
  color: #fff;
}
.pickup-banner {
  background: #f4f4f4;
  padding: 12px 20px;
  text-align: center;
  font-size: 15px;
  color: #1d1d1f;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.pickup-banner .pickup-icon {
  margin-right: 6px;
  color: #d62828; /* red pin color */
}

.pickup-banner .pickup-change {
  margin-left: 10px;
  font-weight: 600;
  color: #008751;
  text-decoration: none;
}

.pickup-banner .pickup-change:hover {
  text-decoration: underline;
}
/* Price + availability row under the tile title */
.tile-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:4px;
}

.price-from{
  font-weight:700;
  font-size:0.98rem;
  color:var(--text);
  background:#fff7e0;            /* subtle gold wash */
  border:1px solid rgba(0,0,0,.06);
  padding:4px 8px;
  border-radius:8px;
}
/* Fix for image slideshow - add this to your style.css */

/* Make sure the slide container has relative positioning */
.slide-images {
  width: 100%;
  height: 100%;
  position: relative; /* This was missing! */
}

.slide-images img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* changed from contain to cover for better display */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  visibility: hidden;
}

.slide-images img.active {
  opacity: 1;
  visibility: visible;
}

/* Ensure slide buttons are properly positioned and visible */
.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  color: #1d1d1f;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.poster:hover .slide-btn {
  opacity: 1;
}

.slide-btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-50%) scale(1.05);
}

.slide-btn.prev {
  left: 10px;
}

.slide-btn.next {
  right: 10px;
}
.shipping-calculator input {
  pointer-events: auto !important;
  cursor: text !important;
}

.shipping-calculator button {
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* Tea Benefits Section */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.benefit-card {
  grid-column: span 6;
  padding: 24px;
  text-align: center;
}

.benefit-icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

.benefit-card h3 {
  margin: 0 0 12px 0;
  font-family: "Playfair Display", serif;
  color: var(--brand-green);
}

.ingredients-note {
  background: #fff7e0;
  border: 1px solid var(--brand-gold);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  text-align: left;
}

.benefit-list {
  list-style: none;
  padding: 0;
  text-align: left;
  margin: 0 0 16px 0;
}

.benefit-list li {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.benefit-list li:last-child {
  border-bottom: none;
}

.benefit-list strong {
  color: var(--brand-red);
}

.benefit-note {
  font-size: 0.9rem;
  color: var(--muted);
  font-style: italic;
  margin: 0;
}

.disclaimer {
  text-align: center;
}

@media (max-width: 900px) {
  .benefit-card {
    grid-column: span 12;
  }
}
.product-benefits {
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.product-benefits h3,
.product-benefits h4 {
  margin: 0 0 12px 0;
  color: var(--brand-green);
}

.benefits-list {
  margin: 0 0 20px 0;
  padding-left: 20px;
}

.benefits-list li {
  margin-bottom: 8px;
  color: var(--text);
}

.ingredients-info {
  margin-bottom: 16px;
  padding: 12px;
  background: #fff7e0;
  border-radius: 8px;
  border: 1px solid var(--brand-gold);
}

.disclaimer {
  text-align: center;
  color: var(--muted);
  font-style: italic;
}