/* ==========================================================================
   sections.css — the five landing-page sections
   1 Hero · 2 Categories · 3 New Arrivals · 4 Kavi Story · 5 Newsletter
   ========================================================================== */

/* ==========================================================
   SECTION 1 — HERO
   ========================================================== */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 4.5rem));
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
  overflow: hidden;
}

/* Soft ochre wash bleeding in from the top-right */
.hero::before {
  content: "";
  position: absolute;
  top: -22%;
  right: -14%;
  width: min(70vw, 780px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 81, 42, .13), transparent 68%);
  pointer-events: none;
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
  align-items: center;
}

.hero__copy { position: relative; z-index: 2; max-width: 40rem; }
.hero h1 { margin: 1.25rem 0 1.5rem; }
.hero h1 .serif-accent { display: inline-block; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2.25rem;
}

/* Trust strip under the CTAs */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.75rem;
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--sand-deep);
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.hero__trust svg { color: var(--kavi); flex: none; }

/* --- Layered image collage --- */
.hero__art {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.75rem, .4rem + 1vw, 1.25rem);
  align-items: start;
}
.hero__art figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--sand);
  box-shadow: var(--shadow-md);
}
.hero__art img { width: 100%; height: 100%; object-fit: cover; }

.hero__art figure:nth-child(1) { aspect-ratio: 3 / 4.15; }
.hero__art figure:nth-child(2) {
  aspect-ratio: 3 / 3.5;
  margin-top: clamp(2rem, 1rem + 4vw, 4.5rem);
  rotate: 2.5deg;
}

/* Floating "since" badge */
.hero__badge {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 4%, 3rem);
  translate: -50% 0;
  z-index: 3;
  display: grid;
  place-items: center;
  gap: .15rem;
  width: clamp(88px, 8vw, 108px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: var(--shadow-md);
  text-align: center;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__badge b {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0;
  color: var(--kavi);
}

.hero__cue { margin-top: 2.5rem; }

/* ==========================================================
   SECTION 2 — CATEGORIES
   ========================================================== */
.cat-grid {
  display: grid;
  gap: clamp(1rem, .6rem + 1.4vw, 1.5rem);
  grid-template-columns: 1fr;
}

.cat-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--sand);
  aspect-ratio: 3 / 4;
  isolation: isolate;
}
.cat-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.cat-card:hover img,
.cat-card:focus-visible img { transform: scale(1.075); }

.cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(26, 23, 18, .78) 4%, rgba(26, 23, 18, .12) 46%, transparent 72%);
  transition: opacity .5s var(--ease);
}
.cat-card:hover::after { opacity: .88; }

.cat-card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1.15rem, .8rem + 1vw, 1.75rem);
  color: var(--cream);
}
.cat-card__count {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kavi-soft);
}
.cat-card__title {
  margin-top: .35rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem);
  line-height: 1.15;
  color: var(--cream);
}
/* Underline that sweeps in on hover */
.cat-card__more {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .7rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-bottom: 3px;
  background-image: linear-gradient(var(--kavi-soft), var(--kavi-soft));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .5s var(--ease-out);
}
.cat-card:hover .cat-card__more { background-size: 100% 1.5px; }
.cat-card__more svg { transition: transform .45s var(--ease-out); }
.cat-card:hover .cat-card__more svg { transform: translateX(4px); }

/* ==========================================================
   SECTION 3 — NEW ARRIVALS
   ========================================================== */
.filter-row {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-row .chip { flex: none; }

/* Scroll-snap rail on small screens, plain grid from 768px up */
.product-grid {
  display: grid;
  gap: clamp(1rem, .6rem + 1.2vw, 1.6rem);
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 74vw);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  margin-inline: calc(var(--pad-x) * -1);
  padding-inline: var(--pad-x);
  scrollbar-width: none;
}
.product-grid::-webkit-scrollbar { display: none; }
.product-grid > * { scroll-snap-align: start; }

.product-card { position: relative; display: flex; flex-direction: column; }
.product-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sand);
  aspect-ratio: 3 / 3.8;
}
.product-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease-out);
}
.product-card:hover .product-card__media img { transform: scale(1.06); }

.product-card__tag {
  position: absolute;
  top: .7rem; left: .7rem;
  z-index: 2;
  padding: .3rem .65rem;
  border-radius: var(--radius-pill);
  background: rgba(250, 246, 238, .93);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nisarga);
}

/* Add-to-cart bar slides up over the image on hover; always visible on touch */
.product-card__add {
  position: absolute;
  inset: auto .55rem .55rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem;
  border-radius: var(--radius-pill);
  background: var(--nisarga);
  color: var(--cream);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s var(--ease), transform .45s var(--ease-out), background-color .3s var(--ease);
}
.product-card:hover .product-card__add,
.product-card:focus-within .product-card__add { opacity: 1; transform: none; }
.product-card__add:hover { background: var(--kavi); }

.product-card__body { padding-top: .9rem; }
.product-card__name {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.35;
}
.product-card__meta {
  margin-top: .2rem;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sage);
}
.product-card__foot {
  display: flex;
  flex-wrap: wrap;          /* price and sizes stack rather than force width */
  align-items: center;
  justify-content: space-between;
  gap: .5rem .75rem;
  margin-top: .6rem;
}
.size-pills { display: flex; gap: .3rem; }
.size-pills span {
  min-width: 26px;
  padding: .15rem .35rem;
  border-radius: 5px;
  text-align: center;
  font-size: .64rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--sand);
}

.rail-nav { display: none; gap: .5rem; }

/* ==========================================================
   SECTION 4 — THE KAVI STORY
   ========================================================== */
.story { position: relative; overflow: hidden; }

/* Faint grain so the sand block isn't flat */
.story::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .5;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}

.story__grid {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
  align-items: center;
}

.story__art { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, .5rem + 1vw, 1.25rem); }
.story__art figure {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--sand-deep);
  box-shadow: var(--shadow-md);
}
.story__art figure:nth-child(1) { aspect-ratio: 3 / 4; }
.story__art figure:nth-child(2) { aspect-ratio: 3 / 4; margin-top: clamp(1.5rem, 3vw, 3rem); }
.story__art img { width: 100%; height: 100%; object-fit: cover; }

/* Pigment swatch chips over the collage */
.swatches {
  position: absolute;
  right: clamp(-.5rem, -1vw, 0rem);
  bottom: clamp(1rem, 4%, 2.5rem);
  z-index: 2;
  display: flex;
  padding: .55rem;
  border-radius: var(--radius-pill);
  background: var(--cream);
  box-shadow: var(--shadow-md);
}
.swatches i {
  width: 26px; height: 26px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--cream);
}
.swatches i + i { margin-left: -8px; }

.story h2 { margin: 1rem 0 1.35rem; }

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--sand-deep);
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
  font-weight: 600;
  line-height: 1;
  color: var(--kavi);
}
.stat__label {
  margin-top: .4rem;
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Three promise pillars */
.pillars {
  display: grid;
  gap: 1rem;
  margin-top: 2.25rem;
}
.pillar {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.pillar svg { flex: none; color: var(--kavi); margin-top: .15rem; }
.pillar b { display: block; color: var(--nisarga); font-weight: 600; }

/* ==========================================================
   SECTION 5 — NEWSLETTER
   ========================================================== */
.newsletter {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 5vw, 6rem);
  background: var(--nisarga);
  color: var(--cream);
  overflow: hidden;
}
.newsletter::before {
  content: "";
  position: absolute;
  left: -8%;
  bottom: -55%;
  width: min(60vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 81, 42, .34), transparent 66%);
  pointer-events: none;
}
.newsletter__inner {
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}
.newsletter h2 { color: var(--cream); }
.newsletter .eyebrow { color: var(--kavi-soft); }
.newsletter p { color: rgba(250, 246, 238, .76); margin-top: 1rem; }

.subscribe { display: grid; gap: .75rem; }
.subscribe__row {
  display: flex;
  gap: .5rem;
  padding: .45rem;
  border-radius: var(--radius-pill);
  background: rgba(250, 246, 238, .1);
  box-shadow: inset 0 0 0 1px rgba(250, 246, 238, .2);
  transition: box-shadow .3s var(--ease);
}
.subscribe__row:focus-within { box-shadow: inset 0 0 0 1.5px var(--kavi-soft); }
.subscribe input {
  flex: 1;
  min-width: 0;
  padding: .8rem 1.1rem;
  border: 0;
  background: none;
  color: var(--cream);
  outline: none;
}
.subscribe input::placeholder { color: rgba(250, 246, 238, .5); }
.subscribe small { font-size: var(--fs-xs); color: rgba(250, 246, 238, .55); padding-left: 1.1rem; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (min-width: 600px) {
  .cat-grid  { grid-template-columns: repeat(2, 1fr); }
  .pillars   { grid-template-columns: repeat(3, 1fr); }
  .subscribe__row { max-width: 30rem; }
}

@media (min-width: 768px) {
  .product-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .newsletter__inner { grid-template-columns: 1.1fr 1fr; }
}

@media (min-width: 1024px) {
  .hero__grid  { grid-template-columns: 1.05fr 1fr; }
  .story__grid { grid-template-columns: 1fr 1.05fr; }
  .cat-grid    { grid-template-columns: repeat(4, 1fr); }
  .product-grid { grid-template-columns: repeat(4, 1fr); }
  .rail-nav { display: flex; }
}

/* The rotated hero card looks wrong when the collage stacks narrow */
@media (max-width: 420px) {
  .hero__art figure:nth-child(2) { rotate: 0deg; }
  .hero__badge { width: 78px; }
}