/* ==========================================================================
   Vasanti Collection storefront
   Built on the tokens in base.css. Editorial rather than "app-like": type
   carries the hierarchy, rules do the dividing, and gold appears only ever
   as a hairline.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Primitives
   -------------------------------------------------------------------------- */

/* The storefront runs a step larger than the auth pages. Those are compact
   forms; this is long-form product copy read at arm's length, and 15px was
   too tight for it. Scoped here, so the login and register pages are
   untouched. */
body { font-size: 16px; }

/* Hidden page scrollbar and the sideways-scroll guard both live in base.css,
   so every page gets them rather than only the ones that remember to. */

.wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* The house label style. Light, not bold. Weight is what makes tracked caps
   read as machine-generated. */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.eyebrow--gold { color: var(--gold); }
.eyebrow--cream { color: rgba(254, 247, 235, 0.72); }

/* A gold hairline with a lozenge at its centre, the one decorative flourish,
   reused rather than reinvented per section. */
.flourish {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 190px;
}
.flourish::before,
.flourish::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.flourish span {
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}
.flourish--center { margin: 0 auto; }

/* Flat rectangle, barely-there radius, tracked caps. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  border: 1px solid var(--maroon);
  border-radius: 2px;
  background: var(--maroon);
  color: var(--cream);
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.btn:hover { background: var(--maroon-deep); border-color: var(--maroon-deep); color: var(--cream); }

.btn--ghost { background: transparent; color: var(--maroon); }
.btn--ghost:hover { background: var(--maroon); color: var(--cream); }

.btn--onDark { border-color: rgba(254, 247, 235, 0.55); background: transparent; color: var(--cream); }
.btn--onDark:hover { background: var(--cream); border-color: var(--cream); color: var(--maroon); }

/* A text button that reads as a link but sits in button rhythm. */
.linkline {
  display: inline-block;
  padding: 0 0 3px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--maroon);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.linkline:hover { color: var(--maroon-deep); border-bottom-color: var(--gold); }

/* --------------------------------------------------------------------------
   Announcement
   -------------------------------------------------------------------------- */

.announce {
  background: var(--maroon);
  color: rgba(254, 247, 235, 0.9);
  text-align: center;
  padding: 9px 16px;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.2s var(--ease);
}
.masthead.is-stuck { box-shadow: 0 1px 14px rgba(42, 29, 24, 0.07); }

/* Mark on the left, search in the middle, actions on the right.
   The two 1fr flanks are equal by definition, so the fixed centre column lands
   on the true centre of the header no matter how wide the logo or the icon row
   turn out to be. Sizing the flanks to content instead would drag the search
   off-centre. */
.masthead__row {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 430px) 1fr;
  align-items: center;
  gap: 24px;
  padding: 14px 0;
}


/* The mark is a portrait emblem (700x859), so it is capped by HEIGHT. Sizing
   it by width makes it 142px tall and the header balloons. */
.masthead__brand {
  grid-column: 1;
  justify-self: start;
  line-height: 0;
}
.masthead__brand img {
  height: 74px;
  width: auto;
  transition: height 0.25s var(--ease);
}
/* Tightens once the page scrolls so the header stops eating the viewport. */
.masthead.is-stuck .masthead__brand img { height: 56px; }

.masthead__actions {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

/* Icon actions: hairline strokes drawn to match the type, not a stock set. */
.iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 2px;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.iconbtn:hover { color: var(--maroon); background: rgba(93, 23, 30, 0.05); }
.iconbtn svg { width: 21px; height: 21px; }

/* Bag count rides as a superscript numeral rather than a filled pill. */
.iconbtn__count {
  position: absolute;
  top: 5px;
  right: 3px;
  font-size: 0.70rem;
  font-weight: 500;
  color: var(--gold);
}

/* A gold pin-dot marks a signed-in account without adding a second control. */
.iconbtn__dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  display: none;
}
.iconbtn.is-member .iconbtn__dot { display: block; }

/* Account menu ---------------------------------------------------------- */

.account { position: relative; }

.account__menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 190px;
  padding: 8px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  box-shadow: var(--shadow);
  display: none;
}
.account__menu.is-open { display: block; }

.account__who {
  padding: 10px 18px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.account__name { font-family: var(--font-display); font-size: 1.25rem; color: var(--maroon); }
.account__mail { font-size: 0.84rem; color: var(--ink-faint); word-break: break-all; }

.account__link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 18px;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
.account__link:hover { background: var(--cream); color: var(--maroon); }

/* --------------------------------------------------------------------------
   Search: a hairline rule, no box and no icon in the field. The rule
   redraws from the left on focus; that single motion is the page's one
   deliberate flourish.
   -------------------------------------------------------------------------- */

.search {
  grid-column: 2;
  justify-self: stretch;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

/* The rule tracks the field only, so it cannot run under the submit. */
.search__box {
  position: relative;
  flex: 1;
  min-width: 0;
}

.search__field {
  width: 100%;
  padding: 7px 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  outline: none;
}
.search__field::placeholder { color: var(--ink-faint); }
.search__field:focus { border-bottom-color: transparent; }

/* The drawn rule sits over the resting hairline. */
.search__rule {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--maroon);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.34s var(--ease);
  pointer-events: none;
}
.search__field:focus + .search__rule { transform: scaleX(1); }

.search__submit {
  flex-shrink: 0;
  font-size: 0.73rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s var(--ease);
}
.search__submit:hover { color: var(--maroon); }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav {
  border-top: 1px solid var(--border);
}
.nav__list {
  display: flex;
  justify-content: center;
  gap: 46px;
  list-style: none;
  margin: 0;
  padding: 13px 0;
}
.nav__link {
  position: relative;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 0.22s var(--ease);
}
.nav__link:hover { color: var(--maroon); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__tag {
  margin-left: 7px;
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  color: var(--gold);
}

/* Mobile trigger: drawn bars, not an icon set. */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 24px;
  height: 24px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--ink);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 74vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--maroon-deep);
}

.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The hero is a fabric macro rather than a figure, so there is no face to
     keep in frame and centring is safe at every viewport. */
  object-position: center;
}
/* Two overlays: a wash for legibility, and a directional fade so the type
   side stays dark while the image breathes on the right. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(67, 16, 22, 0.9) 0%, rgba(67, 16, 22, 0.66) 42%, rgba(67, 16, 22, 0.26) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  padding: 96px 0;
  color: var(--cream);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  line-height: 1.06;
  color: var(--cream);
  margin: 20px 0 0;
}
.hero__title em {
  font-style: italic;
  color: var(--gold-light);
}

.hero__lede {
  max-width: 45ch;
  margin: 22px 0 0;
  font-size: 1.12rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(254, 247, 235, 0.85);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

.hero__note {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(254, 247, 235, 0.22);
  max-width: 340px;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding: 92px 0; }
.section--tight { padding: 66px 0; }
.section + .section { border-top: 1px solid var(--border); }

/* Header sits left; the rule runs out to the right and the link anchors the
   far edge. Asymmetry keeps it from reading as a centred template block. */
.section__head {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  margin-bottom: 44px;
}
.section__headText { flex-shrink: 0; max-width: 60%; }
.section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 3.8vw, 3rem);
  line-height: 1.15;
  color: var(--maroon);
  margin: 9px 0 0;
}
.section__sub {
  margin: 10px 0 0;
  font-size: 1.02rem;
  font-weight: 300;
  color: var(--ink-muted);
  max-width: 52ch;
}
.section__fill {
  flex: 1;
  height: 1px;
  background: var(--border);
  margin-bottom: 11px;
}
.section__aside { flex-shrink: 0; margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   Product grid
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 28px;
}

.card { display: flex; flex-direction: column; }

.card__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream-deep);
  margin-bottom: 16px;
}

.card__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.card:hover .card__frame img { transform: scale(1.045); }

/* Unreleased pieces sit under a cream veil so the grid reads as a lookbook
   rather than a shop with everything disabled. */
.card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(254, 247, 235, 0.1), rgba(254, 247, 235, 0.34));
  pointer-events: none;
}

.card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--maroon);
  background: rgba(254, 247, 235, 0.94);
  border: 1px solid var(--border-strong);
}

.card__edition {
  position: absolute;
  bottom: 14px;
  left: 14px;
  padding: 5px 11px;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(67, 16, 22, 0.82);
}

.card__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--maroon);
  margin: 7px 0 0;
}

.card__detail {
  margin: 6px 0 0;
  font-size: 0.94rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-muted);
}

.card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

.card__price {
  font-size: 1.06rem;
  font-weight: 400;
  color: var(--ink);
}
.card__price s { color: var(--ink-faint); margin-right: 7px; font-weight: 300; }

/* Pre-launch pricing.
   The figure is blurred rather than removed, so the card keeps its rhythm and
   the row does not collapse, and it reads as withheld, not as missing. The
   caption underneath is what actually tells the reader why. Screen readers get
   the caption and skip the unreadable figure. */
.card__priceWrap { display: flex; flex-direction: column; gap: 3px; }

.card__price--veiled {
  filter: blur(4.5px);
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
  letter-spacing: 0.04em;
}

.card__priceNote {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Blur is a visual device; without it the figure would simply be legible. */
@media (prefers-reduced-transparency: reduce) {
  .card__price--veiled { filter: blur(6px); }
}

/* --------------------------------------------------------------------------
   Search results
   -------------------------------------------------------------------------- */

.results { display: none; }
.results.is-active { display: block; }

.results__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.results__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  color: var(--maroon);
}
.results__title em { font-style: italic; color: var(--gold); }

.results__empty {
  padding: 70px 0 40px;
  text-align: center;
}
.results__empty p {
  max-width: 42ch;
  margin: 14px auto 26px;
  font-weight: 300;
  color: var(--ink-muted);
}

/* When a search is running the browse rails step aside. */
.catalogue.is-hidden { display: none; }

/* --------------------------------------------------------------------------
   Story strip
   -------------------------------------------------------------------------- */

.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  background: var(--cream-deep);
}
.story__media { align-self: stretch; min-height: 420px; }
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__body { padding: 74px 64px; }
.story__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 3.4vw, 2.8rem);
  color: var(--maroon);
  margin: 14px 0 0;
}
.story__body p {
  margin: 18px 0 0;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-muted);
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Notify
   -------------------------------------------------------------------------- */

.notify {
  background: var(--forest);
  color: var(--cream);
  text-align: center;
  padding: 86px 0;
}
.notify__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  color: var(--cream);
  margin: 16px 0 0;
}
.notify__lede {
  max-width: 46ch;
  margin: 14px auto 0;
  font-weight: 300;
  color: rgba(254, 247, 235, 0.8);
}

.notify__form {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  max-width: 460px;
  margin: 36px auto 0;
}
.notify__field {
  flex: 1;
  padding: 9px 0;
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: var(--cream);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(254, 247, 235, 0.4);
  outline: none;
  transition: border-color 0.22s var(--ease);
}
.notify__field::placeholder { color: rgba(254, 247, 235, 0.5); }
.notify__field:focus { border-bottom-color: var(--gold-light); }

.notify__msg {
  min-height: 20px;
  margin: 18px 0 0;
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--gold-light);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--cream); padding: 70px 0 34px; border-top: 1px solid var(--border); }

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 44px;
}
.footer__brand img { width: 128px; margin-bottom: 16px; }
.footer__brand p {
  font-size: 0.96rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-muted);
  max-width: 34ch;
  margin: 0;
}
.footer__colTitle { margin-bottom: 15px; }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li + li { margin-top: 9px; }
.footer__list a { font-size: 0.97rem; font-weight: 300; color: var(--ink-muted); }
.footer__list a:hover { color: var(--maroon); }

.footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  font-size: 0.86rem;
  font-weight: 300;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .story__body { padding: 56px 44px; }
}

@media (max-width: 900px) {
  .wrap { padding: 0 22px; }

  /* Too narrow to hold three things across, so the centre column collapses:
     burger then mark on the left, actions on the right, and search takes a
     full-width row of its own beneath. The mark stays left, as on desktop. */
  .masthead__row {
    grid-template-columns: auto 1fr auto;
    gap: 10px 12px;
    padding: 12px 0;
  }

  .burger { display: flex; grid-column: 1; grid-row: 1; justify-self: start; }

  .masthead__brand { grid-column: 2; grid-row: 1; justify-self: start; }
  .masthead__brand img { height: 62px; }
  .masthead.is-stuck .masthead__brand img { height: 50px; }

  .masthead__actions { grid-column: 3; grid-row: 1; }

  .search {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    padding-bottom: 4px;
  }

  .masthead__actions { gap: 0; }
  .iconbtn { width: 38px; height: 38px; }

  .nav__list {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 6px 0 16px;
  }
  .nav__list.is-open { display: flex; }
  .nav__list li { width: 100%; }
  .nav__link { display: block; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .nav__link::after { display: none; }

  .hero { min-height: 62vh; }
  .hero__inner { padding: 72px 0; }
  .hero__media::after {
    background: linear-gradient(180deg, rgba(67, 16, 22, 0.72) 0%, rgba(67, 16, 22, 0.88) 100%);
  }

  .section { padding: 66px 0; }
  .section__head { flex-wrap: wrap; gap: 16px; }
  .section__headText { max-width: none; }
  .section__fill { display: none; }

  .story { grid-template-columns: 1fr; }
  .story__media { min-height: 300px; }
  .story__body { padding: 48px 22px 56px; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 620px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
  .card__name { font-size: 1.25rem; }
  .card__detail { font-size: 0.88rem; }
  .card__foot { flex-direction: column; align-items: flex-start; gap: 9px; }
  .notify__form { flex-direction: column; align-items: stretch; gap: 22px; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__actions .btn { flex: 1; }
}

@media (max-width: 380px) {
  .wrap { padding: 0 16px; }
  .grid { grid-template-columns: 1fr; }
  .masthead__brand img { height: 52px; }
  .masthead.is-stuck .masthead__brand img { height: 46px; }
}