:root{--background:#260b08;--surface:#35120e;--text:#f7ead6;--muted:#bba78f;--gold:#efb84f;--ink:#281406;--border:#644025;--error:#ffb1a8;--success:#b2deb6;--radius:8px}*{box-sizing:border-box}body{margin:0;background:var(--background);color:var(--text);font-family:Arial,sans-serif;font-size:15px;line-height:1.5}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}h1,h2,.brand{font-family:Georgia,serif;font-weight:400;color:var(--gold)}h1{font-size:34px;margin:0 0 22px}h2{font-size:25px}header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--border);padding:12px max(16px,calc((100% - 1152px)/2));position:sticky;top:0;background:var(--background);z-index:2}.brand{font-size:26px}nav{display:flex;gap:18px;align-items:center}nav form{margin:0}main{max-width:1152px;padding:30px 16px;min-height:75vh;margin:auto}footer{border-top:1px solid var(--border);padding:28px;text-align:center;color:var(--muted);font-size:13px}button,.button{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--gold);border-radius:var(--radius);background:var(--gold);color:var(--ink);font:600 14px Arial,sans-serif;padding:11px 18px;cursor:pointer;text-align:center;text-decoration:none;min-height:42px}button:hover,.button:hover{filter:brightness(1.08);text-decoration:none}.outline{background:transparent;color:var(--gold)}small,strong,.price{color:var(--gold)}small{font-size:12px}del,.muted{color:var(--muted)}del{font-size:13px}.hero{margin:-30px -16px 0;min-height:480px;height:65vh;max-height:720px;background:linear-gradient(to top,var(--background),transparent),url(hero.jpg) center/cover;display:flex;align-items:end;padding:40px}.hero h1{font-size:56px;margin:12px 0}.hero p{font-family:Georgia,serif;font-size:26px}section{padding:22px 0}.categories{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.chip{padding:8px 16px;border:1px solid var(--border);border-radius:24px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.product{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;display:flex;flex-direction:column}.product img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block}.product-body{padding:14px;display:flex;flex:1;flex-direction:column;gap:5px}.product-body p{margin-top:auto;padding-top:10px}.product-body button{width:100%}.detail{display:grid;grid-template-columns:1fr 1fr;gap:32px}.detail>img{width:100%;height:auto;border-radius:var(--radius)}.price{font-size:30px}.form-panel{max-width:620px;display:grid;gap:16px}.form-panel label,label{display:grid;gap:6px}input,textarea,select{width:100%;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);padding:11px;font:inherit}input:focus,textarea:focus,select:focus{outline:2px solid var(--gold)}.check{display:flex;align-items:center}.check input{width:18px}.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.error{color:var(--error)}.notice{color:var(--success)}.checkout{display:grid;grid-template-columns:2fr 1fr;gap:24px}.cart-row{display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--border);padding:16px 0}.cart-row>img{object-fit:cover;border-radius:var(--radius)}.cart-row>div{flex:1}.cart-row form{max-width:100px;display:grid;gap:8px}aside{border:1px solid var(--border);padding:20px;border-radius:var(--radius);height:fit-content;background:var(--surface)}aside p{display:flex;justify-content:space-between;gap:10px}.heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.search{display:flex;gap:10px;max-width:600px;margin-bottom:20px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left}th,td{border-bottom:1px solid var(--border);padding:12px;vertical-align:middle}td img{object-fit:cover;border-radius:var(--radius)}td form{display:inline-block;margin-left:10px}td button{padding:8px}.edit-image{object-fit:cover;border-radius:var(--radius)}.order{border-bottom:1px solid var(--border);padding:16px 0 26px}.order form{display:flex;gap:16px;align-items:end;max-width:400px}.success{text-align:center;padding:70px 0}p,a,h1,h2{overflow-wrap:anywhere}@media(max-width:700px){header{gap:10px}.brand{font-size:23px}nav{gap:10px;font-size:13px}nav .button,nav button{padding:8px 10px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.product-body{padding:11px;font-size:14px}.product-body button{padding:10px 5px}.hero{min-height:430px;padding:24px}.hero h1{font-size:44px}.detail,.checkout{grid-template-columns:1fr}.cart-row{flex-wrap:wrap}.cart-row>img{width:64px;height:64px}main{padding-top:24px}.hero{margin-top:-24px}h1{font-size:30px}.heading{align-items:start}.two{gap:10px}}
.packs{border:1px solid rgba(212,175,55,.4);border-radius:10px;padding:10px;margin:0 0 12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.packs label{display:flex;gap:6px;align-items:center;cursor:pointer}
.pay-panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;margin:20px 0}.recommendations{border-top:1px solid var(--border);margin-top:28px}.recommendations .heading{align-items:end}.recommendations h2{margin:4px 0}.recommendations .grid{margin-top:16px}.pay-panel .form-panel{margin-top:18px}.pay-panel .muted{max-width:760px}@media(max-width:700px){.pay-panel{padding:16px}.recommendations .heading{align-items:start;flex-direction:column}}

/* Compact one-column pack selector */
.packs{display:flex;flex-direction:column;gap:6px;padding:9px}.packs label{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid var(--border);border-radius:7px;font-size:13px;line-height:1.2}.packs label input{width:15px;height:15px;flex:0 0 15px;margin:0}.packs label span{flex:1}.packs label strong{white-space:nowrap;font-size:13px}

/* Mobile / Android responsive navigation and checkout fixes */
@media (max-width: 700px) {
  header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 12px; padding:12px 14px; }
  .brand { font-size:clamp(21px, 5.5vw, 26px); white-space:nowrap; overflow-wrap:normal; word-break:keep-all; min-width:0; }
  header nav { grid-column:1 / -1; width:100%; display:flex; align-items:center; justify-content:space-between; gap:clamp(6px, 2vw, 14px); flex-wrap:nowrap; font-size:clamp(12px, 3.2vw, 14px); min-width:0; }
  header nav a, header nav button, header nav .button { white-space:nowrap; word-break:keep-all; overflow-wrap:normal; }
  header nav .button, header nav button { min-height:38px; padding:7px 10px; }
  main { width:100%; max-width:100%; padding-left:14px; padding-right:14px; }
  .hero { margin-left:-14px; margin-right:-14px; padding:24px 18px; }
  .pay-shell { width:100%; max-width:100%; min-width:0; }
  .pay-banner { padding:20px 16px; border-radius:14px; }
  .pay-banner h1 { font-size:clamp(28px, 8vw, 36px); line-height:1.18; overflow-wrap:normal; }
  .pay-banner p { font-size:15px; }
  .pay-layout, .checkout { grid-template-columns:minmax(0,1fr); min-width:0; }
  .pay-panel, aside { min-width:0; padding:16px; }
  .pay-choice { align-items:flex-start; }
  .pay-choice label { min-width:0; overflow-wrap:anywhere; }
  .pay-actions { display:grid; grid-template-columns:minmax(0,1fr); }
  .pay-actions a, .pay-actions button { width:100%; min-width:0; }
  .reference-form input, .reference-form button { min-width:0; }
  .qr-img { max-width:min(240px,100%); }
}
@media (max-width: 360px) {
  header { padding-left:10px; padding-right:10px; }
  .brand { font-size:20px; }
  header nav { gap:5px; font-size:11px; }
  header nav .button, header nav button { padding:6px 7px; font-size:12px; }
}