/* ============================================================
   FINT — storefront styles (index.html + shop.html)
   Hero, product grid, brand story blocks used by both pages.
   ============================================================ */

/* ---------- Hero ---------- */
.hero{
  position:relative;
  z-index:0;
  margin:0;
  padding:104px 20px; /* vertical value is the old section default; photo bleeds to the screen edges; content keeps its 20px inset */
  border-radius:0;
  overflow:hidden;
  min-height:680px;
  display:flex;align-items:flex-end;
  background:#fff;
}
.hero-slides{position:absolute;inset:0;z-index:0;}
.hero-slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;
  transition:opacity 1.2s ease;
}
.hero-slide.is-active{opacity:1;}
.hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at bottom right, rgba(28,27,20,0.85) 0%, rgba(28,27,20,0.15) 100%);
  z-index:1;
}
.hero-dots{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:4;
}
.hero-dots button{
  width:6px;height:6px;border-radius:50%;
  padding:0;border:none;
  background:rgba(255,255,255,0.35);
  cursor:pointer;
  transition:width .2s ease,border-radius .2s ease,background .2s ease;
}
.hero-dots button.is-active{
  width:16px;border-radius:3px;background:rgba(255,255,255,0.8);
}
.hero-content{
  position:relative;z-index:2;color:var(--cream);
  padding:56px clamp(24px,5vw,72px) 60px;
  max-width:760px;
  scale:0.8;
}
.hero-content .lede{
  font-family:var(--sans);
  font-size:1.05rem;
  max-width:380px;
  color:rgba(250,248,242,0.88);
  margin-bottom:30px;
}
.badge-row{
  position:absolute;
  top:24px;left:25px; /* lines up with the header logo */
  z-index:2;
  display:flex;align-items:center;gap:16px;
  font-size:0.608rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(250,248,242,0.75);
}
.btn-light{color:var(--cream);margin-top:20px;}
@media (hover:hover){
  .btn-light:hover{background:#fff;color:var(--charcoal);}
}
.text-link{
  display:inline-block;
  font-size:0.765rem;
  letter-spacing:0.04em;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
}
/* ---------- Brand spotlight ---------- */
.spotlight-intro{
  text-align:center;max-width:620px;margin:0 auto 64px;
}
.spotlight-intro img.brand-logo{
  height:53px;width:auto;margin:0 auto 28px;
}
.spotlight-intro .tag{
  font-family:var(--sans);
  font-size:0.76rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--moss-dark);margin-bottom:16px;
}
.spotlight-intro .desc{
  color:var(--charcoal-soft);margin-bottom:20px;
  max-width:80%;margin-left:auto;margin-right:auto;
  font-size:0.92em;
  line-height:1.2;
}
.product-grid{
  display:grid;grid-template-columns:repeat(2,1fr);column-gap:20px;row-gap:40px;
}
.product-photo{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.product-photo-main{opacity:1;}
.product-photo-hover{
  opacity:0;
  transition:opacity .3s ease;
}
@media (hover:hover){
  .product-media:hover .product-photo-hover{opacity:1;}
}
.product-eyebrow{
  font-family:var(--sans);
  font-size:0.76rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--taupe);
  margin-bottom:6px;
}
.product-meta-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
}
.product-meta-row .product-eyebrow{margin-bottom:6px;}
.arrow-icon{
  width:13px;height:13px;
  flex-shrink:0;
  color:currentColor;
  display:block;
}
/* ---------- Full collection ---------- */
.collection{background:#fff;padding-top:54px;}
.collection-row .product-grid{grid-template-columns:repeat(4,1fr);column-gap:20px;}
.collection-row .product-media{aspect-ratio:3/4;}
.product-grid-wrap{padding:0 20px;}
/* ---------- Who we are ---------- */
.who-we-are{padding-top:50px;}
.who-grid{
  display:grid;grid-template-columns:minmax(280px,380px) 1fr;
  align-items:start;
  column-gap:40px;
}
.who-content{
  padding-left:32px;
}
.who-content .tag{
  font-family:var(--sans);
  font-size:0.76rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--moss-dark);margin-bottom:20px;
}
.who-content p{
  color:var(--charcoal-soft);
  font-size:0.882rem;
  line-height:1.5;
  margin-bottom:26px;
}
.who-media{padding-left:100px;padding-right:20px;}
@media (max-width:900px){
  .hero::after{background:radial-gradient(ellipse at bottom left, rgba(28,27,20,0.85) 0%, rgba(28,27,20,0.15) 100%);}
  .collection-row .product-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
  .collection-row .product-grid .product-card{min-width:0;}
  .product-meta-row{gap:6px;}
  .product-price{white-space:nowrap;}
  .who-grid{grid-template-columns:1fr;row-gap:45px;}
  .who-content{padding-right:32px;}
  .who-content h2,
  .who-content p{max-width:80%;}
  .who-content p{font-size:0.882rem;}
  .who-media{padding-left:20px;padding-right:20px;}
  .hero{min-height:560px;}
  /* left edge lines up with the header logo (25px): hero inset 20px + padding x 0.8 scale */
  .hero-content{translate:0 35px;transform-origin:left bottom;padding-left:6.25px;}
}
@media (min-width:901px){
  .hero{justify-content:flex-end;min-height:710px;}
  .hero-content{transform-origin:right bottom;translate:0 30px;}
  .hero-content .btn-light{
    display:block;
    width:380px;
    text-align:center;
    margin-left:auto;
    margin-right:10px;
    /* Adjacent block siblings collapse margins to the larger value, so
       this must exceed .lede's margin-bottom (30px) to add real space. */
    margin-top:50px;
  }
}
@media (prefers-reduced-motion:reduce){
  html *{scroll-behavior:auto !important;}
}