/* =========================================================
   GLOBAL
   ========================================================= */

.kd-pdp-secondary {

  --kd-primary: #159A9C;
  --kd-primary-dark: #117F81;
  --kd-primary-light: #EAF7F7;

  --kd-dark: #27323C;
  --kd-text: #4E5963;
  --kd-muted: #7A858E;

  --kd-border: #E2EAEC;
  --kd-bg: #F7F9FA;
  --kd-white: #FFFFFF;

  width: 100%;
  max-width: 100%;

  margin: 0;
  padding: 0;

  color: var(--kd-dark);
  background: #FFFFFF;

  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

  line-height: 1.6;

  box-sizing: border-box;

  overflow-x: hidden;
}


.kd-pdp-secondary *,
.kd-pdp-secondary *::before,
.kd-pdp-secondary *::after {

  box-sizing: border-box;
}


/* =========================================================
   COMMON CONTAINER
   ========================================================= */

.kd-pdp-secondary-container {

  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  max-width: 100%;

  margin:
    0 auto;
}


/* =========================================================
   COMMON LABEL
   ========================================================= */

.kd-pdp-secondary-label {

  display: block;

  margin-bottom: 9px;

  color:
    var(--kd-primary);

  font-size: 12px;

  line-height: 1.3;

  font-weight: 700;

  letter-spacing: 1.7px;

  text-transform: uppercase;
}


/* =========================================================
   COMMON TITLE
   ========================================================= */

.kd-pdp-secondary-title {

  margin:
    0 0 12px;

  color:
    var(--kd-dark);

  font-size: 34px;

  line-height: 1.2;

  font-weight: 700;

  letter-spacing: -.4px;
}


/* =========================================================
   COMMON INTRO
   ========================================================= */

.kd-pdp-secondary-intro {

  margin: 0;

  color:
    var(--kd-text);

  font-size: 15px;

  line-height: 1.75;

  overflow-wrap: anywhere;
}


/* =========================================================
   01 — APPLICATIONS
   ========================================================= */

.kd-pdp-applications {

  width: 100%;

  padding:
    70px 0;

  background:
    var(--kd-bg);
}


.kd-pdp-applications-header {

  max-width: 720px;

  margin:
    0 0 38px;
}


/* ---------------------------------------------------------
   APPLICATION GRID
   --------------------------------------------------------- */

.kd-pdp-applications-grid {

  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 14px;

  width: 100%;
}


/* ---------------------------------------------------------
   APPLICATION CARD
   --------------------------------------------------------- */

.kd-pdp-application-card {

  position: relative;

  min-width: 0;

  min-height: 205px;

  padding:
    25px 22px;

  background:
    var(--kd-white);

  border:
    1px solid var(--kd-border);

  border-radius:
    15px;

  overflow: hidden;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}


.kd-pdp-application-card::before {

  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 100%;
  height: 3px;

  background:
    var(--kd-primary);
}


.kd-pdp-application-card:hover {

  transform:
    translateY(-2px);

  border-color:
    #D8E5E6;

  box-shadow:
    0 8px 24px
    rgba(
      39,
      50,
      60,
      .06
    );
}


/* ---------------------------------------------------------
   APPLICATION NUMBER
   --------------------------------------------------------- */

.kd-pdp-application-number {

  display: inline-flex;

  justify-content: center;
  align-items: center;

  width: 31px;
  height: 31px;

  margin-bottom:
    17px;

  border-radius:
    8px;

  background:
    var(--kd-primary-light);

  color:
    var(--kd-primary-dark);

  font-size: 10px;

  line-height: 1;

  font-weight: 800;
}


.kd-pdp-application-card h3 {

  margin:
    0 0 8px;

  color:
    var(--kd-dark);

  font-size: 17px;

  line-height: 1.35;

  font-weight: 700;
}


.kd-pdp-application-card p {

  margin: 0;

  color:
    var(--kd-text);

  font-size: 13px;

  line-height: 1.7;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   02 — CUSTOMIZATION
   ========================================================= */

.kd-pdp-customization {

  width: 100%;

  padding:
    70px 0;

  background:
    var(--kd-white);
}


.kd-pdp-customization-header {

  max-width: 760px;

  margin:
    0 0 34px;
}


/* ---------------------------------------------------------
   CUSTOMIZATION GRID
   --------------------------------------------------------- */

.kd-pdp-customization-grid {

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 14px;

  width: 100%;
}


/* ---------------------------------------------------------
   CUSTOMIZATION CARD
   --------------------------------------------------------- */

.kd-pdp-customization-card {

  position: relative;

  min-width: 0;

  min-height: 175px;

  padding:
    25px 22px 23px;

  background:
    var(--kd-bg);

  border:
    1px solid var(--kd-border);

  border-radius:
    15px;

  overflow: hidden;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}


.kd-pdp-customization-card::before {

  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 100%;
  height: 3px;

  background:
    var(--kd-primary);
}


.kd-pdp-customization-card:hover {

  transform:
    translateY(-2px);

  border-color:
    #D6E4E6;

  box-shadow:
    0 8px 24px
    rgba(
      39,
      50,
      60,
      .06
    );
}


/* ---------------------------------------------------------
   CUSTOMIZATION NUMBER
   --------------------------------------------------------- */

.kd-pdp-customization-number {

  display: inline-flex;

  justify-content: center;
  align-items: center;

  width: 31px;
  height: 31px;

  margin-bottom:
    16px;

  border-radius:
    8px;

  background:
    var(--kd-primary-light);

  color:
    var(--kd-primary-dark);

  font-size: 10px;

  line-height: 1;

  font-weight: 800;
}


.kd-pdp-customization-card h3 {

  margin:
    0 0 7px;

  color:
    var(--kd-dark);

  font-size: 17px;

  line-height: 1.35;

  font-weight: 700;
}


.kd-pdp-customization-card p {

  margin: 0;

  color:
    var(--kd-text);

  font-size: 13px;

  line-height: 1.7;

  overflow-wrap:
    anywhere;
}


/* ---------------------------------------------------------
   CUSTOMIZATION NOTE
   --------------------------------------------------------- */

.kd-pdp-customization-note {

  margin-top:
    18px;

  padding:
    16px 18px;

  border-radius:
    12px;

  background:
    var(--kd-primary-light);

  color:
    var(--kd-dark);

  font-size: 13px;

  line-height: 1.65;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   03 — FAQ
   ========================================================= */

.kd-pdp-faq {

  width: 100%;

  padding:
    70px 0;

  background:
    var(--kd-bg);
}


.kd-pdp-faq-header {

  max-width: 760px;

  margin:
    0 0 38px;

  text-align:
    left;
}


.kd-pdp-faq-list {

  width: 100%;

  max-width: 980px;

  margin: 0;

  padding: 0;

  border-top:
    1px solid var(--kd-border);
}


.kd-pdp-faq-item {

  width: 100%;

  border-bottom:
    1px solid var(--kd-border);
}


/* ---------------------------------------------------------
   FAQ QUESTION
   --------------------------------------------------------- */

.kd-pdp-faq-question {

  display: flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap: 20px;

  width: 100%;

  margin: 0;

  padding:
    20px 0;

  border: 0;

  background:
    transparent;

  color:
    var(--kd-dark);

  font-family: inherit;

  font-size: 15px;

  line-height: 1.5;

  font-weight: 700;

  text-align: left;

  cursor: pointer;
}


.kd-pdp-faq-question:hover {

  color:
    var(--kd-primary-dark);
}


/* ---------------------------------------------------------
   FAQ ICON
   --------------------------------------------------------- */

.kd-pdp-faq-icon {

  position: relative;

  flex:
    0 0 28px;

  width: 28px;
  height: 28px;

  border-radius:
    50%;

  background:
    var(--kd-primary-light);
}


.kd-pdp-faq-icon::before,
.kd-pdp-faq-icon::after {

  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 10px;
  height: 1.5px;

  background:
    var(--kd-primary);

  transform:
    translate(
      -50%,
      -50%
    );
}


.kd-pdp-faq-icon::after {

  transform:
    translate(
      -50%,
      -50%
    )
    rotate(90deg);
}


/* ACTIVE FAQ */

.kd-pdp-faq-item.active
.kd-pdp-faq-icon::after {

  opacity: 0;
}


/* ---------------------------------------------------------
   FAQ ANSWER
   --------------------------------------------------------- */

.kd-pdp-faq-answer {

  display: none;

  max-width: 850px;

  padding:
    0 55px 21px 0;

  color:
    var(--kd-text);

  font-size: 13px;

  line-height: 1.8;

  overflow-wrap:
    anywhere;
}


.kd-pdp-faq-item.active
.kd-pdp-faq-answer {

  display: block;
}


/* =========================================================
   04 — INQUIRY
   ========================================================= */

.kd-pdp-inquiry {

  width: 100%;

  padding:
    65px 0;

  background:
    #F4FAFA;
}


/* ---------------------------------------------------------
   INQUIRY BOX
   --------------------------------------------------------- */

.kd-pdp-inquiry-box {

  width: 100%;

  padding:
    43px;

  background:
    var(--kd-white);

  border:
    1px solid var(--kd-border);

  border-radius:
    20px;

  box-shadow:
    0 8px 28px
    rgba(
      39,
      50,
      60,
      .05
    );
}


/* ---------------------------------------------------------
   INQUIRY TITLE
   --------------------------------------------------------- */

.kd-pdp-inquiry-title {

  margin:
    0 0 12px;

  color:
    var(--kd-dark);

  font-size: 35px;

  line-height: 1.18;

  font-weight: 700;

  letter-spacing: -.5px;
}


/* ---------------------------------------------------------
   INQUIRY DESCRIPTION
   --------------------------------------------------------- */

.kd-pdp-inquiry-description {

  max-width: 700px;

  margin:
    0 0 24px;

  color:
    var(--kd-text);

  font-size: 15px;

  line-height: 1.8;

  overflow-wrap:
    anywhere;
}


/* ---------------------------------------------------------
   INQUIRY BUTTONS
   --------------------------------------------------------- */

.kd-pdp-inquiry-buttons {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  width: 100%;
}


.kd-pdp-inquiry-btn {

  display: inline-flex;

  justify-content:
    center;

  align-items:
    center;

  min-height:
    48px;

  padding:
    0 25px;

  border-radius:
    999px;

  font-size: 13px;

  line-height: 1;

  font-weight: 700;

  text-decoration: none;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}


.kd-pdp-inquiry-btn:hover {

  transform:
    translateY(-1px);
}


/* PRIMARY */

.kd-pdp-inquiry-btn-primary {

  background:
    var(--kd-primary);

  border:
    1px solid var(--kd-primary);

  color:
    #FFFFFF;
}


.kd-pdp-inquiry-btn-primary:hover {

  background:
    var(--kd-primary-dark);

  border-color:
    var(--kd-primary-dark);

  color:
    #FFFFFF;
}


/* SECONDARY */

.kd-pdp-inquiry-btn-secondary {

  background:
    #FFFFFF;

  border:
    1px solid #CBD4D8;

  color:
    var(--kd-dark);
}


.kd-pdp-inquiry-btn-secondary:hover {

  border-color:
    var(--kd-primary);

  color:
    var(--kd-primary);
}


/* ---------------------------------------------------------
   INQUIRY NOTE
   --------------------------------------------------------- */

.kd-pdp-inquiry-note {

  margin:
    11px 0 0;

  color:
    var(--kd-muted);

  font-size: 11px;

  line-height: 1.6;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   TABLET
   768px – 1024px
   ========================================================= */

@media (max-width: 1024px) {

  .kd-pdp-secondary-container {

    width:
      min(
        92%,
        850px
      );
  }


  /* APPLICATION */

  .kd-pdp-applications {

    padding:
      60px 0;
  }


  .kd-pdp-applications-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 12px;
  }


  /* CUSTOMIZATION */

  .kd-pdp-customization {

    padding:
      60px 0;
  }


  .kd-pdp-customization-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 12px;
  }


  /* FAQ */

  .kd-pdp-faq {

    padding:
      60px 0;
  }


  .kd-pdp-faq-list {

    max-width: 100%;
  }


  /* INQUIRY */

  .kd-pdp-inquiry {

    padding:
      58px 0;
  }


  .kd-pdp-inquiry-box {

    padding:
      36px;
  }

}


/* =========================================================
   MOBILE
   <= 767px
   ========================================================= */

@media (max-width: 767px) {

  .kd-pdp-secondary-container {

    width:
      calc(100% - 28px);

    max-width: none;
  }


  /* =======================================================
     APPLICATION
     ======================================================= */

  .kd-pdp-applications {

    padding:
      46px 0;
  }


  .kd-pdp-applications-header {

    margin-bottom:
      27px;
  }


  .kd-pdp-secondary-label {

    margin-bottom:
      8px;

    font-size:
      10px;
  }


  .kd-pdp-secondary-title {

    margin-bottom:
      10px;

    font-size:
      28px;

    line-height:
      1.22;
  }


  .kd-pdp-secondary-intro {

    font-size:
      14px;

    line-height:
      1.7;
  }


  .kd-pdp-applications-grid {

    grid-template-columns:
      1fr;

    gap:
      9px;
  }


  .kd-pdp-application-card {

    min-height:
      auto;

    padding:
      20px 18px;
  }


  .kd-pdp-application-number {

    width:
      29px;

    height:
      29px;

    margin-bottom:
      14px;
  }


  .kd-pdp-application-card h3 {

    font-size:
      16px;
  }


  .kd-pdp-application-card p {

    font-size:
      12px;

    line-height:
      1.65;
  }


  /* =======================================================
     CUSTOMIZATION
     ======================================================= */

  .kd-pdp-customization {

    padding:
      46px 0;
  }


  .kd-pdp-customization-header {

    margin-bottom:
      27px;
  }


  .kd-pdp-customization-grid {

    grid-template-columns:
      1fr;

    gap:
      9px;
  }


  .kd-pdp-customization-card {

    min-height:
      auto;

    padding:
      20px 18px;
  }


  .kd-pdp-customization-number {

    width:
      29px;

    height:
      29px;

    margin-bottom:
      14px;
  }


  .kd-pdp-customization-card h3 {

    font-size:
      16px;
  }


  .kd-pdp-customization-card p {

    font-size:
      12px;

    line-height:
      1.65;
  }


  .kd-pdp-customization-note {

    margin-top:
      12px;

    padding:
      14px 15px;

    font-size:
      12px;

    line-height:
      1.65;
  }


  /* =======================================================
     FAQ
     ======================================================= */

  .kd-pdp-faq {

    padding:
      46px 0;
  }


  .kd-pdp-faq-header {

    margin-bottom:
      27px;
  }


  .kd-pdp-faq-question {

    gap:
      12px;

    padding:
      17px 0;

    font-size:
      13px;

    line-height:
      1.55;
  }


  .kd-pdp-faq-icon {

    flex-basis:
      27px;

    width:
      27px;

    height:
      27px;
  }


  .kd-pdp-faq-answer {

    padding:
      0 40px 18px 0;

    font-size:
      12px;

    line-height:
      1.75;
  }


  /* =======================================================
     INQUIRY
     ======================================================= */

  .kd-pdp-inquiry {

    padding:
      45px 0;
  }


  .kd-pdp-inquiry-box {

    padding:
      28px 20px;

    border-radius:
      17px;
  }


  .kd-pdp-inquiry-title {

    margin-bottom:
      10px;

    font-size:
      28px;

    line-height:
      1.22;
  }


  .kd-pdp-inquiry-description {

    margin-bottom:
      20px;

    font-size:
      14px;

    line-height:
      1.7;
  }


  .kd-pdp-inquiry-buttons {

    flex-direction:
      column;

    gap:
      8px;
  }


  .kd-pdp-inquiry-btn {

    width:
      100%;

    min-height:
      46px;

    padding:
      0 18px;

    font-size:
      13px;
  }


  .kd-pdp-inquiry-note {

    font-size:
      10.5px;

    text-align:
      center;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   <= 380px
   ========================================================= */

@media (max-width: 380px) {

  .kd-pdp-secondary-container {

    width:
      calc(100% - 22px);
  }


  .kd-pdp-secondary-title {

    font-size:
      26px;
  }


  .kd-pdp-application-card {

    padding:
      18px 16px;
  }


  .kd-pdp-customization-card {

    padding:
      18px 16px;
  }


  .kd-pdp-faq-question {

    font-size:
      12.5px;
  }


  .kd-pdp-faq-answer {

    padding-right:
      34px;

    font-size:
      11.5px;
  }


  .kd-pdp-inquiry-box {

    padding:
      24px 17px;
  }


  .kd-pdp-inquiry-title {

    font-size:
      26px;
  }


  .kd-pdp-inquiry-description {

    font-size:
      13px;
  }

}