/* ============================================
   BONNELI MAX HOMEPAGE REDESIGN STYLES
   Matched to Figma design
   ============================================ */

html {
  scroll-behavior: smooth;
}

/* ---- PRODUKTI / CATEGORY CARDS SECTION ---- */
.produkti-section {
  background: #f5f5f5;
  padding: 110px 40px 100px;
}

.produkti-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.produkti-header {
  text-align: center;
  margin-bottom: 56px;
}

.produkti-eyebrow {
  font-family: var(--bm-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--bm-dark);
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 24px;
}

.produkti-title {
  font-family: var(--bm-font);
  font-size: 52px;
  font-weight: 800;
  color: var(--bm-dark);
  line-height: 1.15;
  margin: 0 auto 24px;
  max-width: 1000px;
}

.produkti-desc {
  font-family: var(--bm-font);
  font-size: 15px;
  color: var(--bm-dark);
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto;
}

.produkti-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.produkt-card {
  background: var(--bm-white);
  border-radius: 22px;
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
}

.produkt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
}

.produkt-card-image {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  height: 290px;
  background: #f0f0f0;
}

.produkt-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}

.produkt-card:hover .produkt-card-image img {
  transform: scale(1.04);
}

.produkt-card-body {
  flex: 1;
  padding: 28px 18px 30px;
  text-align: center;
}

.produkt-card-title {
  font-family: var(--bm-font);
  font-size: 30px;
  font-weight: 800;
  color: var(--bm-dark);
  margin: 0 0 16px;
  line-height: 1.2;
}

.produkt-card-desc {
  font-family: var(--bm-font);
  font-size: 15px;
  color: var(--bm-dark);
  line-height: 1.65;
  margin: 0;
}

.produkt-card-cta {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--bm-green);
  color: var(--bm-white) !important;
  font-family: var(--bm-font);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 20px;
  border-radius: 10px;
  text-decoration: none !important;
  transition: background 0.2s;
}

.produkt-card-cta:hover {
  background: var(--bm-green-hover);
  color: var(--bm-white) !important;
}

@media (max-width: 992px) {
  .produkti-grid {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 500px;
    margin: 0 auto;
  }
  .produkti-title {
    font-size: 36px;
  }
  .produkti-section {
    padding: 80px 20px 70px;
  }
  .produkti-header {
    margin-bottom: 40px;
  }
}

/* ---- BEST-SELLING SETS SECTION ---- */
.best-sets-section {
  background: var(--bm-white);
  padding: 90px 40px;
}

.best-sets-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.best-sets-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
}

.best-sets-titles {
  display: flex;
  flex-direction: column;
}

.best-sets-eyebrow {
  font-family: var(--bm-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--bm-dark);
  margin: 0 0 18px;
}

.best-sets-title {
  font-family: var(--bm-font);
  font-size: 52px;
  font-weight: 800;
  color: var(--bm-dark);
  line-height: 1.1;
  margin: 0;
}

.best-sets-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bm-green);
  color: var(--bm-white) !important;
  padding: 14px 28px;
  border-radius: 10px;
  font-family: var(--bm-font);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.2s;
}

.best-sets-cta:hover {
  background: var(--bm-green-hover);
  color: var(--bm-white) !important;
}

.best-sets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.best-set-card {
  display: block;
  text-decoration: none !important;
  color: inherit;
}

.best-set-card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: #e5e5e5;
}

.best-set-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}

.best-set-card:hover .best-set-card-image img {
  transform: scale(1.04);
}

.best-set-card-title {
  font-family: var(--bm-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--bm-dark);
  margin: 18px 0 0;
}

@media (max-width: 992px) {
  .best-sets-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .best-sets-title {
    font-size: 40px;
  }
  .best-sets-section {
    padding: 70px 20px;
  }
}

@media (max-width: 576px) {
  .best-sets-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
  .best-sets-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .best-sets-title {
    font-size: 34px;
  }
}

/* ---- TRUST STATS (REDESIGN) ---- */
.trust-redesign {
  background: #f5f5f5;
  padding: 80px 40px 70px;
}

.trust-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.trust-redesign-title {
  font-family: var(--bm-font);
  font-size: 28px;
  font-weight: 700;
  color: var(--bm-dark);
  margin: 0 0 50px;
}

.trust-redesign-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.trust-redesign-stat {
  position: relative;
  padding: 0 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.trust-redesign-stat:first-child {
  padding-left: 0;
}

.trust-redesign-stat:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: #d5d5d5;
}

.trust-redesign-number {
  display: block;
  font-family: var(--bm-font);
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  color: #27B853;
}

.trust-redesign-label {
  display: block;
  font-family: var(--bm-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--bm-dark);
}

@media (max-width: 768px) {
  .trust-redesign {
    padding: 60px 20px;
  }
  .trust-redesign-row {
    grid-template-columns: 1fr;
  }
  .trust-redesign-stat {
    padding: 20px 0;
    border-top: 1px solid #d5d5d5;
  }
  .trust-redesign-stat:first-child {
    border-top: none;
    padding-top: 0;
  }
  .trust-redesign-stat:not(:first-child)::before {
    display: none;
  }
  .trust-redesign-number {
    font-size: 56px;
  }
}

/* ---- ADVICE CARDS SECTION ---- */
.advice-section {
  background: #f5f5f5;
  padding: 0 40px 80px;
}

.advice-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.advice-card {
  background: var(--bm-white);
  border-radius: 22px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 18px;
  min-height: 480px;
}

.advice-content {
  padding: 46px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.advice-icon {
  width: 48px;
  height: 48px;
  background: #e6f4eb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #27B853;
  margin-bottom: 24px;
}

.advice-title {
  font-family: var(--bm-font);
  font-size: 36px;
  font-weight: 800;
  color: var(--bm-dark);
  line-height: 1.15;
  margin: 0 0 22px;
}

.advice-text {
  font-family: var(--bm-font);
  font-size: 15px;
  color: var(--bm-dark);
  line-height: 1.65;
  margin: 0 0 28px;
  max-width: 440px;
}

.advice-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bm-green);
  color: var(--bm-white) !important;
  padding: 14px 26px;
  border-radius: 10px;
  font-family: var(--bm-font);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background 0.2s;
}

.advice-cta:hover {
  background: var(--bm-green-hover);
  color: var(--bm-white) !important;
}

.advice-image {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  min-height: 440px;
}

.advice-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.advice-card-reverse .advice-content {
  order: 2;
}

.advice-card-reverse .advice-image {
  order: 1;
}

@media (max-width: 992px) {
  .advice-content {
    padding: 36px 28px;
  }
  .advice-title {
    font-size: 30px;
  }
}

@media (max-width: 768px) {
  .advice-section {
    padding: 0 20px 60px;
  }
  .advice-card,
  .advice-card.advice-card-reverse {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 14px;
  }
  .advice-card-reverse .advice-content {
    order: 2;
  }
  .advice-card-reverse .advice-image {
    order: 1;
  }
  .advice-card .advice-content {
    order: 2;
  }
  .advice-card .advice-image {
    order: 1;
    min-height: 280px;
    height: 280px;
  }
  .advice-card-reverse .advice-image {
    min-height: 280px;
    height: 280px;
  }
  .advice-content {
    padding: 24px 16px 12px;
  }
  .advice-title {
    font-size: 26px;
  }
}

/* ---- QUALITY FEATURES (REDESIGN) ---- */
.quality-redesign {
  background: var(--bm-white);
  padding: 100px 40px 80px;
}

.quality-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.quality-header {
  text-align: center;
  margin-bottom: 80px;
}

.quality-eyebrow {
  font-family: var(--bm-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--bm-dark);
  margin: 0 0 22px;
}

.quality-title {
  font-family: var(--bm-font);
  font-size: 52px;
  font-weight: 800;
  color: var(--bm-dark);
  line-height: 1.15;
  margin: 0 auto 22px;
  max-width: 1000px;
}

.quality-desc {
  font-family: var(--bm-font);
  font-size: 15px;
  color: var(--bm-dark);
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto;
}

.quality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.quality-item {
  text-align: center;
  padding: 12px;
}

.quality-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #27B853;
  margin-bottom: 20px;
}

.quality-item-icon svg {
  display: block;
}

.quality-item-title {
  font-family: var(--bm-font);
  font-size: 20px;
  font-weight: 800;
  color: var(--bm-dark);
  margin: 0 0 18px;
  line-height: 1.3;
}

.quality-item-desc {
  font-family: var(--bm-font);
  font-size: 15px;
  color: var(--bm-dark);
  line-height: 1.65;
  margin: 0;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .quality-redesign {
    padding: 70px 20px 50px;
  }
  .quality-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .quality-title {
    font-size: 34px;
  }
  .quality-header {
    margin-bottom: 50px;
  }
}

/* ---- TESTIMONIAL (REDESIGN) ---- */
.testimonial-redesign {
  background: var(--bm-white);
  padding: 40px 40px 100px;
  border: none;
}

.testimonial-redesign .testimonial-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.testimonial-redesign-item {
  padding: 20px 0;
}

.testimonial-redesign-quote {
  font-family: var(--bm-font);
  font-size: 22px;
  font-weight: 700;
  color: var(--bm-dark);
  line-height: 1.5;
  margin: 0 auto 40px;
  max-width: 780px;
}

.testimonial-redesign-quote::before,
.testimonial-redesign-quote::after { content: none; }

.testimonial-redesign-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.testimonial-redesign-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #d6d6d6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fafafa;
}

.testimonial-redesign-name {
  font-family: var(--bm-font);
  font-size: 15px;
  font-weight: 700;
  color: var(--bm-dark);
}

@media (max-width: 768px) {
  .testimonial-redesign {
    padding: 20px 20px 70px;
  }
  .testimonial-redesign-quote {
    font-size: 18px;
  }
}

/* ---- CTA + STOREFRONT CARD ---- */
.cta-store-section {
  background: #f5f5f5;
  padding: 60px 40px 60px;
}

.cta-store-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.cta-store-card {
  background: var(--bm-white);
  border-radius: 24px;
  padding: 70px 40px 40px;
}

.cta-store-text {
  text-align: center;
  margin-bottom: 50px;
}

.cta-store-title {
  font-family: var(--bm-font);
  font-size: 44px;
  font-weight: 800;
  color: var(--bm-dark);
  line-height: 1.15;
  margin: 0 0 16px;
}

.cta-store-desc {
  font-family: var(--bm-font);
  font-size: 15px;
  color: var(--bm-dark);
  line-height: 1.65;
  margin: 0 auto 30px;
  max-width: 540px;
}

.cta-store-buttons {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cta-store-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bm-green);
  color: var(--bm-white) !important;
  padding: 14px 30px;
  border-radius: 10px;
  font-family: var(--bm-font);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background 0.2s;
}

.cta-store-primary:hover {
  background: var(--bm-green-hover);
  color: var(--bm-white) !important;
}

.cta-store-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bm-green-light);
  color: var(--bm-green) !important;
  padding: 14px 30px;
  border-radius: 10px;
  font-family: var(--bm-font);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background 0.2s;
}

.cta-store-secondary:hover {
  background: #d8dff0;
  color: var(--bm-green) !important;
}

.cta-store-image {
  border-radius: 14px;
  overflow: hidden;
}

.cta-store-image img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .cta-store-section {
    padding: 40px 20px;
  }
  .cta-store-card {
    padding: 40px 20px 20px;
  }
  .cta-store-title {
    font-size: 30px;
  }
}

/* ---- CONTACT (REDESIGN) ---- */
.contact-redesign {
  background: var(--bm-white);
  padding: 80px 40px 100px;
}

.contact-redesign-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.contact-redesign-header {
  margin-bottom: 60px;
}

.contact-redesign-eyebrow {
  font-family: var(--bm-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--bm-dark);
  margin: 0 0 18px;
}

.contact-redesign-title {
  font-family: var(--bm-font);
  font-size: 48px;
  font-weight: 800;
  color: var(--bm-dark);
  line-height: 1.15;
  margin: 0 0 10px;
}

.contact-redesign-desc {
  font-family: var(--bm-font);
  font-size: 15px;
  color: var(--bm-dark);
  margin: 0;
}

.contact-redesign-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.contact-redesign-item {
  text-align: left;
}

.contact-redesign-icon {
  display: flex;
  align-items: center;
  color: #27B853;
  margin-bottom: 22px;
}

.contact-redesign-icon svg {
  display: block;
}

.contact-redesign-item-title {
  font-family: var(--bm-font);
  font-size: 22px;
  font-weight: 800;
  color: var(--bm-dark);
  margin: 0 0 14px;
}

.contact-redesign-item-desc {
  font-family: var(--bm-font);
  font-size: 15px;
  color: var(--bm-dark);
  line-height: 1.6;
  margin: 0 0 26px;
  max-width: 340px;
}

.contact-redesign-link {
  font-family: var(--bm-font);
  font-size: 15px;
  font-weight: 400;
  color: var(--bm-green);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.contact-redesign-link:hover {
  color: var(--bm-green-hover);
}

@media (max-width: 768px) {
  .contact-redesign {
    padding: 60px 20px 70px;
  }
  .contact-redesign-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .contact-redesign-title {
    font-size: 34px;
  }
  .contact-redesign-header {
    margin-bottom: 40px;
  }
}

/* Override legacy gray headings from app.css so copy reads as near-black */
body.home .section .block-title h2,
body.home.title-2 .section .block-title h2 {
  color: var(--bm-dark) !important;
  font-weight: 700 !important;
  margin-bottom: 32px !important;
}

body.home .section .block-title h2 + p {
  margin-top: 32px !important;
}

body.home .section .block-title p,
body.home .section .block-title .sub-title,
body.home .section .products-content .product-title,
body.home .section .products-content .product-title a,
body.home .section .products-content p {
  color: var(--bm-dark);
}

/* ---- TRUST STATS ---- */
.trust-stats .block-title {
  text-align: left !important;
  margin-bottom: 40px !important;
}

.trust-stats .block-title h2 {
  text-align: left !important;
  font-size: 28px !important;
  margin-bottom: 0 !important;
}

.trust-stats-row {
  align-items: stretch;
}

.trust-stats-row > [class*="col-"] {
  display: flex;
}

.trust-stat {
  position: relative;
  flex: 1;
  padding: 24px 32px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trust-stats-row > [class*="col-"]:not(:first-child) .trust-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #d5d5d5;
}

.trust-stat-number {
  display: block;
  font-family: var(--bm-font);
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  color: #27B853;
}

.trust-stat-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--bm-dark);
}

@media (max-width: 768px) {
  .trust-stats-row > [class*="col-"]:not(:first-child) .trust-stat::before {
    display: none;
  }
  .trust-stat {
    padding: 20px 0;
    border-top: 1px solid #d5d5d5;
  }
  .trust-stats-row > [class*="col-"]:first-child .trust-stat {
    border-top: none;
  }
  .trust-stat-number {
    font-size: 56px;
  }
}

/* -- Variables -- */
:root {
  --bm-green: #1C379C;
  --bm-green-hover: #162D80;
  --bm-green-light: #e8ecf7;
  --bm-dark: #1a1a2e;
  --bm-text: #1a1a2e;
  --bm-text-light: #2a2a2a;
  --bm-gray-bg: #f5f5f5;
  --bm-border: #e0e0e0;
  --bm-white: #fff;
  --bm-font: 'Poppins', sans-serif;
}

/* ---- REDESIGNED HEADER ---- */
.redesign-header {
  background: var(--bm-white);
  padding: 0 40px;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid #eee;
}

.redesign-header .header-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.redesign-header .header-logo a {
  text-decoration: none;
  display: inline-block;
}

.redesign-header .header-logo img {
  height: 36px;
  width: auto;
}

.redesign-header .header-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.redesign-header .header-nav li a {
  font-family: var(--bm-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--bm-dark);
  text-decoration: none;
  transition: color 0.2s;
}

.redesign-header .header-nav li a:hover {
  color: var(--bm-green);
}

.redesign-header .header-nav .has-submenu {
  position: relative;
}

.redesign-header .header-nav .has-submenu > a::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--bm-dark);
  margin-left: 6px;
  vertical-align: middle;
}

.redesign-header .header-nav .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bm-white);
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 8px 0;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  z-index: 100;
  list-style: none;
}

.redesign-header .header-nav .has-submenu:hover .submenu {
  display: block;
}

.redesign-header .header-nav .submenu li a {
  display: block;
  padding: 8px 20px;
  font-size: 14px;
}

.redesign-header .header-nav .submenu li a:hover {
  background: var(--bm-gray-bg);
}

/* Mobile header */
.redesign-header .mobile-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
}

.redesign-header .mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--bm-dark);
  margin: 5px 0;
  transition: 0.3s;
}

@media (max-width: 768px) {
  .redesign-header {
    padding: 0 20px;
  }
  .redesign-header .header-nav {
    display: none;
  }
  .redesign-header .mobile-toggle {
    display: block;
  }
}


/* ---- HERO SECTION ---- */
.hero-redesign {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 45px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: -80px 0 0;
  padding: 0;
}

.hero-redesign .hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--bm-white);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 18px;
  text-decoration: none !important;
  animation: hero-scroll-bounce 1.8s ease-in-out infinite;
  transition: background 0.2s, border-color 0.2s;
}

.hero-redesign .hero-scroll:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: var(--bm-white);
  color: var(--bm-white);
}

@keyframes hero-scroll-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

.hero-redesign .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-redesign .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-redesign .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.hero-redesign .hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 80px 40px;
  color: var(--bm-white);
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
}

.hero-redesign .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--bm-white);
  margin-bottom: 20px;
  letter-spacing: 0.3px;
}

.hero-redesign .hero-badge .badge-icon {
  font-size: 14px;
}

.hero-redesign h1 {
  display: block !important;
  font-family: var(--bm-font);
  font-size: 68px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 24px;
  color: var(--bm-white);
  width: 100%;
}

.hero-redesign .hero-subtitle {
  font-size: 15px;
  line-height: 1.7;
  opacity: 0.85;
  margin-bottom: 36px;
  max-width: 500px;
}

.hero-redesign .hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* -- Buttons -- */
.btn-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bm-green);
  color: var(--bm-white) !important;
  padding: 13px 26px;
  border-radius: 8px;
  font-family: var(--bm-font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.btn-green:hover {
  background: var(--bm-green-hover);
  transform: translateY(-1px);
  color: var(--bm-white) !important;
}

.btn-green-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  color: var(--bm-white) !important;
  padding: 13px 26px;
  border-radius: 8px;
  font-family: var(--bm-font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,0.4);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-green-outline:hover {
  background: rgba(255,255,255,0.2);
  border-color: var(--bm-white);
  color: var(--bm-white) !important;
}

.btn-green-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bm-green-light);
  color: var(--bm-green) !important;
  padding: 13px 26px;
  border-radius: 8px;
  font-family: var(--bm-font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.btn-green-soft:hover {
  background: #d8dff0;
  color: var(--bm-green) !important;
  transform: translateY(-1px);
}

.btn-green-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bm-green);
  color: var(--bm-white) !important;
  padding: 11px 24px;
  border-radius: 8px;
  font-family: var(--bm-font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.2s;
}

.btn-green-sm:hover {
  background: var(--bm-green-hover);
  color: var(--bm-white) !important;
}

.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bm-dark);
  color: var(--bm-white) !important;
  padding: 13px 26px;
  border-radius: 8px;
  font-family: var(--bm-font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-dark:hover {
  background: #2d2d45;
  color: var(--bm-white) !important;
}


/* ---- CATEGORIES SECTION ---- */
.categories-section {
  padding: 80px 40px;
  background: var(--bm-white);
}

.categories-section .section-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.section-label {
  font-family: var(--bm-font);
  font-size: 13px;
  font-weight: 600;
  color: var(--bm-green);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}

.section-heading {
  font-family: var(--bm-font);
  font-size: 34px;
  font-weight: 700;
  color: var(--bm-dark);
  margin-bottom: 14px;
  line-height: 1.25;
}

.section-desc {
  font-size: 14px;
  color: var(--bm-text-light);
  max-width: 560px;
  margin: 0 auto 48px;
  line-height: 1.65;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.category-card {
  background: var(--bm-white);
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
  border: 1px solid #eee;
  transition: transform 0.25s, box-shadow 0.25s;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}

.category-card .card-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  margin: 16px 16px 0 16px;
  width: calc(100% - 32px);
  border-radius: 12px;
}

.category-card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.category-card:hover .card-image img {
  transform: scale(1.04);
}

.category-card .card-body {
  padding: 20px 24px 28px;
}

.category-card h3 {
  font-family: var(--bm-font);
  font-size: 18px;
  font-weight: 600;
  color: var(--bm-dark);
  margin-bottom: 8px;
}

.category-card p {
  font-size: 13px;
  color: var(--bm-text-light);
  margin-bottom: 20px;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .categories-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}


/* ---- BEST SELLING SETS ---- */
.bestselling-section {
  padding: 70px 40px;
  background: var(--bm-gray-bg);
}

.bestselling-section .section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.bestselling-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
}

.bestselling-header .left h2 {
  font-family: var(--bm-font);
  font-size: 30px;
  font-weight: 700;
  color: var(--bm-dark);
  margin: 0;
}

.bestselling-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.set-card {
  background: var(--bm-white);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.set-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.set-card .card-image {
  width: 100%;
  height: 200px;
  background: #f0f0f0;
  overflow: hidden;
}

.set-card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.set-card .card-body {
  padding: 14px 16px;
}

.set-card h4 {
  font-family: var(--bm-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--bm-dark);
  margin: 0;
}

@media (max-width: 992px) {
  .bestselling-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .bestselling-grid {
    grid-template-columns: 1fr;
  }
  .bestselling-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}


/* ---- STATS SECTION ---- */
.stats-section {
  padding: 60px 40px;
  background: var(--bm-white);
}

.stats-section .section-inner {
  max-width: 900px;
  margin: 0 auto;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.stat-card {
  border: 2px solid var(--bm-green);
  border-radius: 16px;
  padding: 36px 24px;
  text-align: center;
}

.stat-card .stat-number {
  font-family: var(--bm-font);
  font-size: 40px;
  font-weight: 700;
  color: var(--bm-green);
  margin-bottom: 6px;
  line-height: 1;
}

.stat-card .stat-label {
  font-size: 13px;
  color: var(--bm-text-light);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


/* ---- CONSULT SECTION ---- */
.consult-section {
  padding: 80px 40px;
  background: var(--bm-gray-bg);
}

.consult-section .section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.consult-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bm-white);
}

.consult-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.consult-images img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}

.consult-content {
  background: var(--bm-white);
  padding: 48px 40px;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}

/* Handwritten / script font for consult heading - matches Figma */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');

.consult-content h2 {
  font-family: 'Caveat', cursive;
  font-size: 38px;
  font-weight: 700;
  color: var(--bm-dark);
  margin-bottom: 16px;
  line-height: 1.2;
}

.consult-content p {
  font-size: 14px;
  color: var(--bm-text-light);
  margin-bottom: 28px;
  line-height: 1.65;
  max-width: 360px;
}

@media (max-width: 768px) {
  .consult-grid {
    grid-template-columns: 1fr;
  }
  .consult-images {
    grid-template-columns: 1fr;
  }
  .consult-images img {
    min-height: 200px;
  }
}


/* ---- QUALITY FEATURES SECTION ---- */
.quality-section {
  padding: 80px 40px;
  background: var(--bm-white);
}

.quality-section .section-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.quality-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}

.quality-card {
  text-align: center;
  padding: 20px;
}

.quality-card .quality-icon {
  width: 56px;
  height: 56px;
  background: var(--bm-green-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  font-size: 22px;
  color: var(--bm-green);
}

.quality-card h3 {
  font-family: var(--bm-font);
  font-size: 17px;
  font-weight: 600;
  color: var(--bm-dark);
  margin-bottom: 8px;
}

.quality-card p {
  font-size: 13px;
  color: var(--bm-text-light);
  line-height: 1.65;
}

@media (max-width: 768px) {
  .quality-grid {
    grid-template-columns: 1fr;
  }
}


/* ---- TESTIMONIAL SECTION ---- */
.testimonial-redesign {
  padding: 60px 40px;
  background: var(--bm-white);
  text-align: center;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.testimonial-redesign .section-inner {
  max-width: 640px;
  margin: 0 auto;
}

.testimonial-redesign .quote-text {
  font-family: var(--bm-font);
  font-size: 16px;
  font-style: italic;
  color: var(--bm-dark);
  line-height: 1.75;
  margin-bottom: 24px;
}

.testimonial-redesign .quote-text::before {
  content: '\201C';
  font-size: 52px;
  color: var(--bm-green);
  display: block;
  line-height: 0.5;
  margin-bottom: 16px;
  font-style: normal;
}

.testimonial-redesign .quote-author {
  font-size: 15px;
  font-weight: 600;
  color: var(--bm-dark);
}

.testimonial-redesign .quote-location {
  font-size: 13px;
  color: var(--bm-text-light);
  margin-top: 2px;
}


/* ---- CTA SECTION ---- */
.cta-section {
  padding: 80px 40px;
  background: #eef0f7;
}

.cta-section .section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.cta-image {
  position: relative;
}

.cta-image img {
  width: 100%;
  border-radius: 16px;
  max-height: 380px;
  object-fit: cover;
}

.cta-content h2 {
  font-family: var(--bm-font);
  font-size: 34px;
  font-weight: 700;
  color: var(--bm-dark);
  margin-bottom: 14px;
  line-height: 1.25;
}

.cta-content p {
  font-size: 14px;
  color: var(--bm-text-light);
  margin-bottom: 28px;
  line-height: 1.65;
}

.cta-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .cta-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}


/* ---- CONTACT FOOTER ---- */
.contact-footer {
  padding: 60px 40px 48px;
  background: var(--bm-gray-bg);
}

.contact-footer .section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.contact-footer .contact-header {
  margin-bottom: 36px;
}

.contact-footer .contact-header h2 {
  font-family: var(--bm-font);
  font-size: 30px;
  font-weight: 700;
  color: var(--bm-dark);
  margin-bottom: 6px;
}

.contact-footer .contact-header p {
  font-size: 14px;
  color: var(--bm-text-light);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.contact-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.contact-card .contact-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: var(--bm-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bm-white);
  font-size: 16px;
}

.contact-card h4 {
  font-family: var(--bm-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--bm-dark);
  margin-bottom: 4px;
}

.contact-card p {
  font-size: 13px;
  color: var(--bm-text-light);
  line-height: 1.5;
  margin: 0;
}

.contact-card a {
  color: var(--bm-text-light);
  text-decoration: none;
}

.contact-card a:hover {
  color: var(--bm-green);
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}


/* ---- SITE FOOTER ---- */
.site-footer-redesign {
  padding: 24px 40px;
  background: var(--bm-gray-bg);
  border-top: 1px solid var(--bm-border);
  text-align: center;
}

.site-footer-redesign p {
  font-size: 13px;
  color: var(--bm-text-light);
  margin: 0;
}

.site-footer-redesign a {
  color: var(--bm-green);
  text-decoration: none;
}


/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .hero-redesign {
    min-height: calc(100vh - 70px);
    margin-top: -80px;
  }
  .hero-redesign .hero-content {
    padding: 60px 24px;
  }
  .hero-redesign h1 {
    font-size: 40px;
  }
  .section-heading {
    font-size: 26px;
  }
  .categories-section,
  .bestselling-section,
  .consult-section,
  .quality-section,
  .cta-section {
    padding: 60px 20px;
  }
}

/* Testimonial slider — space arrows to the container edges */
.block-testimonial .slick-sliders {
  position: relative;
  padding: 0 80px;
}
.block-testimonial .slick-sliders .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  font-size: 32px;
  color: #333;
  cursor: pointer;
  background: transparent;
  border: none;
  line-height: 1;
}
.block-testimonial .slick-sliders .slick-arrow.fa-angle-left  { left: 20px; }
.block-testimonial .slick-sliders .slick-arrow.fa-angle-right { right: 20px; }

@media (max-width: 767px) {
  .block-testimonial .slick-sliders { padding: 0 40px; }
  .block-testimonial .slick-sliders .slick-arrow.fa-angle-left  { left: 5px; }
  .block-testimonial .slick-sliders .slick-arrow.fa-angle-right { right: 5px; }
}