:root {
  --eshopps-line-blue: #00aeef;
  --eshopps-line-orange: #f58220;
  --eshopps-line-ink: #163746;
  --eshopps-line-muted: #607985;
  --eshopps-line-soft: #eff8fc;
}

/* Keep every layer exposed behind the animated header on the same brand blue. */
html:has(body.page-template-template-product-line),
body.page-template-template-product-line,
body.page-template-template-product-line #header-space,
body.page-template-template-product-line #header-outer,
body.page-template-template-product-line #header-outer #top {
  background-color: var(--eshopps-line-blue) !important;
}

body.page-template-template-product-line #header-outer,
body.page-template-template-product-line #header-outer.small-nav {
  box-shadow: none !important;
}

body.page-template-template-product-line #header-outer .bg-color-stripe {
  background-color: var(--eshopps-line-blue) !important;
}

.eshopps-line {
  overflow: hidden;
  background: #fff;
  color: var(--eshopps-line-ink);
  font-family: Graphik, Inter, Arial, sans-serif;
}

.eshopps-line__wide {
  width: min(1600px, calc(100% - clamp(48px, 9vw, 144px)));
  margin-inline: auto;
}

.eshopps-line h1,
.eshopps-line h2,
.eshopps-line h3 {
  font-family: Graphik, Inter, Arial, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -.035em;
}

.eshopps-line__eyebrow,
.eshopps-line__feature-label {
  margin: 0 0 24px;
  color: var(--eshopps-line-blue);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
}

.eshopps-line__hero {
  position: relative;
  min-height: clamp(620px, 72vh, 820px);
  display: flex;
  align-items: flex-end;
  background: #173746 var(--eshopps-line-hero) center / cover no-repeat;
  color: #fff;
}

.eshopps-line__hero-layout {
  position: relative;
  z-index: 1;
}

.eshopps-line__hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 39, 54, .91), rgba(8, 39, 54, .62) 42%, rgba(8, 39, 54, .08) 78%);
}

.eshopps-line__hero-content {
  position: relative;
  padding-block: clamp(70px, 9vw, 128px);
}

.eshopps-line__hero--product-focus {
  align-items: stretch;
  background: radial-gradient(
    ellipse 92% 150% at 100% 50%,
    #fff 0 48%,
    #f8fdff 58%,
    #e2f6fd 75%,
    #c8ecf9 100%
  );
  color: var(--eshopps-line-ink);
}

.eshopps-line__hero--product-focus .eshopps-line__hero-layout {
  z-index: auto;
  min-height: inherit;
  display: grid;
  grid-template-columns: minmax(420px, .92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(28px, 4vw, 80px);
}

.eshopps-line__hero--product-focus .eshopps-line__hero-content {
  grid-column: 1;
  grid-row: 1;
}

.eshopps-line__hero-product {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.eshopps-line__hero-product--top { align-items: flex-start; }
.eshopps-line__hero-product--bottom { align-items: flex-end; }

.eshopps-line__hero-product-image {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 760px;
  object-fit: contain;
  transform: scale(var(--eshopps-product-scale, 1));
  transform-origin: center;
  mix-blend-mode: multiply;
}

.eshopps-line__hero--product-focus .eshopps-line__eyebrow { color: var(--eshopps-line-blue); }
.eshopps-line__hero--product-focus h1,
.eshopps-line__hero--product-focus .eshopps-line__price { color: var(--eshopps-line-ink); }

.eshopps-line__hero .eshopps-line__eyebrow { color: #fff; }

.eshopps-line h1 {
  max-width: 900px;
  margin: 0;
  color: #fff;
  font-size: clamp(50px, 5.5vw, 88px);
  line-height: .97;
}

.eshopps-line__lede {
  max-width: 680px;
  margin: 32px 0 0;
  font-size: clamp(20px, 1.45vw, 26px);
  line-height: 1.5;
}

.eshopps-line__price {
  margin: 22px 0 0;
  color: #fff;
  font-size: clamp(22px, 1.7vw, 30px);
  font-weight: 500;
  line-height: 1.2;
}

body .eshopps-line__hero--product-focus .eshopps-line__eyebrow { color: var(--eshopps-line-blue); }
body .eshopps-line__hero--product-focus h1,
body .eshopps-line__hero--product-focus .eshopps-line__price { color: var(--eshopps-line-ink); }

.eshopps-line__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  margin-top: 38px;
  padding: 0 32px;
  border-radius: 999px;
  background: var(--eshopps-line-orange);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}

.eshopps-line__button:hover,
.eshopps-line__button:focus-visible { background: #ff912d; color: #fff; transform: none !important; }

.eshopps-line__product-nav {
  position: relative;
  z-index: 1000;
  border-top: 1px solid rgba(22, 55, 70, .12);
  border-bottom: 1px solid rgba(22, 55, 70, .12);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(18px);
}

.eshopps-line__header-sticky-backdrop {
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  left: 0;
  height: 0;
  background: var(--eshopps-line-blue);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.eshopps-line__header-sticky-backdrop.is-active {
  opacity: 1;
  visibility: visible;
}

.eshopps-line__product-nav.is-fixed {
  position: fixed;
  top: var(--eshopps-visible-header-bottom, 0px);
  right: 0;
  left: 0;
}

.eshopps-line__product-nav-inner { min-height: 74px; display: flex; align-items: center; gap: 34px; }
.eshopps-line__product-name {
  margin-right: auto;
  color: var(--eshopps-line-ink);
  font-family: "Graphik", Inter, Arial, sans-serif !important;
  font-size: 26px;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: -1px;
  text-decoration: none;
}
.eshopps-line__product-links { display: flex; align-items: center; gap: clamp(18px, 2.3vw, 38px); }
.eshopps-line__product-links a { color: var(--eshopps-line-muted); font-size: 14px; text-decoration: none; }
.eshopps-line__product-links a:hover,
.eshopps-line__product-links a:focus-visible { color: var(--eshopps-line-blue); }
.eshopps-line__product-action { display: inline-flex; align-items: center; min-height: 42px; padding: 0 22px; border-radius: 999px; background: var(--eshopps-line-orange); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; }

.eshopps-line__overview,
.eshopps-line__range,
.eshopps-line__resources,
.eshopps-line__specifications { padding-block: clamp(88px, 9vw, 150px); }

.eshopps-line__overview {
  padding-top: clamp(48px, 5vw, 80px);
  padding-bottom: clamp(18px, 2vw, 32px);
}

.eshopps-line__intro,
.eshopps-line__range-heading,
.eshopps-line__resources-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: clamp(48px, 9vw, 160px);
  align-items: end;
}

.eshopps-line h2 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(34px, 4.7vw, 65px);
  line-height: 1;
}

.eshopps-line__intro > p,
.eshopps-line__range-heading > p {
  margin: 0;
  color: var(--eshopps-line-muted);
  font-size: clamp(18px, 1.2vw, 22px);
  line-height: 1.6;
}

.eshopps-line__features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 0;
  border-top: 1px solid rgba(22, 55, 70, .18);
}

.eshopps-line__features-heading {
  padding-top: clamp(48px, 4vw, 64px);
  padding-bottom: clamp(24px, 2vw, 32px);
}
.eshopps-line__features-heading .eshopps-line__eyebrow { margin: 0; }

.eshopps-line__story { min-height: min(850px, 84vh); display: grid; grid-template-columns: 1.15fr .85fr; background: var(--eshopps-line-ink); color: #fff; }
.eshopps-line__story-media { min-height: 620px; background: #102c39 var(--eshopps-line-story) center / cover no-repeat; }
.eshopps-line__story-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(54px, 7vw, 118px); }
.eshopps-line__story-copy h2 { color: #fff; font-size: clamp(42px, 4.2vw, 70px); }
.eshopps-line__story-copy > p:last-child { margin: 32px 0 0; color: rgba(255,255,255,.72); font-size: clamp(18px, 1.2vw, 22px); line-height: 1.6; }
.eshopps-line__feature-section { padding-block: 0 clamp(88px, 9vw, 150px); }

.eshopps-line__feature {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.2vw, 52px);
  border-right: 1px solid rgba(22, 55, 70, .18);
}

.eshopps-line__feature:last-child { border-right: 0; }
.eshopps-line__feature-number { margin: 0 0 clamp(54px, 5vw, 76px); color: var(--eshopps-line-blue); font-size: 18px; }
.eshopps-line__feature-label { margin: 0 0 15px; color: var(--eshopps-line-muted); font-size: 15px; }
.eshopps-line__feature h3 { margin: 0 0 18px; font-size: clamp(28px, 2.3vw, 40px); line-height: 1.05; }
.eshopps-line--deskmate-classic .eshopps-line__feature h3 { font-size: clamp(24px, 1.7vw, 30px); line-height: 1.12; }
.eshopps-line__feature > p:last-child { margin: 0; color: var(--eshopps-line-muted); font-size: 17px; line-height: 1.55; }

.eshopps-line__range { background: var(--eshopps-line-soft); }
.eshopps-line__model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: clamp(62px, 7vw, 105px); }
.eshopps-line__model { overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 18px 60px rgba(22, 55, 70, .08); }
.eshopps-line__model-image { aspect-ratio: 4 / 3; background: #d9edf5 center / cover no-repeat; }
.eshopps-line__model-copy { padding: clamp(26px, 3vw, 42px); }
.eshopps-line__model-copy > p:first-child { margin: 0 0 18px; color: var(--eshopps-line-blue); font-size: 15px; }
.eshopps-line__model h3 {
  margin: 0;
  font-family: "Graphik", Inter, Arial, sans-serif !important;
  font-size: 34px;
  font-weight: 500 !important;
  letter-spacing: -1px;
  line-height: 1.06;
}
.eshopps-line__model-summary { min-height: 54px; margin: 22px 0 0; color: var(--eshopps-line-muted); line-height: 1.55; }
.eshopps-line__model a { display: flex; justify-content: space-between; margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(22, 55, 70, .15); color: var(--eshopps-line-ink); text-decoration: none; }

.eshopps-line__range-placeholder {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-top: clamp(62px, 7vw, 105px);
  padding: clamp(34px, 5vw, 70px);
  border: 1px solid rgba(0, 174, 239, .28);
  border-radius: 22px;
  background: #fff;
}
.eshopps-line__range-placeholder p { margin: 0; font-size: clamp(24px, 2.6vw, 40px); }
.eshopps-line__range-placeholder span { color: var(--eshopps-line-blue); font-size: 14px; }

.eshopps-line__resources { background: #fff; }
.eshopps-line__downloads a { display: flex; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid rgba(22, 55, 70, .18); color: var(--eshopps-line-ink); text-decoration: none; }

.eshopps-line__specifications { background: var(--eshopps-line-ink); color: #fff; }
.eshopps-line__spec-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr); gap: clamp(48px, 9vw, 160px); }
.eshopps-line__specifications h2 { color: #fff; }
.eshopps-line__spec-list { margin: 0; }
.eshopps-line__spec-list > div { display: flex; justify-content: space-between; gap: 30px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.eshopps-line__spec-list dt { color: rgba(255,255,255,.58); }
.eshopps-line__spec-list dd { margin: 0; text-align: right; }
.eshopps-line__spec-pending { padding: clamp(32px, 4vw, 58px); border: 1px solid rgba(255,255,255,.2); }
.eshopps-line__spec-pending span { color: var(--eshopps-line-blue); font-size: 14px; }
.eshopps-line__spec-pending p { margin: 30px 0 0; color: rgba(255,255,255,.72); font-size: clamp(20px, 1.5vw, 26px); line-height: 1.5; }

.eshopps-line__cta { position: relative; overflow: hidden; padding-block: clamp(92px, 10vw, 165px); background: var(--eshopps-line-blue); color: #fff; }
.eshopps-line__cta > .eshopps-line__wide { position: relative; z-index: 2; }
.eshopps-line__cta-product {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -4%;
  width: min(62vw, 1200px);
  margin: 0;
  opacity: .42;
  transform: translateY(-50%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.eshopps-line__cta-product-image { display: block; width: 100%; height: auto; }
.eshopps-line__cta .eshopps-line__eyebrow,
.eshopps-line__cta h2 { color: #fff; }
.eshopps-line__button--light { background: #fff; color: var(--eshopps-line-blue); }
.eshopps-line__button--light:hover,
.eshopps-line__button--light:focus-visible { background: #eaf9ff; color: var(--eshopps-line-blue); }

@media only screen and (max-width: 999px) {
  .eshopps-line__wide { width: min(100% - 48px, 760px); }
  .eshopps-line__hero { min-height: 680px; background-position: 58% center; }
  .eshopps-line__hero-shade { background: linear-gradient(0deg, rgba(8, 39, 54, .94), rgba(8, 39, 54, .55) 62%, rgba(8, 39, 54, .08)); }
  .eshopps-line__hero--product-focus { min-height: 0; }
  .eshopps-line__hero--product-focus .eshopps-line__hero-layout {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .eshopps-line__hero--product-focus .eshopps-line__hero-product {
    grid-column: 1;
    grid-row: 1;
    min-height: clamp(330px, 58vw, 520px);
  }
  .eshopps-line__hero--product-focus .eshopps-line__hero-content {
    grid-column: 1;
    grid-row: 2;
    padding-block: 34px 64px;
  }
  .eshopps-line__hero--product-focus .eshopps-line__hero-product-image {
    max-height: clamp(360px, 64vw, 560px);
  }
  .eshopps-line__intro,
  .eshopps-line__range-heading,
  .eshopps-line__resources-grid,
  .eshopps-line__spec-grid { grid-template-columns: 1fr; }
  .eshopps-line__story { grid-template-columns: 1fr; }
  .eshopps-line__story-media { min-height: 520px; }
  .eshopps-line__product-links { overflow-x: auto; order: 3; width: 100%; padding-bottom: 14px; }
  .eshopps-line__product-nav-inner { min-height: 68px; flex-wrap: wrap; padding-top: 12px; gap: 16px; }
  .eshopps-line__features { grid-template-columns: 1fr; }
  .eshopps-line__feature { min-height: 300px; border-right: 0; border-bottom: 1px solid rgba(22, 55, 70, .18); }
  .eshopps-line__feature:last-child { border-bottom: 0; }
  .eshopps-line__model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media only screen and (max-width: 560px) {
  .eshopps-line__wide { width: calc(100% - 32px); }
  .eshopps-line h1 { font-size: clamp(42px, 13vw, 58px); }
  .eshopps-line h2 { font-size: clamp(34px, 10vw, 46px); }
  .eshopps-line__eyebrow { font-size: 18px; }
  .eshopps-line__model-grid { grid-template-columns: 1fr; }
  .eshopps-line__range-placeholder { flex-direction: column; }
  .eshopps-line__product-action { padding-inline: 16px; }
  .eshopps-line__story-media { min-height: 390px; }
}