/* ==========================================================================
   Template D — SERVICES  (body.tpl-services)
   Consulting-firm calm: quote-first, description-forward, no stock/qty emphasis.
   A restrained ink-navy + gold accent, generous whitespace, soft cards.
   Scope: EVERY rule is prefixed with body.tpl-services so nothing leaks globally.
   ========================================================================== */

body.tpl-services {
    --svc-ink: var(--mu-ink);
    --svc-accent: var(--mu-gold);
    --svc-accent-soft: var(--mu-gold-50);
    --svc-panel: #f6f8fb;          /* cool, calm panel tint */
    --svc-line: var(--mu-line);
}

/* --- overall rhythm: a touch more air than retail ----------------------- */
body.tpl-services .svc-shell { gap: var(--s7); }
body.tpl-services .svc-main { display: flex; flex-direction: column; gap: var(--s5); }
body.tpl-services .svc-gallery .pd-main-img { border-radius: var(--r-lg); }

/* --- service header ----------------------------------------------------- */
body.tpl-services .svc-head { padding-bottom: var(--s2); }
body.tpl-services .svc-eyebrow {
    display: inline-flex; align-items: center; gap: var(--s2);
    font-size: var(--fz-xs); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--mu-gold-600);
    background: var(--svc-accent-soft); border: 1px solid var(--mu-gold-100);
    padding: 4px 10px; border-radius: var(--r-pill); margin-bottom: var(--s3);
}
body.tpl-services .svc-title {
    font-size: var(--fz-3xl); line-height: 1.15; letter-spacing: -.01em;
    margin: 0 0 var(--s3); color: var(--svc-ink);
}
body.tpl-services .svc-byline {
    color: var(--mu-muted); font-size: var(--fz-sm); margin-bottom: var(--s4);
}
body.tpl-services .svc-byline i { color: var(--svc-accent); margin-right: 4px; }
body.tpl-services .svc-byline strong { color: var(--svc-ink); }

/* price row — quiet, never shouty */
body.tpl-services .svc-price-row { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
body.tpl-services .svc-price { font-size: var(--fz-2xl); font-weight: 800; color: var(--svc-ink); }
body.tpl-services .svc-price__cur { font-size: var(--fz-lg); font-weight: 600; color: var(--mu-muted); margin-right: 4px; }
body.tpl-services .svc-price-note { font-size: var(--fz-sm); color: var(--mu-muted); }
body.tpl-services .svc-quote-pill {
    display: inline-flex; align-items: center; gap: var(--s2);
    font-size: var(--fz-sm); font-weight: 700; color: var(--svc-ink);
    background: var(--svc-accent-soft); border: 1px solid var(--mu-gold-100);
    padding: 6px 14px; border-radius: var(--r-pill);
}
body.tpl-services .svc-quote-pill i { color: var(--mu-gold-600); }

/* --- horizontal info strip --------------------------------------------- */
body.tpl-services .svc-strip {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px; background: var(--svc-line);
    border: 1px solid var(--svc-line); border-radius: var(--r-md); overflow: hidden;
}
body.tpl-services .svc-strip__cell {
    background: var(--mu-surface); padding: var(--s4) var(--s4);
    display: flex; flex-direction: column; gap: 4px;
}
body.tpl-services .svc-strip__k {
    font-size: var(--fz-xs); text-transform: uppercase; letter-spacing: .04em;
    color: var(--mu-muted); display: inline-flex; align-items: center; gap: 6px;
}
body.tpl-services .svc-strip__k i { color: var(--svc-accent); }
body.tpl-services .svc-strip__v { font-size: var(--fz-base); font-weight: 700; color: var(--svc-ink); }

/* --- about this service ------------------------------------------------- */
body.tpl-services .svc-about { border-radius: var(--r-md); }
body.tpl-services .svc-about__title { margin-top: 0; display: flex; align-items: center; gap: var(--s2); }
body.tpl-services .svc-about__title i { color: var(--svc-accent); }
body.tpl-services .svc-desc {
    margin: 0 0 var(--s4); line-height: 1.7; color: #334155; font-size: var(--fz-base);
}
body.tpl-services .svc-desc h1,
body.tpl-services .svc-desc h2,
body.tpl-services .svc-desc h3,
body.tpl-services .svc-desc h4 { color: var(--svc-ink); }
body.tpl-services .svc-desc a { color: var(--mu-gold-600); }
body.tpl-services .svc-desc ul,
body.tpl-services .svc-desc ol { padding-left: 1.25em; }
body.tpl-services .svc-about__lede {
    margin: 0; padding-top: var(--s4); border-top: 1px dashed var(--svc-line);
    color: var(--mu-muted); line-height: 1.6;
}
body.tpl-services .svc-about__lede strong { color: var(--svc-ink); }

/* --- request-a-quote card (the focal CTA) ------------------------------ */
body.tpl-services .svc-quote-card {
    padding: var(--s5);
    background:
        radial-gradient(120% 120% at 100% 0, var(--svc-accent-soft), transparent 60%),
        var(--mu-surface);
    border: 1px solid var(--mu-gold-100);
    border-radius: var(--r-lg);
    box-shadow: 0 8px 28px -18px rgba(15,23,42,.35);
}
body.tpl-services .svc-quote-card__head {
    display: flex; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s4);
}
body.tpl-services .svc-quote-card__icon {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--r-md);
    display: grid; place-items: center; font-size: 1.25rem;
    background: var(--svc-accent); color: #1a1407;
    box-shadow: 0 4px 12px -4px rgba(245,168,0,.6);
}
body.tpl-services .svc-quote-card__title { font-weight: 800; font-size: var(--fz-lg); color: var(--svc-ink); }
body.tpl-services .svc-quote-card__sub { font-size: var(--fz-sm); color: var(--mu-muted); line-height: 1.45; }
body.tpl-services .svc-quote-card__cta { box-shadow: 0 6px 16px -6px rgba(245,168,0,.55); }
body.tpl-services .svc-quote-card__back { margin-top: var(--s3); }
body.tpl-services .svc-quote-card form { margin: 0; }

/* --- seller card: keep its surface aligned to the calm theme ----------- */
body.tpl-services .svc-main .mu-card--pad.pd-section { border-radius: var(--r-md); }

/* =========================================================================
   LISTING GRID + CARDS — calm, professional, Request-led
   ========================================================================= */
body.tpl-services .mu-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--s5);
}
body.tpl-services .mu-product-card {
    border: 1px solid var(--svc-line); border-radius: var(--r-md);
    background: var(--mu-surface); overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.tpl-services .mu-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px -20px rgba(15,23,42,.45);
    border-color: var(--mu-gold-100);
}
/* media reads as a calm banner, not a product photo */
body.tpl-services .mu-product-card__media {
    aspect-ratio: 16 / 9; background: var(--svc-panel);
    position: relative;
}
body.tpl-services .mu-product-card__media .mu-ph {
    color: #b8c2d0; font-size: 1.8rem;
}
/* service-type chip pinned to the media corner */
body.tpl-services .mu-product-card__code {
    position: absolute; top: var(--s3); left: var(--s3); margin: 0; z-index: 1;
    background: rgba(255,255,255,.92); color: var(--mu-gold-600);
    border: 1px solid var(--mu-gold-100); border-radius: var(--r-pill);
    padding: 3px 10px; font-size: var(--fz-xs); font-weight: 700;
    letter-spacing: .02em; text-transform: none;
    backdrop-filter: blur(2px);
}
body.tpl-services .mu-product-card__body { padding: var(--s4); gap: var(--s3); }
body.tpl-services .mu-product-card__name {
    font-size: var(--fz-base); font-weight: 700; color: var(--svc-ink); line-height: 1.35;
}
body.tpl-services .mu-product-card__store { font-size: var(--fz-xs); color: var(--mu-muted); }
/* de-emphasise the placeholder star rating in a B2B/services context */
body.tpl-services .mu-product-card .mu-stars { opacity: .55; font-size: var(--fz-xs); }
body.tpl-services .mu-product-card__meta { align-items: center; }
body.tpl-services .mu-product-card__meta .mu-price { font-weight: 800; color: var(--svc-ink); }
/* "Available" pill — calm, not loud green */
body.tpl-services .mu-product-card__meta .mu-pill--in {
    background: var(--svc-accent-soft); color: var(--mu-gold-600); border-color: var(--mu-gold-100);
}
body.tpl-services .mu-product-card__actions { gap: var(--s2); }
/* Request CTA leads */
body.tpl-services .mu-product-card__actions .mu-btn--gold {
    background: var(--svc-accent); color: #1a1407;
}
body.tpl-services .mu-product-card__actions .mu-btn--gold:hover { background: var(--mu-gold-600); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 768px) {
    body.tpl-services .svc-shell { gap: var(--s5); }
    body.tpl-services .svc-title { font-size: var(--fz-2xl); }
    body.tpl-services .svc-strip { grid-template-columns: 1fr 1fr; }
    body.tpl-services .mu-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s4); }
}
@media (max-width: 480px) {
    body.tpl-services .svc-strip { grid-template-columns: 1fr; }
    body.tpl-services .svc-quote-card__head { flex-direction: column; gap: var(--s3); }
}