/* Beautyforest, skin-types block: a carousel of tall skin-type cards.
   Self-contained: track scroll + arrows scoped under .bf-skintypes so it
   doesn't depend on the product-carousel stylesheet. */

.bf-skintypes{ box-sizing:border-box; background:transparent; padding:8px 0 0; }
.home .bf-skintypes{ margin-top:clamp(2.5rem,5vw,3.5rem); }

/* header, eyebrow + Fjalla heading (matches the other sections) */
.bf-skintypes__head{ margin:0 0 20px; }
.bf-skintypes__eyebrow{
  display:inline-block; font-family:var(--bf-font-body);
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#2faa5a; margin:0 0 9px;
}
.bf-skintypes__heading{
  display:block; font-family:"Fjalla One","Arial Narrow",Arial,sans-serif;
  font-size:26px; font-weight:400; letter-spacing:-.26px; color:#171716; margin:0;
}

/* track, horizontal scroll-snap row */
.bf-skintypes__track{
  list-style:none; margin:0; padding:4px 0 6px;
  display:flex; gap:16px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
}
.bf-skintypes__track::-webkit-scrollbar{ display:none; height:0; width:0; }
.bf-skintypes__item{ list-style:none; margin:0; flex:0 0 230px; scroll-snap-align:start; }

/* card, tall, rounded, image/gradient with text pinned to the bottom */
.bf-skintypes__card{
  position:relative; display:block; height:400px; width:100%; box-sizing:border-box;
  border-radius:var(--bf-radius); overflow:hidden; text-decoration:none; color:#fff;
  box-shadow:0 8px 22px -14px rgba(20,58,36,.45);
  transition:transform .25s ease, box-shadow .25s ease;
}
.bf-skintypes__card:hover,
.bf-skintypes__card:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 16px 30px -16px rgba(20,58,36,.5);
}

/* gradient tints used when no image is set */
.bf-skintypes__card--t1{ background:linear-gradient(160deg,#3cc06d 0%,#1c7a40 100%); }
.bf-skintypes__card--t2{ background:linear-gradient(160deg,#2faa5a 0%,#143a24 100%); }
.bf-skintypes__card--t3{ background:linear-gradient(160deg,#5cb87f 0%,#256b41 100%); }
.bf-skintypes__card--t4{ background:linear-gradient(160deg,#1f8044 0%,#0c4f28 100%); }
.bf-skintypes__card--t5{ background:linear-gradient(160deg,#4aa468 0%,#1c5e38 100%); }
.bf-skintypes__card--t6{ background:linear-gradient(160deg,#2f9a6f 0%,#103b2b 100%); }

/* skin-type icon, top-left, rendered white over the gradient */
.bf-skintypes__icon{ position:absolute; top:18px; left:20px; display:inline-flex; z-index:1; }
.bf-skintypes__icon img{
  width:52px; height:52px; object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.28));
}

/* body, content pinned to the bottom of the card */
.bf-skintypes__body{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; gap:6px; padding:22px 20px 22px;
}
.bf-skintypes__name{
  font-family:"Fjalla One","Arial Narrow",Arial,sans-serif;
  font-size:24px; font-weight:400; line-height:1.05; letter-spacing:-.2px;
  color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.25);
}
/* keep the card text white on hover (overrides the global a:hover colour) */
.bf-skintypes__card:hover,
.bf-skintypes__card:focus-visible,
.bf-skintypes__card:hover .bf-skintypes__name{ color:#fff; }

/* content bullets */
.bf-skintypes__bullets{
  list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:5px;
}
.bf-skintypes__bullets li{
  position:relative; padding-left:18px; font-size:12.5px; line-height:1.35;
  color:rgba(255,255,255,.92); text-shadow:0 1px 6px rgba(0,0,0,.28);
}
.bf-skintypes__bullets li::before{
  content:""; position:absolute; left:2px; top:6px; width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.9);
}
/* proper button at the end of the card */
.bf-skintypes__cta{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  margin-top:16px; align-self:stretch;
  background:#fff; color:#111; border-radius:var(--bf-radius); padding:11px 18px;
  font-size:13px; font-weight:800; letter-spacing:.02em;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.5);
  transition:background .2s ease, color .2s ease;
}
.bf-skintypes__card:hover .bf-skintypes__cta{ background:#eafff0; color:#111; }
.bf-skintypes__cta svg{ transition:transform .2s ease; }
.bf-skintypes__card:hover .bf-skintypes__cta svg{ transform:translateX(3px); }

/* nav arrows, bottom-left, emerald (matches the product carousel) */
.bf-skintypes__nav{ display:flex; gap:.5rem; justify-content:flex-start; margin:16px 0 0; }
.bf-skintypes__nav[hidden]{ display:none; }
.bf-skintypes__arrow{
  width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--bf-radius); cursor:pointer; color:#fff;
  background:linear-gradient(135deg,#2faa5a,#1f8044);
  transition:background .18s ease, opacity .18s ease;
}
.bf-skintypes__arrow:hover:not(:disabled){ background:linear-gradient(135deg,#3cc471,#249650); }
.bf-skintypes__arrow:disabled{ opacity:.35; cursor:default; }

/* desktop: the (up to) four cards fill the row as an even grid */
@media (min-width:701px){
  .bf-skintypes__track{ display:grid; grid-template-columns:repeat(4,1fr); overflow:visible; }
  .bf-skintypes__item{ flex:none; }
}

@media (max-width:600px){
  .bf-skintypes__item{ flex-basis:200px; }
  .bf-skintypes__card{ height:360px; }
}
@media (prefers-reduced-motion:reduce){
  .bf-skintypes__card{ transition:none; }
  .bf-skintypes__card:hover{ transform:none; }
}