:root{
  /* Inherit brand tokens from base.css */
}
*{box-sizing:border-box}
html,body{background:var(--bb-beige);color:var(--bb-deep);font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif}
/* Mobile-first like booking pages */
.sv-main{max-width:375px;margin:0 auto;padding:10px 16px 24px}
.pad{padding:14px}
h1{font-size:20px;font-weight:700;margin-bottom:6px;color:var(--bb-deep)}
h2{font-size:16px;font-weight:600;margin:0;color:var(--bb-deep)}
.sub{color:var(--bb-taupe);font-size:13px}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card{border:1px solid var(--bb-beige);border-radius:14px;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.08);margin-bottom:14px;overflow:hidden}
.img.ph{aspect-ratio:16/9;background:var(--bb-blush);display:flex;align-items:center;justify-content:center;color:#7a6356;font-size:12px}
.desc{font-size:13px;color:#4a3f39;margin-top:6px}
.why{font-size:12px;color:#654f43;margin-top:10px;background:var(--bb-beige);border:1px solid #E7E3DF;padding:10px;border-radius:12px}
.u{font-weight:700;color:var(--bb-bronze)}
.price{font-weight:700;color:var(--bb-deep);font-size:14px}
.cta{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.btn{ /* from base.css; override only spacing for mobile harmony */ padding:10px 14px; font-size:13px }
.btn-ghost{background:#fff;color:var(--bb-deep);border:1px solid var(--bb-deep);border-radius:999px;padding:8px 12px;font-size:13px;text-decoration:none}
.list{margin:8px 0 0 18px;color:#4a3f39;font-size:13px}
.list li{margin:6px 0}
.stepper{display:flex;gap:8px;align-items:center;margin-top:8px;font-size:12px;color:#7b6a60}
.stepper .dot{width:4px;height:4px;border-radius:50%;background:#c8c2ba;display:inline-block}
/* Tablet+ — simple responsive grid */
@media (min-width: 768px){
  .sv-main{max-width:720px;padding:14px 20px 28px}
  .sv-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .card{margin-bottom:0}
}
@media (min-width: 1120px){
  .sv-main{max-width:960px}
  .sv-grid{grid-template-columns:1fr 1fr 1fr}
}


/* === Images-only wiring (keeps layout/type unchanged) === */

/* Make the image container display background photos cleanly */
.sv-grid .card .img,
.img.ph{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Map each service card (order exactly as in services.shtml) */
.sv-grid .card:nth-of-type(1) .img,
.sv-grid .card:nth-of-type(1) .img.ph{
  background-image: url('/assets/images/services/braids-hero.jpg');
}
.sv-grid .card:nth-of-type(2) .img,
.sv-grid .card:nth-of-type(2) .img.ph{
  background-image: url('/assets/images/services/wigs-hero.jpg');
}
.sv-grid .card:nth-of-type(3) .img,
.sv-grid .card:nth-of-type(3) .img.ph{
  background-image: url('/assets/images/services/plaits-hero.jpg');
}
.sv-grid .card:nth-of-type(4) .img,
.sv-grid .card:nth-of-type(4) .img.ph{
  background-image: url('/assets/images/services/nails-hero.jpg');
}
.sv-grid .card:nth-of-type(5) .img,
.sv-grid .card:nth-of-type(5) .img.ph{
  background-image: url('/assets/images/services/wash-hero.jpg');
}
.sv-grid .card:nth-of-type(6) .img,
.sv-grid .card:nth-of-type(6) .img.ph{
  background-image: url('/assets/images/services/kids-hero.jpg');
}

/* When a background image is present, hide the blush placeholder */
.sv-grid .card .img.ph{ background-color: transparent; }