/* ================== our collection h2 heading + why choose us ok==================1.0 */

/* ================== our collection h2==================1.0 */

/* =========================================================
   KENZORA — FEATURED SOFA CATEGORY HEADING
   Designed to sit directly above WooCommerce products
   ========================================================= */

.kenzora-featured-sofas-heading {

  --k-primary: var(
    --e-global-color-primary,
    #1f2328
  );

  --k-secondary: var(
    --e-global-color-secondary,
    #7d8f2a
  );

  width: 100%;

  margin: 0;

  padding: 0;

  font-family: inherit;

  color: #111111;

  box-sizing: border-box;
}


/* =========================================================
   SAFE BOX SIZING
   ========================================================= */

.kenzora-featured-sofas-heading *,
.kenzora-featured-sofas-heading *::before,
.kenzora-featured-sofas-heading *::after {

  box-sizing: border-box;
}


/* =========================================================
   INNER
   ========================================================= */

.kenzora-featured-sofas-heading__inner {

  width: 100%;

  max-width: 1440px;

  margin: 0 auto;
}


/* =========================================================
   TOP ROW
   ========================================================= */

.kenzora-featured-sofas-heading__top {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 30px;

  width: 100%;
}


/* =========================================================
   HEADING
   ========================================================= */

.kenzora-featured-sofas-heading__heading {

  min-width: 0;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.kenzora-featured-sofas-heading__eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 14px;

  font-size: inherit;

  line-height: inherit;

  font-weight: 700;

  color: var(--k-secondary);

  letter-spacing: 0.10em;
}


.kenzora-featured-sofas-heading__eyebrow::before {

  content: "";

  width: 34px;

  height: 2px;

  flex-shrink: 0;

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


/* =========================================================
   H2
   Same visual style as the previous Kenzora section
   ========================================================= */

.kenzora-featured-sofas-heading__title {

  margin: 0;

  padding: 0;

  font-size: clamp(38px, 4.2vw, 62px);

  line-height: 1.08;

  font-weight: 800;

  letter-spacing: -0.025em;

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


/* =========================================================
   VIEW ALL BUTTON
   ========================================================= */

.kenzora-featured-sofas-heading__button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  flex-shrink: 0;

  min-height: 50px;

  padding: 12px 18px 12px 22px;

  background: var(--k-primary);

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

  border-radius: 999px;

  color: #ffffff;

  font-family: inherit;

  font-size: inherit;

  line-height: 1.2;

  font-weight: 700;

  text-decoration: none;

  white-space: nowrap;

  box-shadow:
    0 8px 20px rgba(31, 35, 40, 0.12);

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}


/* =========================================================
   BUTTON HOVER
   ========================================================= */

.kenzora-featured-sofas-heading__button:hover {

  background: var(--k-secondary);

  border-color: var(--k-secondary);

  color: #ffffff;

  transform: translateY(-2px);

  box-shadow:
    0 12px 26px rgba(31, 35, 40, 0.16);
}


/* =========================================================
   ARROW
   ========================================================= */

.kenzora-featured-sofas-heading__arrow {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 27px;

  height: 27px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.14);

  font-size: 18px;

  line-height: 1;

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}


.kenzora-featured-sofas-heading__button:hover
.kenzora-featured-sofas-heading__arrow {

  transform: translateX(3px);

  background: rgba(255, 255, 255, 0.22);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 767px) {

  .kenzora-featured-sofas-heading__top {

    align-items: flex-start;

    flex-direction: column;

    gap: 20px;
  }


  .kenzora-featured-sofas-heading__title {

    font-size: clamp(34px, 8vw, 48px);
  }


  /* Slightly smaller mobile button */

  .kenzora-featured-sofas-heading__button {

    min-height: 44px;

    padding: 10px 15px 10px 18px;

    gap: 9px;

    font-size: 0.94em;
  }


  .kenzora-featured-sofas-heading__arrow {

    width: 25px;

    height: 25px;

    font-size: 16px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .kenzora-featured-sofas-heading__title {

    font-size: 34px;

    line-height: 1.08;
  }


  .kenzora-featured-sofas-heading__button {

    width: 100%;

    justify-content: space-between;

    min-height: 44px;

    padding-left: 18px;

    padding-right: 12px;

    font-size: 0.92em;
  }


  .kenzora-featured-sofas-heading__arrow {

    width: 25px;

    height: 25px;

    font-size: 16px;
  }

}


/* ================== owhy choose us==================1.0 */

/* =========================================================
   KENZORA — UNIVERSAL SOFA BENEFITS
   FULL-WIDTH BLUE-GREY SECTION
   ========================================================= */

.kenzora-sofa-why {

  /* =========================================
     CHANGE TO 2 FOR TWO CARDS PER ROW
     ========================================= */

  --k-columns: 3;


  /* =========================================
     KENZORA BRAND
     ========================================= */

  --k-primary: var(
    --e-global-color-primary,
    #1f2328
  );

  --k-secondary: var(
    --e-global-color-secondary,
    #7d8f2a
  );


  /* =========================================
     SECTION COLOURS
     ========================================= */

  --k-section-bg: #e1edeb;

  --k-card-bg: #ffffff;

  --k-border: rgba(31, 35, 40, 0.10);


  /* =========================================
     FULL WIDTH
     ========================================= */

  width: 100vw;

  max-width: none;

  margin-left: calc(50% - 50vw);

  margin-right: calc(50% - 50vw);

  padding: 82px 0 88px;

  background: var(--k-section-bg);

  font-family: inherit;

  color: #111111;

  box-sizing: border-box;

  overflow: hidden;
}


/* =========================================================
   SAFE BOX SIZING
   ========================================================= */

.kenzora-sofa-why *,
.kenzora-sofa-why *::before,
.kenzora-sofa-why *::after {

  box-sizing: border-box;
}


/* =========================================================
   CONTENT WIDTH
   ========================================================= */

.kenzora-sofa-why__inner {

  width: 100%;

  max-width: 1440px;

  margin: 0 auto;

  padding: 0 30px;
}


/* =========================================================
   HEADER
   ========================================================= */

.kenzora-sofa-why__header {

  width: 100%;

  margin-bottom: 48px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.kenzora-sofa-why__eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 14px;

  font-size: inherit;

  line-height: inherit;

  font-weight: 700;

  color: var(--k-secondary);

  letter-spacing: 0.10em;
}


.kenzora-sofa-why__eyebrow::before {

  content: "";

  width: 34px;

  height: 2px;

  flex-shrink: 0;

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


/* =========================================================
   MAIN TITLE
   ========================================================= */

.kenzora-sofa-why__title {

  margin: 0 0 20px;

  padding: 0;

  font-size: clamp(38px, 4.2vw, 62px);

  line-height: 1.08;

  font-weight: 800;

  letter-spacing: -0.025em;

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


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

.kenzora-sofa-why__intro {

  width: 100%;

  max-width: 1180px;

  margin: 0;

  padding: 0;

  font-size: inherit;

  line-height: 1.8;

  color: #111111;
}


/* =========================================================
   FEATURE INTRO STRIP
   ========================================================= */

.kenzora-sofa-why__feature-intro {

  display: grid;

  grid-template-columns:
    auto
    minmax(260px, 0.70fr)
    minmax(420px, 1.30fr);

  gap: 22px;

  align-items: center;

  width: 100%;

  margin-bottom: 26px;

  padding: 25px 28px;

  background: rgba(255, 255, 255, 0.72);

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

  border-radius: 18px;
}


/* =========================================================
   FEATURE ACCENT
   ========================================================= */

.kenzora-sofa-why__feature-intro-line {

  width: 4px;

  height: 58px;

  border-radius: 4px;
  
  font-family: inherit;

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


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

.kenzora-sofa-why__label {

  display: block;

  margin-bottom: 5px;

  font-size: inherit;

  line-height: inherit;

  font-weight: 700;

  color: var(--k-secondary);

  letter-spacing: 0.08em;
}


/* =========================================================
   FEATURE TITLE
   ========================================================= */

.kenzora-sofa-why__feature-title {

  margin: 0;

  padding: 0;

  font-size: inherit;

  line-height: 1.35;

  font-weight: 750;

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


/* =========================================================
   FEATURE DESCRIPTION
   ========================================================= */

.kenzora-sofa-why__feature-description {

  margin: 0;

  padding: 0;

  font-size: inherit;

  line-height: 1.75;

  color: #111111;
}


/* =========================================================
   FEATURE GRID
   ========================================================= */

.kenzora-sofa-why__features {

  display: grid;

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

  gap: 18px;

  width: 100%;
}


/* =========================================================
   CARD
   ========================================================= */

.kenzora-sofa-why__card {

  display: flex;

  align-items: flex-start;

  gap: 15px;

  min-width: 0;

  padding: 26px;

  background: var(--k-card-bg);

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

  border-radius: 17px;

  box-shadow:
    0 8px 24px rgba(31, 35, 40, 0.07);

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


/* =========================================================
   CARD HOVER
   ========================================================= */

.kenzora-sofa-why__card:hover {

  transform: translateY(-4px);

  border-color: rgba(31, 35, 40, 0.22);

  box-shadow:
    0 16px 34px rgba(31, 35, 40, 0.12);
}


/* =========================================================
   NUMBER
   ========================================================= */

.kenzora-sofa-why__card-number {

  display: flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 38px;

  width: 38px;

  height: 38px;

  border-radius: 10px;

  background: var(--k-primary);

  color: #ffffff;

  font-size: inherit;

  line-height: 1;

  font-weight: 800;
}


/* =========================================================
   CONTENT
   ========================================================= */

.kenzora-sofa-why__card-content {

  min-width: 0;
}


/* =========================================================
   CARD TITLE
   ========================================================= */

.kenzora-sofa-why__card h3 {

  margin: 0 0 8px;

  padding: 0;

  font-size: inherit;

  line-height: 1.35;

  font-weight: 750;

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


/* =========================================================
   CARD TEXT
   ========================================================= */

.kenzora-sofa-why__card p {

  margin: 0;

  padding: 0;

  font-size: inherit;

  line-height: 1.7;

  color: #111111;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .kenzora-sofa-why {

    padding: 68px 0 74px;
  }


  .kenzora-sofa-why__inner {

    padding: 0 24px;
  }


  .kenzora-sofa-why__feature-intro {

    grid-template-columns:
      auto
      1fr;
  }


  .kenzora-sofa-why__feature-description {

    grid-column: 2;
  }


  .kenzora-sofa-why__features {

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

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .kenzora-sofa-why {

    padding: 55px 0 60px;
  }


  .kenzora-sofa-why__inner {

    padding: 0 18px;
  }


  .kenzora-sofa-why__header {

    margin-bottom: 34px;
  }


  .kenzora-sofa-why__title {

    font-size: clamp(34px, 8vw, 48px);

    line-height: 1.1;
  }


  .kenzora-sofa-why__intro {

    line-height: 1.75;
  }


  .kenzora-sofa-why__feature-intro {

    display: block;

    padding: 23px;

    margin-bottom: 20px;
  }


  .kenzora-sofa-why__feature-intro-line {

    width: 38px;

    height: 4px;

    margin-bottom: 16px;
  }


  .kenzora-sofa-why__feature-description {

    margin-top: 14px;
  }


  .kenzora-sofa-why__features {

    grid-template-columns: 1fr;

    gap: 14px;
  }


  .kenzora-sofa-why__card {

    padding: 21px;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .kenzora-sofa-why {

    padding: 45px 0 50px;
  }


  .kenzora-sofa-why__inner {

    padding: 0 15px;
  }


  .kenzora-sofa-why__title {

    font-size: 34px;

    line-height: 1.08;
  }


  .kenzora-sofa-why__feature-intro {

    padding: 20px;

    border-radius: 15px;
  }


  .kenzora-sofa-why__card {

    padding: 19px;

    gap: 12px;

    border-radius: 15px;
  }


  .kenzora-sofa-why__card-number {

    flex-basis: 34px;

    width: 34px;

    height: 34px;
  }

}