/* ==========================================================================
   3. HOME — hero, section headings, banners and the home page layouts
   ========================================================================== */

/* ── hero ────────────────────────────────────────────────────────────────
   Full-bleed and tall, with the wording sitting low over the image. */
.hero{height:auto;min-height:min(78vh,620px);}
.hero .slide,.hero .slide img{height:100%;}
.hero .slide img{object-fit:cover;object-position:center 22%;}

.hero-text{
  left:var(--m-gutter);right:var(--m-gutter);
  top:auto;bottom:14%;transform:none;
  max-width:none;
}
.slide-tag{
  font-size:.6875rem;letter-spacing:.2em;
  margin-bottom:10px;display:inline-block;
}
.hero-text h1{
  font-size:clamp(2rem,9vw,2.9rem);
  line-height:1.05;margin-bottom:12px;
}
.hero-text p{
  font-size:.875rem;line-height:1.6;
  margin-bottom:20px;max-width:30ch;
}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap;}
.hero-btns a{
  padding:13px 24px;font-size:.6875rem;letter-spacing:.13em;
  flex:0 0 auto;
}
.hero-scroll{display:none;}          /* no room, and no mouse to scroll with */
.hero-arrows{display:none;}          /* swipe instead */
.hero-dots{bottom:16px;}

/* ── announcement strip ─────────────────────────────────────────────────── */
.announce{
  display:flex;gap:24px;overflow-x:auto;
  justify-content:flex-start;
  padding:12px var(--m-gutter);
  scrollbar-width:none;-ms-overflow-style:none;
}
.announce::-webkit-scrollbar{display:none;}
.announce > *{flex:0 0 auto;white-space:nowrap;font-size:.75rem;}

/* ── section headings ────────────────────────────────────────────────────
   Centred title with the link directly beneath it. */
.sec-head{
  text-align:center;
  padding:var(--m-block) var(--m-gutter) var(--m-block-sm);
}
.sec-head p{
  font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:8px;
}
.sec-head h2{
  font-size:clamp(1.4rem,6vw,1.75rem);
  line-height:1.2;margin-bottom:8px;
}
.sec-head small{
  display:block;font-size:.8125rem;color:#888;line-height:1.55;
  max-width:36ch;margin:0 auto;
}
.sec-head .sec-link,
.sec-link{
  display:inline-block;margin-top:12px;
  font-size:.875rem;font-weight:600;
  text-decoration:underline;text-underline-offset:4px;
  color:var(--black);
}

/* the "view all" button under a rail */
.sec-more{
  display:flex;justify-content:center;
  padding:22px var(--m-gutter) 40px;
}
.sec-more a{
  display:inline-block;width:100%;max-width:320px;text-align:center;
  padding:15px 20px;border:1.5px solid var(--black);color:var(--black);
  font-size:.8125rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;text-decoration:none;min-height:48px;
}

/* ── mood picker ────────────────────────────────────────────────────────── */
.mood-sec{padding:var(--m-block) var(--m-gutter);}
.mood-pills{
  display:flex;gap:8px;overflow-x:auto;justify-content:flex-start;
  padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none;
}
.mood-pills::-webkit-scrollbar{display:none;}
.mood-pills button{flex:0 0 auto;padding:10px 18px;font-size:.8125rem;}

/* ── sale banner + countdown ────────────────────────────────────────────── */
.sale-banner{
  flex-direction:column;align-items:flex-start;gap:22px;
  padding:var(--m-block) var(--m-gutter);
}
.sale-left,.sale-right{width:100%;}
.sale-left h2{font-size:clamp(1.5rem,7vw,2rem);line-height:1.12;}
.sale-timer{display:flex;gap:8px;flex-wrap:nowrap;}
.time-box{flex:1;min-width:0;padding:12px 4px;text-align:center;}
.time-box .num{font-size:1.3rem;}
.time-box .lbl{font-size:.625rem;letter-spacing:.1em;}
.btn-yellow{display:block;width:100%;text-align:center;padding:15px;margin-top:4px;}

/* ── full-width banner ──────────────────────────────────────────────────── */
.fb-short{height:clamp(220px,48vw,300px);}
.fb-mid  {height:clamp(320px,70vw,440px);}
.fb-tall {height:clamp(440px,76vh,660px);}
.fb-overlay{
  align-items:flex-end;
  padding:0 var(--m-gutter) clamp(26px,8vw,52px);
  background:linear-gradient(to top,rgba(0,0,0,.68),rgba(0,0,0,.2) 55%,rgba(0,0,0,.02));
}
.fb-inner{max-width:100%;}
.fbanner h2{font-size:clamp(1.75rem,8vw,2.5rem);}
.fb-sub{font-size:.875rem;margin-bottom:20px;}
.fbanner .fb-eyebrow{font-size:.75rem;letter-spacing:.2em;margin-bottom:12px;}
.fb-btn{display:inline-block;padding:14px 30px;}

/* ── get the look ───────────────────────────────────────────────────────── */
.gtl{grid-template-columns:1fr;gap:0;padding:0 0 var(--m-block);}
.gtl-head{
  order:-2;text-align:center;
  padding:var(--m-block) var(--m-gutter) var(--m-block-sm);
  margin-bottom:0;
}
.gtl-hero{order:-1;width:100%;}
.gtl-hero img{min-height:0;height:clamp(320px,86vw,520px);}
.gtl-list{display:contents;}
.gtl-item{
  grid-template-columns:84px 1fr;gap:14px;
  margin:0 var(--m-gutter);padding:14px 0;
}
.gtl-item img{width:84px;height:110px;}
.gtl-name{font-size:.875rem;}
.gtl-price{font-size:.9375rem;}
.gtl-cta{
  display:block;margin:var(--m-block-sm) var(--m-gutter) 0;
  text-align:center;padding:14px;
}

/* ── scrolling row ──────────────────────────────────────────────────────── */
.crow{padding:var(--m-block) 0;}
.crow-head{padding:0 var(--m-gutter);margin-bottom:var(--m-block-sm);}
.crow-head h2{font-size:clamp(1.4rem,6vw,1.75rem);}
.crow-link{font-size:.875rem;}
.crow-track{
  padding:0 var(--m-gutter) 6px;gap:12px;
  scroll-padding-left:var(--m-gutter);
}
.crow-item{width:44vw;max-width:200px;}
.crow-img{width:100%;height:auto;aspect-ratio:2/3;}
.crow-info{opacity:1;padding-top:10px;}
.crow-name{font-size:.8125rem;}
.crow-price{font-size:.875rem;}
.crow-nav{display:none;}

/* ── feature split ──────────────────────────────────────────────────────── */
.fsplit{grid-template-columns:1fr;}
.fsplit-img{order:-1;}
.cats {
  grid-template-columns: repeat(2,1fr);
}
.fsplit-img img{min-height:0;height:clamp(300px,80vw,460px); object-position: top;}
.fsplit-head{text-align:center;margin-bottom:var(--m-block-sm);}
.fsplit-head h2{font-size:clamp(1.4rem,6vw,1.75rem);}
.fsplit-card img{height:auto;aspect-ratio:2/3;}
.fsplit-arrow{display:none;}          /* swipe instead */
.fsplit-dots{margin-top:18px;}
.fsplit-slider,.fsplit-slider[data-per="3"],.fsplit-slider[data-per="1"]{width:100%;}
.fsplit-track{gap:12px;scroll-padding-left:0;}
/* one and a bit, so it reads as swipeable */
.fsplit-slider .fsplit-card,
.fsplit-slider[data-per="3"] .fsplit-card,
.fsplit-slider[data-per="1"] .fsplit-card{flex-basis:72%;}
@media (min-width:600px){
  .fsplit-slider .fsplit-card,
  .fsplit-slider[data-per="3"] .fsplit-card{flex-basis:calc((100% - 12px) / 2);}
}

/* ── lookbook ───────────────────────────────────────────────────────────── */
.lookbook{grid-template-columns:1fr;gap:2px;}
.lb-item{min-height:300px;}
.lb-text h3{font-size:1.4rem;}

/* ── features / testimonials / instagram / brands ───────────────────────── */
.features{grid-template-columns:1fr 1fr;gap:1px;}
.feat{padding:18px 12px;flex-direction:column;text-align:center;gap:8px;}
.feat i{font-size:1.4rem;}

.rev-grid{grid-template-columns:1fr;gap:14px;}
.insta-grid{grid-template-columns:repeat(3,1fr);gap:3px;}
.insta-head h2{font-size:1.25rem;}
.brand-row{gap:20px;flex-wrap:wrap;justify-content:center;}

/* ── newsletter ─────────────────────────────────────────────────────────── */
.newsletter-sec{padding:var(--m-block) var(--m-gutter);text-align:center;}
.news-form{flex-direction:column;gap:10px;max-width:none;}
.news-form input,.news-form button{width:100%;}

/* ── footer ─────────────────────────────────────────────────────────────── */
.footer-grid{grid-template-columns:1fr 1fr;gap:26px 18px;padding:var(--m-block) var(--m-gutter);}
.footer-brand{grid-column:1/-1;}
.footer-bottom{
  flex-direction:column;gap:10px;text-align:center;
  padding:18px var(--m-gutter);
}