/* The native versions route shares the home/Excel row treatment without
   changing the homepage or the data-driven row template. */
body.office-catalog-dle:has(main.office-versions-page.ov-native-catalog-page) {
 --catalog-office-brand:#1479bd;
 --catalog-office-brand-rgb:20,121,189;
}

main.office-versions-page.ov-native-catalog-page {
 --ch-ink:#29333d;
 --ch-muted:#637080;
 --ch-line:#dfe4e3;
 --ch-accent:var(--catalog-office-brand-hover);
 --ov-paper:var(--cvs-paper,#fffefd);
 --ov-surface:#f5f9fc;
 color:var(--ch-ink);
 background:var(--ov-paper);
 line-height:1.5;
 & .catalog-breadcrumbs { display:flex; padding:22px 0 26px; font-size:12px; line-height:1.5; }
 & #versions { position:relative; isolation:auto; padding:0; border:0; background:var(--ov-paper); scroll-margin-top:24px; }
 & #office-versions {
  --choice-columns:minmax(265px,1.05fr) minmax(250px,1.2fr) minmax(205px,.92fr) 118px;
  --choice-gap:18px;
  --choice-inset:20px;
  --choice-line:transparent;
  overflow-x:clip;
  padding-block:0 46px;
 }
 & .ch-container { width:calc(100% - var(--cvs-axis) * 2); max-width:none; margin-inline:auto; }

 & .ch-office-versions-head { margin:0; padding-bottom:30px; }
 & #office-versions .ch-office-versions-description { max-width:800px; margin-top:14px; font-size:15px; line-height:1.6; }
 & #office-versions .ch-office-versions-catalog { margin-inline:calc(-1 * var(--choice-inset)); border-width:0; }
 & #office-versions .ch-office-version-mark { border-width:0; justify-items:start; }
 & #office-versions .ch-office-version-name { font-weight:600; }
 & #office-versions :is(p,.ch-office-version-download) { letter-spacing:normal; }
 & #office-versions .ch-office-version-summary { color:var(--ch-muted); }
 & #office-versions .ch-office-version-row { position:relative; min-height:78px; padding-block:14px; border-bottom-width:0; border-radius:0; }
 & #office-versions .ch-office-version-row:not(:last-child)::after {
  content:'';
  position:absolute;
  inset-inline:0;
  bottom:0;
  height:1px;
  background:rgba(35,45,40,.047);
  pointer-events:none;
 }
 & #office-versions .ch-office-version-download { width:118px; min-height:38px; padding:0 14px; gap:7px; border-radius:4px; font-size:14px; font-weight:600; line-height:1; }
 & #office-versions .ch-office-version-download svg { order:1; flex-basis:15px; width:15px; height:15px; stroke-width:1.8; }
 @media(max-width:1180px) {
  & #office-versions { --choice-columns:minmax(235px,1.05fr) minmax(190px,1.15fr) minmax(172px,.9fr) 118px; --choice-gap:18px; --choice-inset:18px; }
 }
 @media(max-width:960px) {
  & #office-versions { --choice-columns:minmax(224px,1fr) minmax(180px,1.05fr) 118px; --choice-gap:18px; }
 }
 @media(max-width:700px) {
  & #office-versions { --choice-columns:minmax(0,1fr) 118px; --choice-gap:14px; --choice-inset:16px; padding-bottom:27px; }
  & #office-versions .ch-office-version-row { padding-block:18px; }
  & #office-versions .ch-office-version-download { min-height:44px; }
  & #office-versions .ch-office-versions-description { font-size:14px; }

 }
 @media(max-width:520px) { & .catalog-breadcrumbs { padding:18px 0 22px; font-size:11px; } }
 @media(max-width:360px) { & #office-versions { --choice-gap:12px; --choice-inset:13px; } }
}
@layer office-versions-page {
 main.office-versions-page.ov-native-catalog-page {
  background:linear-gradient(135deg,#f1f7fc 0%,var(--ov-paper) 48%,var(--ov-surface) 100%)!important;
  & #versions { padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important; }
  & #office-versions { background:transparent!important; }
  & #versions::before,
  & #versions::after { content:none!important; display:none!important; }
  & .ch-office-versions-head {
   position:static!important;
   inset:auto!important;
   width:auto!important;
   height:auto!important;
   min-height:0!important;
   border:0!important;
   background:transparent!important;
   box-shadow:none!important;
   backdrop-filter:none!important;
  }
  & .ch-office-versions-head::before,
  & .ch-office-versions-head::after { content:none!important; display:none!important; }
  & #office-versions :is(.ch-office-versions-catalog,.ch-office-versions-labels,.ch-office-version-row,.ch-office-version-mark) {
   background:transparent!important;
   border-color:transparent!important;
   box-shadow:none!important;
  }
  & #office-versions .ch-office-version-row:is(:hover,:focus-within) {
   background:color-mix(in srgb,var(--catalog-office-brand) 4%,var(--ov-surface))!important;
  }
  & #office-versions .ch-office-version-download {
   color:color-mix(in srgb,var(--catalog-office-brand) 82%,#253242)!important;
   border-color:color-mix(in srgb,var(--catalog-office-brand) 25%,white)!important;
   background:var(--ov-paper)!important;
   box-shadow:none!important;
  }
  & #office-versions .ch-office-version-download:is(:hover,:focus-visible) {
   background:color-mix(in srgb,var(--catalog-office-brand) 7%,var(--ov-paper))!important;
   border-color:color-mix(in srgb,var(--catalog-office-brand) 42%,white)!important;
  }
  & #office-versions .ch-office-version-download:focus-visible { outline:2px solid var(--catalog-office-brand); outline-offset:3px; }
 }
}

/* Readable touch actions, including enlarged text in the native versions list. */
@layer office-versions-page {
 @media (max-width:1100px), (any-pointer:coarse) {
  body.office-catalog-dle main.office-versions-page.ov-native-catalog-page #office-versions .ch-office-version-download {
   width:max-content!important;
   min-width:118px!important;
   min-height:44px!important;
   padding:8px 12px!important;
   color:#fff!important;
   background:var(--catalog-office-brand)!important;
   border-color:var(--catalog-office-brand)!important;
  }
  body.office-catalog-dle main.office-versions-page.ov-native-catalog-page #office-versions .ch-office-version-download:is(:hover,:focus-visible,:active) {
   color:#fff!important;
   background:var(--catalog-office-brand-hover)!important;
   border-color:var(--catalog-office-brand-hover)!important;
  }
 }
}
@media (max-width:700px) {
 main.office-versions-page.ov-native-catalog-page #office-versions {
  --choice-columns:minmax(0,1fr) minmax(118px,max-content);
 }
}
@media (min-width:701px) and (max-width:960px) {
 main.office-versions-page.ov-native-catalog-page #office-versions {
  --choice-columns:minmax(224px,1fr) minmax(180px,1.05fr) minmax(118px,max-content);
 }
}
@media (min-width:961px) and (max-width:1100px) {
 main.office-versions-page.ov-native-catalog-page #office-versions {
  --choice-columns:minmax(235px,1.05fr) minmax(190px,1.15fr) minmax(172px,.9fr) minmax(118px,max-content);
 }
}
@media (max-width:520px) {
 main.office-versions-page.ov-native-catalog-page #office-versions {
  --choice-columns:minmax(0,1fr);
 }
 main.office-versions-page.ov-native-catalog-page #office-versions .ch-office-version-row {
  grid-template-areas:"identity" "summary" "facts" "action";
 }
}
@layer office-versions-page {
 @media (max-width:520px) {
  body.office-catalog-dle main.office-versions-page.ov-native-catalog-page #office-versions .ch-office-version-download {
   width:100%!important;
   min-width:0!important;
   justify-self:stretch;
  }
 }
}
@media (min-width:1101px) and (any-pointer:coarse) {
 main.office-versions-page.ov-native-catalog-page #office-versions {
  --choice-columns:minmax(265px,1.05fr) minmax(250px,1.2fr) minmax(205px,.92fr) minmax(118px,max-content);
 }
}