/* ----------  Theme variables  ---------- */
:root {
  --peach-deep:  #eaa67f;   /* navbar, buttons, sidebar */
  --peach-light: #f5d3ba;   /* page backgrounds         */

  --bg-light:      var(--peach-light);
  --brand-primary: var(--peach-deep);

  --sidebar-w: 240px;       /* desktop sidebar width    */
}

/* ----------  Global  ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-light);
  overflow-x: auto;          /* allow swipe if something is wider */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ----------  Right‑pinned sidebar (desktop)  ---------- */
#sidebar{
  width: var(--sidebar-w);
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  background: var(--peach-deep);
  box-shadow: -1px 0 4px rgba(0,0,0,.05);
  z-index: 1045;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;
}

#sidebar ul.nav{           /* vertical list */
  flex-direction: column;
  gap: .5rem;
  padding: 0;
  margin: 0;
}

#sidebar .nav-link{
  color: #fff;
  font-weight: 500;
  border-radius: .25rem;
}
#sidebar .nav-link:hover,
#sidebar .nav-link.active{
  background: rgba(255,255,255,.12);
  color: #ffeada;
}

/* ----------  Space for sidebar (desktop)  ---------- */
.content-wrapper{ margin-right: var(--sidebar-w); }

/* ----------  HERO  ---------- */
.hero{
  background:url('images/Organic logo with glowing jar icon.png') center/cover no-repeat;
  color:#fff;
  min-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}
.hero-content{ position:relative; z-index:1; }

/* ----------  Generic card  ---------- */
.card{
  background:var(--card-bg);
  border-color:var(--card-border);
}

/* ----------  Product card (grid on home)  ---------- */
.product-card{
  display:flex;
  flex-direction:column;
  height:400px;
  padding:1rem;
  background:#fff;
  border-radius:.5rem;
  box-shadow:0 .125rem .25rem rgba(0,0,0,.075);
  overflow:hidden;
}
.product-card>[data-reflow-type="product"]{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.product-card img{
  max-height:150px;
  margin:0 auto 1rem;
  object-fit:contain;
}
.product-description{
  max-height:70px;
  overflow-y:auto;
  margin-bottom:1rem;
  color:#555;
}
.product-card button{ margin-top:auto; }

/* ----------  Reflow product list (horizontal cards)  ---------- */
.reflow-product-list{
  display:grid;
  gap:1.5rem;
  grid-template-columns:1fr;   /* single‑column list */
}
.reflow-product-list .rf-product{
  background:#fff;
  border-radius:.5rem;
  box-shadow:0 .125rem .25rem rgba(0,0,0,.075);
  display:flex;
  gap:1.25rem;
  padding:1rem 1.25rem;
}
.reflow-product-list .rf-product__image{
  flex:0 0 180px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.reflow-product-list .rf-product__image img{
  max-width:100%;
  max-height:160px;
  object-fit:contain;
  border-radius:.25rem;
}
.reflow-product-list .rf-product__info{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}
.reflow-product-list .rf-product__title{
  font-weight:600;
  font-size:1.1rem;
  margin-bottom:.25rem;
}
.reflow-product-list .rf-product__price{
  font-size:1.15rem;
  font-weight:600;
  margin-top:auto;
  color:var(--brand-primary);
}
.reflow-product-list .rf-product__addtocart{ width:100%; }

/* Small‑screen tweak – stack image on top */
@media (max-width:575.98px){
  .reflow-product-list .rf-product{
    flex-direction:column;
    text-align:center;
    align-items:center;
  }
  .reflow-product-list .rf-product__image{ margin-bottom:.75rem; }
  .reflow-product-list .rf-product__info { align-items:center; }
}

/* ===================================================
   MOBILE ≤ 767.98 px  — off‑canvas sidebar
   =================================================== */
@media (max-width:767.98px){

  /* sidebar slides off‑screen by default */
  #sidebar{
    width:80%;
    max-width:280px;
    transform:translateX(100%);
    transition:transform .3s ease;
  }
  #sidebar.show{ transform:translateX(0); }

  /* content fills full width */
  .content-wrapper{ margin-right:0; }
}

/* ----------  About, Contact, Policy, etc. ---------- */
.about-hero      { background:#fdfdfd; padding:4rem 0; }
.about-hero h1   { font-size:2.5rem; }
.about-section   { padding:3rem 0; }

.contact-section { padding:4rem 0; }

.policy-section,
.terms-section   {
  padding:4rem 1rem;
  max-width:900px;
  margin:auto;
}
.policy-section h1,
.terms-section h1,
.policy-section h2,
.terms-section h2{ margin-top:2rem; }

/* ----------  Cart page ---------- */
.cart-wrapper{ max-width:900px; margin-inline:auto; }

/* ----------  Top navbar (used on other pages) ---------- */
.navbar{
  background:var(--peach-deep) !important;
}
.navbar .navbar-brand,
.navbar .nav-link{ color:#fff !important; }
.navbar .nav-link:hover,
.navbar .nav-link.active{ color:#ffeada !important; }

/* ----------  Buttons & card accents ---------- */
.btn-primary,
.reflow-product-list .rf-product__price{
  background:var(--peach-deep);
  border-color:var(--peach-deep);
}
.btn-primary:hover{
  background:#d88d62;   /* 10–15 % darker */
  border-color:#d88d62;
}

.card,
.reflow-product-list .rf-product{
  background:#fff9f4;      /* whisper‑peach */
  border-color:#f0cab0;
}

/* style.css  (anywhere after the :root block)  */
.menu-toggle {
  z-index: 1100;       /* higher than the sidebar (1045) */
}