/* ── /service UI polish ──────────────────────────────────────────
   Brand-consistent warm-gold treatment for the prayer service page.
   Scoped to body.service-view and loaded ONLY by service.html, so the
   shared style.css (.btn.primary etc.) is untouched on other pages.
   Phases 1-4: buttons + sold badge, modal, form controls, finishing. */

/* ═══ Phase 1 — Page surface, cards, primary buttons + "sold" badge ═══ */

/* Warm the page background (default --bg is cool blue-grey #f4f6fb). */
body.service-view{ background:#f6f5f2; }

/* Product cards → warm-white gradient, gold hairline, soft warm shadow. */
body.service-view .service-grid .card,
body.service-view .hot-grid.service-grid .card{
  background:linear-gradient(165deg, #fffdf8 0%, #fff8ee 100%);
  border:1px solid rgba(199,164,106,.3);
  box-shadow:0 10px 28px rgba(92,69,38,.1);
}
body.service-view .service-grid .card:hover,
body.service-view .hot-grid.service-grid .card:hover{
  border-color:rgba(176,129,54,.46);
  box-shadow:0 16px 38px rgba(92,69,38,.17);
}

/* Unify the three primary actions (查看服務 / 加入購物車 / 送出分享)
   that style.css paints blue-green by default. */
body.service-view .btn.primary{
  background:linear-gradient(135deg, #ffb347 0%, #f28c28 46%, #d97706 100%);
  border:1px solid rgba(166,96,20,.68);
  color:#fff;
  border-radius:999px;
  box-shadow:0 12px 24px rgba(231,137,30,.32);
  font-weight:800;
}
body.service-view .btn.primary:hover{
  filter:brightness(1.05);
  transform:translateY(-2px);
  border-color:rgba(166,96,20,.82);
  box-shadow:0 16px 30px rgba(231,137,30,.42);
}
/* Card CTA buttons are pinned to 10px by a higher-specificity rule in
   service.inline-1.css — re-assert the pill so cards match the modal. */
body.service-view .service-grid .card .cta .btn.primary,
body.service-view .hot-grid.service-grid .card .cta .btn.primary{
  border-radius:999px;
}
body.service-view .btn.primary:disabled{
  background:linear-gradient(135deg, #e8c9a0, #d9b487);
  border-color:rgba(166,96,20,.3);
  box-shadow:none;
}
/* The shared .btn:hover lifts the border to green — warm it up. */
body.service-view .btn:hover{
  border-color:rgba(199,164,106,.5);
}

/* "已售出 N" → option D: gold-foil chip with a gilded dot. */
body.service-view .card .meta .badge-sold{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:linear-gradient(135deg, #fffaf0, #f7ead0);
  border:1px solid rgba(199,164,106,.55);
  color:#6e5222;
  border-radius:10px;
  font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 4px 10px rgba(150,116,55,.12);
}
body.service-view .card .meta .badge-sold::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  flex:0 0 auto;
  background:linear-gradient(135deg, #d9a441, #b07f2a);
  box-shadow:0 0 0 2px rgba(217,164,65,.25);
}
body.service-view .card .meta .badge-duration{
  max-width:100%;
  white-space:normal;
  background:linear-gradient(135deg, #f8fafc, #fffaf0);
  border:1px solid rgba(148,163,184,.35);
  color:#4b5563;
  border-radius:10px;
  font-weight:750;
  line-height:1.45;
}

/* ═══ Phase 2 — Service detail modal ═══ */

body.service-view .svc-dialog{
  background:linear-gradient(165deg, #fffdf8 0%, #fff7e9 100%);
  border:1px solid rgba(199,164,106,.4);
  border-radius:22px;
  box-shadow:0 30px 70px rgba(92,69,38,.32);
}
body.service-view .svc-dialog::backdrop{
  background:rgba(46,33,16,.5);
  backdrop-filter:blur(4px);
}
/* Header bar — style.css paints it green-tinted. */
body.service-view .closeBar{
  background:linear-gradient(135deg, rgba(255,250,240,.95), rgba(255,242,214,.6));
  border-bottom:1px solid rgba(199,164,106,.28);
  color:#3d2c14;
}
body.service-view .svc-dialog .closeBarActions .xbtn{
  background:rgba(199,164,106,.18);
  border:1px solid rgba(199,164,106,.4);
  color:#6b4d31;
  box-shadow:0 6px 14px rgba(92,69,38,.12);
}
/* Inline media links + IG thumb (default blue → warm brown-gold). */
body.service-view .svc-media-link{ color:#8c642d; }
body.service-view .thumb-ig{
  color:#8c642d;
  background:linear-gradient(135deg, #fffaf0, #fff2da);
  border:1px dashed rgba(176,129,54,.5);
}
/* Order progress stepper (active state is green by default). */
body.service-view .svc-stepper{
  background:linear-gradient(135deg, rgba(255,250,240,.9), rgba(255,242,214,.55));
}
body.service-view .svc-stepper span.active{
  background:linear-gradient(135deg, #ffb347, #d97706);
  border-color:rgba(166,96,20,.62);
  box-shadow:0 8px 20px rgba(231,137,30,.32);
}
body.service-view .svc-stepper span.done{
  background:#f3e7cf;
  color:#6e5222;
  border-color:rgba(199,164,106,.55);
}
body.service-view .svc-dialog .svc-includes{
  background:linear-gradient(135deg, #fffdf8, #fff6e6);
  border-color:rgba(199,164,106,.32);
}
body.service-view .svc-detail-duration{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding:12px 14px;
  border:1px solid rgba(199,164,106,.34);
  border-radius:12px;
  background:linear-gradient(135deg, #fffdf8, #fff6e6);
  color:#4b5563;
  line-height:1.55;
}
body.service-view .svc-detail-duration[hidden]{
  display:none;
}
body.service-view .svc-detail-duration span{
  flex:0 0 auto;
  color:#7c5d2b;
  font-size:12px;
  font-weight:800;
}
body.service-view .svc-detail-duration strong{
  min-width:0;
  color:#2f281b;
  font-size:14px;
  font-weight:850;
  text-align:right;
  overflow-wrap:anywhere;
}
@media(max-width:640px){
  body.service-view .svc-detail-duration{
    flex-direction:column;
    gap:4px;
  }
  body.service-view .svc-detail-duration strong{
    text-align:left;
  }
}
/* Price summary row (小計) — default slate background. */
body.service-view .svc-summary{
  background:linear-gradient(135deg, #fffdf8, #fff3dd);
  border-color:rgba(199,164,106,.4);
}

/* ═══ Phase 3 — Form controls ═══ */

body.service-view .service-inline1-input,
body.service-view .svc-dialog select,
body.service-view .svc-dialog textarea,
body.service-view .svc-dialog input[type="text"],
body.service-view .svc-dialog input[type="email"],
body.service-view .svc-dialog input[type="tel"]{
  border:1.5px solid rgba(159,121,48,.35);
  border-radius:12px;
  background:#fffdfa;
  color:#3d2c14;
}
body.service-view .service-inline1-input:focus,
body.service-view .svc-dialog select:focus,
body.service-view .svc-dialog textarea:focus,
body.service-view .svc-dialog input[type="text"]:focus,
body.service-view .svc-dialog input[type="email"]:focus,
body.service-view .svc-dialog input[type="tel"]:focus{
  outline:none;
  border-color:rgba(176,129,54,.72);
  box-shadow:0 0 0 3px rgba(231,137,30,.14);
}
/* Native file picker button. */
body.service-view .svc-dialog input[type="file"]::file-selector-button{
  border:1.5px solid rgba(194,151,84,.55);
  border-radius:999px;
  background:#fffdfa;
  color:#8c642d;
  font-weight:800;
  padding:7px 14px;
  margin-right:10px;
  cursor:pointer;
}
body.service-view .svc-dialog input[type="file"]::file-selector-button:hover{
  background:#fff5e1;
  border-color:rgba(176,129,54,.8);
}
/* Quantity steppers (cart + modal). */
body.service-view .qty-stepper button,
body.service-view .svc-cart-qty-btn{
  border:1.5px solid rgba(194,151,84,.5);
  background:#fffdfa;
  color:#6b4d31;
  font-weight:800;
}
body.service-view .qty-stepper button:hover,
body.service-view .svc-cart-qty-btn:hover{
  background:#fff5e1;
  border-color:rgba(176,129,54,.8);
}
body.service-view .svc-cart-qty{
  border-color:rgba(199,164,106,.4);
  background:#fffdf8;
}
body.service-view .svc-cart-qty input{
  border-color:rgba(194,151,84,.5);
  background:#fffdfa;
  color:#3d2c14;
}

/* ═══ Phase 4 — Finishing: link colors + mobile consistency ═══ */

/* Footer + sidebar text links (default blue → brown-gold).
   Note: the LINE official button keeps LINE green on purpose. */
body.service-view .footer .policy-link{
  color:#8c642d;
  text-decoration-color:rgba(176,129,54,.5);
}
body.service-view .footer .policy-link:hover{ color:#6e5222; }
body.service-view .svc-side-fortune-link{ color:#8c642d; }

/* Mobile: keep card actions and badges visually aligned with the
   warmer surface and give touch targets a touch more breathing room. */
@media (max-width:768px){
  body.service-view .btn.primary{
    box-shadow:0 8px 18px rgba(231,137,30,.3);
  }
  body.service-view .card .meta .badge-sold{
    font-size:11.5px;
    padding:4px 10px;
  }
}

/* ═══ Phase 3a — Desktop sidebar chips ═══ */
body.service-view #sideDeities .tool-link{
  border-color:#f0d6a0;
  background:linear-gradient(135deg, #fffdf7 0%, #fff6de 58%, #f7ead0 100%);
  color:#7a5a2e;
  box-shadow:0 10px 20px rgba(180,137,53,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
body.service-view #sideDeities .tool-link:hover{
  border-color:#e8bf6e;
  box-shadow:0 14px 24px rgba(180,137,53,.18);
}
body.service-view .tool-link-dot{
  background:linear-gradient(135deg, #d9a441, #b07f2a);
  box-shadow:0 0 0 4px rgba(217,164,65,.16);
}
body.service-view #cartFab{
  border:1px solid rgba(199,164,106,.4);
  background:linear-gradient(135deg, #fffdf8, #fff3dd);
  color:#6b4d31;
}
body.service-view #cartFab:hover{ background:#fff5e1; }
body.service-view #sideDeities .tools-box h4{ color:#6e5222; }
body.service-view #sideDeities .list a:not(.svc-side-fortune-link):not(.tool-link):not(.line-support-btn){
  color:#7a5a2e;
}

/* ═══ Phase 4a — Modal open micro-animation ═══ */
@media (prefers-reduced-motion: no-preference){
  body.service-view dialog.svc-dialog[open]{
    animation:svcDialogIn .26s cubic-bezier(.22,.61,.36,1);
  }
  body.service-view dialog.svc-dialog[open]::backdrop{
    animation:svcBackdropIn .26s ease;
  }
  @keyframes svcDialogIn{
    from{ opacity:0; transform:translateY(10px) scale(.975); }
    to{ opacity:1; transform:none; }
  }
  @keyframes svcBackdropIn{ from{ opacity:0; } to{ opacity:1; } }
}

/* ═══ Phase 4b — Add-to-cart toast (shown by service-ui-polish.js) ═══ */
.svc-toast{
  position:fixed; left:50%; bottom:calc(92px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(12px);
  z-index:61; display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:999px;
  background:linear-gradient(135deg, #5b422b, #7a5a34); color:#ffe8c4;
  border:1px solid rgba(69,49,29,.5); box-shadow:0 14px 30px rgba(89,62,36,.34);
  font-weight:800; font-size:13.5px; opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.svc-toast::before{
  content:"✓"; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg, #ffb347, #d97706); color:#fff;
  font-size:11px; font-weight:900;
}
.svc-toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ═══ Phase 4c — Mobile sticky cart bar (shown by service-ui-polish.js) ═══ */
.svc-sticky-cart{
  position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:60; display:none; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px 10px 18px; border-radius:999px;
  border:1px solid rgba(69,49,29,.55);
  background:linear-gradient(135deg, rgba(58,42,24,.97) 0%, rgba(86,62,35,.97) 100%);
  box-shadow:0 18px 40px rgba(40,28,12,.45);
  opacity:0; transform:translateY(14px);
  transition:opacity .3s ease, transform .3s ease; pointer-events:none;
}
body.uc-mobile-nav-enabled .svc-sticky-cart{ bottom:calc(74px + env(safe-area-inset-bottom)); }
.svc-sticky-cart.is-on{ opacity:1; transform:none; pointer-events:auto; }
.svc-sticky-cart__text{
  min-width:0; display:flex; align-items:baseline; gap:6px;
  color:#ffeec9; font-size:13.5px; font-weight:800;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.svc-sticky-cart__count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:linear-gradient(135deg, #ffb347, #d97706); color:#fff;
  font-size:12px; font-weight:900;
}
.svc-sticky-cart__btn{
  flex:0 0 auto; border:1px solid rgba(166,96,20,.68); border-radius:999px;
  padding:9px 18px; background:linear-gradient(135deg, #ffb347 0%, #f28c28 46%, #d97706 100%);
  color:#fff; font-size:13.5px; font-weight:900; cursor:pointer; font-family:inherit;
  white-space:nowrap; box-shadow:0 10px 20px rgba(231,137,30,.4);
}
@media (min-width:769px){ .svc-sticky-cart{ display:none !important; } }
@media (max-width:768px){ .svc-sticky-cart{ display:flex; } }

/* ═══ Phase 3b — Login modal: warm it ONLY on /service (do NOT touch global auth-login.css) ═══ */
body.service-view .auth-login-panel{
  background:linear-gradient(180deg, #fffdf8, #fff6e6);
  border:1px solid rgba(199,164,106,.4);
}
body.service-view .auth-login-title{ color:#3d2c14; }
body.service-view .auth-login-legal{
  background:#fffaf0; border-color:rgba(199,164,106,.3); color:#6e5222;
}
body.service-view .auth-login-consent{ color:#3d2c14; }
body.service-view .auth-login-btn.google{ border-color:rgba(176,129,54,.32); }

body.service-view .svc-trust-block{
  display:grid;
  gap:10px;
  margin:0 18px 16px;
  padding:12px;
  border:1px solid rgba(148,163,184,.28);
  border-radius:14px;
  background:linear-gradient(180deg, #fffdf8, #f8fafc);
  color:#334155;
}
body.service-view .svc-trust-block--cart{
  margin:10px 0 14px;
}
body.service-view .svc-trust-block--payment{
  margin:0;
}
body.service-view .svc-trust-block__item{
  display:grid;
  gap:3px;
  min-width:0;
}
body.service-view .svc-trust-block__item strong{
  color:#0f172a;
  font-size:13px;
  line-height:1.35;
}
body.service-view .svc-trust-block__item span{
  color:#64748b;
  font-size:12px;
  line-height:1.6;
}
@media (min-width:720px){
  body.service-view .svc-trust-block{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.service-view .svc-trust-block--payment{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:640px){
  body.service-view .svc-trust-block{
    margin:0 14px 14px;
    padding:11px;
    border-radius:12px;
  }
  body.service-view .svc-trust-block--cart,
  body.service-view .svc-trust-block--payment{
    margin:10px 0 14px;
  }
}

/* ═══ Task 45 — Ecommerce-grade service surfaces ═══ */
body.service-view{
  --svc-premium-ink:#172033;
  --svc-premium-muted:#64748b;
  --svc-premium-soft:#fffaf0;
  --svc-premium-line:rgba(194,151,84,.34);
  --svc-premium-gold:#c8943d;
  --svc-premium-green:#12683c;
}

body.service-view .service-main{
  min-width:0;
}

body.service-view .service-grid{
  align-items:stretch;
}

body.service-view .service-grid .card,
body.service-view .hot-grid.service-grid .card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,250,240,.96)),
    radial-gradient(circle at 88% 0%, rgba(224,184,112,.18), transparent 34%);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

body.service-view .service-grid .card::after,
body.service-view .hot-grid.service-grid .card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86);
}

body.service-view .service-grid .card:hover,
body.service-view .hot-grid.service-grid .card:hover{
  transform:translateY(-3px);
}

body.service-view .service-grid .card .pic{
  margin:12px 12px 0;
  overflow:hidden;
  border-radius:16px;
  background:linear-gradient(135deg, #f8fafc, #fff7e8);
  aspect-ratio:1 / .72;
  border:1px solid rgba(226,232,240,.72);
}

body.service-view .service-grid .card .pic img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.001);
}

body.service-view .service-grid .card .body{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1 1 auto;
  padding:14px 16px 16px;
}

body.service-view .service-grid .card .name{
  color:var(--svc-premium-ink);
  font-size:17px;
  line-height:1.38;
  font-weight:900;
  letter-spacing:0;
  min-height:2.6em;
  overflow-wrap:anywhere;
}

body.service-view .service-grid .card .meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  min-height:26px;
}

body.service-view .service-grid .card .price{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px;
  margin-top:auto;
  color:#b42318;
  font-size:21px;
  line-height:1.1;
  font-weight:950;
}

body.service-view .service-grid .card .price .price-old{
  color:#94a3b8;
  font-size:13px;
  font-weight:800;
  text-decoration:line-through;
}

body.service-view .service-grid .card .price .price-new{
  color:#b42318;
}

body.service-view .service-grid .card .cta{
  margin-top:2px;
}

body.service-view .service-grid .card .cta .btn.primary{
  width:100%;
  min-height:44px;
  box-shadow:0 10px 20px rgba(210,126,30,.28);
}

body.service-view #svcDetail{
  width:min(1040px, 96vw);
  max-height:min(92vh, 980px);
  overflow:hidden;
}

body.service-view #svcDetail .closeBar,
body.service-view #svcCart .svc-stepper,
body.service-view #svcCartPanel .service-inline1-cart-head{
  position:sticky;
  top:0;
  z-index:3;
}

body.service-view #svcDetail .closeBar strong{
  color:var(--svc-premium-ink);
  font-size:18px;
  line-height:1.35;
  overflow-wrap:anywhere;
}

body.service-view #svcDetail .dlgBody{
  display:grid;
  grid-template-columns:minmax(300px, .92fr) minmax(340px, 1.08fr);
  gap:24px;
  max-height:calc(min(92vh, 980px) - 72px);
  overflow:auto;
  padding:24px;
  background:
    radial-gradient(circle at 10% 0%, rgba(221,189,132,.14), transparent 32%),
    linear-gradient(180deg, rgba(255,253,248,.96), rgba(255,255,255,.98));
}

body.service-view #svcDetail .dlgBody > div{
  min-width:0;
}

body.service-view #svcDetail .dlgBody > div:first-child{
  position:sticky;
  top:0;
  align-self:start;
}

body.service-view #svcDetail .bigBox{
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(226,232,240,.86);
  background:linear-gradient(135deg, #f8fafc, #fff8ec);
  box-shadow:0 18px 40px rgba(91,64,30,.12);
}

body.service-view #svcDetail .bigBox .big,
body.service-view #svcDetail img.big{
  width:100%;
  aspect-ratio:1 / .82;
  height:auto;
  object-fit:cover;
  display:block;
}

body.service-view #svcDetail .thumbs{
  display:flex;
  gap:10px;
  margin-top:12px;
  overflow-x:auto;
  padding:2px 2px 8px;
  scrollbar-width:thin;
}

body.service-view #svcDetail .thumbs img,
body.service-view #svcDetail .thumbs .muted{
  flex:0 0 74px;
  width:74px;
  height:74px;
  border-radius:14px;
  border:1px solid rgba(194,151,84,.34);
  background:#fffdf8;
  object-fit:cover;
  box-shadow:0 8px 16px rgba(91,64,30,.09);
}

body.service-view #svcDetail .svc-media{
  margin-top:14px;
  display:grid;
  gap:10px;
}

body.service-view #svcDetail .service-inline1-section-label,
body.service-view #svcDetail [data-i18n="svc.detail_content"]{
  color:#7c5d2b !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  letter-spacing:0 !important;
  text-transform:none;
}

body.service-view #svcDetail .service-inline1-detail-desc,
body.service-view #svcDetailDesc{
  max-height:none !important;
  overflow:visible !important;
  margin-top:8px;
  padding:16px !important;
  border:1px solid rgba(226,232,240,.9) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.88) !important;
  color:#334155 !important;
  font-size:14.5px !important;
  line-height:1.78 !important;
  white-space:pre-wrap !important;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}

body.service-view #svcDetail .svc-includes{
  display:grid;
  gap:8px;
  margin:14px 0 0;
  padding:14px 16px;
  border-radius:16px;
}

body.service-view #svcDetail .svc-includes li{
  color:#334155;
  line-height:1.55;
}

body.service-view #svcDetailOptionsWrap,
body.service-view #svcDetailQtyWrap{
  padding:14px;
  border:1px solid rgba(226,232,240,.86);
  border-radius:16px;
  background:linear-gradient(180deg, #fff, #fffaf1);
}

body.service-view #svcDetailOptionsWrap label,
body.service-view #svcDetailQtyWrap label,
body.service-view #svcDetail .service-inline1-field-label,
body.service-view #svcDetailQtyLabel{
  color:#526076 !important;
  font-size:12px !important;
  line-height:1.4 !important;
  font-weight:850 !important;
}

body.service-view #svcDetailVariant,
body.service-view #svcDetailQty,
body.service-view #svcDetail .svc-addon-select{
  min-height:44px;
  width:100% !important;
  border-radius:12px !important;
  border:1.5px solid rgba(159,121,48,.32) !important;
  background:#fffdfa !important;
}

body.service-view #svcDetail .svc-price-row{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:7px;
  padding:16px 18px;
  border:1px solid rgba(194,151,84,.42);
  border-radius:18px;
  background:linear-gradient(135deg, #fff8ea, #fffdf8);
  box-shadow:0 14px 28px rgba(91,64,30,.08);
}

body.service-view #svcDetail .svc-price-row #svcDetailPrice,
body.service-view #svcDetail .svc-price-row .svc-price-currency{
  color:#a62012;
  font-size:28px;
  line-height:1;
  font-weight:950;
}

body.service-view #svcDetail .svc-price-old{
  color:#94a3b8;
  font-size:14px;
  font-weight:850;
  text-decoration:line-through;
}

body.service-view #svcDetailAddCart{
  min-height:52px;
  width:100% !important;
  border-radius:16px;
  font-size:16px;
}

body.service-view #svcDetail .reviews{
  padding:16px;
  border:1px solid rgba(226,232,240,.86);
  border-radius:18px;
  background:rgba(255,255,255,.88);
}

body.service-view #svcCartPanel{
  width:min(680px, 96vw) !important;
  max-height:88vh;
  overflow:hidden;
  border:none !important;
  border-radius:22px !important;
  background:linear-gradient(180deg, #fffdf8, #fff) !important;
  box-shadow:0 30px 70px rgba(46,33,16,.28) !important;
}

body.service-view #svcCartPanel[open]{
  display:grid !important;
  grid-template-rows:auto minmax(0, 1fr) auto auto auto;
}

body.service-view #svcCartList{
  min-height:0 !important;
  max-height:none !important;
  overflow:auto !important;
  padding:16px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  overscroll-behavior:contain;
  scroll-padding-bottom:14px;
}

body.service-view #svcCartPanel .service-inline1-cart-total-wrap{
  position:relative;
  z-index:2;
  padding:12px 18px !important;
  border-top:1px solid rgba(226,232,240,.86);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,250,240,.96));
}

body.service-view #svcCartPanel .service-inline1-cart-total-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:950;
}

body.service-view #svcCartPanel .svc-cart-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:14px 18px 18px;
  border-top:1px solid rgba(226,232,240,.86);
  background:rgba(255,250,240,.76);
}

body.service-view #svcCartPanel .svc-cart-actions .btn{
  min-height:42px;
  flex:1 1 150px;
  border-radius:14px;
}

body.service-view #svcCart{
  width:min(960px, 96vw) !important;
  max-height:92vh !important;
  border-radius:24px;
}

body.service-view #svcCart .svc-stepper{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px;
  padding:14px;
}

body.service-view #svcCart .svc-stepper span{
  min-width:0;
  justify-content:center;
  text-align:center;
  border-radius:999px;
  white-space:normal;
  line-height:1.3;
}

body.service-view #svcCart .svc-form{
  max-height:calc(92vh - 74px);
  overflow:auto;
  padding:20px;
}

body.service-view #svcCart .svc-step-title{
  color:var(--svc-premium-ink);
  font-size:20px;
  line-height:1.3;
  font-weight:950;
}

body.service-view #svcCart .svc-summary{
  align-items:flex-start;
  gap:14px;
  border-radius:18px;
  padding:16px;
}

body.service-view #svcCart .svc-summary #svcCartTotal{
  color:#a62012;
  font-size:24px;
  white-space:nowrap;
}

body.service-view #svcCart .svc-form-section{
  display:grid;
  gap:14px;
  padding:16px;
  border:1px solid rgba(226,232,240,.9);
  border-radius:18px;
  background:rgba(255,255,255,.9);
}

body.service-view #svcCart .svc-form-section label,
body.service-view #svcCart .svc-field{
  display:grid;
  gap:7px;
}

body.service-view #svcCart .svc-pay-method{
  border-radius:18px;
  border:1px solid rgba(226,232,240,.92);
  background:linear-gradient(180deg, #fff, #fffaf1);
  box-shadow:0 12px 26px rgba(15,23,42,.06);
}

body.service-view #svcCart .svc-pay-method.is-selected,
body.service-view #svcCart .svc-pay-method[aria-pressed="true"]{
  border-color:rgba(200,148,61,.72);
  box-shadow:0 0 0 3px rgba(200,148,61,.14), 0 16px 34px rgba(91,64,30,.12);
}

body.service-view .svc-wait-overlay{
  border:none;
  background:transparent;
}

body.service-view .svc-wait-card{
  border:1px solid rgba(194,151,84,.42);
  background:linear-gradient(180deg, #fffdf8, #fff);
  color:var(--svc-premium-ink);
}

@media (max-width:860px){
  body.service-view #svcDetail .dlgBody{
    grid-template-columns:1fr;
    gap:18px;
  }
  body.service-view #svcDetail .dlgBody > div:first-child{
    position:static;
  }
}

@media (max-width:640px){
  body.service-view .store.service-layout{
    gap:14px;
  }
  body.service-view .service-grid{
    gap:14px;
  }
  body.service-view .service-grid .card .pic{
    margin:10px 10px 0;
    border-radius:15px;
  }
  body.service-view .service-grid .card .body{
    padding:13px 14px 15px;
  }
  body.service-view .service-grid .card .name{
    min-height:0;
    font-size:16px;
  }
  body.service-view #svcDetail{
    width:100vw;
    max-width:100vw;
    max-height:100dvh;
    border-radius:22px 22px 0 0;
  }
  body.service-view #svcDetail .closeBar{
    padding:14px 16px;
  }
  body.service-view #svcDetail .dlgBody{
    max-height:calc(100dvh - 62px);
    padding:16px;
  }
  body.service-view #svcDetail .bigBox{
    border-radius:18px;
  }
  body.service-view #svcDetail .bigBox .big,
  body.service-view #svcDetail img.big{
    aspect-ratio:1 / .86;
  }
  body.service-view #svcDetail .svc-price-row{
    padding:14px 15px;
  }
  body.service-view #svcDetail .svc-price-row #svcDetailPrice,
  body.service-view #svcDetail .svc-price-row .svc-price-currency{
    font-size:24px;
  }
  body.service-view #svcCart .svc-stepper{
    grid-template-columns:1fr;
  }
  body.service-view #svcCart .svc-form{
    padding:16px;
  }
  body.service-view #svcCart .svc-summary{
    display:grid;
  }
  body.service-view #svcCart .svc-summary #svcCartTotal{
    white-space:normal;
  }
  body.service-view #svcCartPanel .svc-cart-actions{
    display:grid;
  }
  body.service-view #svcCartPanel .svc-cart-actions .btn{
    width:100%;
  }
}

/* Task 45 follow-up: production mobile visual repair. */
body.service-view .service-grid .card .pic,
body.service-view .hot-grid.service-grid .card .pic{
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(180deg, rgba(255,253,248,.96), rgba(255,247,232,.96)),
    radial-gradient(circle at 50% 18%, rgba(224,184,112,.12), transparent 34%);
}

body.service-view .service-grid .card .pic img,
body.service-view .hot-grid.service-grid .card .pic img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:cover !important;
  object-position:center center !important;
  transform:none;
}

body.service-view #svcDetail .svc-includes{
  list-style:none !important;
  padding:16px 18px !important;
  border:1px solid rgba(226,232,240,.9);
  background:rgba(255,253,248,.82);
}

body.service-view #svcDetail .svc-includes li{
  position:relative;
  min-height:1.55em;
  margin:0;
  padding-left:24px;
}

body.service-view #svcDetail .svc-includes li + li{
  margin-top:10px;
}

body.service-view #svcDetail .svc-includes li::before{
  content:"";
  position:absolute;
  left:4px;
  top:.78em;
  width:7px;
  height:7px;
  border-radius:999px;
  background:#c7953d;
  box-shadow:0 0 0 4px rgba(199,149,61,.14);
}

body.service-view #svcDetailOptionsWrap{
  margin-top:18px !important;
}

body.service-view #svcCartPanel .svc-cart-item img{
  flex:0 0 72px;
  width:72px;
  height:72px;
  object-fit:cover;
  object-position:center center;
}

body.service-view #svcCartPanel .svc-cart-item .info > div{
  min-width:0;
}

body.service-view #svcCartPanel .svc-cart-item .price{
  color:var(--svc-premium-ink);
  font-size:18px;
  line-height:1.2;
  font-weight:950;
}

body.service-view:has(#svcDetail[open]) .svc-sticky-cart,
body.service-view:has(#svcCartPanel[open]) .svc-sticky-cart,
body.service-view:has(#svcCart[open]) .svc-sticky-cart{
  display:none !important;
}

body.service-view:has(#svcDetail[open]) .svc-toast,
body.service-view:has(#svcCartPanel[open]) .svc-toast,
body.service-view:has(#svcCart[open]) .svc-toast{
  display:none !important;
}

@media (max-width:640px){
  body.service-view .service-grid .card .pic,
  body.service-view .hot-grid.service-grid .card .pic{
    aspect-ratio:1 / .72;
    padding:0;
    box-sizing:border-box;
  }

  body.service-view .service-grid .card .pic img,
  body.service-view .hot-grid.service-grid .card .pic img{
    border-radius:inherit;
  }

  body.service-view #svcDetail .svc-includes{
    padding:16px 18px !important;
  }

  body.service-view #svcDetail .svc-includes li{
    padding-left:24px;
  }

  body.service-view #svcDetailOptionsWrap{
    margin-top:20px !important;
  }

  body.service-view #svcCartPanel{
    width:min(100vw - 16px, 680px) !important;
    max-height:min(92dvh, calc(100dvh - 16px)) !important;
  }

  body.service-view #svcCartPanel[open]{
    grid-template-rows:auto minmax(180px, 1fr) auto auto auto;
  }

  body.service-view.service-preview-page #sideDeities .side-cart,
  body.uc-mobile-nav-enabled.service-view #sideDeities .side-cart{
    display:none !important;
    pointer-events:none !important;
  }

  body.service-view #svcCartList{
    padding:14px !important;
    gap:14px !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:auto !important;
  }

  body.service-view #svcCartPanel .service-inline1-cart-total-wrap{
    padding:12px 18px !important;
  }

  body.service-view #svcCartPanel .svc-cart-item{
    display:grid !important;
    grid-template-columns:1fr;
    align-items:stretch !important;
    gap:14px;
    padding:14px;
  }

  body.service-view #svcCartPanel .svc-cart-item .info{
    display:grid;
    grid-template-columns:76px minmax(0,1fr);
    align-items:start;
    gap:12px;
    width:100%;
  }

  body.service-view #svcCartPanel .svc-cart-item img{
    width:76px;
    height:76px;
    border-radius:14px;
    align-self:start;
  }

  body.service-view #svcCartPanel .svc-cart-item .price{
    margin:0;
    justify-self:start;
  }

  body.service-view #svcCartPanel .svc-cart-remove{
    justify-self:start;
  }

  body.service-view #svcCartPanel .svc-cart-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:14px 18px calc(18px + env(safe-area-inset-bottom));
  }

  body.service-view #svcCartPanel .svc-cart-actions .btn{
    width:100%;
    min-width:0;
    min-height:48px;
    flex:none;
    justify-content:center;
  }

  body.service-view #svcCartCheckout{
    grid-column:1 / -1;
    order:1;
  }

  body.service-view #svcCartPanelBack{
    order:2;
  }

  body.service-view #svcCartClear{
    order:3;
  }
}