/* SECURIX account v6 — desktop width calibration + compact comparison matrix.
   Loaded after v5. Overview remains untouched. */

/* Child account pages use the same desktop shell width as the storefront header. */
@media (min-width:1101px){
  .sx-account:has(.sx-section-page){padding-left:0!important;padding-right:0!important}
  .sx-account:has(.sx-section-page) .sx-account-wrap{
    width:min(1320px,calc(100% - 48px))!important;
    max-width:1320px!important;
    margin-left:auto!important;margin-right:auto!important
  }
  .sx-account:has(.sx-section-page) .sx-account-grid{
    grid-template-columns:220px minmax(0,1fr)!important;
    gap:18px!important
  }
}

/* Comparison should feel like a comparison tool, not two huge product landing cards. */
.sx-compare-page-final{min-width:0!important}
.sx-compare-page-final .sx-section-heading{margin-bottom:16px!important}
.sx-compare-shell{width:100%!important;max-width:100%!important;min-width:0!important}
.sx-compare-grid-final{
  --sx-compare-label:165px!important;
  --sx-compare-col:270px;
  width:max-content!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  border-radius:18px!important;
  scrollbar-width:thin!important;
  overscroll-behavior-inline:contain!important;
  box-shadow:0 10px 32px rgba(21,25,31,.035)!important
}
.sx-compare-products{
  display:grid!important;
  grid-template-columns:var(--sx-compare-label) repeat(var(--sx-compare-count),var(--sx-compare-col))!important;
  width:max-content!important;
  max-width:none!important;
  min-width:0!important;
  background:#fff!important;
  border:1px solid #e5e8ec!important;
  border-radius:18px 18px 0 0!important;
  overflow:hidden!important
}
.sx-compare-spacer{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:flex-start!important;
  min-width:var(--sx-compare-label)!important;
  padding:16px!important;
  border-right:1px solid #e7eaee!important;
  background:linear-gradient(180deg,#fbfbfc 0%,#f5f6f7 100%)!important
}
.sx-compare-spacer span{
  display:inline-flex!important;align-items:center!important;
  min-height:30px!important;padding:0 10px!important;
  border:1px solid #e2e5e9!important;border-radius:999px!important;
  background:#fff!important;color:#69717c!important;
  font-size:10.5px!important;font-weight:850!important
}
.sx-compare-product{
  width:var(--sx-compare-col)!important;
  min-width:var(--sx-compare-col)!important;
  min-height:270px!important;
  padding:14px 16px!important;
  border-left:1px solid #e7eaee!important;
  background:#fff!important
}
.sx-compare-product>a:first-of-type{height:118px!important;margin-bottom:7px!important}
.sx-compare-product img{max-width:88%!important;max-height:112px!important}
.sx-compare-name{
  min-height:38px!important;
  font-size:11.5px!important;
  line-height:1.35!important;
  -webkit-line-clamp:2!important
}
.sx-compare-product>span{margin-top:6px!important;font-size:9.5px!important}
.sx-compare-product>strong{margin-top:7px!important;font-size:18px!important;line-height:1.1!important}
.sx-compare-product>button:last-child{
  height:36px!important;margin-top:10px!important;border-radius:9px!important;
  font-size:10.5px!important
}
.sx-compare-product>button:first-child{right:8px!important;top:8px!important;width:28px!important;height:28px!important}

.sx-compare-group{
  width:max-content!important;
  max-width:none!important;
  min-width:0!important;
  border:1px solid #e5e8ec!important;
  border-top:0!important;
  background:#fff!important;
  overflow:visible!important
}
.sx-compare-group summary{
  width:calc(var(--sx-compare-label) + var(--sx-compare-count) * var(--sx-compare-col))!important;
  min-height:42px!important;padding:0 14px!important;
  background:#f7f8f9!important;
  border-bottom:1px solid #e7eaee!important;
  font-size:11px!important
}
.sx-compare-table{width:max-content!important;max-width:none!important;min-width:0!important}
.sx-compare-row{
  display:grid!important;
  grid-template-columns:var(--sx-compare-label) repeat(var(--sx-compare-count),var(--sx-compare-col))!important;
  width:max-content!important;
  min-width:0!important
}
.sx-compare-row>*{
  padding:9px 11px!important;
  font-size:9.5px!important;
  line-height:1.35!important;
  overflow-wrap:anywhere!important
}
.sx-compare-row>strong{background:#fcfcfd!important;color:#646c76!important}
.sx-compare-row-head>*{background:#fafbfc!important}
.sx-compare-row-head b{font-size:10px!important}
.sx-compare-row-price b{font-size:13px!important}

/* Support hero: keep the operator image clean; copy sits over the empty side of the image, not over her face. */
@media (min-width:1101px){
  .sx-support-hero-final{grid-template-columns:minmax(0,1fr) 340px!important;min-height:164px!important;align-items:end!important}
  .sx-support-agent-art{
    height:164px!important;border-radius:22px 22px 0 0!important;
    background:#fff8e6!important;overflow:hidden!important
  }
  .sx-support-agent-photo{
    right:0!important;bottom:0!important;width:340px!important;height:164px!important;
    object-fit:cover!important;object-position:center center!important;
    border-radius:22px 22px 0 0!important;
    -webkit-mask-image:none!important;mask-image:none!important;filter:none!important
  }
  .sx-support-agent-art em{
    left:auto!important;right:18px!important;top:62px!important;width:102px!important;
    padding:7px 9px!important;border-radius:10px!important;
    background:rgba(255,255,255,.86)!important;backdrop-filter:blur(5px)!important;
    font-size:11px!important;line-height:1.2!important;text-align:center!important;
    transform:rotate(-3deg)!important;box-shadow:0 6px 18px rgba(20,20,20,.06)!important
  }
}

/* Tablet/mobile keeps the matrix compact and scrolls only the comparison itself. */
@media (max-width:1100px){
  .sx-compare-grid-final{
    --sx-compare-label:118px!important;
    --sx-compare-col:126px!important;
    width:100%!important;max-width:100%!important;
    overflow-x:auto!important
  }
  .sx-compare-products,
  .sx-compare-row{
    grid-template-columns:var(--sx-compare-label) repeat(var(--sx-compare-count),var(--sx-compare-col))!important
  }
  .sx-compare-products,.sx-compare-group,.sx-compare-table,.sx-compare-row{width:max-content!important;max-width:none!important}
  .sx-compare-spacer{min-width:var(--sx-compare-label)!important;padding:8px!important}
  .sx-compare-spacer span{font-size:8px!important;min-height:24px!important;padding:0 7px!important}
  .sx-compare-product{width:var(--sx-compare-col)!important;min-width:var(--sx-compare-col)!important;min-height:210px!important;padding:8px!important}
  .sx-compare-product>a:first-of-type{height:76px!important}.sx-compare-product img{max-height:72px!important}
  .sx-compare-name{min-height:34px!important;font-size:8px!important}.sx-compare-product>span{font-size:7.5px!important}.sx-compare-product>strong{font-size:13px!important}
  .sx-compare-product>button:last-child{height:30px!important;font-size:0!important}
  .sx-compare-group summary{position:sticky!important;left:0!important;width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;font-size:10px!important;z-index:3!important}
  .sx-compare-row>*{padding:7px 6px!important;font-size:8px!important}
}