/* ==========================================================================
   Section-specific styles
   Each later build-prompt appends its section's rules here, scoped to that
   section's #id. Keep this file organized in the same top-to-bottom order
   as the sections appear in index.html.
   ========================================================================== */

#site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: transparent;
  color: var(--color-black);
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

#site-header.is-scrolled {
  background-color: var(--color-white);
  box-shadow: 0 2px 16px rgba(20, 20, 20, 0.08);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-sm);
  max-width: 1440px;
  margin: 0 auto;
}

.header__logo {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Icon cluster
   ---------------------------------------------------------------------- */
.header__icons {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  order: 3;
}

.header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: inherit;
  opacity: 0.9;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.header__icon:hover {
  opacity: 1;
  color: var(--color-gold);
}

/* Hamburger (mobile only)
   ---------------------------------------------------------------------- */
.header__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  order: 2;
}

.header__hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.header__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.header__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.header__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Nav — mobile: full-height slide-in panel
   ---------------------------------------------------------------------- */
.header__nav {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(80%, 320px);
  background-color: var(--color-white);
  color: var(--color-black);
  z-index: 101;
  padding: var(--space-lg) var(--space-md);
  visibility: hidden;
  order: 1;
}

.header__nav-close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
}

.header__nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.header__nav-list a {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.1rem;
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

.header__nav-list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-gold);
  transition: width 0.3s ease;
}

.header__nav-list a:hover::after,
.header__nav-list a:focus-visible::after {
  width: 100%;
}

.header__overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(20, 20, 20, 0.5);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
}

/* Tablet and up: full inline nav, hide hamburger/panel chrome
   ---------------------------------------------------------------------- */
@media (min-width: 640px) {
  .header__hamburger,
  .header__nav-close,
  .header__overlay {
    display: none;
  }

  .header__inner {
    flex-wrap: wrap;
    row-gap: var(--space-xs);
  }

  .header__nav {
    position: static;
    height: auto;
    width: auto;
    background-color: transparent;
    color: inherit;
    padding: 0;
    visibility: visible !important;
    transform: none !important;
    flex: 1 1 auto;
    order: 2;
  }

  .header__icons {
    order: 3;
  }

  .header__nav-list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-xs) var(--space-sm);
    margin-top: 0;
  }

  .header__nav-list a {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
  }
}

@media (min-width: 1024px) {
  .header__inner {
    padding: var(--space-sm) var(--space-lg);
    flex-wrap: nowrap;
  }

  .header__logo {
    font-size: 1.5rem;
  }

  .header__nav-list {
    gap: var(--space-sm) var(--space-md);
  }

  .header__nav-list a {
    font-size: 0.85rem;
  }
}

#hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 100vh;
  background-color: var(--color-white);
}

/* dvh accounts for mobile browser chrome (address bar) so the hero never
   runs taller than the actual visible viewport — keeps the trust strip
   fully below the fold on load. */
@supports (height: 100dvh) {
  #hero {
    height: 100dvh;
  }
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Soft cream-to-transparent scrim so text stays legible over the video —
   stronger and wider than a static photo would need, since the footage
   pans through several compositions rather than holding one fixed layout. */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(245, 241, 232, 0.75) 0%,
    rgba(245, 241, 232, 0.4) 45%,
    rgba(245, 241, 232, 0.05) 75%
  );
}

.hero__particles-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero__particles {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__content {
  position: relative;
  z-index: 3;
  max-width: 90%;
  padding: 0 var(--space-sm);
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: var(--space-xs);
}

.hero__heading {
  font-size: 2.25rem;
  margin-bottom: var(--space-sm);
}

.hero__subtext {
  max-width: 380px;
  font-size: 1rem;
  margin-bottom: var(--space-md);
}

.hero__cta {
  display: inline-block;
  padding: 0.9rem 2.25rem;
  background-color: var(--color-black);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.hero__cta:hover {
  background-color: var(--color-gold-dark);
}

@media (min-width: 640px) {
  #hero {
    background-position: right center;
  }

  .hero__content {
    max-width: 55%;
    padding: 0 var(--space-md);
  }

  .hero__heading {
    font-size: 3rem;
  }

  .hero__subtext {
    font-size: 1.05rem;
  }
}

@media (min-width: 1024px) {
  .hero__content {
    max-width: 38%;
    padding: 0 var(--space-lg);
  }

  .hero__heading {
    font-size: 4rem;
  }
}

#trust-strip {
  background-color: var(--color-white);
  border-top: 1px solid rgba(20, 20, 20, 0.08);
  border-bottom: 1px solid rgba(20, 20, 20, 0.06);
  padding: var(--space-lg) var(--space-sm);
}

.trust-strip__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md) var(--space-sm);
  max-width: 1440px;
  margin: 0 auto;
}

.trust-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 1 calc(50% - var(--space-sm));
  max-width: 160px;
}

.trust-badge__icon {
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--space-xs);
  color: var(--color-gold-dark);
}

.trust-badge__label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--color-black);
  max-width: 150px;
}

@media (min-width: 640px) {
  #trust-strip {
    padding: var(--space-lg) var(--space-md);
  }

  .trust-badge {
    flex-basis: calc(33.333% - var(--space-sm));
    max-width: 220px;
  }

  .trust-badge__label {
    font-size: 0.85rem;
  }
}

@media (min-width: 1024px) {
  #trust-strip {
    padding: var(--space-lg);
  }

  .trust-strip__inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--space-md);
  }

  .trust-badge {
    flex: 1 1 0;
    max-width: none;
  }

  .trust-badge__icon {
    width: 2.25rem;
    height: 2.25rem;
  }

  .trust-badge__label {
    font-size: 0.9rem;
  }
}

/* Reusable section title — later content sections share this treatment. */
.section-heading {
  text-align: center;
  font-size: 1.75rem;
  margin-bottom: var(--space-lg);
}

#shop-by-category {
  padding: var(--space-xl) var(--space-sm);
  max-width: 1440px;
  margin: 0 auto;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.category-tile {
  display: flex;
  flex-direction: column;
  color: var(--color-black);
  text-decoration: none;
}

.category-tile__image-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--color-white);
}

.category-tile__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.category-tile:hover .category-tile__image-wrap img,
.category-tile:focus-visible .category-tile__image-wrap img {
  transform: scale(1.04);
}

.category-tile__label {
  margin-top: var(--space-xs);
  text-align: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-black);
  transition: color 0.3s ease;
}

.category-tile:hover .category-tile__label,
.category-tile:focus-visible .category-tile__label {
  color: var(--color-gold-dark);
}

@media (min-width: 640px) {
  #shop-by-category {
    padding: var(--space-xl) var(--space-md);
  }

  .category-grid {
    gap: var(--space-md);
  }

  .category-tile__label {
    font-size: 0.9rem;
  }
}

@media (min-width: 1024px) {
  #shop-by-category {
    padding: var(--space-xl) var(--space-lg);
  }

  .section-heading {
    font-size: 2.25rem;
  }

  .category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg) var(--space-md);
  }
}

#bestsellers {
  padding: var(--space-xl) var(--space-sm);
  max-width: 1440px;
  margin: 0 auto;
  background-color: var(--color-white);
}

.bestsellers-carousel {
  position: relative;
}

.bestsellers-track {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  padding-bottom: 2px;
}

.bestsellers-track::-webkit-scrollbar {
  display: none;
}

.bestsellers-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

/* ~1.2 tiles visible on mobile — the cut-off sliver at the edge is the
   swipe-for-more cue, so tiles deliberately don't divide evenly. */
.bestseller-tile {
  flex: 0 0 82%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  color: var(--color-black);
  text-decoration: none;
}

/* Controls row (arrows + dots) sits below the track, not overlaid on it. */
.bestsellers-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.bestsellers-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: transparent;
  color: var(--color-black);
  border: 1px solid rgba(20, 20, 20, 0.2);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.bestsellers-arrow:hover {
  background-color: var(--color-cream);
  border-color: rgba(20, 20, 20, 0.35);
}

.bestsellers-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--space-xs);
}

.bestsellers-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: rgba(20, 20, 20, 0.2);
  transition: width 0.25s ease, background-color 0.25s ease;
}

.bestsellers-dot.is-active {
  width: 22px;
  background-color: var(--color-black);
}

.bestseller-tile__image-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--color-cream);
}

.bestseller-tile__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.bestseller-tile:hover .bestseller-tile__image-wrap img,
.bestseller-tile:focus-visible .bestseller-tile__image-wrap img {
  transform: scale(1.04);
}

.bestseller-tile__label {
  margin-top: var(--space-xs);
  text-align: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--color-black);
  transition: color 0.3s ease;
}

.bestseller-tile:hover .bestseller-tile__label,
.bestseller-tile:focus-visible .bestseller-tile__label {
  color: var(--color-gold-dark);
}

.bestseller-tile__price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background-color: var(--color-black);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8rem;
  transition: background-color 0.2s ease;
}

.bestseller-tile__price svg {
  flex: 0 0 auto;
}

.bestseller-tile:hover .bestseller-tile__price,
.bestseller-tile:focus-visible .bestseller-tile__price {
  background-color: var(--color-gold-dark);
}

@media (min-width: 640px) {
  #bestsellers {
    padding: var(--space-xl) var(--space-md);
  }

  .bestsellers-track {
    gap: var(--space-md);
  }

  /* ~2 tiles visible, third peeking at the edge */
  .bestseller-tile {
    flex-basis: 46%;
  }

  .bestseller-tile__label {
    font-size: 0.9rem;
  }
}

@media (min-width: 1024px) {
  #bestsellers {
    padding: var(--space-xl) var(--space-lg);
  }

  /* ~3.3 tiles visible on desktop */
  .bestseller-tile {
    flex-basis: 29%;
  }

  .bestseller-tile__price {
    font-size: 0.85rem;
  }
}

#shop-by-occasion {
  padding: var(--space-xl) var(--space-sm);
  max-width: 1440px;
  margin: 0 auto;
}

.occasion-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

.occasion-tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  color: var(--color-white);
  text-decoration: none;
}

.occasion-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.occasion-tile:hover img,
.occasion-tile:focus-visible img {
  transform: scale(1.04);
}

/* Explicit dark scrim across the bottom third — guarantees legible white
   text regardless of what the underlying photo looks like at that spot. */
.occasion-tile__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 60%);
  transition: background 0.3s ease;
}

.occasion-tile:hover .occasion-tile__scrim,
.occasion-tile:focus-visible .occasion-tile__scrim {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 60%);
}

.occasion-tile__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--space-sm) var(--space-md) var(--space-md);
  display: flex;
  flex-direction: column;
}

.occasion-tile__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--color-white);
}

.occasion-tile__sub {
  margin-top: var(--space-xs);
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-white);
  opacity: 0.92;
}

@media (min-width: 640px) {
  #shop-by-occasion {
    padding: var(--space-xl) var(--space-md);
  }

  .occasion-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .occasion-tile__label {
    font-size: 1.75rem;
  }

  .occasion-tile__sub {
    font-size: 0.9rem;
  }
}

@media (min-width: 1024px) {
  #shop-by-occasion {
    padding: var(--space-xl) var(--space-lg);
  }

  .occasion-tile__content {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
  }

  .occasion-tile__label {
    font-size: 2rem;
  }
}

#brand-story {
  padding: var(--space-xl) var(--space-sm);
  max-width: 1440px;
  margin: 0 auto;
}

.brand-story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.brand-story__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.brand-story__heading {
  font-size: 1.75rem;
  margin-bottom: var(--space-sm);
}

.brand-story__paragraph {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-black);
  max-width: 46ch;
}

@media (min-width: 640px) {
  #brand-story {
    padding: var(--space-xl) var(--space-md);
  }
}

@media (min-width: 1024px) {
  #brand-story {
    padding: var(--space-xl) var(--space-lg);
  }

  .brand-story__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  .brand-story__heading {
    font-size: 2.25rem;
  }

  .brand-story__paragraph {
    font-size: 1.15rem;
  }
}

#site-footer {
  background-color: var(--color-black);
  color: var(--color-cream);
  padding: var(--space-xl) var(--space-sm) var(--space-md);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 1440px;
  margin: 0 auto;
}

.footer__logo {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--color-cream);
  margin-bottom: var(--space-xs);
}

.footer__tagline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9rem;
  color: rgba(245, 241, 232, 0.65);
  max-width: 260px;
  margin-bottom: var(--space-sm);
}

.footer__socials {
  display: flex;
  gap: var(--space-sm);
}

.footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(245, 241, 232, 0.25);
  border-radius: 50%;
  color: var(--color-cream);
  opacity: 0.85;
  transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.footer__social:hover,
.footer__social:focus-visible {
  opacity: 1;
  color: var(--color-gold);
  border-color: var(--color-gold);
}

.footer__col-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-sm);
}

.footer__visit-name {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--color-cream);
  margin-bottom: var(--space-xs);
}

.footer__visit-city {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.55);
  margin-bottom: var(--space-sm);
}

.footer__visit-address,
.footer__visit-hours {
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(245, 241, 232, 0.7);
  margin-bottom: var(--space-xs);
}

.footer__visit-phone {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--color-cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 241, 232, 0.3);
  margin-top: var(--space-xs);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer__visit-phone:hover,
.footer__visit-phone:focus-visible {
  color: var(--color-gold);
  border-color: var(--color-gold);
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer__col a {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9rem;
  color: rgba(245, 241, 232, 0.7);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer__col a:hover,
.footer__col a:focus-visible {
  color: var(--color-gold);
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(245, 241, 232, 0.15);
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(245, 241, 232, 0.55);
}

.footer__legal {
  display: flex;
  gap: var(--space-md);
}

.footer__legal a {
  color: rgba(245, 241, 232, 0.55);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer__legal a:hover,
.footer__legal a:focus-visible {
  color: var(--color-gold);
}

@media (min-width: 640px) {
  #site-footer {
    padding: var(--space-xl) var(--space-md) var(--space-md);
  }

  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 1024px) {
  #site-footer {
    padding: var(--space-xl) var(--space-lg) var(--space-md);
  }

  .footer__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: var(--space-xl);
  }
}

/* ==========================================================================
   Promo banner — a reusable "campaign" banner pattern (image right, text
   over a fading scrim on the left). Same contrast technique as the hero
   and Shop by Occasion: an explicit scrim, not a hope that the photo is
   light enough underneath.
   ========================================================================== */
/* Matches the source photo's native 2:1 ratio so object-fit: cover has
   almost nothing to crop — the full frame (including its left negative
   space) stays visible instead of being trimmed to fit an arbitrary
   section height. */
.promo-banner {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 2 / 1;
  min-height: 320px;
  display: flex;
  align-items: center;
  background-color: var(--color-white);
}

.promo-banner__media {
  position: absolute;
  inset: 0;
}

.promo-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% center;
  display: block;
}

/* Mobile: text is centered and spans the full width, so the scrim needs
   to stay strong edge-to-edge — a left-to-right fade would leave the
   right half of centered text sitting almost directly on the photo.
   Desktop switches to the directional fade below, once the text is
   actually confined to the left column. */
.promo-banner__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.85) 55%,
    rgba(255, 255, 255, 0.6) 100%
  );
}

.promo-banner__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 480px;
  margin: 0 var(--space-sm);
  padding: var(--space-lg) 0;
  text-align: center;
}

.promo-banner__lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.promo-banner__wordmark {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--color-black);
}

.promo-banner__divider {
  width: 1px;
  height: 16px;
  background-color: rgba(20, 20, 20, 0.3);
}

.promo-banner__eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-black);
}

.promo-banner__heading {
  font-size: 1.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.promo-banner__rule {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 auto var(--space-sm);
  max-width: 280px;
  color: var(--color-gold-dark);
}

.promo-banner__rule-line {
  flex: 1 1 auto;
  height: 1px;
  background-color: rgba(20, 20, 20, 0.25);
}

.promo-banner__subheading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: var(--space-md);
}

.promo-banner__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.promo-banner__btn {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  background-color: var(--color-black);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.promo-banner__btn:hover,
.promo-banner__btn:focus-visible {
  background-color: var(--color-gold-dark);
}

.promo-banner__btn--outline {
  background-color: transparent;
  color: var(--color-black);
  border: 1px solid rgba(20, 20, 20, 0.4);
}

.promo-banner__btn--outline:hover,
.promo-banner__btn--outline:focus-visible {
  background-color: var(--color-black);
  color: var(--color-cream);
  border-color: var(--color-black);
}

.promo-banner__note {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.85rem;
  color: rgba(20, 20, 20, 0.7);
}

@media (min-width: 640px) {
  .promo-banner__content {
    margin: 0 var(--space-md);
  }
}

@media (min-width: 1024px) {
  /* Text is now confined to the left column (max-width + text-align:left
     below), so the fade can reveal more of the photo on the right. */
  .promo-banner__scrim {
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.55) 42%,
      rgba(255, 255, 255, 0.05) 65%
    );
  }

  .promo-banner__content {
    margin: 0 var(--space-xl);
    text-align: left;
  }

  .promo-banner__lockup,
  .promo-banner__rule {
    justify-content: flex-start;
    margin-left: 0;
  }

  .promo-banner__heading {
    font-size: 2.25rem;
  }

  .promo-banner__subheading {
    font-size: 1.4rem;
  }

  .promo-banner__actions {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   Category carousel — a compact, curated quick-nav (4 cards), distinct
   from the full 9-tile Shop by Category grid. Arrows sit beside the track
   rather than overlaid on top of it, so they never cover the photos.
   ========================================================================== */
.cat-carousel {
  padding: var(--space-xl) 0;
  background-color: var(--color-white);
}

.cat-carousel .section-heading {
  padding: 0 var(--space-sm);
}

.cat-carousel__wrap {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0 var(--space-xs);
}

.cat-carousel__track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  padding: 2px;
}

.cat-carousel__track::-webkit-scrollbar {
  display: none;
}

.cat-carousel__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

/* Portrait cards, deliberately not dividing evenly into the visible
   width — the cut-off card at the edge signals "swipe for more". */
.cat-carousel__card {
  flex: 0 0 68%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  color: var(--color-black);
  text-decoration: none;
}

.cat-carousel__image-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 462 / 554;
  background-color: var(--color-white);
}

.cat-carousel__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.cat-carousel__card:hover .cat-carousel__image-wrap img,
.cat-carousel__card:focus-visible .cat-carousel__image-wrap img {
  transform: scale(1.03);
}

.cat-carousel__label {
  margin-top: var(--space-sm);
  text-align: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-black);
  transition: color 0.2s ease;
}

.cat-carousel__card:hover .cat-carousel__label,
.cat-carousel__card:focus-visible .cat-carousel__label {
  color: var(--color-gold-dark);
}

.cat-carousel__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-black);
  background: transparent;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.cat-carousel__arrow:hover,
.cat-carousel__arrow:focus-visible {
  opacity: 1;
}

@media (min-width: 640px) {
  .cat-carousel__card {
    flex-basis: 38%;
  }

  .cat-carousel__arrow {
    width: 40px;
    height: 40px;
  }
}

@media (min-width: 1024px) {
  .cat-carousel__wrap {
    padding: 0 var(--space-lg);
    gap: var(--space-sm);
  }

  .cat-carousel__card {
    flex-basis: 22%;
  }

  .cat-carousel__label {
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   Promo banner — dark variant: white text, right-aligned at desktop.
   Same mobile-safety rule as the base variant: the scrim stays strong and
   fairly even edge-to-edge until the text is actually confined to one
   side (at 1024px+), rather than assuming the photo is dark enough on
   its own wherever the text happens to land.
   ========================================================================== */
.promo-banner--dark {
  background-color: var(--color-black);
}

.promo-banner--dark .promo-banner__scrim {
  background: linear-gradient(
    to right,
    rgba(20, 20, 20, 0.55) 0%,
    rgba(20, 20, 20, 0.75) 50%,
    rgba(20, 20, 20, 0.88) 100%
  );
}

.promo-banner--dark .promo-banner__eyebrow,
.promo-banner--dark .promo-banner__heading {
  color: var(--color-cream);
}

.promo-banner__subheading--light {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(245, 241, 232, 0.85);
  margin-bottom: var(--space-md);
}

.promo-banner__btn--light {
  color: var(--color-cream);
  border-color: rgba(245, 241, 232, 0.6);
}

.promo-banner__btn--light:hover,
.promo-banner__btn--light:focus-visible {
  background-color: var(--color-cream);
  color: var(--color-black);
  border-color: var(--color-cream);
}

@media (min-width: 1024px) {
  .promo-banner--dark {
    justify-content: flex-end;
  }

  .promo-banner--dark .promo-banner__scrim {
    background: linear-gradient(
      to right,
      rgba(20, 20, 20, 0.05) 0%,
      rgba(20, 20, 20, 0.55) 42%,
      rgba(20, 20, 20, 0.9) 65%,
      rgba(20, 20, 20, 0.92) 100%
    );
  }

  .promo-banner--dark .promo-banner__content {
    text-align: right;
  }

  .promo-banner--dark .promo-banner__actions {
    justify-content: flex-end;
  }
}

/* ==========================================================================
   Shapes split — 50/50 at desktop: the box-of-loose-diamonds photo on the
   left (normal cover-fit panel), the full diamond-shapes grid shown whole
   (object-fit: contain, not cropped) plus its heading and CTA on the
   right.
   ========================================================================== */
.shapes-split {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
}

.shapes-split__photo {
  width: 100%;
  aspect-ratio: 960 / 1177;
}

.shapes-split__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shapes-split__grid-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xl) var(--space-sm);
  text-align: center;
}

.shapes-split__media {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.shapes-split__media img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

.shapes-split__heading {
  font-size: 1.5rem;
  margin-bottom: var(--space-md);
}

@media (min-width: 1024px) {
  .shapes-split {
    flex-direction: row;
    align-items: stretch;
  }

  .shapes-split__photo {
    width: 50%;
    aspect-ratio: auto;
  }

  .shapes-split__grid-side {
    width: 50%;
    justify-content: center;
    padding: var(--space-xl);
  }

  .shapes-split__media img {
    max-width: 420px;
  }

  .shapes-split__heading {
    font-size: 1.75rem;
  }
}

/* ==========================================================================
   Split promo — two equal image panels, each with its own small solid
   CTA button anchored near the bottom. The button's solid background is
   what keeps the label legible, not the photo underneath — same
   contrast principle as everywhere else, just applied to a tiny label
   instead of a full text block.
   ========================================================================== */
.split-promo {
  display: flex;
  flex-direction: column;
}

.split-promo__panel {
  position: relative;
  display: block;
  /* aspect-ratio is set inline per panel, matching that panel's own image
     dimensions exactly — a single shared value here previously forced a
     slightly wrong box shape onto images with a different native ratio. */
  overflow: hidden;
  text-decoration: none;
}

.split-promo__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.split-promo__panel:hover img,
.split-promo__panel:focus-visible img {
  transform: scale(1.03);
}

.split-promo__btn {
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-md);
  z-index: 2;
  display: inline-block;
  padding: 0.75rem 1.25rem;
  background-color: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(20, 20, 20, 0.15);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.split-promo__panel:hover .split-promo__btn,
.split-promo__panel:focus-visible .split-promo__btn {
  background-color: var(--color-black);
  color: var(--color-cream);
}

@media (min-width: 1024px) {
  .split-promo {
    flex-direction: row;
  }

  /* Same proportional sizing as the promo banners — height derives from
     width via the panel's own aspect-ratio, so it fills full-bleed width
     without forcing an unrelated fixed height that crops the photo down
     to a tight, disconnected close-up. */
  .split-promo__panel {
    width: 50%;
  }
}

/* ==========================================================================
   Promo banner — bottom-left content position (storefront-style banner).
   Uses a bottom-anchored scrim (like Shop by Occasion's) rather than the
   left/right fade the other promo-banner variants use, since the content
   here sits in a corner, not a full-height column — the risk direction
   is different, so the fix is different too.
   ========================================================================== */
.promo-banner--bottom {
  align-items: flex-end;
  justify-content: flex-start;
}

.promo-banner--bottom .promo-banner__actions {
  justify-content: flex-start;
}

.promo-banner--bottom .promo-banner__scrim {
  background: linear-gradient(
    to top,
    rgba(20, 20, 20, 0.88) 0%,
    rgba(20, 20, 20, 0.55) 30%,
    rgba(20, 20, 20, 0.05) 65%
  );
}

.promo-banner--bottom .promo-banner__content {
  text-align: left;
  margin-bottom: var(--space-lg);
  max-width: none;
}

.promo-banner--bottom .promo-banner__heading {
  font-size: 1.5rem;
}

.promo-banner__btn--solid-white {
  background-color: var(--color-white);
  color: var(--color-black);
  border: none;
}

.promo-banner__btn--solid-white:hover,
.promo-banner__btn--solid-white:focus-visible {
  background-color: var(--color-gold-dark);
  color: var(--color-cream);
}

@media (min-width: 640px) {
  .promo-banner--bottom .promo-banner__heading {
    font-size: 1.75rem;
  }
}

/* ==========================================================================
   Social feed — "Follow us on social" grid, styled in our own theme
   colors (gold / cream / black) rather than the reference's navy.
   ========================================================================== */
.social-feed {
  padding: var(--space-xl) var(--space-sm);
  text-align: center;
  background-color: var(--color-white);
}

.social-feed__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--color-gold-dark);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.social-feed .section-heading {
  margin-bottom: var(--space-md);
}

.social-feed__profile {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: 420px;
  margin: 0 auto var(--space-lg);
  text-align: left;
}

.social-feed__avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-black);
  color: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.9rem;
}

.social-feed__handle {
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.social-feed__bio {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.85rem;
  color: rgba(20, 20, 20, 0.7);
}

.social-feed__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-sm);
  max-width: 1100px;
  margin: 0 auto var(--space-lg);
}

.social-feed__post {
  display: block;
  text-decoration: none;
  color: var(--color-black);
}

.social-feed__post-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.social-feed__post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.social-feed__post:hover .social-feed__post-image img,
.social-feed__post:focus-visible .social-feed__post-image img {
  transform: scale(1.03);
}

.social-feed__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: rgba(20, 20, 20, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  pointer-events: none;
}

.social-feed__caption {
  margin-top: var(--space-xs);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(20, 20, 20, 0.75);
  text-align: left;
}

.social-feed__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.social-feed__load-more {
  padding: 0.85rem 1.75rem;
  background-color: var(--color-black);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

.social-feed__load-more:hover,
.social-feed__load-more:focus-visible {
  background-color: var(--color-gold-dark);
}

.social-feed__ig-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  background-color: transparent;
  color: var(--color-black);
  border: 1px solid rgba(20, 20, 20, 0.4);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.social-feed__ig-btn:hover,
.social-feed__ig-btn:focus-visible {
  background-color: var(--color-black);
  color: var(--color-cream);
  border-color: var(--color-black);
}

@media (min-width: 640px) {
  .social-feed__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   Minimal footer — single dark bar (logo + socials, divider, copyright +
   legal links), matching the reference's structure but in our own theme
   colors. Scoped under .site-footer--minimal so it doesn't touch the
   full 4-column #site-footer styling used on index.html.
   ========================================================================== */
#site-footer.site-footer--minimal {
  background-color: var(--color-white);
  color: var(--color-black);
  padding: var(--space-md) var(--space-sm);
  border-top: 1px solid rgba(20, 20, 20, 0.12);
}

.footer-minimal__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
}

.footer-minimal__logo {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-black);
  text-decoration: none;
}

.footer-minimal__socials {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.footer-minimal__social {
  display: flex;
  color: var(--color-black);
  opacity: 0.75;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.footer-minimal__social:hover,
.footer-minimal__social:focus-visible {
  opacity: 1;
  color: var(--color-gold-dark);
}

.footer-minimal__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(20, 20, 20, 0.12);
  text-align: center;
}

.footer-minimal__copyright {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.75rem;
  color: rgba(20, 20, 20, 0.6);
}

.footer-minimal__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

.footer-minimal__legal a {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.75rem;
  color: rgba(20, 20, 20, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-minimal__legal a:hover,
.footer-minimal__legal a:focus-visible {
  color: var(--color-gold-dark);
}

@media (min-width: 640px) {
  .footer-minimal__top {
    flex-direction: row;
    justify-content: space-between;
  }

  .footer-minimal__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}