/* =========================================================
   KENZORA MATERIAL SELECTION
   FULL-WIDTH BACKGROUND
   BOXED WEBSITE CONTENT
   ========================================================= */

.kenzora-material-specs {

  --kms-primary:
    var(--e-global-color-primary, #1f2328);

  --kms-secondary:
    var(--e-global-color-secondary, #7d8f2a);

  --kms-accent:
    var(--e-global-color-accent, #b6c82e);

  width: 100vw !important;

  max-width: 100vw !important;

  margin-top: 0 !important;

  margin-bottom: 0 !important;

  margin-left: calc(50% - 50vw) !important;

  margin-right: calc(50% - 50vw) !important;

  padding: 90px 0 80px;

  position: relative;

  left: 0;

  background: var(--kms-primary);

  color: #ffffff;

  font-family: inherit;

  box-sizing: border-box;

}


/* =========================================================
   RESET ONLY INSIDE THIS SECTION
   ========================================================= */

.kenzora-material-specs *,
.kenzora-material-specs *::before,
.kenzora-material-specs *::after {

  box-sizing: border-box;

}


/* =========================================================
   BOXED WEBSITE CONTENT
   ========================================================= */

.kenzora-material-specs__wrap {

  width: 100% !important;

  max-width: 1480px !important;

  margin-left: auto !important;

  margin-right: auto !important;

  padding-left: 45px;

  padding-right: 45px;

}


/* =========================================================
   HEADER
   ========================================================= */

.kenzora-material-specs__header {

  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(320px, 0.85fr);

  gap: 90px;

  align-items: end;

  padding-bottom: 70px;

}


.kenzora-material-specs__kicker {

  display: flex;

  align-items: center;

  gap: 13px;

  margin-bottom: 19px;

  color: var(--kms-accent);

  font-family: inherit;

  font-size: inherit;

  line-height: inherit;

  font-weight: 800;

  letter-spacing: 0.14em;

}


.kenzora-material-specs__kicker::before {

  content: "";

  display: block;

  width: 40px;

  height: 2px;

  flex: 0 0 40px;

  background: var(--kms-accent);

}


.kenzora-material-specs__header h2 {

  margin: 0;

  padding: 0;

  color: #ffffff;

  font-family: inherit;

  font-size: clamp(44px, 5.5vw, 78px);

  line-height: 1;

  font-weight: 800;

  letter-spacing: -0.045em;

  text-shadow:
    0 5px 18px rgba(0,0,0,0.16);

}


.kenzora-material-specs__header h2 span {

  display: block;

  color: var(--kms-accent);

}


.kenzora-material-specs__header-copy {

  padding-bottom: 5px;

}


.kenzora-material-specs__header-copy p {

  max-width: 570px;

  margin: 0;

  color: rgba(255,255,255,0.76);

  font-family: inherit;

  font-size: inherit;

  line-height: 1.8;

}


/* =========================================================
   MAIN MATERIAL AREA
   ========================================================= */

.kenzora-material-specs__main {

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    170px
    minmax(0,1fr);

  align-items: stretch;

  border-top:
    1px solid rgba(255,255,255,0.22);

  border-bottom:
    1px solid rgba(255,255,255,0.22);

}


/* =========================================================
   MATERIAL BLOCK
   ========================================================= */

.kenzora-material-specs__material {

  display: grid;

  grid-template-columns:
    55px minmax(0,1fr);

  gap: 25px;

  min-height: 430px;

  padding: 60px 45px;

}


.kenzora-material-specs__material:first-child {

  border-right:
    1px solid rgba(255,255,255,0.13);

}


.kenzora-material-specs__material:last-child {

  border-left:
    1px solid rgba(255,255,255,0.13);

}


/* =========================================================
   NUMBERS
   ========================================================= */

.kenzora-material-specs__number {

  padding-top: 3px;

  color: rgba(255,255,255,0.34);

  font-family: inherit;

  font-size: inherit;

  line-height: 1;

  font-weight: 800;

  letter-spacing: 0.04em;

}


/* =========================================================
   LABEL
   ========================================================= */

.kenzora-material-specs__label {

  margin-bottom: 13px;

  color: var(--kms-accent);

  font-family: inherit;

  font-size: inherit;

  line-height: inherit;

  font-weight: 800;

  letter-spacing: 0.11em;

}


/* =========================================================
   MATERIAL TITLE
   ========================================================= */

.kenzora-material-specs__material-body h3 {

  margin: 0 0 21px;

  padding: 0;

  color: #ffffff;

  font-family: inherit;

  font-size: clamp(34px, 3.5vw, 54px);

  line-height: 0.98;

  font-weight: 800;

  letter-spacing: -0.035em;

}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.kenzora-material-specs__material-body > p {

  max-width: 455px;

  margin: 0;

  color: rgba(255,255,255,0.68);

  font-family: inherit;

  font-size: inherit;

  line-height: 1.75;

}


/* =========================================================
   OPTIONS
   ========================================================= */

.kenzora-material-specs__choices {

  display: flex;

  flex-wrap: wrap;

  gap: 10px 0;

  margin-top: 30px;

}


.kenzora-material-specs__choices span {

  color: rgba(255,255,255,0.91);

  font-family: inherit;

  font-size: inherit;

  line-height: 1.4;

  font-weight: 700;

}


.kenzora-material-specs__choices span:not(:last-child)::after {

  content: "•";

  display: inline-block;

  margin: 0 13px;

  color: var(--kms-accent);

}


/* =========================================================
   CENTER
   ========================================================= */

.kenzora-material-specs__center {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}


.kenzora-material-specs__center::before {

  content: "";

  position: absolute;

  top: 0;

  bottom: 0;

  left: 50%;

  width: 1px;

  background:
    rgba(255,255,255,0.13);

  transform: translateX(-50%);

}


/* =========================================================
   CENTER CIRCLE
   ========================================================= */

.kenzora-material-specs__center-circle {

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 145px;

  height: 145px;

  border:
    1px solid rgba(255,255,255,0.32);

  border-radius: 50%;

  background: var(--kms-primary);

  text-align: center;

}


.kenzora-material-specs__center-circle::before {

  content: "";

  position: absolute;

  inset: 10px;

  border:
    1px solid var(--kms-accent);

  border-radius: 50%;

}


.kenzora-material-specs__center-circle span,
.kenzora-material-specs__center-circle strong,
.kenzora-material-specs__center-circle small {

  position: relative;

  z-index: 2;

}


.kenzora-material-specs__center-circle span {

  color: rgba(255,255,255,0.55);

  font-family: inherit;

  font-size: 9px;

  line-height: 1;

  font-weight: 800;

  letter-spacing: 0.16em;

}


.kenzora-material-specs__center-circle strong {

  margin-top: 8px;

  color: #ffffff;

  font-family: inherit;

  font-size: 17px;

  line-height: 1;

  font-weight: 800;

  letter-spacing: 0.04em;

}


.kenzora-material-specs__center-circle small {

  margin-top: 8px;

  color: var(--kms-accent);

  font-family: inherit;

  font-size: 8px;

  line-height: 1;

  font-weight: 800;

  letter-spacing: 0.14em;

}


/* =========================================================
   SUPPORTING SPECIFICATIONS
   ========================================================= */

.kenzora-material-specs__support {

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  border-bottom:
    1px solid rgba(255,255,255,0.17);

}


.kenzora-material-specs__support-item {

  display: grid;

  grid-template-columns:
    42px minmax(0,1fr);

  gap: 18px;

  padding: 38px 35px 38px 0;

}


.kenzora-material-specs__support-item:not(:last-child) {

  margin-right: 35px;

  border-right:
    1px solid rgba(255,255,255,0.14);

}


.kenzora-material-specs__support-number {

  color: var(--kms-accent);

  font-family: inherit;

  font-size: inherit;

  line-height: 1.2;

  font-weight: 800;

}


.kenzora-material-specs__support-content h4 {

  margin: 0 0 9px;

  padding: 0;

  color: #ffffff;

  font-family: inherit;

  font-size: 20px;

  line-height: 1.2;

  font-weight: 800;

}


.kenzora-material-specs__support-content p {

  margin: 0;

  color: rgba(255,255,255,0.62);

  font-family: inherit;

  font-size: inherit;

  line-height: 1.7;

}


/* =========================================================
   MATERIAL TRANSPARENCY
   ========================================================= */

.kenzora-material-specs__transparency {

  display: grid;

  grid-template-columns:
    48px minmax(0,1fr);

  gap: 19px;

  align-items: start;

  max-width: 1050px;

  margin-top: 38px;

}


.kenzora-material-specs__transparency-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 43px;

  height: 43px;

  border-radius: 50%;

  background: var(--kms-accent);

  color: var(--kms-primary);

  font-family: Arial, sans-serif;

  font-size: 20px;

  line-height: 1;

  font-weight: 800;

}


.kenzora-material-specs__transparency-label {

  margin-bottom: 6px;

  color: var(--kms-accent);

  font-family: inherit;

  font-size: inherit;

  line-height: inherit;

  font-weight: 800;

  letter-spacing: 0.1em;

}


.kenzora-material-specs__transparency-content p {

  max-width: 950px;

  margin: 0;

  color: rgba(255,255,255,0.70);

  font-family: inherit;

  font-size: inherit;

  line-height: 1.75;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .kenzora-material-specs {

    padding: 75px 0 70px;

  }


  .kenzora-material-specs__wrap {

    max-width: 100% !important;

    padding-left: 30px;

    padding-right: 30px;

  }


  .kenzora-material-specs__header {

    gap: 50px;

  }


  .kenzora-material-specs__main {

    grid-template-columns:
      minmax(0,1fr)
      120px
      minmax(0,1fr);

  }


  .kenzora-material-specs__material {

    padding: 50px 28px;

  }


  .kenzora-material-specs__support-item {

    padding-right: 20px;

  }


  .kenzora-material-specs__support-item:not(:last-child) {

    margin-right: 20px;

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .kenzora-material-specs {

    width: 100vw !important;

    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;

    margin-right: calc(50% - 50vw) !important;

    padding: 58px 0 55px;

  }


  .kenzora-material-specs__wrap {

    width: 100% !important;

    max-width: 100% !important;

    padding-left: 17px;

    padding-right: 17px;

  }


  /* HEADER */

  .kenzora-material-specs__header {

    display: block;

    padding-bottom: 45px;

  }


  .kenzora-material-specs__header h2 {

    font-size: clamp(40px, 11vw, 58px);

  }


  .kenzora-material-specs__header-copy {

    margin-top: 25px;

    padding: 0;

  }


  /* MAIN */

  .kenzora-material-specs__main {

    display: block;

  }


  .kenzora-material-specs__material {

    min-height: auto;

    grid-template-columns:
      42px minmax(0,1fr);

    gap: 15px;

    padding: 38px 0;

  }


  .kenzora-material-specs__material:first-child {

    border-right: 0;

    border-bottom:
      1px solid rgba(255,255,255,0.14);

  }


  .kenzora-material-specs__material:last-child {

    border-left: 0;

  }


  .kenzora-material-specs__material-body h3 {

    font-size: 37px;

  }


  /* CENTER */

  .kenzora-material-specs__center {

    min-height: 115px;

    border-bottom:
      1px solid rgba(255,255,255,0.14);

  }


  .kenzora-material-specs__center::before {

    display: none;

  }


  .kenzora-material-specs__center-circle {

    width: 105px;

    height: 105px;

  }


  .kenzora-material-specs__center-circle::before {

    inset: 8px;

  }


  /* SUPPORT */

  .kenzora-material-specs__support {

    display: block;

  }


  .kenzora-material-specs__support-item {

    grid-template-columns:
      38px minmax(0,1fr);

    padding: 27px 0;

  }


  .kenzora-material-specs__support-item:not(:last-child) {

    margin-right: 0;

    border-right: 0;

    border-bottom:
      1px solid rgba(255,255,255,0.13);

  }


  /* TRANSPARENCY */

  .kenzora-material-specs__transparency {

    grid-template-columns:
      43px minmax(0,1fr);

    gap: 14px;

    margin-top: 28px;

  }


  .kenzora-material-specs__transparency-icon {

    width: 40px;

    height: 40px;

  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .kenzora-material-specs {

    padding: 48px 0;

  }


  .kenzora-material-specs__wrap {

    padding-left: 14px;

    padding-right: 14px;

  }


  .kenzora-material-specs__header h2 {

    font-size: 37px;

  }


  .kenzora-material-specs__material-body h3 {

    font-size: 33px;

  }


  .kenzora-material-specs__choices {

    display: block;

  }


  .kenzora-material-specs__choices span {

    display: inline-block;

    margin-bottom: 7px;

  }


  .kenzora-material-specs__choices span:not(:last-child)::after {

    margin-left: 9px;

    margin-right: 9px;

  }

}
