.genar-booking-steps{display:flex;gap:24px;margin:20px 0 30px;font-size:12px;color:#77766d}.genar-booking-steps .current{color:#272920}.genar-booking-steps b{font-family:monospace;margin-right:5px}.genar-tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.genar-tier-card{display:flex;flex-direction:column;align-items:stretch;text-align:left;border:1px solid #d9d6cc;background:#f8f7f2;padding:24px;position:relative;color:#292b24}.genar-tier-card.selected{border-color:#686550;box-shadow:inset 0 0 0 1px #686550}.genar-tier-card.recommended{background:#e9e9df}.genar-tier-top,.genar-tier-foot{display:flex;justify-content:space-between;gap:12px;align-items:center}.genar-tier-top{margin-bottom:24px}.genar-tier-top i{font-style:normal}.genar-tier-card h2{font-size:30px;line-height:1.1;margin:0 0 13px}.genar-tier-card p{font-size:14px;line-height:1.5;color:#626358}.genar-tier-card ul{list-style:none;margin:22px 0;padding:0;flex:1}.genar-tier-card li{padding:7px 0;border-bottom:1px solid #d7d7cc;font-size:12px;line-height:1.5}.genar-tier-foot{border-top:1px solid #cccbbd;padding-top:18px;color:#666657;font-size:12px}.genar-tier-foot small{font-size:11px}.genar-tier-note{font-size:13px;line-height:1.7;color:#6b6b60;max-width:760px;margin:18px 0 35px}.genar-roster-choice .barber-choice-profile{align-items:flex-start}.genar-roster-choice .barber-choice-profile>span{min-width:0}.genar-stylist-fit,.genar-stylist-note{display:block;font-size:12px;line-height:1.55;margin-top:8px}.genar-stylist-note{color:#797970}.genar-stylist-profile{display:grid;grid-template-columns:1fr 1fr;gap:32px}.genar-stylist-profile>.photo-v2{min-height:340px}.phone-page .genar-tier-grid{grid-template-columns:1fr}.phone-page .genar-tier-card{padding:20px}.phone-page .genar-tier-top{margin-bottom:12px}.phone-page .genar-tier-card h2{font-size:28px}.phone-page .genar-tier-card ul{margin:12px 0}.phone-page .genar-tier-card li{padding:5px 0}.phone-page .genar-booking-steps{gap:12px;font-size:10px}.phone-page .genar-stylist-profile{grid-template-columns:1fr}.genar-roster-choice .barber-choice-select{min-width:52px}.genar-roster-choice .barber-choice-profile .photo-v2{flex-shrink:0}
@media(max-width:700px){.genar-tier-grid,.genar-stylist-profile{grid-template-columns:1fr}.genar-tier-card{padding:20px}.genar-booking-steps{gap:12px;font-size:10px}.genar-tier-top{margin-bottom:12px}.genar-roster-choice .barber-choice-profile{gap:12px}}

/* Warm Genar texture on the customer booking flow. */
.app-main:has(.genar-booking-steps) .page,
.phone-page:has(.genar-booking-steps) {
  background-color: #f4ede4;
  background-image: repeating-linear-gradient(115deg,transparent 0 6px,rgba(123,84,46,.035) 6px 7px),radial-gradient(circle at 100% 0,rgba(220,146,84,.18),transparent 42%);
}
.app-main:has(.genar-booking-steps) .page-head .eyebrow,
.phone-page:has(.genar-booking-steps) .eyebrow { color: #a65337; }
.genar-booking-steps { border-bottom: 1px solid #c59978; padding-bottom: 15px; }
.genar-booking-steps .current { color: #a65337; }
.genar-tier-card { background: #fbf7f0; border-color: #cba98d; transition: transform .25s ease,box-shadow .25s ease; }
.genar-tier-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(95,49,30,.12); }
.genar-tier-card.selected { border-color: #a65337; box-shadow: inset 0 0 0 1px #a65337; }
.genar-tier-card.recommended { background: #f2ded0; }
.app-main:has(.genar-booking-steps) .select-card.selected,
.app-main:has(.genar-booking-steps) .day-btn.selected,
.app-main:has(.genar-booking-steps) .slot.selected,
.phone-page:has(.genar-booking-steps) .select-card.selected,
.phone-page:has(.genar-booking-steps) .slot.selected { border-color: #a65337; background: #a65337; color: #fff; }
@media (prefers-reduced-motion: reduce) { .genar-tier-card { transition: none; } }