:root{
  --bg:#0b0b0c; --card:#121215; --muted:#8d8d96; --text:#e8e8ee;
  --accent:#6ee7ff; --accent2:#9dff8a; --danger:#ff6b6b; --ok:#34d399; --border:#23232a;
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent); text-decoration:none}
a:hover{filter:brightness(1.1)}

.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.brand{font-weight:800;letter-spacing:0.6px}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

label{font-size:14px;color:#c9c9d3}
input[type="text"], input[type="email"], input[type="tel"], select, textarea, input[type="number"]{
  background:#0f0f12; border:1px solid var(--border); color:var(--text);
  padding:10px 12px; border-radius:10px; width:100%;
  font-size:16px !important; /* Prevent iOS zoom on focus */
  line-height:1.2;
}
.v-qty{ font-size:16px !important; } /* extra safety for qty inputs */
input:focus, select:focus, textarea:focus{
  outline:2px solid color-mix(in oklab, var(--accent) 60%, transparent);
  outline-offset:1px; border-color:var(--accent);
}

/* Make autofilled fields look like normal text (no blue tint) */
input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px #0f0f12 inset; /* match input bg */
  caret-color: var(--text);
}

button{
  border:1px solid var(--border);
  background:linear-gradient(180deg,#17171c,#0f0f12);
  color:var(--text); padding:12px 16px; border-radius:12px; cursor:pointer;
}
button.primary{border-color:#2a2a32;background:linear-gradient(180deg,#1b2330,#0e141d)}
button:disabled{opacity:0.5;cursor:not-allowed}

fieldset{border:1px dashed var(--border);border-radius:12px;padding:12px}
legend{color:var(--muted);padding:0 6px}
hr{border:0;border-top:1px solid var(--border);margin:16px 0}
small.muted{color:var(--muted)}
.notice{
  padding:10px;border:1px solid var(--border);border-radius:10px;
  background:#101216;color:#cfe3ff;
}

.summary{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px;border-top:1px solid var(--border);margin-top:12px;
}

/* ---------- Hero (small image + blurb beside it) ---------- */
.hero{ display:flex; gap:16px; align-items:flex-start; }
.hero-thumb{
  flex:0 0 260px;       /* slightly larger than item images (240px) */
  width:260px;
  height:146px;         /* 260 * 9 / 16 */
  aspect-ratio:16/9;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:#0f0f12;
}
.hero-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-body{ flex:1; display:flex; flex-direction:column; gap:8px; }
.hero-copy{ margin:0; color:var(--text); }
.hero-dates .badge{
  display:inline-block; padding:4px 10px; border:1px solid var(--border);
  border-radius:999px; font-size:12px; background:#0f1216; color:#dfe8ff;
}

/* === Highlighted date badges === */
.badge-cutoff{
  background: linear-gradient(180deg, #ffb3b3, #ff6b6b);
  color:#1a0a0a;
  border-color:#ff6b6b;
  box-shadow: 0 0 0 2px rgba(255,107,107,.2), 0 6px 18px rgba(255,107,107,.25);
}
.badge-delivery{
  background: linear-gradient(180deg, #b8ffb0, #34d399);
  color:#06210f;
  border-color:#34d399;
  box-shadow: 0 0 0 2px rgba(52,211,153,.2), 0 6px 18px rgba(52,211,153,.25);
}

/* ---------- Item card ---------- */
.item{
  grid-column:span 12;
  display:flex; gap:16px;
  border:1px solid var(--border); border-radius:16px; padding:12px; background:#141419;
  align-items:flex-start;           /* DON’T stretch the thumbnail with tall content */
}
.item .info{flex:1}

/* Fixed 16:9 thumbnail — identical size on all cards */
.item > .thumb{
  flex:0 0 240px;                   /* fixed column width */
  width:240px;
  height:135px;                     /* 240 * 9 / 16 */
  aspect-ratio:16/9;                /* modern browsers; height is a fallback */
  border-radius:12px;
  border:1px solid var(--border);
  overflow:hidden;
  background:#0f0f12;
  align-self:flex-start;            /* never stretch vertically */
}
.item > .thumb > img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
  cursor:zoom-in;
}
/* neuter any legacy direct image rule */
.item > img{display:none !important}

/* Variant rows inside an item */
.item .variants .row{gap:16px}
.badge{
  display:inline-block; padding:2px 8px; border:1px solid var(--border);
  border-radius:999px; font-size:12px; color:#dfe8ff; background:#0f1216;
}

/* ---------- Lightbox / Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.7); z-index:1000; padding:24px;
}
.modal-overlay.open{display:flex}
.modal{
  position:relative; width:min(1200px,96vw); background:var(--card);
  border:1px solid var(--border); border-radius:16px; padding:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5)
}
.modal-media{
  width:100%; aspect-ratio:16/9; background:#0f0f12; border:1px solid var(--border);
  border-radius:12px; overflow:hidden
}
.modal-media img{width:100%;height:100%;object-fit:cover;display:block}
.modal-close{
  position:absolute; top:8px; right:8px; width:36px; height:36px;
  border-radius:10px; background:#18181d; border:1px solid var(--border);
  color:var(--text); font-size:22px; line-height:1; cursor:pointer
}
.modal-close:hover{filter:brightness(1.1)}

/* ---------- Tables (Admin) ---------- */
.table{
  width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid var(--border);border-radius:12px;overflow:hidden;
}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
.table thead th{background:#0f0f12;color:#c9c9d3;font-weight:600}
.table tr:last-child td{border-bottom:0}

/* ----- Docked totals bar at bottom ----- */
.order-dock{
  position:fixed; left:0; right:0; bottom:0; z-index:900; /* below modal (1000) */
  background:color-mix(in oklab, var(--bg) 85%, black);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--border);
  box-shadow:0 -10px 30px rgba(0,0,0,.35);
}
.order-dock .summary{ margin:10px auto; background:transparent; border:0; padding:12px 0; }
body{ padding-bottom:120px; }

/* ---------- Responsive ---------- */
@media (max-width:720px){
  .container{padding:16px}
  .hero{ flex-direction:column; }
  .hero-thumb{ width:100%; height:auto; aspect-ratio:16/9; }
  .item{flex-direction:column}
  .item > .thumb{ width:100%; flex:0 0 auto; height:auto; aspect-ratio:16/9; }
  .summary{flex-direction:column;align-items:flex-start;gap:8px}
  .order-dock .summary{ padding:10px 0; }
  body{ padding-bottom:140px; }
}