/* ============ Mi Compa Store — Styles ============ */

/* Theme */
:root{
  --bg: #faf8f4;
  --card: #ffffff;
  --ink: #0f1720;
  --muted: #6b7280;
  --brand: #034F39;        /* your existing green */
  --accent: #e53935;       /* CTA red */
  --ok: #10b981;
  --warn: #f59e0b;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(16, 24, 40, .10);
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; background: var(--bg); color: var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* Containers & utilities */
.container{ width: 100%; margin: 0 auto;padding: 20px;;}
.muted{ color: var(--muted); }
.kicker{ font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); font-weight: 800; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 12px 18px; border-radius: 999px; border: 1px solid transparent;
  background: var(--accent); color: #fff; font-weight: 800; letter-spacing: .2px;
  box-shadow: var(--shadow); cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn.ghost{ background: transparent; color: var(--brand); border-color: var(--brand); }
.btn.alt{ background: var(--brand); }

/* ======= NAV (keeps your class names) ======= */
.navbar{
  position: sticky; top:0; z-index: 40;
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 20px; background: var(--brand); border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 22px rgba(3,79,57,.35);
}
.nav-left, .nav-center, .nav-right{ display:flex; align-items:center; }
.nav-logo img{ width:64px; border-radius:22px; }
.nav-item{ margin-left: 16px; color:#fff; text-decoration:none; font-weight:800; }

.nav-center{ width: 0px; position: relative; }
.search-input{
  width: 100%; height: 40px; border: 0; outline: 0; border-radius: 999px;
  padding: 0 44px 0 14px; background: #f2f5f3; color: #0b1114; box-shadow: var(--shadow);
}
.search-input::placeholder{ color:#81908a; }
.search-button{
  position:absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 999px; border: 0; background: var(--brand); color:#fff;
  display:grid; place-items:center; cursor:pointer; box-shadow: var(--shadow);
}

/* ======= HERO ======= */
.hero{
  background:
    radial-gradient(900px 360px at 15% -10%, rgba(3,79,57,.16), transparent),
    radial-gradient(900px 360px at 85% -20%, rgba(229,57,53,.12), transparent);
  padding: 36px 0 22px; border-bottom: 1px solid #e9e6e0;
}

.hero h1{ font-size: clamp(28px, 3.4vw, 44px); margin: 8px 0 10px; }
.hero p{ color: var(--muted); font-size: 18px; }
.hero-cards{ 
  display:grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 12px; 
  margin-top: 18px; 

}
.hcard{ 
  background: var(--card); 
  border-radius: var(--radius); 
  padding: 14px; 
  border: 1px solid #eee; 
  box-shadow: var(--shadow); 
}
.hcard strong{ display:block; font-size: 18px; }
.hcard span{ color: var(--muted); font-size: 13px; }
.hero-top-section{ margin-top: 80px; box-shadow:0 0 12px #a9a9a9;border-radius:8px;}

/* ======= VALUE PROP STRIP ======= */
.value-strip{
  width:100%;
  margin: 16px 0 30px;
  background: #fff; 
  border: 1px solid #eee; 
  border-radius: var(--radius); 
  box-shadow: var(--shadow);
  min-height:180px;
  padding:5px;
  margin-top:20px;
}
.value-items{ display:grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 12px; padding: 12px; }
.value-item{ display:flex; gap:10px; align-items:center; padding: 10px 12px; border-radius: 12px; background:#fafafa; }
.value-item i{ color: var(--brand); }

/* ======= KITS (meal builder cards) ======= */
.kits{ margin: 22px 0 40px;}
.section-head{ 
  text-align:center;
  gap: 14px; 
  margin-bottom: 12px;
  padding:20px;
}
.section-head h2{ font-size: 24px; margin:0; }
.section-head .muted{ font-size: 14px; }

/* .kit-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; } */
.kit-grid{ grid-template-columns: 1fr; }
.kit{
  background: var(--card); border: 1px solid #eee; border-radius: var(--radius); box-shadow: var(--shadow);
  overflow:hidden; display:grid; grid-template-columns: 1.1fr .9fr; gap: 0;
}
.kit-media{
  min-height: 260px; background: linear-gradient(135deg, rgba(3,79,57,.08), rgba(229,57,53,.08));
  display:grid; place-items:center; padding: 18px;
}

.kit-body{ padding: 18px; }
.kit h3{ margin:0 0 4px; }
.sub{ color: var(--muted); margin: 0 0 12px; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 10px; }
.chip{
  
  font-size: 12px; padding: 6px 10px; border-radius: 999px;
  border: 1px dashed rgba(3,79,57,.4); color: #0b1114; background: #f6faf7;
}

.row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.block{ background:#fafafa; border:1px solid #eee; border-radius: 12px; padding: 12px; }


.qty-line, .extra-line{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin: 10px 0; }
.qty-input, .num-input{
  width: 92px; height: 38px; border-radius: 10px; border: 1px solid #d9d9d9; padding: 0 10px; font-weight: 700;
}
.extra-line{
  margin-bottom:30px;
}
.num-input{ width: 80px; }
.help{ color: var(--muted); font-size: 12px; }

.price-wrap{
  display:flex; align-items: center; justify-content: space-between; gap: 10px;
  background:#fff; border: 1px solid #eee; border-radius: 12px; padding: 12px 14px; margin-top: 10px;
}
.price-title{ color:#374151; font-size: 14px; }
.price-main{ font-size: 22px; font-weight: 900; color: var(--brand); }
.price-sub{ color: var(--muted); font-size: 12px; }

.kit-actions{ display:flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

/* ======= RECIPE ======= */
.recipe{
  background: #fff; border-top: 1px solid #eee; border-bottom: 1px solid #eee;
  padding: 28px 0; box-shadow: var(--shadow);
}
.recipe h2{ margin:0 0 10px; }
.recipe-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.recipe-card{ background: #fafafa; border: 1px solid #eee; border-radius: 12px; padding: 16px; }
.recipe ol{ margin: 10px 0 0 18px; }

/* ======= FOOTER (keeps your classes if you have one) ======= */
.site-footer{ padding: 20px 0; color:#334155; }

/* ======= Responsive ======= */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-cards{ grid-template-columns: repeat(3, 1fr); }
  .value-items{ grid-template-columns: repeat(2, 1fr); }
  .kit-grid{ grid-template-columns: 1fr; }
  .kit{ grid-template-columns: 1fr; }
  .recipe-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 450px){

  .value-items{ 
    grid-template-columns: repeat(1, 1fr); 
    
  }
  .value-item{
    /* box-shadow:0 0 8px black; */
    height:90px;
    background: #f1f1f1;
  }
  
  .hero-cards{ 
    grid-template-columns: repeat(1, 1fr); 
    gap: 12px; 
    margin-top: 18px; 

  }
}


/* ===== Mobile (≤768px) overrides ===== */
@media (max-width: 768px) {
  .kit {
    grid-template-columns: 1fr;
    border-radius: 14px;
  }

  .kit-media {
    min-height: 200px;
    padding: 12px;
  }

  .kit-body {
    padding: 14px;
  }

  /* Stack the two blocks (Porciones / Extras) */
  .row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Inputs & lines: wrap nicely for small screens */
  .qty-line,
  .extra-line {
    gap: 8px;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .qty-line label,
  .extra-line label {
    flex: 1 1 100%;
    margin-bottom: 6px;
  }

  .qty-input,
  .num-input {
    width: 100%;
    height: 44px;            /* better tap target */
    border-radius: 10px;
  }

  .extra-line { margin-bottom: 18px; }

  /* Chips a bit tighter on mobile */
  .chips {
    gap: 6px;
    margin-bottom: 8px;
  }
  .chip {
    font-size: 11px;
    padding: 5px 8px;
  }

  /* Price + actions: comfortable spacing and full-width buttons */
  .price-wrap {
    padding: 12px;
    gap: 8px;
    margin-top: 8px;
  }
  .price-main { font-size: 20px; }
  .price-sub  { font-size: 11px; }

  .kit-actions {
    flex-direction: column;
    gap: 8px;
  }
  .kit-actions .btn,
  .kit-actions .btn.alt,
  .kit-actions .btn.ghost {
    width: 100%;
    text-align: center;
  }
}

#header_v1{
    text-align:center;
    padding:25px;
    box-shadow:0 0 20px #a9a9a9;
    margin-bottom:100px;
    text-align: center;
    
  }
  .kicker h1{
    font-size:20px;
    margin-top:50px;
    margin-bottom:50px;
    color:var(--primary);
  }
  #header_v1 h1{
    font-size:clamp(28px, 3.4vw, 44px);
    margin:0;
  }
  #header_v1 p{
    margin:auto;
    /* font-size:clamp(28px, 3.4vw, 44px);
    margin:0; */
}
#enchiladas_img_desktop{
    display:none;
    width:100%;
}
#enchiladas_img_mobile{
  display:block;
  width:100%;
}
/** when in desktop size */
@media screen and (min-width: 555px) {
  #enchiladas_img_mobile{
    display:none;
    width:100%;
}
  #enchiladas_img_desktop{
    display:block;
    width:100%;
  }
}