/* SECURIX account v7 — layout normalization, centered dialogs and reliable comparison data columns.
   Loaded after v1…v6 and intentionally overrides only account UI. */
.sx-account{--sx-shell:1320px;--sx-side:220px;--sx-gap:18px;--sx-brand:#f5a000;--sx-brand-soft:#fff3df;--sx-ink:#17181a;--sx-muted:#7d8590;--sx-line:#e4e7eb}

/* One shell for overview + every child section. It now tracks the 1320px storefront header. */
@media (min-width:1101px){
  .sx-account{padding:28px 0 70px!important}
  .sx-account-wrap{width:min(var(--sx-shell),calc(100% - 48px))!important;max-width:var(--sx-shell)!important;margin:0 auto!important;padding:0!important}
  .sx-account-grid{display:grid!important;grid-template-columns:var(--sx-side) minmax(0,1fr)!important;gap:var(--sx-gap)!important;align-items:start!important;width:100%!important;min-width:0!important}
  .sx-account-side{width:var(--sx-side)!important;min-width:0!important}
  .sx-account-main{width:100%!important;max-width:100%!important;min-width:0!important}
  .sx-section-page{width:100%!important;max-width:100%!important;min-width:0!important}

  /* Overview now follows the same visual hierarchy as the child pages. */
  .sx-overview-heading{margin:2px 0 16px!important}
  .sx-overview-heading .sx-account-crumbs{margin:0 0 7px!important;font-size:11px!important}
  .sx-overview-heading h1{margin:0!important;font-size:31px!important;line-height:1.08!important;letter-spacing:-.035em!important;font-weight:950!important}
  .sx-overview-layout{width:100%!important;min-width:0!important}
}

/* Keep desktop headings calibrated: v4 had become too large. */
.sx-section-heading h2,.sx-detail-title h2{font-size:31px!important;line-height:1.08!important;letter-spacing:-.035em!important}
.sx-section-heading p{font-size:12px!important;line-height:1.45!important}

/* Dialogs must be centered in the viewport, not anchored to the document's top-left. */
.sx-address-dialog,.sx-compare-dialog{
  position:fixed!important;inset:50% auto auto 50%!important;transform:translate(-50%,-50%)!important;
  width:min(560px,calc(100vw - 32px))!important;max-width:calc(100vw - 32px)!important;
  max-height:min(760px,calc(100dvh - 32px))!important;margin:0!important;padding:0!important;
  overflow:auto!important;overscroll-behavior:contain!important;border:0!important;border-radius:18px!important;
  background:#fff!important;box-shadow:0 30px 90px rgba(0,0,0,.22)!important
}
.sx-address-dialog::backdrop,.sx-compare-dialog::backdrop{background:rgba(18,21,26,.42)!important;backdrop-filter:blur(4px)!important}
.sx-address-dialog form,.sx-compare-dialog form{width:100%!important;max-width:100%!important;padding:18px!important}
.sx-dialog-head{position:sticky!important;top:0!important;z-index:4!important;margin:-2px 0 12px!important;padding:2px 0 4px!important;background:#fff!important}
.sx-address-dialog input,.sx-compare-dialog input{width:100%!important;max-width:100%!important;min-width:0!important}
body:has(.sx-address-dialog[open]),body:has(.sx-compare-dialog[open]){overflow:hidden!important}

/* Support hero: make the operator a real composition, not a pasted crop. */
@media (min-width:1101px){
  .sx-support-hero-final{grid-template-columns:minmax(0,1fr) 360px!important;gap:22px!important;min-height:176px!important;align-items:end!important;margin-bottom:14px!important}
  .sx-support-agent-art{position:relative!important;height:176px!important;overflow:hidden!important;border-radius:24px!important;background:linear-gradient(135deg,#fff9e9 0%,#fff3c9 55%,#fff 100%)!important;box-shadow:inset 0 0 0 1px rgba(245,160,0,.08)!important}
  .sx-support-agent-photo{position:absolute!important;right:-2px!important;bottom:0!important;width:238px!important;height:174px!important;object-fit:cover!important;object-position:50% 25%!important;border-radius:0!important;filter:none!important;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 18%,#000 100%)!important;mask-image:linear-gradient(to right,transparent 0,#000 18%,#000 100%)!important}
  .sx-support-agent-art em{position:absolute!important;z-index:3!important;left:18px!important;right:auto!important;top:54px!important;width:108px!important;margin:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;color:#1d2025!important;font-size:13px!important;line-height:1.2!important;font-weight:900!important;font-style:italic!important;text-align:left!important;transform:rotate(-4deg)!important}
}

/* Comparison: compact, centered and every product always sits over its own value column. */
.sx-compare-page-final{min-width:0!important}
.sx-compare-shell{display:flex!important;justify-content:center!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important}
.sx-compare-grid-final{
  --sx-compare-label:178px!important;--sx-compare-col:230px;
  width:max-content!important;max-width:100%!important;min-width:0!important;margin:0 auto!important;
  overflow-x:auto!important;overflow-y:hidden!important;border:1px solid #e4e7eb!important;border-radius:18px!important;
  background:#fff!important;box-shadow:0 10px 32px rgba(21,25,31,.035)!important;scrollbar-width:thin!important;overscroll-behavior-inline:contain!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;min-width:0!important;max-width:none!important;border:0!important;border-radius:0!important;background:#fff!important;overflow:visible!important
}
.sx-compare-spacer{display:flex!important;align-items:flex-end!important;min-width:var(--sx-compare-label)!important;padding:14px!important;border-right:1px solid #e7eaee!important;background:#fafbfc!important}
.sx-compare-spacer span{display:inline-flex!important;align-items:center!important;min-height:28px!important;padding:0 9px!important;border:1px solid #e3e6ea!important;border-radius:999px!important;background:#fff!important;color:#6e7680!important;font-size:10px!important;font-weight:850!important}
.sx-compare-product{position:relative!important;width:var(--sx-compare-col)!important;min-width:var(--sx-compare-col)!important;min-height:258px!important;padding:13px 14px 14px!important;border-left:1px solid #e7eaee!important;background:#fff!important}
.sx-compare-product>a:first-of-type{display:grid!important;place-items:center!important;height:105px!important;margin-bottom:8px!important}
.sx-compare-product img{max-width:88%!important;max-height:100px!important;object-fit:contain!important}
.sx-compare-name{display:-webkit-box!important;min-height:36px!important;overflow:hidden!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;font-size:11px!important;line-height:1.35!important;font-weight:850!important}
.sx-compare-product>span{display:block!important;margin-top:7px!important;font-size:9px!important}.sx-compare-product>span.is-stock{color:#15985b!important}
.sx-compare-product>strong{display:block!important;margin-top:7px!important;font-size:17px!important;line-height:1.1!important}
.sx-compare-product>button:last-child{display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;width:100%!important;height:34px!important;margin-top:9px!important;border:0!important;border-radius:9px!important;background:var(--sx-brand)!important;font-size:10px!important;font-weight:900!important;cursor:pointer!important}
.sx-compare-product>button:last-child svg{width:14px!important;height:14px!important}
.sx-compare-product>button:first-child{position:absolute!important;right:7px!important;top:7px!important;display:grid!important;place-items:center!important;width:27px!important;height:27px!important;border:0!important;border-radius:8px!important;background:#fff!important;cursor:pointer!important;z-index:2!important}.sx-compare-product>button:first-child svg{width:14px!important;height:14px!important}

.sx-compare-group{width:max-content!important;max-width:none!important;min-width:0!important;margin:0!important;border:0!important;border-top:1px solid #e7eaee!important;border-radius:0!important;background:#fff!important;overflow:visible!important}
.sx-compare-group summary{display:flex!important;align-items:center!important;justify-content:space-between!important;width:calc(var(--sx-compare-label) + var(--sx-compare-count) * var(--sx-compare-col))!important;min-height:40px!important;padding:0 13px!important;background:#f7f8f9!important;border-bottom:1px solid #e7eaee!important;font-size:10.5px!important;font-weight:900!important;cursor:pointer!important}
.sx-compare-table{width:max-content!important;max-width:none!important;min-width:0!important}
.sx-compare-row,.sx-compare-price-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>*{min-width:0!important;padding:8px 10px!important;border-right:1px solid #eceef1!important;border-bottom:1px solid #eceef1!important;font-size:9.5px!important;line-height:1.35!important;overflow-wrap:anywhere!important}
.sx-compare-row>*:last-child{border-right:0!important}
.sx-compare-row>strong{background:#fcfcfd!important;color:#656d77!important;font-weight:800!important}
.sx-compare-row-head>*{background:#fafbfc!important}.sx-compare-row-head b{font-size:9.5px!important;color:#222!important}
.sx-compare-row.is-different>span:not(:empty){background:#fffaf0!important}
.sx-compare-price-row{border-top:1px solid #e7eaee!important;background:#fff!important}
.sx-compare-price-row>*{padding:11px 10px!important;border-right:1px solid #eceef1!important}.sx-compare-price-row>*:last-child{border-right:0!important}
.sx-compare-price-row>strong{display:flex!important;align-items:center!important;font-size:10px!important}
.sx-compare-price-row>span{display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;gap:8px!important}.sx-compare-price-row b{font-size:14px!important}.sx-compare-price-row button{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;height:30px!important;padding:0 10px!important;border:0!important;border-radius:8px!important;background:var(--sx-brand)!important;font-size:9px!important;font-weight:900!important}.sx-compare-price-row button svg{width:13px!important;height:13px!important}.sx-compare-price-row em{font-style:normal!important}

/* Search results in compare dialog. */
.sx-compare-results{display:grid!important;gap:7px!important;max-height:380px!important;margin-top:10px!important;overflow:auto!important}
.sx-compare-results>button{display:grid!important;grid-template-columns:52px minmax(0,1fr) 28px!important;align-items:center!important;gap:10px!important;width:100%!important;min-width:0!important;padding:8px!important;border:1px solid #e6e9ed!important;border-radius:11px!important;background:#fff!important;text-align:left!important;cursor:pointer!important}
.sx-compare-results img{width:52px!important;height:52px!important;object-fit:contain!important}.sx-compare-results span{min-width:0!important;font-size:10.5px!important;font-weight:800!important;overflow-wrap:anywhere!important}.sx-compare-results small{display:block!important;margin-top:3px!important;color:#7d8590!important;font-size:9px!important}.sx-compare-results b{display:grid!important;place-items:center!important;width:26px!important;height:26px!important;border-radius:8px!important;background:var(--sx-brand-soft)!important;color:#d78300!important}

@media (max-width:1100px){
  .sx-overview-heading{margin:4px 0 12px!important}.sx-overview-heading .sx-account-crumbs{display:none!important}.sx-overview-heading h1{margin:0!important;font-size:24px!important;line-height:1.08!important}
  .sx-address-dialog,.sx-compare-dialog{inset:50% auto auto 50%!important;transform:translate(-50%,-50%)!important;width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 20px)!important;border-radius:16px!important}
  .sx-address-dialog form,.sx-compare-dialog form{padding:14px!important}

  .sx-compare-shell{justify-content:flex-start!important;overflow:hidden!important}
  .sx-compare-grid-final{--sx-compare-label:118px!important;--sx-compare-col:126px!important;width:100%!important;max-width:100%!important;margin:0!important;overflow-x:auto!important;border-radius:14px!important}
  .sx-compare-products,.sx-compare-row,.sx-compare-price-row{grid-template-columns:var(--sx-compare-label) repeat(var(--sx-compare-count),var(--sx-compare-col))!important}
  .sx-compare-spacer{padding:7px!important}.sx-compare-spacer span{min-height:23px!important;padding:0 6px!important;font-size:7.5px!important}
  .sx-compare-product{width:var(--sx-compare-col)!important;min-width:var(--sx-compare-col)!important;min-height:205px!important;padding:7px!important}.sx-compare-product>a:first-of-type{height:73px!important}.sx-compare-product img{max-height:70px!important}.sx-compare-name{min-height:31px!important;font-size:7.6px!important}.sx-compare-product>span{font-size:7px!important}.sx-compare-product>strong{font-size:12.5px!important}.sx-compare-product>button:last-child{height:29px!important;font-size:0!important}.sx-compare-product>button:last-child svg{width:14px!important;height:14px!important}
  .sx-compare-group summary{position:sticky!important;left:0!important;z-index:4!important;width:calc(var(--sx-compare-label) + var(--sx-compare-count) * var(--sx-compare-col))!important;min-height:36px!important;padding:0 8px!important;font-size:8.5px!important}
  .sx-compare-row>*{padding:6px 5px!important;font-size:7.5px!important}.sx-compare-row-head b{font-size:7.5px!important}
  .sx-compare-price-row>*{padding:7px 5px!important}.sx-compare-price-row b{font-size:10px!important}.sx-compare-price-row button{width:28px!important;height:28px!important;padding:0!important;font-size:0!important}.sx-compare-price-row em{display:none!important}
}

@media (max-width:1100px){
  /* Overview uses the same fixed bottom navigation as the rest of the account. */
  .sx-account-mobile-tabs{display:none!important}
}
