/* =========================================================
   KidsPlayExpert — Warm & Natural theme
   ========================================================= */
:root{
  --kpe-bg:        #F7F3EC;
  --kpe-surface:   #FFFFFF;
  --kpe-sage:      #2E5339;
  --kpe-sage-light:#4C7A56;
  --kpe-mustard:   #E8A33D;
  --kpe-terracotta:#D9705B;
  --kpe-text:      #2B2B2B;
  --kpe-muted:     #746F64;
  --kpe-border:    #E5DFD2;
  --radius-lg: 1.25rem;
  --radius-md: .75rem;
}

*{scroll-behavior:smooth;}

body{
  background-color: var(--kpe-bg);
  color: var(--kpe-text);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: .98rem;
}

h1,h2,h3,h4,h5,h6, .kpe-heading{
  font-family: 'Poppins', sans-serif;
  color: var(--kpe-text);
}

a{ color: var(--kpe-sage); }
a:hover{ color: var(--kpe-terracotta); }
.kpe-muted{ color: var(--kpe-muted) !important; }
.kpe-hr{ border-color: var(--kpe-border); opacity:1; }

/* ---- Buttons ---- */
.btn-kpe-primary{
  background-color: var(--kpe-sage);
  border-color: var(--kpe-sage);
  color:#fff;
  font-weight:600;
  border-radius: 50px;
  padding: .6rem 1.4rem;
  transition: all .2s ease;
}
.btn-kpe-primary:hover{
  background-color: #244a30;
  border-color: #244a30;
  color:#fff;
  transform: translateY(-1px);
}
.btn-kpe-outline{
  background-color: transparent;
  border: 1.5px solid var(--kpe-sage);
  color: var(--kpe-sage);
  font-weight:600;
  border-radius: 50px;
  padding: .55rem 1.4rem;
  transition: all .2s ease;
}
.btn-kpe-outline:hover{
  background-color: var(--kpe-sage);
  color:#fff;
}
.btn-kpe-accent{
  background-color: var(--kpe-mustard);
  border-color: var(--kpe-mustard);
  color:#2B2B2B;
  font-weight:600;
  border-radius: 50px;
  padding: .6rem 1.4rem;
}
.btn-kpe-accent:hover{ background-color:#d6912a; border-color:#d6912a; color:#2B2B2B; }

/* ---- Announcement + topbar ---- */
.kpe-announce{
  background-color: var(--kpe-sage);
  color: #fff;
  letter-spacing:.2px;
}
.kpe-topbar{
  background-color: var(--kpe-surface);
  border-color: var(--kpe-border) !important;
}

/* ---- Navbar ---- */
.kpe-navbar{
  background-color: var(--kpe-surface);
  border-bottom: 1px solid var(--kpe-border);
  z-index: 1030;
}
.kpe-logo{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:1.5rem;
  color: var(--kpe-text);
  text-decoration:none;
}
.kpe-logo-mark{ margin-right:.25rem; }
.kpe-logo-accent{ color: var(--kpe-terracotta); }
.navbar-nav .nav-link{
  color: var(--kpe-text);
  font-weight:500;
  padding: .5rem 1rem !important;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover{ color: var(--kpe-sage); }
.kpe-search{
  background: var(--kpe-bg);
  border-radius: 50px;
  padding: .4rem 1rem;
  align-items:center;
  gap:.5rem;
  width: 230px;
}
.kpe-search input{ background: transparent; box-shadow:none; padding:0; }
.kpe-search i{ color: var(--kpe-muted); }
.kpe-nav-icons a{ color: var(--kpe-text); font-size:1.25rem; }
.kpe-nav-icons a:hover{ color: var(--kpe-terracotta); }
.kpe-badge{
  position:absolute; top:-8px; right:-10px;
  background: var(--kpe-terracotta);
  color:#fff; font-size:.65rem; font-weight:700;
  border-radius:50px; padding: .05rem .4rem;
  line-height:1.3;
}

/* ---- Hero ---- */
.kpe-hero{
  background: linear-gradient(120deg, #EFEADB 0%, #F7F3EC 55%, #F1E4DA 100%);
  border-radius: 0 0 3rem 3rem;
  overflow:hidden;
  position:relative;
}
.kpe-hero h1{
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight:800;
  line-height:1.1;
}
.kpe-hero .kpe-hero-badge{
  background: #fff;
  border-radius:50px;
  padding:.4rem 1rem;
  font-size:.85rem;
  font-weight:600;
  color: var(--kpe-sage);
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.kpe-hero-img{
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(46,83,57,.18);
}
.kpe-blob{
  position:absolute;
  border-radius:50%;
  filter: blur(0px);
  opacity:.5;
}

/* ---- USP strip ---- */
.kpe-usp{
  background: var(--kpe-surface);
  border-top: 1px solid var(--kpe-border);
  border-bottom: 1px solid var(--kpe-border);
}
.kpe-usp-item i{
  font-size:1.6rem;
  color: var(--kpe-sage);
}

/* ---- Category tiles ---- */
.kpe-cat-card{
  background: var(--kpe-surface);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1rem;
  text-align:center;
  text-decoration:none;
  color: var(--kpe-text);
  display:block;
  border: 1px solid var(--kpe-border);
  transition: all .25s ease;
  height:100%;
}
.kpe-cat-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 30px rgba(46,83,57,.12);
  border-color: var(--kpe-sage-light);
  color: var(--kpe-text);
}
.kpe-cat-icon{
  width:64px; height:64px;
  border-radius:50%;
  background: var(--kpe-bg);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto .9rem;
  font-size:1.6rem;
  color: var(--kpe-sage);
}
.kpe-cat-card:hover .kpe-cat-icon{ background: var(--kpe-mustard); color:#2B2B2B; }

/* ---- Section headings ---- */
.kpe-section-title{
  font-weight:800;
  position:relative;
}
.kpe-eyebrow{
  color: var(--kpe-terracotta);
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-size:.78rem;
}

/* ---- Product cards ---- */
.kpe-product-card{
  background: var(--kpe-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--kpe-border);
  overflow:hidden;
  height:100%;
  transition: all .25s ease;
  position:relative;
}
.kpe-product-card:hover{
  box-shadow: 0 18px 34px rgba(46,83,57,.14);
  transform: translateY(-4px);
}
.kpe-product-img-wrap{
  position:relative;
  aspect-ratio: 1/1;
  overflow:hidden;
  background: var(--kpe-bg);
}
.kpe-product-img-wrap img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .4s ease;
}
.kpe-product-card:hover .kpe-product-img-wrap img{ transform: scale(1.06); }
.kpe-product-badge{
  position:absolute; top:.75rem; left:.75rem;
  font-size:.7rem; font-weight:700;
  padding:.3rem .65rem;
  border-radius:50px;
  color:#fff;
  z-index:2;
}
.kpe-badge-bestseller{ background: var(--kpe-terracotta); }
.kpe-badge-new{ background: var(--kpe-sage); }
.kpe-badge-sale{ background: var(--kpe-mustard); color:#2B2B2B; }

.kpe-product-quickactions{
  position:absolute; top:.75rem; right:.75rem;
  display:flex; flex-direction:column; gap:.4rem;
  opacity:0; transform: translateX(6px);
  transition: all .25s ease;
  z-index:2;
}
.kpe-product-card:hover .kpe-product-quickactions{ opacity:1; transform:none; }
.kpe-icon-btn{
  width:36px; height:36px;
  border-radius:50%;
  background:#fff;
  border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
  color: var(--kpe-sage);
  cursor:pointer;
}
.kpe-icon-btn:hover{ background: var(--kpe-sage); color:#fff; }
.kpe-icon-btn.active{ background: var(--kpe-terracotta); color:#fff; }

.kpe-product-body{ padding: 1.1rem 1.1rem 1.3rem; }
.kpe-product-cat{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.8px;
  color: var(--kpe-muted);
  font-weight:600;
}
.kpe-product-title{
  font-weight:600;
  font-size:1rem;
  margin: .25rem 0 .4rem;
  display:block;
  color: var(--kpe-text);
  text-decoration:none;
}
.kpe-product-title:hover{ color: var(--kpe-sage); }
.kpe-rating{ color: var(--kpe-mustard); font-size:.8rem; }
.kpe-amazon-btn{
  width:100%;
  margin-top:.7rem;
}

/* ---- Filters sidebar ---- */
.kpe-filter-card{
  background: var(--kpe-surface);
  border: 1px solid var(--kpe-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.kpe-filter-card h6{ font-weight:700; }
.form-check-label{ cursor:pointer; }
.form-check-input:checked{ background-color: var(--kpe-sage); border-color: var(--kpe-sage); }

/* ---- Testimonials ---- */
.kpe-testimonial{
  background: var(--kpe-surface);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  border: 1px solid var(--kpe-border);
  height:100%;
}
.kpe-testimonial .bi-star-fill{ color: var(--kpe-mustard); }
.kpe-avatar{
  width:46px; height:46px;
  border-radius:50%;
  background: var(--kpe-bg);
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  color: var(--kpe-sage);
}

/* ---- Instagram strip ---- */
.kpe-insta-tile{
  aspect-ratio: 1/1;
  border-radius: var(--radius-md);
  overflow:hidden;
  position:relative;
}
.kpe-insta-tile img{ width:100%; height:100%; object-fit:cover; transition: transform .3s ease; }
.kpe-insta-tile:hover img{ transform: scale(1.08); }
.kpe-insta-tile .kpe-insta-overlay{
  position:absolute; inset:0;
  background: rgba(46,83,57,.55);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition: opacity .25s ease;
  color:#fff; font-size:1.4rem;
}
.kpe-insta-tile:hover .kpe-insta-overlay{ opacity:1; }

/* ---- Newsletter ---- */
.kpe-newsletter{
  background: var(--kpe-sage);
  color:#fff;
  border-radius: var(--radius-lg);
  margin: 0 auto;
  max-width: 1300px;
}
.kpe-newsletter h3, .kpe-newsletter p{ color:#fff; }
.kpe-newsletter .form-control{
  border-radius:50px;
  border:none;
  padding:.75rem 1.25rem;
}

/* ---- Footer ---- */
.kpe-footer{
  background: #EFE8DA;
  border-top: 1px solid var(--kpe-border);
}
.kpe-footer-links li{ margin-bottom:.55rem; }
.kpe-footer-links a{
  color: var(--kpe-muted);
  text-decoration:none;
  font-size:.92rem;
}
.kpe-footer-links a:hover{ color: var(--kpe-sage); }
.kpe-social{
  width:38px; height:38px;
  border-radius:50%;
  background:#fff;
  color: var(--kpe-sage);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1rem;
}
.kpe-social:hover{ background: var(--kpe-sage); color:#fff; }

.kpe-back-to-top{
  position:fixed; bottom:24px; right:24px;
  width:48px; height:48px;
  display:none; align-items:center; justify-content:center;
  z-index:1050;
}

/* ---- Breadcrumb / page header ---- */
.kpe-page-header{
  background: var(--kpe-surface);
  border-bottom: 1px solid var(--kpe-border);
  padding: 2rem 0;
}
.kpe-breadcrumb a{ text-decoration:none; color: var(--kpe-muted); }
.kpe-breadcrumb .active{ color: var(--kpe-sage); font-weight:600; }

/* ---- Product detail ---- */
.kpe-pd-thumb{
  width:78px; height:78px;
  border-radius: var(--radius-md);
  overflow:hidden;
  border: 2px solid transparent;
  cursor:pointer;
}
.kpe-pd-thumb.active{ border-color: var(--kpe-sage); }
.kpe-pd-thumb img{ width:100%; height:100%; object-fit:cover; }
.kpe-img-flip{ transform: scaleX(-1); }
.kpe-img-zoom{ transform: scale(1.3); }
.kpe-img-tint{ filter: sepia(.2) saturate(1.4) hue-rotate(-8deg); }

.kpe-summary-card{
  background: var(--kpe-surface);
  border: 1px solid var(--kpe-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
/* ---- Misc ---- */
.kpe-rounded-xl{ border-radius: var(--radius-lg); }
.kpe-empty-state{ padding: 4rem 1rem; text-align:center; }
.kpe-empty-state i{ font-size:3.5rem; color: var(--kpe-border); }

@media (max-width: 991.98px){
  .kpe-search{ display:none; }
}