@import 'theme-tokens.css';

/* ---------------- BASE ---------------- */

html{
  scroll-behavior:smooth;
  font-size:clamp(14px,1vw,16px);
}

body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--color-bg);
  color:var(--color-text);
}

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

/* ---------------- HEADER ---------------- */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(10px);
  background:rgba(255,255,255,.9);
  border-bottom:1px solid var(--color-border);
}

.header-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 0;
}

.logo{
  font-weight:800;
  font-size:22px;
  color:var(--color-primary);
}

/* ---------------- HERO ---------------- */

.hero{
  padding:36px 0;
  background:linear-gradient(135deg,#fff7ed,#fff);
}

.hero-inner{
  display:flex;
  flex-direction:column;
  gap:24px;
  text-align:center;
}

.hero-title{
  font-size:32px;
  font-weight:800;
}

.hero-image img{
  max-width:420px;
  width:100%;
  margin:auto;
  border-radius:16px;
  box-shadow:var(--shadow);
}

@media(min-width:900px){
  .hero-inner{
    flex-direction:row;
    text-align:left;
    align-items:center;
  }
}

/* ---------------- MENU GRID ---------------- */

.content-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
}

@media(min-width:1100px){
  .content-grid{
    grid-template-columns:1fr 340px;
    align-items:start;
  }
}

/* ---------------- ITEMS ---------------- */

.items-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

@media(min-width:600px){
  .items-grid{grid-template-columns:repeat(2,1fr);}
}

@media(min-width:1100px){
  .items-grid{grid-template-columns:repeat(3,1fr);}
}

.item-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}

.item-image{
  width:100%;
  height:160px;
  object-fit:cover;
}

/* ---------------- CART ---------------- */

.cart-section{
  background:#fff;
  border-radius:18px;
  box-shadow:var(--shadow-sm);

  display:flex;
  flex-direction:column;
}

/* cart content scrollable */
.cart-items{
  flex:1;
  overflow:auto;
  padding:16px;
}

/* sticky footer */
.cart-footer{
  position:sticky;
  bottom:0;
  background:#fff;
  padding:14px;
  border-top:1px dashed #eee;
}

/* mobile bottom sheet */

@media(max-width:1099px){

  :root{
    --cart-height:230px;
  }

  .cart-section{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:var(--cart-height);
    z-index:200;
    border-radius:18px 18px 0 0;
  }

  .menu-section{
    padding-bottom:calc(var(--cart-height) + 40px);
  }
}

/* ---------------- CHECKOUT ---------------- */

.checkout-section{
  margin:30px 0;
  padding:20px;
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.checkout-grid{
  display:grid;
  gap:20px;
}

@media(min-width:1000px){
  .checkout-grid{
    grid-template-columns:1fr 360px;
  }
}

/* ---------------- FOOTER ---------------- */

.footer{
  text-align:center;
  padding:20px 0;
  color:var(--color-muted);
}