:root{
  --bg:#fffaf5; --card:#ffffff; --text:#1f2937; --muted:#6b7280;
  --accent:#b91c1c; --accent2:#111827; --border:#e5e7eb;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 18px; --maxw: 1100px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";}
body{background:var(--bg); color:var(--text); line-height:1.5;}
a{color:inherit; text-decoration:none}
.container{max-width:var(--maxw); margin:0 auto; padding:0 18px;}
.nav{position:sticky; top:0; z-index:50; background:rgba(255,250,245,.92); backdrop-filter: blur(10px); border-bottom:1px solid var(--border);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0;}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:44px; width:auto; border-radius:12px; box-shadow: var(--shadow);}
.brand .title{font-weight:800; letter-spacing:.2px}
.brand .subtitle{font-size:13px; color:var(--muted)}
.links{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.links a{padding:8px 10px; border-radius:12px; color:var(--accent2); font-weight:650}
.links a:hover{background:rgba(0,0,0,.05)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:14px; border:1px solid var(--border); background:var(--card); box-shadow: var(--shadow); font-weight:750;}
.btn.primary{background:var(--accent); color:white; border-color:rgba(0,0,0,.05);}
.btn.ghost{background:rgba(255,255,255,.7)}
.hero{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow: var(--shadow); border:1px solid rgba(0,0,0,.06);}
.hero img{width:100%; height:460px; object-fit:cover; display:block; filter:saturate(1.05);}
.hero .overlay{position:absolute; inset:0; background:linear-gradient(90deg, rgba(17,24,39,.78), rgba(17,24,39,.1) 70%);}
.hero .content{position:absolute; inset:0; display:flex; align-items:center;}
.hero h1{margin:0; font-size:44px; line-height:1.08; color:white;}
.hero p{margin:12px 0 0; color:rgba(255,255,255,.9); max-width:640px; font-size:17px;}
.hero .cta{margin-top:18px; display:flex; gap:12px; flex-wrap:wrap}
.section{padding:34px 0}
.grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:18px;}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow: var(--shadow); overflow:hidden;}
.card img{width:100%; height:220px; object-fit:cover; display:block;}
.card .pad{padding:16px}
.card h3{margin:0 0 8px; font-size:18px}
.card p{margin:0; color:var(--muted); font-size:14px}
.kv{display:flex; gap:12px; flex-wrap:wrap; color:var(--muted); font-size:14px}
.kv strong{color:var(--text)}
.footer{padding:26px 0; border-top:1px solid var(--border); color:var(--muted); font-size:13px}
.badge{display:inline-flex; padding:6px 10px; border-radius:999px; background:rgba(185,28,28,.1); color:var(--accent); font-weight:750; border:1px solid rgba(185,28,28,.18)}
h2{margin:0 0 10px; font-size:26px}
ul.clean{margin:10px 0 0; padding-left:18px; color:var(--muted)}
hr.sep{border:none; border-top:1px solid var(--border); margin:22px 0}
.form{display:grid; gap:12px}
.field{display:grid; gap:6px}
label{font-weight:700; font-size:13px}
input, select, textarea{padding:12px 12px; border-radius:14px; border:1px solid var(--border); background:white; font-size:14px; outline:none;}
textarea{min-height:110px; resize:vertical}
.small{font-size:12px; color:var(--muted)}
.notice{border:1px solid rgba(185,28,28,.22); background:rgba(185,28,28,.06); padding:12px 14px; border-radius:16px}
.hidden{display:none}
/* Legacy breakpoint (kept for smoother scaling between tablet and phone rules below) */
@media (max-width:760px){ .hero img{height:380px} .hero h1{font-size:34px} }

/* --- Responsive layout (mobile/tablet improvements) --- */

/* Avoid accidental horizontal clipping/scroll on small screens */
body{overflow-x:hidden;}

/* Tablet: keep layouts readable; convert 3-up cards to 2-up when needed */
@media (max-width:980px){
  .hero img{height:420px;}
  .hero h1{font-size:40px;}
  .hero p{font-size:16px;}
  .grid{gap:14px;}
  /* Home page cards are authored as span 4 (3-up). On tablets, make them span 6 (2-up). */
  .grid > *[style*="grid-column: span 4"]{ grid-column: span 6 !important; }
}

/* Medium screens: stack the common 7/5 two-column layout (About/Contact/Order) */
@media (max-width:920px){
  .grid > *[style*="grid-column: span 7"],
  .grid > *[style*="grid-column: span 5"]{
    grid-column: 1 / -1 !important;
  }
}

/* Phones: stack all grid cards, improve nav + form usability */
@media (max-width:640px){
  .container{padding:0 14px;}
  .section{padding:26px 0;}

  /* Nav: keep the brand on top, let links scroll horizontally instead of wrapping into tall stacks */
  .nav-inner{flex-direction:column; align-items:flex-start; gap:10px;}
  .links{width:100%; overflow-x:auto; flex-wrap:nowrap; gap:10px; padding-bottom:6px; -webkit-overflow-scrolling:touch;}
  .links a{white-space:nowrap;}

  /* Hero: reduce excessive height on mobile */
  .hero img{height:340px;}
  .hero h1{font-size:32px;}

  /* Stack any grid-based sections */
  .grid{grid-template-columns:repeat(12, 1fr);}
  .grid > *{grid-column: 1 / -1 !important; min-width:0;}

  /* Forms: iOS zooms inputs under 16px; keep them tap-friendly */
  input, select, textarea{font-size:16px;}
  .form .btn{width:100%;}

  /* Order page: force the Items sub-grid to one column on phones */
  #orderForm .grid[style*="grid-template-columns: 1fr 1fr"]{ grid-template-columns: 1fr !important; }
  #orderForm .field{min-width:0;}
}

@media (max-width:420px){
  .hero h1{font-size:28px;}
}

/* --- High-impact readability tweaks --- */
.hero .badge{
  background: rgba(185,28,28,.92);
  color: #ffffff;
  border-color: rgba(255,255,255,.18);
}
.hero .kv{ color: rgba(255,255,255,.92); }
.hero .kv strong{ color: #ffffff; }