/* customer portal + shop: soft background, big photo, serif names, grey type (client_ui_ref) */
body.soft{background:#f6f6f4}
body.soft .top{background:#f6f6f4;border-bottom-color:#ecebe7}
.cwrap{max-width:calc(460px*var(--cw));margin:0 auto;padding:calc(22px*var(--sp)) calc(22px*var(--sp)) calc(48px*var(--sp))}
.cwrap h1{font-family:var(--d-hbody-f,var(--Ghead,var(--head)));font-weight:var(--d-hbody-g,500);font-size:var(--d-hbody-fp,30px);color:var(--d-hbody-c,#111);line-height:1.15;margin:calc(4px*var(--sp)) 0 calc(4px*var(--sp))}
.grey{color:#8a8a8a;font-family:var(--label);font-size:calc(15px*var(--fs));line-height:1.5}
.card{background:#fff;border-radius:calc(22px*var(--rad));padding:calc(22px*var(--sp));box-shadow:0 1px 2px rgba(0,0,0,.03)}
.field{display:block;margin:calc(14px*var(--sp)) 0 0}.field .lab{margin:0 calc(4px*var(--sp)) calc(6px*var(--sp))}
.field input{width:100%;border:1.5px solid #ddd;border-radius:calc(14px*var(--rad));padding:calc(13px*var(--sp)) calc(14px*var(--sp));font-family:var(--label);font-size:max(16px,calc(18px*var(--fs)));background:#fff;outline:none}
.field input:focus{border-color:#111}
.pin{letter-spacing:.6em;text-align:center;font-size:calc(24px*var(--fs))!important}
.links{display:flex;justify-content:space-between;margin-top:calc(16px*var(--sp))}
.lk{background:none;border:0;font-family:var(--label);font-weight:500;font-size:calc(13px*var(--fs));letter-spacing:.04em;color:#111;text-decoration:underline;cursor:pointer;padding:calc(6px*var(--sp)) 0}
.cwrap .err{text-align:center}.note{font-family:var(--label);font-size:calc(14px*var(--fs));color:#555;background:#fffdf6;border:1px solid #efe3b8;border-radius:calc(14px*var(--rad));padding:calc(12px*var(--sp)) calc(14px*var(--sp));margin:calc(14px*var(--sp)) 0 0}
/* job / item list */
.list{display:grid;gap:calc(14px*var(--sp));margin-top:calc(18px*var(--sp))}
.row{display:flex;gap:calc(14px*var(--sp));align-items:center;background:#fff;border-radius:calc(20px*var(--rad));padding:calc(12px*var(--sp));cursor:pointer;text-decoration:none;color:inherit;border:0;width:100%;text-align:left}
.row .th{width:76px;height:76px;border-radius:calc(14px*var(--rad));background:#f1f0ec center/cover no-repeat;flex-shrink:0}
.row b{font-family:var(--head);font-weight:500;font-size:calc(19px*var(--hs));display:block}
.row .grey{font-size:calc(13px*var(--fs))}
.chipg{display:inline-block;font-family:var(--label);font-weight:500;font-size:calc(11px*var(--fs));letter-spacing:.05em;text-transform:uppercase;border-radius:calc(12px*var(--rad));padding:calc(3px*var(--sp)) calc(10px*var(--sp)*var(--pw));background:#f3ecd6;color:#7a6118;margin-top:calc(6px*var(--sp))}
/* detail */
.hero{position:relative;background:#fff;border-radius:calc(26px*var(--rad));overflow:hidden;aspect-ratio:1/1;margin:calc(8px*var(--sp)) 0 0}
.slides{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.slides::-webkit-scrollbar{display:none}
.slides div{flex:0 0 100%;height:100%;scroll-snap-align:center;background:#fff center/contain no-repeat}
.ph{display:flex;align-items:center;justify-content:center;color:#b5b5b5;font-family:var(--label);font-size:calc(13px*var(--fs));letter-spacing:.08em}
.sdots{display:flex;justify-content:center;gap:calc(8px*var(--sp));margin:calc(12px*var(--sp)) 0 calc(4px*var(--sp))}.sdots i{width:6px;height:6px;border-radius:50%;background:#cfcfcf}.sdots i.on{background:#111}
.sec{font-family:var(--label);font-weight:600;font-size:calc(15px*var(--fs));margin:calc(24px*var(--sp)) 0 calc(8px*var(--sp));color:#111}
.steps{list-style:none;font-family:var(--label);font-size:calc(15px*var(--fs))}.steps li{display:flex;gap:calc(12px*var(--sp));align-items:center;padding:calc(5px*var(--sp)) 0;color:#9a9a9a}
.steps li i{width:16px;height:16px;border-radius:50%;border:1.5px solid #cfcfcf;flex-shrink:0}.steps li.done{color:#111}.steps li.done i{background:#111;border-color:#111}
.steps li.doing{color:#111;font-weight:600}.steps li.doing i{background:#111;border-color:#111;box-shadow:0 0 0 4px #f1e3ad}
.specs{font-family:var(--label);font-size:calc(15px*var(--fs));color:#8a8a8a}.specs li{margin:calc(4px*var(--sp)) 0 calc(4px*var(--sp)) calc(18px*var(--sp))}
.buy{display:flex;align-items:center;justify-content:space-between;gap:calc(16px*var(--sp));margin-top:calc(26px*var(--sp))}
.buy .amt{font-family:var(--head);font-weight:500;font-size:calc(30px*var(--hs))}.buy .amt small{display:block;font-family:var(--label);font-size:calc(12px*var(--fs));color:#8a8a8a;letter-spacing:.06em;text-transform:uppercase;margin-bottom:calc(2px*var(--sp))}
.blk{background:#000;color:#fff;border:0;border-radius:calc(14px*var(--rad));padding:calc(17px*var(--sp)) calc(28px*var(--sp));font-family:var(--label);font-weight:500;font-size:calc(16px*var(--fs));cursor:pointer;flex:1;max-width:220px}
.back{background:none;border:0;cursor:pointer;padding:calc(6px*var(--sp)) 0;margin-bottom:calc(6px*var(--sp));font-family:var(--label);font-size:calc(14px*var(--fs));color:#111}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(14px*var(--sp));margin-top:calc(18px*var(--sp))}
.tile{background:#fff;border-radius:calc(20px*var(--rad));padding:calc(10px*var(--sp)) calc(10px*var(--sp)) calc(14px*var(--sp));cursor:pointer;border:0;text-align:left}
.tile .th{aspect-ratio:1/1;border-radius:calc(14px*var(--rad));background:#fafafa center/contain no-repeat;margin-bottom:calc(10px*var(--sp))}
.tile b{font-family:var(--head);font-weight:500;font-size:calc(17px*var(--hs));display:block;color:#111}.tile .p{font-family:var(--head);font-size:calc(16px*var(--hs));margin-top:calc(4px*var(--sp));color:#111}
@media (min-width:900px){
  .cwrap.wide{max-width:calc(1080px*var(--cw))}.grid{grid-template-columns:repeat(4,1fr)}
  .detail2{display:grid;grid-template-columns:1fr 1fr;gap:calc(44px*var(--sp));align-items:start}.detail2 .hero{margin:0}
}
/* customer menu + landing */
.menu .soon{font-size:calc(10px*var(--fs));color:#9a9a9a;letter-spacing:.06em;margin-left:calc(6px*var(--sp))}
.menu .strong{border-top:1px solid #eee;margin-top:calc(4px*var(--sp))}
.landing{text-align:center}
.landing .biglogo{height:64px;margin:calc(26px*var(--sp)) auto calc(14px*var(--sp));display:block}
.landing .tag{font-family:var(--body);font-size:calc(17px*var(--fs));color:#555;margin:0 auto calc(26px*var(--sp));max-width:340px;line-height:1.5}
.landing .card{text-align:left}
.landing h2{font-family:var(--d-hbody-f,var(--Ghead,var(--head)));font-weight:var(--d-hbody-g,500);font-size:var(--d-hbody-fp,24px);color:var(--d-hbody-c,#111);margin:0 0 calc(4px*var(--sp))}
.or{display:flex;align-items:center;gap:calc(12px*var(--sp));color:#aaa;font-family:var(--label);font-size:calc(12px*var(--fs));letter-spacing:.1em;margin:calc(26px*var(--sp)) 0 calc(14px*var(--sp))}.or:before,.or:after{content:'';flex:1;border-top:1px solid #e3e2dd}
.pill.ghost{background:#fff;color:var(--d-btnout-c,#111);border:1.5px solid #111}
.trk{margin-top:calc(18px*var(--sp));text-align:left}
.trk h3{font-family:var(--head);font-weight:500;font-size:calc(22px*var(--hs));margin:calc(2px*var(--sp)) 0}
.homelinks{display:flex;gap:calc(12px*var(--sp));justify-content:center;margin-top:calc(26px*var(--sp))}
.pays{list-style:none;font-family:var(--label);font-size:calc(15px*var(--fs));background:#fff;border-radius:calc(16px*var(--rad));padding:calc(4px*var(--sp)) calc(14px*var(--sp))}
.trk .pays{background:#f6f6f4}
.pays li{display:flex;justify-content:space-between;gap:calc(12px*var(--sp));padding:calc(9px*var(--sp)) 0;border-bottom:1px solid #eee;color:#555}.pays li:last-child{border:0}
.pays b{font-family:var(--head);font-weight:500;color:#111;white-space:nowrap}.pays li.bal{color:#111;font-weight:600}.pays li.bal b{font-size:calc(20px*var(--fs))}
.grey.sm{font-size:calc(13px*var(--fs));margin-top:calc(6px*var(--sp))}
.tph{margin-bottom:calc(14px*var(--sp))}
.specs2{display:grid;grid-template-columns:auto 1fr;gap:calc(6px*var(--sp)) calc(16px*var(--sp));font-family:var(--label);font-size:calc(15px*var(--fs))}.specs2 dt{color:#8a8a8a}.specs2 dd{color:#111}
/* shop item links + share */
a.tile{display:block;text-decoration:none;color:inherit}
.tile .th{position:relative}
.shr{background:rgba(255,255,255,.92);border:0;border-radius:50%;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.tile .shr{position:absolute;top:8px;right:8px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.shr.big{width:auto;height:auto;border-radius:calc(20px*var(--rad));padding:calc(8px*var(--sp)) calc(14px*var(--sp));gap:calc(6px*var(--sp));border:1.5px solid #111;background:#fff;font-family:var(--label);font-weight:500;font-size:calc(13px*var(--fs));flex-shrink:0}
.ttl{display:flex;justify-content:space-between;align-items:flex-start;gap:calc(12px*var(--sp))}
a.back{display:inline-block;text-decoration:none}
/* My orders: request a visit. The list is this customer's own rows. */
.myap{margin-top:calc(8px*var(--sp))}
.myap .arow{background:#fff;border-radius:calc(16px*var(--rad));padding:calc(12px*var(--sp)) calc(14px*var(--sp));margin:0 0 calc(10px*var(--sp))}
.myap .alab{display:block;font-family:var(--head);font-weight:500;font-size:calc(18px*var(--hs));color:#111}
.myap .ast{display:block;font-family:var(--label);font-weight:600;font-size:calc(14px*var(--fs));margin:calc(4px*var(--sp)) 0 calc(2px*var(--sp));color:#111}
.myap .apform{margin-top:calc(12px*var(--sp))}
.myap select,.myap textarea{width:100%;border:1.5px solid #ddd;border-radius:calc(14px*var(--rad));padding:calc(13px*var(--sp)) calc(14px*var(--sp));font-family:var(--label);font-size:max(16px,calc(16px*var(--fs)));background:#fff;outline:none}
.myap textarea{min-height:72px;resize:vertical}
.myap select:focus,.myap textarea:focus{border-color:#111}