/* ============================================================================
   pt-product.css — PrestaTutto: pagina prodotto/noleggio (2026-07-30)
   Stessa lingua visiva del pannello di controllo (pt-dash.css): stessi token
   --d-*, stesse superfici (radius 16, hairline, ombra a due strati), stesso
   pulsante accento. Solo CSS: nessuna modifica al markup.
   ========================================================================== */

/* 1. colonna destra: prezzo + CTA = una sola scheda di prenotazione.
   Ordine invertito via flex: prima il prezzo, poi l'azione. */
.sidebar-widget.widget{
  display:flex;flex-direction:column;
  background:var(--d-surface,#fff);
  border:1px solid var(--d-line,rgba(15,23,42,.08));
  border-radius:var(--d-radius,16px);
  box-shadow:var(--d-shadow,0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.06));
  padding:20px;margin-bottom:16px;
}
.sidebar-widget .amount-shop{order:1;margin:0 0 14px;padding:0;background:none!important;border:0!important}
.sidebar-widget .service-book{order:2;margin:0!important;padding:0;background:none!important;border:0!important}

.amount-shop .label-amount{
  margin:0;padding:0;background:none!important;border:0!important;
  font-size:32px;line-height:1.05;font-weight:800;letter-spacing:-.02em;
  color:var(--d-ink,#0F172A)!important;font-variant-numeric:tabular-nums;
}
.amount-shop .label-amount .actualprice{
  font-size:16px;font-weight:600;color:var(--d-ink-2,#64748B)!important;
  letter-spacing:0;margin-left:10px;
}

.service-book .btn-appoitment{
  display:flex;align-items:center;justify-content:center;width:100%;
  min-height:48px;padding:0 20px;border:0;border-radius:12px;
  background:var(--d-accent,#E5541F)!important;color:#fff!important;
  font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;
  box-shadow:0 1px 2px rgba(229,84,31,.20);
  transition:background .2s,transform .2s,box-shadow .2s;
}
.service-book .btn-appoitment:hover{
  background:#CF4717!important;transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(229,84,31,.35);
}
.service-book .btn-appoitment:active{transform:translateY(0)}
.service-book .btn-appoitment:focus-visible{outline:3px solid rgba(229,84,31,.45);outline-offset:3px}
.service-book .btn-primary{
  display:flex;align-items:center;justify-content:center;width:100%;
  min-height:48px;margin-top:10px;border-radius:12px;font-size:15px;font-weight:700;
  background:transparent!important;color:var(--d-accent,#E5541F)!important;
  border:1px solid var(--d-line,rgba(15,23,42,.08))!important;box-shadow:none;
}
.service-book .btn-primary:hover{background:rgba(229,84,31,.06)!important;box-shadow:none}

/* 2. schede della colonna */
.card.provider-widget,
.card.available-widget{
  background:var(--d-surface,#fff);
  border:1px solid var(--d-line,rgba(15,23,42,.08))!important;
  border-radius:var(--d-radius,16px)!important;
  box-shadow:var(--d-shadow,0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.06))!important;
  margin-bottom:16px;overflow:hidden;
}
.card.provider-widget > .card-body,
.card.available-widget > .card-body{padding:18px}
.card.provider-widget .card-title,
.card.available-widget .card-title{
  margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid var(--d-line,rgba(15,23,42,.08));
  font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--d-ink,#0F172A);
}

.provider-widget .about-author{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px}
.provider-widget .provider-img-wrap img,
.provider-widget .about-provider-img img{
  width:56px!important;height:56px!important;border-radius:50%;object-fit:cover;
  border:1px solid var(--d-line,rgba(15,23,42,.08));background:rgba(15,23,42,.05);
}
.provider-widget .provider-details{min-width:0;flex:1 1 auto}
.provider-widget .ser-provider-name{
  display:block;font-size:15px;font-weight:800;letter-spacing:-.01em;
  color:var(--d-ink,#0F172A)!important;text-decoration:none;margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.provider-widget .ser-provider-name:hover{color:var(--d-accent,#E5541F)!important}
.provider-widget .provider-details p,
.provider-widget .provider-info p{
  margin:0 0 3px!important;font-size:13px;line-height:1.45;color:var(--d-ink-2,#64748B)!important;
}
.provider-widget .last-seen .fa-circle{font-size:7px;vertical-align:middle;color:#F59E0B}
.provider-widget .last-seen .fa-circle.online{color:#12A47C}
.provider-widget .provider-info{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--d-line,rgba(15,23,42,.08));
}
.provider-widget .provider-info i{width:16px;color:var(--d-ink-2,#64748B)}

.available-widget ul{list-style:none;margin:0;padding:0}
.available-widget ul li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:38px;padding:7px 0;border-bottom:1px solid var(--d-line,rgba(15,23,42,.08));
  font-size:13.5px;color:var(--d-ink,#0F172A);font-variant-numeric:tabular-nums;
}
.available-widget ul li:last-child{border-bottom:0}
.available-widget ul li span{font-weight:600;color:var(--d-ink-2,#64748B);flex:0 0 auto}

.report{margin-top:4px}
.report .btn.bg-danger-light{
  display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;
  border-radius:10px;font-size:13px;font-weight:600;
  border:1px solid var(--d-line,rgba(15,23,42,.08));
  background:transparent!important;color:var(--d-ink-2,#64748B)!important;
  transition:background .2s,color .2s;
}
.report .btn.bg-danger-light:hover{background:rgba(220,38,38,.08)!important;color:#B91C1C!important}

/* 3. colonna contenuto */
.service-view-header .ser-detail-title h2,
.service-view-header h2{
  font-size:clamp(24px,2.4vw,32px);line-height:1.15;font-weight:800;letter-spacing:-.025em;
  color:var(--d-ink,#0F172A);
}
.service-view-header .star-rating{font-size:13px}
.service-view-header .star-rating .fa-star{color:#F59E0B}

.service-view{
  background:var(--d-surface,#fff);
  border:1px solid var(--d-line,rgba(15,23,42,.08));
  border-radius:var(--d-radius,16px);
  box-shadow:var(--d-shadow,0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.06));
  padding:20px;margin-bottom:16px;
}
.service-view .card-title,
.service-view h4,.service-view h5{
  font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--d-ink,#0F172A);margin:0 0 12px;
}
.service-view p{font-size:14.5px;line-height:1.65;color:var(--d-ink,#0F172A);max-width:72ch}

.service-view img.img-fluid,
.service-images img,
.owl-carousel .item img{border-radius:12px;object-fit:cover;background:rgba(15,23,42,.04)}

.category-lists a,.category-lists span{
  display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;
  background:rgba(229,84,31,.10);color:var(--d-accent,#E5541F)!important;
  font-size:12.5px;font-weight:700;text-decoration:none;
}

.theiaStickySidebar{top:calc(var(--bm-size,52px) + 30px)!important}

@media (max-width:991px){
  .sidebar-widget.widget{padding:16px}
  .amount-shop .label-amount{font-size:28px}
  .service-view{padding:16px}
  .theiaStickySidebar{top:0!important}
}

.service-view a:focus-visible,
.sidebar-widget a:focus-visible,
.available-widget a:focus-visible{outline:3px solid rgba(229,84,31,.45);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  .service-book .btn-appoitment,.service-book .btn-primary,
  .card.provider-widget,.card.available-widget{transition:none!important}
  .service-book .btn-appoitment:hover{transform:none}
}


/* colonna destra: sostituisce theiaStickySidebar (script.js), che
   riposizionava con calcoli JS a ogni scroll e produceva scatti.
   Le regole effettive stanno piu' sotto (Rifinitura 4): qui resta solo la
   nota storica. La colonna NON e' sticky di suo: si estende a tutta la riga
   ed e' la scheda prezzo+CTA al suo interno a restare agganciata. */

/* l'immagine non e' piu' dentro una card doppia: la galleria ha gia' il suo
   contenitore, quindi la prima .service-view perde padding e cornice */
.service-view:has(> .service-images),
.service-view:has(> .pt-gal){padding:0;border:0;box-shadow:none;background:transparent}
.service-view .pt-gal{margin-bottom:14px}

/* ============================================================================
   Rifinitura (2026-07-30, 4) — colonna destra sempre visibile, SENZA dipendere
   dal JS.
   Il difetto di prima: l'aggancio arrivava solo da una classe messa dal JS
   (.pt-stick-all / .pt-stick-cta). Se quel JS non partiva, la colonna restava
   statica e spariva scorrendo.
   Ora il comportamento base e' in CSS: la colonna si estende a tutta l'altezza
   della riga (align-self:stretch, quindi il suo contenitore e' alto quanto la
   pagina) e la scheda prezzo+CTA resta agganciata dentro di essa per tutto lo
   scorrimento. Il JS aggiunge solo il caso migliore: se la colonna INTERA ci
   sta nello schermo, si aggancia tutta.
   ========================================================================== */
.content:has(.pt-sticky-col),
.content:has(.pt-sticky-col) > .container,
.content:has(.pt-sticky-col) > .container > .row{overflow:visible!important}

.pt-sticky-col{
  align-self:stretch;
  max-height:none!important;overflow:visible!important;padding-right:0;
}
/* comportamento base: resta ferma la scheda prezzo + CTA */
.pt-sticky-col .sidebar-widget.widget{
  position:-webkit-sticky;position:sticky;
  top:calc(var(--bm-size,52px) + 30px);
  z-index:3;
}
/* caso migliore (deciso dal JS): tutta la colonna si aggancia */
.pt-sticky-col.pt-stick-all{
  position:-webkit-sticky;position:sticky;
  top:calc(var(--bm-size,52px) + 30px);
  align-self:flex-start;
}
.pt-sticky-col.pt-stick-all .sidebar-widget.widget{position:static;top:auto}
@media (max-width:991px){
  .pt-sticky-col,
  .pt-sticky-col.pt-stick-all{position:static;top:auto;align-self:auto}
  .pt-sticky-col .sidebar-widget.widget{position:static;top:auto;margin-top:0!important}
}

/* l'immagine riempie lo spazio: rapporto piu' largo e taglio "cover".
   Il lightbox continua a mostrarla intera (object-fit:contain). */
.pt-gal-main{
  aspect-ratio:3/2!important;
  max-height:560px!important;
  width:100%;
}
.pt-gal-main img{object-fit:cover!important}
@media (max-width:575px){
  .pt-gal-main{aspect-ratio:4/3!important;max-height:none!important}
}

/* la scheda in cima alla colonna esiste solo per il proprietario (pulsante
   "Modifica negozio"/"Modifica noleggio"): per tutti gli altri e' un
   rettangolo bianco vuoto. Se non contiene un'azione, sparisce. */
.sidebar-widget.widget:not(:has(a)):not(:has(button)):not(:has(.label-amount)){
  display:none!important;
}
.sidebar-widget.widget .service-book:empty{display:none}

/* ============================================================================
   Schede della pagina Acquisti (2026-07-30)
   I pulsanti "Aggiungi al carrello" finivano ad altezze diverse: le schede
   crescono con il testo (titolo su una o due righe, foto di proporzioni
   diverse), quindi il fondo di ciascuna cadeva dove capitava. Qui le schede
   diventano colonne flessibili di pari altezza e il fondo e' ancorato in
   basso: i pulsanti si allineano da soli, qualunque sia il contenuto.
   ========================================================================== */
.row > [class*="col-"]:has(> .product-cart-wrap){display:flex}
.product-cart-wrap{
  display:flex;flex-direction:column;width:100%;height:100%;
  background:var(--d-surface,#fff);
  border:1px solid var(--d-line,rgba(15,23,42,.08));
  border-radius:var(--d-radius,16px);
  box-shadow:var(--d-shadow,0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.06));
  overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s;
}
.product-cart-wrap:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(15,23,42,.12);
  border-color:rgba(229,84,31,.35);
}

/* foto: stesso riquadro per tutte, contenute (non ritagliate: qui si va da
   una punta da trapano a un fondale fotografico) */
.product-cart-wrap .product-img-action-wrap{position:relative;padding:14px 14px 0}
.product-cart-wrap .product-img{
  display:block;aspect-ratio:1/1;border-radius:12px;overflow:hidden;
  background:rgba(15,23,42,.04);
}
.product-cart-wrap .product-img a{display:block;width:100%;height:100%}
.product-cart-wrap .product-img img.default-img{
  width:100%;height:100%;object-fit:contain;display:block;
}

/* testo */
.product-cart-wrap .product-content-wrap{
  display:flex;flex-direction:column;flex:1 1 auto;padding:14px 16px 16px;gap:2px;
}
.product-cart-wrap .product-category a{
  font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--d-ink-2,#64748B)!important;text-decoration:none;
}
.product-cart-wrap h2{
  margin:4px 0 2px;font-size:15.5px;line-height:1.35;font-weight:800;letter-spacing:-.01em;
  min-height:calc(1.35em * 2);                 /* due righe sempre: fondi allineati */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.product-cart-wrap h2 a{color:var(--d-ink,#0F172A)!important;text-decoration:none}
.product-cart-wrap h2 a:hover{color:var(--d-accent,#E5541F)!important}
.product-cart-wrap .product-by span,
.product-cart-wrap .product-by a{font-size:13px;color:var(--d-ink-2,#64748B)!important;text-decoration:none}
.product-cart-wrap .product-by a:hover{color:var(--d-accent,#E5541F)!important}

/* prezzo e azione: il blocco azione va in fondo */
.product-cart-wrap .product-card-bottom{margin:0;padding:0}
.product-cart-wrap .product-price{margin:10px 0 0;display:flex;align-items:baseline;gap:8px}
.product-cart-wrap .product-price span{
  font-size:19px;font-weight:800;color:var(--d-ink,#0F172A)!important;
  font-variant-numeric:tabular-nums;
}
.product-cart-wrap .product-price .old-price{
  font-size:14px;font-weight:600;color:var(--d-ink-2,#64748B)!important;text-decoration:line-through;
}
.product-cart-wrap .product-card-bottom:has(.add-cart){margin-top:auto;padding-top:12px}
.product-cart-wrap .add-cart{display:flex}
.product-cart-wrap .add-cart a{
  display:flex;align-items:center;justify-content:center;width:100%;
  min-height:42px;padding:0 16px;border:0!important;border-radius:12px!important;
  background:var(--d-accent,#E5541F)!important;color:#fff!important;
  font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;
  box-shadow:0 1px 2px rgba(229,84,31,.20);
  transition:background .2s,transform .2s,box-shadow .2s;
}
.product-cart-wrap .add-cart a:hover{
  background:#CF4717!important;transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(229,84,31,.35);
}
.product-cart-wrap .add-cart a:focus-visible{outline:3px solid rgba(229,84,31,.45);outline-offset:3px}

/* pastiglia sconto e "esaurito" */
.product-cart-wrap .product-badges span.new{
  background:var(--d-accent,#E5541F);color:#fff;border-radius:999px;
  padding:4px 10px;font-size:11px;font-weight:800;letter-spacing:.02em;
}
.product-cart-wrap .out-stock-col{display:grid;place-items:center;position:absolute;inset:0}

@media (prefers-reduced-motion:reduce){
  .product-cart-wrap,.product-cart-wrap .add-cart a{transition:none!important}
  .product-cart-wrap:hover,.product-cart-wrap .add-cart a:hover{transform:none}
}

/* ============================================================================
   Pagina di un prodotto in vendita (2026-07-30)
   La foto usciva dal riquadro perche' non aveva alcun limite di altezza: una
   verticale alta 2000px riempiva mezza pagina. Qui la galleria ha un riquadro
   con proporzione fissa e la foto ci sta dentro intera (contain).
   ========================================================================== */
/* La galleria NON sta in una scheda: stessa impostazione della pagina
   noleggi, dove l'immagine e' l'immagine e basta. La scheda attorno faceva
   cornice doppia (riquadro bianco dentro riquadro bianco). */
.product-detail .detail-gallery,
.detail-gallery{
  background:transparent!important;border:0!important;box-shadow:none!important;
  padding:0!important;
}
.detail-gallery .products-slider{
  border-radius:12px;overflow:hidden;background:rgba(15,23,42,.04);
}
.detail-gallery .products-slider .slick-slide,
.detail-gallery .products-slider > div{outline:none}
.detail-gallery .products-slider img{
  width:100%!important;height:100%!important;
  aspect-ratio:3/2;max-height:560px;
  /* qui "contain": le foto degli oggetti in vendita sono spesso verticali
     (una punta da trapano, un cavo) e ritagliarle ne mostrerebbe solo un
     pezzo di mezzo. Intera dentro il riquadro, come chiesto. */
  object-fit:contain!important;
  display:block!important;
}
.detail-gallery .slick-list,.detail-gallery .slick-track{height:auto!important}

/* miniature (2026-07-30 v2)
   ATTENZIONE: su questa pagina slick e' inizializzato sulla striscia
   (asNavFor + focusOnSelect). Mettere display:flex sul contenitore faceva
   collassare .slick-list a 2 pixel: restava visibile solo una scheggia
   arancione, cioe' il bordo della miniatura attiva. Qui slick lavora come
   previsto e io tocco solo l'aspetto delle immagini. */
.detail-gallery .product-slider-nav{margin-top:10px}
.detail-gallery .product-slider-nav.slick-initialized{display:block}
/* se slick non parte (una sola foto, JS lento) la striscia resta usabile */
.detail-gallery .product-slider-nav:not(.slick-initialized),
.detail-gallery .slider-nav-thumb{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.detail-gallery .product-slider-nav .slick-list{width:auto!important;overflow:hidden}
.detail-gallery .product-slider-nav .slick-slide{height:auto;padding-right:8px;box-sizing:border-box}
.detail-gallery .product-slider-nav .slick-slide > div{line-height:0}
.detail-gallery .product-slider-nav img{
  width:100%!important;height:72px!important;object-fit:cover!important;
  border-radius:10px;border:1px solid var(--d-line,rgba(15,23,42,.08));
  cursor:pointer;transition:box-shadow .18s,border-color .18s;display:block;
}
.detail-gallery .slider-nav-thumb img{
  width:72px!important;height:72px!important;object-fit:cover!important;
  border-radius:10px;border:1px solid var(--d-line,rgba(15,23,42,.08));
  cursor:pointer;transition:box-shadow .18s,border-color .18s;display:block;
}
.detail-gallery .product-slider-nav .slick-current img,
.detail-gallery .slider-nav-thumb .slick-current img{
  border-color:var(--d-accent,#E5541F);box-shadow:0 0 0 2px rgba(229,84,31,.35);
}

/* colonna informazioni */
.detail-info{padding-left:8px}
.detail-info .product-detail-title,
.detail-info h1,.detail-info h2{
  font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-.02em;
  line-height:1.15;color:var(--d-ink,#0F172A);margin:0 0 10px;
}
.detail-info .product-by,
.detail-info .product-category-list{font-size:14px;color:var(--d-ink-2,#64748B)}
.detail-info .product-by a,
.detail-info .product-category-list a{color:var(--d-ink,#0F172A)!important;font-weight:700;text-decoration:none}
.detail-info .product-by a:hover{color:var(--d-accent,#E5541F)!important}
.detail-info .current-price,
.detail-info .product-price span{
  font-size:34px;font-weight:800;letter-spacing:-.02em;
  color:var(--d-ink,#0F172A)!important;font-variant-numeric:tabular-nums;
}
.detail-info .old-price{
  font-size:17px;font-weight:600;color:var(--d-ink-2,#64748B)!important;text-decoration:line-through;
}

/* quantita' e azioni */
.detail-info .cart-product-quantity .qty-val,
.detail-info .cart-product-quantity input{
  height:44px;width:56px;text-align:center;border-radius:12px;
  border:1px solid var(--d-line,rgba(15,23,42,.08));background:var(--d-surface,#fff);
  color:var(--d-ink,#0F172A);font-weight:700;
}
.detail-info .button-minus,.detail-info .button-plus,
.detail-info .dec,.detail-info .inc{
  width:44px;height:44px;border-radius:12px;
  border:1px solid var(--d-line,rgba(15,23,42,.08))!important;
  background:transparent!important;color:var(--d-ink,#0F172A)!important;
  display:inline-flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;
}
.detail-info .btn-prod-addcart,
.detail-info .add_cart_btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 22px;border:0!important;border-radius:12px!important;
  background:var(--d-accent,#E5541F)!important;color:#fff!important;
  font-size:15px;font-weight:700;text-decoration:none;
  box-shadow:0 1px 2px rgba(229,84,31,.20);
  transition:background .2s,transform .2s,box-shadow .2s;
}
.detail-info .btn-prod-addcart:hover,
.detail-info .add_cart_btn:hover{
  background:#CF4717!important;transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(229,84,31,.35);
}
.detail-info .btn-prod-buynow,
.detail-info .add_buy_btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 22px;border-radius:12px!important;
  background:transparent!important;color:var(--d-ink,#0F172A)!important;
  border:1px solid var(--d-line,rgba(15,23,42,.08))!important;
  font-size:15px;font-weight:700;text-decoration:none;transition:background .2s;
}
.detail-info .btn-prod-buynow:hover,
.detail-info .add_buy_btn:hover{background:rgba(20,16,14,.06)!important}
.detail-info .btn-prod-addcart:focus-visible,
.detail-info .btn-prod-buynow:focus-visible{outline:3px solid rgba(229,84,31,.45);outline-offset:3px}

/* descrizione e schede sotto */
/* NOTA: il contenitore principale della pagina ha classi "product-detail
   accordion-detail". Mettendo la scheda su .accordion-detail finiva un
   riquadro bianco attorno a TUTTO (galleria + informazioni). La scheda va
   solo ai blocchi di testo sotto. */
.entry-main-content,
.accordion-detail:not(.product-detail){
  background:var(--d-surface,#fff);
  border:1px solid var(--d-line,rgba(15,23,42,.08));
  border-radius:var(--d-radius,16px);
  box-shadow:var(--d-shadow,0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.06));
  padding:20px;margin-top:16px;
}
.entry-main-content p{font-size:14.5px;line-height:1.65;color:var(--d-ink,#0F172A);max-width:72ch}

@media (max-width:991px){
  .detail-info{padding-left:0;margin-top:16px}
  .detail-gallery .products-slider img{max-height:none}
}
@media (prefers-reduced-motion:reduce){
  .detail-info .btn-prod-addcart{transition:none!important}
  .detail-info .btn-prod-addcart:hover{transform:none}
}

/* ============================================================================
   "Noleggi correlati": respiro fra la scheda del noleggio e la fascia correlati
   (2026-08-08). .service-related in style.css ha solo font-size/weight: lo
   stacco arrivava dal margine del blocco sopra ed era troppo poco, la fascia
   sembrava incollata alla scheda. Qui la sezione diventa un blocco a se'.
   ========================================================================== */
h4.service-related,
.service-related{
  margin-top:64px!important;
  margin-bottom:24px!important;
}
.service-related + .slider-service{ margin-top:0!important; }
@media (max-width:991px){
  h4.service-related,
  .service-related{
    margin-top:40px!important;
    margin-bottom:18px!important;
  }
}