/* ============================================================
   RESET & ROOT
============================================================ */
:root{
  --cream:#FAF7F2; --warm:#FDF9F4; --sand:#E8DDD0;
  --taupe:#C4A882; --bark:#8B6347; --deep:#1C1410;
  --green:#3D6B4F; --sage:#8FAF8A; --lsage:#EAF2E8;
  --rose:#C4736A; --gold:#C8A84B;
  --sh:rgba(28,20,16,.08);
  --nav-h:64px;
}

*{
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  /* color: #333; */
}
/* body{
    background: #fafafa;
} */



.highlight-section {
  /* background: #f9f9f9; */
  padding: 3rem 1.5rem;
  text-align: center;
}

.highlight-content {
  max-width: 800px;
  margin: 0 auto;
}

.highlight-section h2 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  width: 100%;
  margin-bottom: 1rem;
  color: #222;
}

.highlight-section p {
  font-size: 0.8rem; 
  font-weight: 400;
  line-height: 1.5;
  color: #555;
}


@media (max-width: 786px){
.highlight-section p {
  font-size: .8rem;
  line-height: 1.5;
}
.highlight-section h2 {
  font-size: 1.2rem;
}
.highlight-content {
  max-width: 300px;
}

}

.header {
  text-align: center;
  padding: 2rem;
  background: #f0f0f0;
}

.carousel-wrapper {
  position: relative;
  overflow: hidden; /* keep arrows fixed */
}

.concern-grid {
  display: flex;
  gap: .1rem;
  padding: 1rem;
  overflow-x: auto; /* always allow horizontal scroll */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.concern-card {
  flex: 0 0 80%; /* mobile: card fills viewport */
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: center;
  padding: 1rem;
  scroll-snap-align: start;
  transition: transform 0.3s ease;
}

.concern-card img {
  width: 170px;
  height: 170px;
  object-fit: cover;
  border-radius: 6px;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* background: rgba(0,0,0,0.5); */
  color: rgba(0,0,0,0.5);
  border: none;
  font-size: 1.1rem;
  padding: 0.5rem;
  cursor: pointer;
  z-index: 20; /* higher than cards */
}

.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }

.carousel-dots {
  text-align: center;
  margin-top: 1rem;
}

.carousel-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
}

.carousel-dots .dot.active {
  background: #333;
}


/* Desktop: show multiple cards, still scrollable if overflow */
@media (min-width: 768px) {
  .concern-card {
    flex: 0 0 200px; /* fixed width cards */
  }
  /* Hide scrollbar on desktop */
  .concern-grid {
    scrollbar-width: none; /* Firefox */
  }
  .concern-grid::-webkit-scrollbar { /* Chrome, Safari */
    display: none;
  }
}

@media (max-width: 768px){
  .carousel-wrapper {
  position: relative;
  overflow: hidden; /* keep arrows fixed */
}

.concern-grid {
  display: flex;
  gap: .1rem;
  padding: 1rem;
  overflow-x: auto; /* always allow horizontal scroll */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.concern-card {
  flex: 1 1 50%; /* mobile: card fills viewport */
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: center;
  padding: 1rem;
  scroll-snap-align: start;
  transition: transform 0.3s ease;
}

.concern-card img {
  width: 170px;
  height: 170px;
  object-fit: cover;
  border-radius: 6px;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-100%);
  font-size: 1rem;
}

.carousel-dots .dot {
  width: 7px;
  height: 7px;
}

}


.btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  background: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

.btn:hover {
  background: #555;
}

.footer {
  text-align: center;
  padding: 1rem;
  background: #f0f0f0;
  margin-top: 2rem;
}


/* Container: two equal columns */
.grid-feature {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* equal halves */
  gap: 2rem;
  align-items: start;
  padding: 2rem;
  position: relative;   /* ✅ anchor buttons here ✅ ensures buttons are positioned inside this container */
}


/* Left image */
.grid-feature-image img {
  width: 100%;
  height: 700px;
  border-radius: 8px;
}

/* Right side product cards */
.grid-feature-cards {
  display: grid;
  gap: 2rem;
  grid-auto-flow: column;
  grid-auto-columns: 400px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;

  /* Hide scrollbar in WebKit browsers (Chrome, Safari, Edge) */
  -ms-overflow-style: none;  /* IE and Edge legacy */
  scrollbar-width: none;     /* Firefox */
}

.grid-feature-cards::-webkit-scrollbar {
  display: none;             /* Chrome, Safari, Edge */
}

/* Add this to your CSS */
.sbc-category-block.hidden {
  display: none !important;
}

/* Carousel buttons */
.grid-feature-btn {
  position: absolute;
  top: 41%;
  transform: translateY(-50%);
  /* background: rgba(0,0,0,0.5); */
  color: rgba(0,0,0,0.5);
  border: none;
  padding: 0.5rem;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.3s ease;
  z-index: 20; /* higher than cards */
}
.grid-feature-btn:hover {
  background: rgba(0,0,0,0.7);
}
.grid-feature-btn.pre { left: 50%; } /* just left of the carousel column */
.grid-feature-btn.nxt { right: 10px; }  /* inside the carousel column */


/* Mobile view: stack vertically */
@media (max-width: 768px) {
  .product-card {
    flex: 0 0 100%; /* show one card at a time */
    scroll-snap-align: start;
  }
}

/* Mobile view: stack vertically */
@media (max-width: 768px) {
  .grid-feature {
    grid-template-columns: 1fr;   /* single column: image on top, carousel below */
    gap: 1.5rem;
}

  .grid-feature-image img {
    height: auto;                 /* let the image shrink naturally */
    max-height: 300px;            /* cap height so it doesn’t dominate */
    object-fit: cover;
}

  .grid-feature-cards {
    display: flex;                /* flex works better than grid here */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 2rem;         /* space for dots */
        /* Hide scrollbar in WebKit browsers (Chrome, Safari, Edge) */
    -ms-overflow-style: none;  /* IE and Edge legacy */
    scrollbar-width: none;     /* Firefox */
}
  .grid-feature-cards::-webkit-scrollbar {
  display: none;             /* Chrome, Safari, Edge */
}
  /* Buttons: smaller and overlay just the carousel */
  .grid-feature-btn {
  top: 62%;
  /* transform: translateY(-100%); */
  font-size: 1rem;
}
.grid-feature-btn.pre { left: 5px; }
  .grid-feature-btn.nxt { right: 5px; }

}


/*=============+++++++ PRODUCT GRID SECTION +++++++============== */

.product-card{
  cursor:pointer;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
  animation:cardReveal .6s cubic-bezier(.22,1,.36,1) both;
  min-width:0;
}
.product-card:nth-child(1){
  animation-delay:.05s
}
.product-card:nth-child(2){
  animation-delay:.12s
}
.product-card:nth-child(3){
  animation-delay:.19s
}
.product-card:nth-child(4){
  animation-delay:.26s
}
.product-card:nth-child(5){
  animation-delay:.33s
}
.product-card:nth-child(6){
  animation-delay:.40s
}
.product-card:nth-child(7){
  animation-delay:.47s
}
@keyframes cardReveal{
  from{
    opacity:0;
    transform:translateY(24px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.product-card:hover{
  transform:translateY(-6px);
}

.card-image{
  position:relative;
  overflow:hidden;
  border-radius:8px;
  background:var(--sand);
  aspect-ratio:4/5;
}
.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.22,1,.36,1),filter .4s;
  filter:saturate(.85);
}
.product-card:hover .card-image img{
  transform:scale(1.06);
  filter:saturate(1);}
.card-badge{
  position:absolute;
  top:12px;
  left:12px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:4px 10px;
  border-radius:3px;
  font-weight:600;
}
.badge-new{
  background:var(--green);
  color:#fff;
}
.badge-sale{
  background:var(--rose);
  color:#fff;
}
.badge-best{
  background:var(--gold);
  color:var(--deep);
}
.card-quick{
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(28,20,16,.75) 0%,rgba(28,20,16,.1) 55%,transparent 100%);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:16px;
  opacity:0;
  transition:opacity .35s;
}
.product-card:hover .card-quick{
  opacity:1;
}
.btn-quick{
  width:100%;
  padding:12px;
  background:#fff;
  color:var(--deep);
  border:none;
  border-radius:4px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  margin-bottom:8px;
  transition:background .2s;
}
.btn-quick:hover{
  background:var(--taupe);
  color:#fff;
}
.card-quick-sub{
  display:flex;
  gap:8px;
}
.btn-cart-quick,.btn-wish{
  flex:1;
  padding:9px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  border-radius:4px;
  font-size:11px;
  cursor:pointer;
  transition:background .2s;
  white-space:nowrap;
}
.btn-cart-quick:hover,.btn-wish:hover{
  background:rgba(255,255,255,.28);
}
.card-body{
  padding:14px 4px 0;
}
.card-cat{
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--bark);
  margin-bottom:4px;
}
.card-name{
  font-family:'Playfair Display',serif;
  font-size:17px;
  font-weight:600;
  color:var(--deep);
  margin-bottom:5px;
  line-height:1.25;
}
.card-desc{
  font-size:12px;
  color:#888;
  line-height:1.55;
  margin-bottom:10px;
}
.card-footer2{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:4px;
}
.card-price{
  font-family:'Playfair Display',serif;
  font-size:18px;
  font-weight:600;
  color:var(--deep);
}