*{box-sizing:border-box}body{font-family:Arial,sans-serif;background:#f4f5f7;margin:0;color:#171717}.wrap{max-width:1200px;margin:auto;padding:18px}.card{background:white;border-radius:18px;padding:20px;box-shadow:0 4px 18px #00000012;margin-bottom:16px}.hero{display:grid;grid-template-columns:var(--hero-photo-percent,48%) 1fr;gap:22px;align-items:center;min-height:max(var(--hero-min-height,520px),520px);max-width:max(var(--hero-max-width,1200px),1100px);margin-left:auto;margin-right:auto}.hero img{width:100%;height:max(var(--hero-photo-height,480px),460px);object-fit:contain;border-radius:14px;background:#fff}.hero h1{margin:0 0 8px}.muted{color:#666}.grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}.num{border:0;border-radius:7px;aspect-ratio:1;background:#202124;color:white;font-weight:700;cursor:pointer}.num:hover,.num.selected{background:#2563eb}.num.taken{background:#d8d8d8;color:#999;cursor:not-allowed;opacity:.65}.form{display:grid;gap:10px}.form input,.form textarea,.form select{width:100%;padding:12px;border:1px solid #ddd;border-radius:10px}.primary,.danger{border:0;border-radius:10px;padding:12px 16px;color:#fff;background:#2563eb;cursor:pointer;font-weight:700}.danger{background:#c62828}.msg{padding:10px;border-radius:10px;background:#eef5ff}.top{display:flex;justify-content:space-between;align-items:center;gap:10px}.table{width:100%;border-collapse:collapse}.table td,.table th{padding:9px;border-bottom:1px solid #eee;text-align:left}a{color:#2563eb;text-decoration:none}@media(max-width:560px){.wrap{padding:10px}.hero{grid-template-columns:44% 1fr;gap:10px;min-height:auto;max-width:100%}.hero img{height:220px}.grid{gap:4px}.num{font-size:11px}.hero h1{font-size:20px}}
.selected-summary{padding:12px 14px;border-radius:10px;background:#f3f4f6;font-weight:700;line-height:1.5}.primary:disabled{opacity:.45;cursor:not-allowed}.num.selected{outline:3px solid #2563eb;outline-offset:1px;transform:scale(.96)}


/* Keep the first customer section close to the photo and details. */
.customer-page .hero {
  min-height: auto;
  max-width: 100%;
  grid-template-columns: minmax(0,48fr) minmax(0,52fr);
  padding: 26px;
  gap: 22px;
}
.customer-page .hero img {
  height: 400px;
  max-height: 400px;
  object-fit: contain;
}
@media (max-width:560px) {
  .customer-page .hero { padding:20px; gap:10px; }
  .customer-page .hero img { height:300px; max-height:300px; }
}

/* Front-page sizing is controlled by front-90-percent.css. */

.customer-photo-frame { height:400px; overflow:hidden; border-radius:14px; }
.customer-page .hero .customer-photo-frame img { height:100%; max-height:none; border-radius:0; transform:translate(var(--photo-x,0%),var(--photo-y,0%)) scale(var(--photo-zoom,1)); }
@media(max-width:560px) { .customer-photo-frame { height:300px; } }