/* V163 — compact organised FAQ redesign across the complete SG-Tronic website */

section.faq-v163{
  max-width:none!important;
  margin:0!important;
  padding:58px 7vw 62px!important;
  background:
    linear-gradient(180deg,rgba(245,248,252,.98),rgba(245,248,252,.98))!important;
  color:#102d43!important;
  border-top:1px solid #f5f8fc!important;
  border-bottom:1px solid #f5f8fc!important;
  box-sizing:border-box!important;

  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  column-gap:14px!important;
  row-gap:12px!important;
}

/* Heading spans the FAQ width */
section.faq-v163 > .label,
section.faq-v163 > h2{
  grid-column:1 / -1!important;
}

section.faq-v163 > .label{
  margin:0 0 2px!important;
  color:#35c5f4!important;
  font-size:.72rem!important;
  font-weight:850!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}

section.faq-v163 > h2{
  max-width:900px!important;
  margin:0 0 18px!important;
  color:#102d43!important;
  font-size:clamp(2rem,3.2vw,3.25rem)!important;
  font-weight:400!important;
  letter-spacing:-.04em!important;
  line-height:1.08!important;
}

/* Homepage FAQ has an existing wrapper around the details */
section.faq-v163 > .faq-v163-grid,
section.faq-v163 > div:has(> details){
  grid-column:1 / -1!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px 14px!important;
  margin:0!important;
}

/* Compact FAQ cards */
section.faq-v163 details{
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  background:#fff!important;
  border:1px solid #f5f8fc!important;
  border-radius:5px!important;
  box-shadow:0 7px 18px rgba(8,27,44,.045)!important;
  overflow:hidden!important;
  align-self:start!important;
}

/* Remove legacy top-only FAQ borders */
section.faq-v163 details + details{
  margin-top:0!important;
}

section.faq-v163 summary{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  min-height:62px!important;
  margin:0!important;
  padding:16px 52px 16px 18px!important;
  color:#102d43!important;
  background:#fff!important;
  cursor:pointer!important;
  list-style:none!important;
  font-size:.98rem!important;
  font-weight:750!important;
  line-height:1.4!important;
  transition:background .18s ease,color .18s ease!important;
}

section.faq-v163 summary::-webkit-details-marker{
  display:none!important;
}

/* Small square + icon */
section.faq-v163 summary::after{
  content:"+"!important;
  position:absolute!important;
  right:16px!important;
  top:50%!important;
  width:27px!important;
  height:27px!important;
  transform:translateY(-50%)!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid #e8f4fa!important;
  border-radius:4px!important;
  color:#076aae!important;
  background:#f5f8fc!important;
  font-size:1.05rem!important;
  font-weight:700!important;
  line-height:1!important;
}

section.faq-v163 details[open] summary{
  color:#076aae!important;
  background:#f5f8fc!important;
  border-bottom:1px solid #f5f8fc!important;
}

section.faq-v163 details[open] summary::after{
  content:"−"!important;
  color:#fff!important;
  background:#087AC7!important;
  border-color:#087AC7!important;
}

section.faq-v163 details > p{
  margin:0!important;
  padding:15px 18px 18px!important;
  color:#465d70!important;
  background:#fff!important;
  font-size:.91rem!important;
  line-height:1.65!important;
}

/* Some FAQ answers contain extra elements */
section.faq-v163 details > :not(summary):not(p){
  margin-left:18px!important;
  margin-right:18px!important;
}

/* Hover is deliberately subtle */
@media(hover:hover){
  section.faq-v163 details:hover{
    border-color:#e8f4fa!important;
    box-shadow:0 9px 22px rgba(8,27,44,.07)!important;
  }
  section.faq-v163 summary:hover{
    background:#f5f8fc!important;
  }
}

/* Tablet/mobile */
@media(max-width:820px){
  section.faq-v163{
    grid-template-columns:1fr!important;
    padding:48px 6vw 52px!important;
  }

  section.faq-v163 > .label,
  section.faq-v163 > h2{
    grid-column:1!important;
  }

  section.faq-v163 > .faq-v163-grid,
  section.faq-v163 > div:has(> details){
    grid-template-columns:1fr!important;
  }

  section.faq-v163 > details{
    grid-column:1!important;
  }
}

@media(max-width:560px){
  section.faq-v163{
    padding-top:42px!important;
    padding-bottom:44px!important;
    row-gap:9px!important;
  }

  section.faq-v163 > h2{
    margin-bottom:14px!important;
    font-size:clamp(1.85rem,9vw,2.5rem)!important;
  }

  section.faq-v163 summary{
    min-height:56px!important;
    padding:14px 46px 14px 15px!important;
    font-size:.94rem!important;
  }

  section.faq-v163 summary::after{
    right:13px!important;
    width:25px!important;
    height:25px!important;
  }

  section.faq-v163 details > p{
    padding:13px 15px 16px!important;
    font-size:.89rem!important;
  }
}