/**

 * Services Pack (Scrollable) — aligned with MaxxECU v5

 * One vertical scroller: .snv2-panel-body (overlay height set by nav.js)

 */



/* ---------------------------------------------------------

   0) BASE / BOX-SIZING + PANEL SHELL

   --------------------------------------------------------- */

.snv2-services-pack-template,

.snv2-services-pack-template * {

  box-sizing: border-box;

}



.snv2-panel--template {

  display: flex;

  flex-direction: column;

  max-height: var(--snv2-vh, 85vh);

  min-height: 0;

  background: var(--snv2-bg, #0f0f0f);

  border-radius: var(--snv2-radius, 14px);

}



.snv2-services-pack-template .snv2-panel-header {

  border-bottom: 1px solid var(--snv2-line, #272727);

}



/* ---------------------------------------------------------

   1) BRIDGE THE HEIGHT CHAIN (match MaxxECU)

   --------------------------------------------------------- */

#snv2-overlay-content > .snv2-panel.snv2-panel--template {

  display: flex;

  flex-direction: column;

  height: 100%;

  max-height: none;

  min-height: 0;

}

#snv2-overlay-content > .snv2-panel.snv2-panel--template > .snv2-panel-inner {

  display: flex;

  flex-direction: column;

  flex: 1 1 auto;

  min-height: 0;

}

#snv2-overlay-content .snv2-services-pack-template {

  display: flex;

  flex-direction: column;

  flex: 1 1 auto;

  height: 100%;

  max-height: none;

  min-height: 0;

}



/* ---------------------------------------------------------

   2) THE ONE TRUE SCROLLER (lives on .snv2-panel-body)

   --------------------------------------------------------- */

.snv2-services-pack-template .snv2-panel-body {

  display: flex;

  flex-direction: column;

  flex: 1 1 auto;

  min-height: 0;



  overflow-y: auto;

  overscroll-behavior: contain;

  -webkit-overflow-scrolling: touch;

  touch-action: pan-y;



  padding-left: clamp(8px, 1.6vw, 18px);

  padding-right: clamp(8px, 1.6vw, 18px);

  padding-bottom: clamp(36px, 6vw, 80px);



  max-width: 100%;

  overflow-x: hidden;

}

.snv2-services-pack-template .snv2-panel-body > :last-child {

  margin-bottom: 0 !important;

  padding-bottom: 8px;

}



/* IMPORTANT: inner pack must NOT flex-grow, or you lose overflow height */

.snv2-services-pack-template .snv2-services-pack {

  display: block;

  flex: 0 0 auto; /* key fix */

  min-height: 0;

  height: auto;

  max-height: none !important;

  overflow: visible !important; /* parent (panel-body) scrolls */

  box-sizing: border-box;

  padding: 16px;

}



/* ---------------------------------------------------------

   2b) Neutralizers: exclude templates, then hard-guard templates

   --------------------------------------------------------- */

/* Neutralize only NON-template panels inside the overlay */

#snv2-overlay-content .snv2-panel:not(.snv2-panel--template) .snv2-panel-body,

#snv2-overlay-content .snv2-panel:not(.snv2-panel--template) .snv2-panel-inner,

#snv2-overlay-content

  .snv2-panel:not(.snv2-panel--template)

  .snv2-panel-body.snv2-scroll-area,

#snv2-overlay-content

  .snv2-panel:not(.snv2-panel--template)

  .snv2-panel-inner.snv2-scroll-area {

  overflow: visible !important;

  max-height: none !important;

}



/* Guard: templates MUST keep their internal scroller even if older sheets say otherwise */

#snv2-overlay-content .snv2-panel.snv2-panel--template .snv2-panel-body,

#snv2-overlay-content

  .snv2-panel.snv2-panel--template

  .snv2-panel-body.snv2-scroll-area {

  overflow-y: auto !important;

  overflow-x: hidden;

  max-height: none;

}



/* ---------------------------------------------------------

   3) MOBILE/TABLET CLAMPS (mirror MaxxECU)

   --------------------------------------------------------- */

@media (max-width: 959.98px) {

  .snv2-panel.snv2-services-pack-template {

    width: 100%;

    max-width: 100svw;

    overflow-x: hidden;

  }

  .snv2-panel.snv2-services-pack-template .snv2-panel-inner.snv2-scroll-area,

  .snv2-panel.snv2-services-pack-template .snv2-panel-body.snv2-scroll-area,

  .snv2-services-pack-template .snv2-panel-inner.snv2-scroll-area,

  .snv2-services-pack-template .snv2-panel-body.snv2-scroll-area {

    width: 100% !important;

    max-width: 100% !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    overflow-x: hidden !important;

  }

}



/* ---------------------------------------------------------

   4) GRID + CARDS

   --------------------------------------------------------- */

.snv2-services-grid {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: var(--snv2-gap, 20px);

  grid-template-columns: repeat(12, minmax(0, 1fr));

}

.snv2-services-pack-template .snv2-services-grid {

  padding-bottom: max(

    var(--snv2-scroll-pad, 28px),

    env(safe-area-inset-bottom)

  );

}



/* Spans */

.snv2-card {

  grid-column: span 12;

}

@media (min-width: 1200px) {

  .snv2-card {

    grid-column: span 4;

  }

  .snv2-card.is-hero {

    grid-column: span 8;

  }

}

@media (min-width: 900px) and (max-width: 1199.98px) {

  .snv2-card {

    grid-column: span 6;

  }

  .snv2-card.is-hero {

    grid-column: span 12;

  }

}



/* Card chrome */

.snv2-card {

  background: var(--snv2-card-bg, #151515);

  border: 1px solid var(--snv2-border, #262626);

  border-radius: var(--snv2-radius, 14px);

  box-shadow:

    0 1px 0 rgba(255, 255, 255, 0.04),

    0 12px 24px rgba(0, 0, 0, 0.25);

  overflow: hidden;

  display: flex;

  flex-direction: column;

}

.snv2-card-media {

  position: relative;

  overflow: hidden;

  background: #0a0a0a;

}

.snv2-card-media img {

  width: 100%;

  height: auto;

  aspect-ratio: var(--snv2-media-ratio, 16/9);

  object-fit: cover;

  object-position: center;

  display: block;

  transform: translateZ(0);

}

.snv2-card.is-hero .snv2-card-media img {

  aspect-ratio: var(--snv2-media-ratio-hero, 21/9);

}



.snv2-card-body {

  padding: 14px 14px 16px;

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.snv2-card-title {

  margin: 0;

  font-size: clamp(16px, 1.4vw, 20px);

  line-height: 1.25;

  color: var(--snv2-text, #f5f5f5);

}

.snv2-bullets {

  margin: 0;

  padding: 0 0 0 18px;

  color: var(--snv2-muted, #c8c8c8);

  font-size: 14px;

}

.snv2-bullets li {

  margin: 2px 0;

}



/* Buttons */

:root {

  --snv2-clr-primary: var(--snv2-accent, #e11d48);

  --snv2-clr-accent: var(--snv2-accent, #e11d48);

  --snv2-clr-purple: #7c3aed;

  --snv2-clr-blue: #2563eb;

  --snv2-clr-green: #10b981;

}

.snv2-card-actions {

  margin-top: 6px;

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

}

.snv2-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  height: 34px;

  padding: 0 12px;

  border-radius: 999px;

  font-weight: 700;

  font-size: 13px;

  text-decoration: none;

  color: #fff;

  background: var(--snv2-clr-accent);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);

  transition:

    filter 0.15s ease,

    transform 0.05s ease;

}

.snv2-btn:hover {

  filter: brightness(1.05);

}

.snv2-btn:active {

  transform: translateY(1px);

}

.snv2-btn.is-primary {

  background: var(--snv2-clr-primary);

}

.snv2-btn.is-accent {

  background: var(--snv2-clr-accent);

}

.snv2-btn.is-purple {

  background: var(--snv2-clr-purple);

}

.snv2-btn.is-blue {

  background: var(--snv2-clr-blue);

}

.snv2-btn.is-green {

  background: var(--snv2-clr-green);

}

.snv2-btn.is-ghost {

  background: transparent;

  color: var(--snv2-clr-accent);

  border-color: rgba(255, 255, 255, 0.18);

  box-shadow: none;

}



/* Desktop density + heights */

@media (min-width: 1200px) {

  .snv2-services-pack-template .snv2-services-pack {

    padding: 12px;

  }

  .snv2-services-pack-template .snv2-services-grid {

    gap: 10px;

  }



  .snv2-services-pack-template .snv2-card {

    border-radius: 12px;

    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);

  }

  .snv2-services-pack-template .snv2-card-body {

    padding: 10px 12px 12px;

    gap: 8px;

  }

  .snv2-services-pack-template .snv2-card-title {

    font-size: clamp(15px, 1.2vw, 18px);

  }

  .snv2-services-pack-template .snv2-bullets {

    font-size: 13px;

  }



  .snv2-services-pack-template {

    --snv2-card-h: 320px;

  }

  .snv2-services-pack-template .snv2-card:not(.is-hero) {

    height: var(--snv2-card-h);

    overflow: hidden;

  }

  .snv2-services-pack-template .snv2-card:not(.is-hero) .snv2-card-media {

    flex: 1 1 auto;

    min-height: 0;

  }

  .snv2-services-pack-template .snv2-card:not(.is-hero) .snv2-card-media img {

    width: 100%;

    height: 100%;

    aspect-ratio: auto;

    object-fit: cover;

  }



  .snv2-services-pack-template .snv2-card.is-hero {

    height: var(--snv2-card-h);

    display: grid !important;

    grid-template-columns: 1fr 2fr;

    overflow: hidden;

  }

  .snv2-services-pack-template .snv2-card.is-hero .snv2-card-body,

  .snv2-services-pack-template .snv2-card.is-hero .snv2-card-media {

    grid-row: 1;

    align-self: stretch;

  }

  .snv2-services-pack-template .snv2-card.is-hero .snv2-card-body {

    grid-column: 1;

    height: 100%;

    overflow: hidden;

    padding-top: 12px;

  }

  .snv2-services-pack-template .snv2-card.is-hero .snv2-card-media {

    grid-column: 2;

    height: 100%;

  }

  .snv2-services-pack-template .snv2-card.is-hero .snv2-card-media img {

    width: 100%;

    height: 100%;

    aspect-ratio: auto;

    object-fit: cover;

    object-position: 50% 18%;

  }



  .snv2-services-pack-template .snv2-card-actions {

    margin-top: 2px;

    gap: 8px;

  }

  .snv2-services-pack-template .snv2-btn {

    height: 30px;

    padding: 0 10px;

    font-size: 12.5px;

  }

}



/* Mobile/tablet hero tweaks (stack) */

@media (max-width: 1199.98px) {

  .snv2-services-pack-template {

    --snv2-media-ratio: 16/9;

    --snv2-media-ratio-hero: 21/9;

  }

  .snv2-services-pack-template .snv2-card.is-hero {

    display: flex !important;

    flex-direction: column;

    min-height: 0;

    height: auto;

  }

  .snv2-services-pack-template .snv2-card.is-hero .snv2-card-media img {

    height: auto;

    aspect-ratio: var(--snv2-media-ratio-hero);

    object-position: center top;

  }

}



/* ---------------------------------------------------------

   5) SCROLLBAR COSMETICS + BOTTOM CUSHION

   --------------------------------------------------------- */

.snv2-services-pack-template .snv2-panel-body::-webkit-scrollbar {

  width: 10px;

  height: 10px;

}

.snv2-services-pack-template .snv2-panel-body::-webkit-scrollbar-thumb {

  background: rgba(255, 255, 255, 0.14);

  border-radius: 10px;

}



.snv2-services-pack-template .snv2-services-grid::after {

  content: "";

  display: block;

  height: max(var(--snv2-scroll-pad, 24px), env(safe-area-inset-bottom));

}

/* ASD Commerce 1.6.75 — Services density + full-width overlay.
 * Only the services-pack menu is affected. The overlay owns desktop scrolling,
 * matching the compact, content-height approach used by MaxxECU. */
.snv2-services-pack-template .snv2-services-grid::after {
  content: none !important; /* An empty 12-column grid item was creating a trailing row. */
  display: none !important;
}
.snv2-services-pack-template .snv2-services-grid {
  padding-bottom: 0 !important;
  gap: 10px;
}
.snv2-services-pack-template .snv2-services-pack {
  padding: 10px;
}
.snv2-services-pack-template .snv2-panel-body {
  padding: 0 !important;
}
.snv2-services-pack-template .snv2-card-body {
  gap: 7px;
}
.snv2-services-pack-template .snv2-bullets {
  line-height: 1.4;
}
.snv2-services-pack-template .snv2-card-actions {
  margin-top: 3px;
}

@media (min-width: 861px) {
  /* The shared navigation overlay is nearly viewport-wide. Remove the generic
     1440px inner content cap and extra padding for this template alone. */
  #asd-snv2 #snv2-overlay:has(#snv2-overlay-content.snv2-template--services-pack) .snv2-overlay-panel {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #asd-snv2 #snv2-overlay-content.snv2-template--services-pack {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    max-height: min(680px, calc(100dvh - var(--snv2-overlay-top, 0px) - 8px)) !important;
    flex: 0 0 auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-color: #686868 #181818;
    scrollbar-width: thin;
  }
  #asd-snv2 #snv2-overlay-content.snv2-template--services-pack > .snv2-panel--template,
  #asd-snv2 #snv2-overlay-content.snv2-template--services-pack > .snv2-panel--template > .snv2-panel-inner,
  #asd-snv2 #snv2-overlay-content.snv2-template--services-pack .snv2-services-pack-template {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  #asd-snv2 #snv2-overlay-content.snv2-template--services-pack .snv2-services-pack-template .snv2-panel-body {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    overflow: visible !important;
  }
  #asd-snv2 #snv2-overlay-content.snv2-template--services-pack .snv2-services-pack {
    width: 100%;
    padding: 10px !important;
  }
}

@media (min-width: 1200px) {
  .snv2-services-pack-template {
    --snv2-card-h: clamp(255px, 15.2vw, 275px);
  }
  .snv2-services-pack-template .snv2-card.is-hero {
    grid-template-columns: minmax(235px, 34%) minmax(0, 66%);
  }
  .snv2-services-pack-template .snv2-card.is-hero .snv2-card-body {
    justify-content: space-between; /* Make use of the hero copy column, not blank space. */
  }
  .snv2-services-pack-template .snv2-card-body {
    padding: 11px 13px 12px;
    gap: 6px;
  }
  .snv2-services-pack-template .snv2-card:not(.is-hero) .snv2-card-media {
    flex: 1 1 auto;
    min-height: 100px;
  }
  .snv2-services-pack-template .snv2-bullets {
    font-size: 12.5px;
  }
  .snv2-services-pack-template .snv2-bullets li {margin: 1px 0;}
  .snv2-services-pack-template .snv2-btn {
    box-shadow: none;
  }
}

@media (min-width: 861px) and (max-width: 1199.98px) {
  .snv2-services-pack-template .snv2-card:not(.is-hero) .snv2-card-media img {
    max-height: 155px;
    object-fit: cover;
  }
  .snv2-services-pack-template .snv2-card.is-hero .snv2-card-media img {
    max-height: 215px;
    object-fit: cover;
  }
}

@media (max-width: 860px) {
  /* Keep the existing mobile drawer scroller and the single-column cards,
     but don't add large artificial padding below the final service. */
  .snv2-services-pack-template .snv2-services-pack {padding: 9px !important;}
  .snv2-services-pack-template .snv2-services-grid {gap: 10px;}
  .snv2-services-pack-template .snv2-panel-body {padding-bottom: 8px !important;}
}


/* 1.6.84 — shared desktop hover-menu geometry. One outer vertical scrollbar,
   620px maximum usable height (or less when the viewport is short). */
@media (min-width:861px) {
  #asd-snv2 #snv2-overlay:has(#snv2-overlay-content.snv2-template--services-pack) .snv2-overlay-panel {
    width:min(97vw,1820px)!important;max-width:none!important;
    height:auto!important;min-height:0!important;display:block!important;
    background:transparent!important;box-shadow:none!important;
  }
  #asd-snv2 #snv2-overlay-content.snv2-template--services-pack {
    width:100%!important;min-width:0!important;max-width:none!important;
    height:min(620px, calc(100dvh - var(--snv2-overlay-top, 0px) - 12px))!important;max-height:min(620px, calc(100dvh - var(--snv2-overlay-top, 0px) - 12px))!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    background:#141414!important;overscroll-behavior:contain;
  }
}