/*
 * home.css — Homepage-specific styles for the Vandeya theme.
 * Loaded only on the front page via is_front_page() in functions.php.
 * Global/reusable component styles live in style.css.
 */


/* =========================================
   1. HERO SLIDER
========================================= */

/* Outer container — fills viewport below the fixed header area */
.hp-hero {
  background: var(--color-ink);
  position: relative;
  overflow: hidden;
  /* Fallback for browsers without svh support */
  height: calc(83vh - var(--header-h) - var(--ann-h));
  /* svh = small viewport height, excludes mobile browser chrome */
  height: calc(83svh - var(--header-h) - var(--ann-h));
  min-height: 440px;
  max-height: 740px;
}

/* Slide track — scrolls horizontally */
.hp-hero__track {
  display: flex;
  height: 100%;
  transition: transform 650ms cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

/* Individual slide — full-bleed image behind content */
.hp-hero__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Full-bleed background image */
.hp-hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
  z-index: 0;
}

/* Gradient overlay: dark-opaque on left (text area), fades to transparent right */
.hp-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(28,26,24,.93) 0%,
    rgba(28,26,24,.88) 30%,
    rgba(28,26,24,.45) 60%,
    rgba(28,26,24,.0)  85%
  );
}

/* Left content panel */
.hp-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 52px 64px 60px;
  max-width: 580px;
}

.hp-hero__eyebrow {
  font-family: var(--font-label);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-gold-bright);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.hp-hero__eyebrow-line {
  width: 28px;
  height: 1px;
  background: var(--color-gold-bright);
  display: block;
  flex-shrink: 0;
}

.hp-hero__headline {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--color-white);
  margin-bottom: 6px;
}

.hp-hero__headline em {
  color: var(--color-gold-bright);
  font-style: italic;
}

.hp-hero__body {
  font-size: 1rem;
  color: rgba(250,247,244,.7);
  line-height: 1.8;
  margin: 18px 0 34px;
  max-width: 340px;
}

.hp-hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hp-hero__scroll-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
}

.hp-hero__scroll-line {
  width: 32px;
  height: 2px;
  background: rgba(250,247,244,.15);
  display: block;
  flex-shrink: 0;
}

.hp-hero__scroll-text {
  font-family: var(--font-label);
  font-size: .5625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250,247,244,.25);
}

/* Badge — top-right corner overlay */
.hp-hero__panel-badge {
  position: absolute;
  top: 28px;
  right: 28px;
  background: var(--color-rose);
  padding: 7px 14px;
  font-family: var(--font-label);
  font-size: .5625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-white);
  z-index: 3;
}
.hp-hero__panel-badge--gold { background: var(--color-gold); }

/* Dot navigation bar below hero */
.hp-hero__dots {
  background: var(--color-ink);
  padding: 14px 60px;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  border-top: 1px solid rgba(255,255,255,.05);
}

/* Each dot is a <button> — extended click area via ::before */
.hp-hero__dot {
  border: none;
  padding: 0;
  border-radius: 1px;
  height: 2px;
  cursor: pointer;
  position: relative;
  transition: width var(--t-base), background-color var(--t-base);
}

/* Extend click/tap target to 20px tall without affecting visual size */
.hp-hero__dot::before {
  content: '';
  position: absolute;
  inset: -9px -4px;
}

.hp-hero__dot--active { width: 32px; background: var(--color-rose); }
.hp-hero__dot--idle   { width: 20px; background: rgba(250,247,244,.2); }
.hp-hero__dot--idle:hover { background: rgba(250,247,244,.45); }


/* =========================================
   2. TRUST STRIP
========================================= */
.trust-strip {
  background: var(--color-white);
  padding: 14px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  border-bottom: 1px solid var(--color-cream-dark);
  flex-wrap: wrap;
}

.trust-strip__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-shrink: 0;
}

.trust-strip__icon {
  width: 20px;
  height: 20px;
  background: var(--color-rose-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust-strip__text {
  font-family: var(--font-label);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--color-ink-mid);
  white-space: nowrap;
  font-weight: 500;
}

.trust-strip__divider {
  width: 1px;
  height: 18px;
  background: var(--color-cream-dark);
  flex-shrink: 0;
}


/* =========================================
   3. JEWELLERY SPOTLIGHT
========================================= */
.jewellery-spotlight {
  background: var(--color-white);
  padding: 72px 60px;
}

.jewellery-spotlight__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: center;
  padding: 0 12px;
}

/* Left — image column */
.jewellery-spotlight__visual {
  position: relative;
}

.jewellery-spotlight__image {
  width: 100%;
  height: 500px;
  overflow: hidden;
  background: linear-gradient(160deg, #f2dcd5 0%, #e0c4ba 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

/* Stat counter box, overlapping bottom-right corner */
.jewellery-spotlight__stat {
  position: absolute;
  bottom: -16px;
  right: -20px;
  background: var(--color-white);
  border: 1px solid var(--color-cream-dark);
  padding: var(--space-16) var(--space-20);
  box-shadow: var(--shadow-md);
}

.jewellery-spotlight__stat-number {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 600;
  color: var(--color-rose);
  line-height: 1;
}

.jewellery-spotlight__stat-label {
  font-family: var(--font-label);
  font-size: .5625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-top: var(--space-4);
}

/* "New Every Week" badge, overlapping top-left corner */
.jewellery-spotlight__new-badge {
  position: absolute;
  top: 20px;
  left: -20px;
  background: var(--color-ink);
  padding: 11px var(--space-16);
  font-family: var(--font-label);
  font-size: .5625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-gold-bright);
}

/* Right — content column */

.jewellery-spotlight__description {
  font-size: .9375rem;
  color: var(--color-ink-mid);
  line-height: 1.8;
  margin-top: 20px;
}

.jewellery-spotlight__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
}

.jewellery-spotlight__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1rem;
  color: var(--color-ink-mid);
}

.jewellery-spotlight__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-rose);
  margin-top: 7px;
  flex-shrink: 0;
}


/* =========================================
   4. JEWELLERY SUBCATEGORIES
========================================= */
.jewellery-subcats {
  background: var(--color-cream);
  padding: 64px 60px;
}

.jewellery-subcats__header {
  text-align: center;
  margin-bottom: 40px;
}

.jewellery-subcats__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-16);
}

.jewellery-subcats__item {
  background: var(--color-white);
  border: 1px solid var(--color-cream-dark);
  padding: 22px 12px;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.jewellery-subcats__item:hover {
  background: var(--color-rose-tint);
  border-color: var(--color-rose);
}

.jewellery-subcats__item:hover .jewellery-subcats__label { color: var(--color-rose); }

.jewellery-subcats__item:hover .jewellery-subcats__icon {
  color: var(--color-white);
}

.jewellery-subcats__item:hover .jewellery-subcats__icon svg {
  stroke: var(--color-white);
}

.jewellery-subcats__icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-rose-light);
  margin: 0 auto var(--space-12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.jewellery-subcats__label {
  font-family: var(--font-label);
  font-size: .675rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-ink-mid);
  font-weight: 500;
}


/* =========================================
   5. BEST SELLERS
========================================= */
.best-sellers {
  background: var(--color-white);
  padding: 72px 60px;
}

.best-sellers__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
}

.best-sellers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

/* Product tiles in best-sellers have no gap; borders create the grid */
.best-sellers__grid .product-tile { border-right: none; }
.best-sellers__grid .product-tile:last-child { border-right: 1px solid var(--color-cream-dark); }


/* =========================================
   6. MARQUEE STRIP (rose background)
========================================= */
.hp-marquee {
  background: var(--color-rose);
  padding: 14px 0;
  overflow: hidden;
}

.hp-marquee__track {
  display: flex;
  white-space: nowrap;
  animation: hp-marquee-scroll 32s linear infinite;
  will-change: transform;
}
.hp-marquee__track:hover { animation-play-state: paused; }

@keyframes hp-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.hp-marquee__item {
  font-family: var(--font-label);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-white);
  padding: 0 28px;
  flex-shrink: 0;
}
.hp-marquee__item--dim { color: rgba(255,255,255,.7); }


/* =========================================
   7. EDITORIAL BRIDAL
========================================= */
.editorial-bridal {
  background: var(--color-ink);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.editorial-bridal__panel {
  background: linear-gradient(160deg, #2a1a14 0%, #1a1008 100%);
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

/* Gradient that fades the image into the dark right column */
.editorial-bridal__panel-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 55%, var(--color-ink) 100%);
  pointer-events: none;
}

.editorial-bridal__content {
  padding: 60px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.editorial-bridal__quote {
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
  color: var(--color-gold-bright);
  margin-bottom: 28px;
  opacity: .9;
  line-height: 1.7;
}

.editorial-bridal__headline {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.08;
  margin-bottom: var(--space-16);
}

.editorial-bridal__headline em {
  color: var(--color-rose);
  font-style: italic;
}

.editorial-bridal__body {
  font-size: 1rem;
  color: rgba(250,247,244,.7);
  line-height: 1.8;
  margin-bottom: 28px;
  max-width: 340px;
}

.editorial-bridal__occasions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: 32px;
}

.editorial-bridal__tag {
  font-family: var(--font-label);
  font-size: .5625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-gold-bright);
  border: 1px solid rgba(201,169,110,.3);
  padding: 5px 12px;
}

.editorial-bridal__content .btn {
    max-width: fit-content;
}

/* =========================================
   8. CATEGORY CARDS
========================================= */
.category-cards {
  background: var(--color-cream);
  padding: 72px 60px;
}

.category-cards__header {
  text-align: center;
  margin-bottom: 40px;
}

.category-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.category-cards__card {
  position: relative;
  height: 360px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.category-cards__card--earrings  { background: linear-gradient(180deg, #f5e8e4 0%, #e8d0c8 100%); }
.category-cards__card--necklaces { background: linear-gradient(180deg, #f5f0e4 0%, #e8dfc8 100%); }
.category-cards__card--bridal    { background: linear-gradient(180deg, #f2e4d8 0%, #e0c8b8 100%); }
.category-cards__card--bracelets { background: linear-gradient(180deg, #e8e4f5 0%, #d0cce8 100%); }
.category-cards__card--rings     { background: linear-gradient(180deg, #e4f0e8 0%, #c8dfd0 100%); }
.category-cards__card--anklets   { background: linear-gradient(180deg, #f0e8e4 0%, #dfd0c8 100%); }

.category-cards__card-count {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(250,247,244,.15);
  padding: 4px 10px;
  font-family: var(--font-label);
  font-size: .5625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-white);
}
.category-cards__card-count--rose { background: rgba(181,72,90,.7); }

.category-cards__card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px 20px;
  background: linear-gradient(to top, rgba(28,26,24,.7) 0%, transparent 100%);
}

.category-cards__card-meta {
  font-family: var(--font-label);
  font-size: .5625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(250,247,244,.65);
  margin-bottom: var(--space-4);
}

.category-cards__card-title {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 10px;
}

.category-cards__card-link {
  font-family: var(--font-label);
  font-size: .5625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-gold-bright);
}

/* Subtle zoom on hover */
.category-cards__card:hover .category-cards__card-overlay { background: linear-gradient(to top, rgba(28,26,24,.85) 0%, transparent 100%); }


/* =========================================
   9. NEW ARRIVALS
========================================= */
.new-arrivals {
  background: var(--color-white);
  padding: 72px 60px;
}

.new-arrivals__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
}

/* Outer layout: featured left (1fr) + 3×2 secondary right (2fr) */
.new-arrivals__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
}

/* ── Featured tile — image grows to fill the full column height ── */
.new-arrivals__featured {
  display: flex;
  flex-direction: column;
}
.new-arrivals__featured .product-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.new-arrivals__featured .product-tile .product-tile__image-wrap {
  aspect-ratio: auto;
  flex: 1;
  min-height: 0;
}
/* min-height drives the shared row height — both columns match it */
.new-arrivals__featured .product-tile .product-tile__placeholder {
  height: 100%;
  min-height: 460px;
}

/* ── Secondary grid: 3 columns × 2 rows ───────────────────────── */
/* height: 100% fills the stretched outer grid cell */
.new-arrivals__secondary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
  height: 100%;
}
.new-arrivals__secondary > [role="listitem"] {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.new-arrivals__secondary .product-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.new-arrivals__secondary .product-tile .product-tile__image-wrap {
  aspect-ratio: auto;
  flex: 1;
  min-height: 0;
}
/* Compact body for the smaller secondary tiles */
.new-arrivals__secondary .product-tile__body  { padding: 10px 14px; }
.new-arrivals__secondary .product-tile__name  { font-size: .9375rem; }
.new-arrivals__secondary .product-tile__price { font-size: .8125rem; }


/* =========================================
   10. LOOKBOOK
========================================= */
.hp-lookbook {
  background: var(--color-ink);
  padding: 72px 60px;
}

.hp-lookbook__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  align-items: center;
}

.hp-lookbook__eyebrow {
  font-family: var(--font-label);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-gold-bright);
  display: block;
  margin-bottom: var(--space-8);
}

.hp-lookbook__heading {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-white);
}

.hp-lookbook__rule {
  width: 40px;
  height: 1px;
  background: var(--color-gold-bright);
  display: block;
  margin: var(--space-8) 0 var(--space-20);
}

.hp-lookbook__body {
  font-size: 1rem;
  color: rgba(250,247,244,.7);
  line-height: 1.8;
  margin-bottom: 20px;
}

.hp-lookbook__occasions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}

.hp-lookbook__occasions li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(250,247,244,.5);
}

.hp-lookbook__occ-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-gold-bright);
  flex-shrink: 0;
}

/* Photo mosaic grid */
.hp-lookbook__photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 3px;
}

.hp-lookbook__photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  overflow: hidden;
}

.hp-lookbook__photo--tall {
  grid-row: span 2;
  min-height: 280px;
  background: linear-gradient(160deg, #2a1f1a, #1a1210);
}

.hp-lookbook__photo--half {
  height: 138px;
}

.hp-lookbook__photo-label {
  font-family: var(--font-label);
  font-size: .5rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(250,247,244,.45);
}


/* =========================================
   11. ACCESSORIES + HOME DECOR (two-column)
========================================= */
.two-col-shop {
  background: var(--color-cream);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.two-col-shop__col {
  padding: 72px 60px;
}

.two-col-shop__col--alt {
  background: var(--color-cream-dark);
  border-left: 1px solid var(--color-cream-dark);
}

.two-col-shop__mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 28px;
}

/* Mini product tile for accessories / home decor */
.mini-tile {
  background: var(--color-white);
}

.mini-tile__image {
  height: 140px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}


.mini-tile__body {
  padding: 10px 12px;
}

.mini-tile__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

.mini-tile__price {
  font-family: var(--font-label);
  font-size: .875rem;
  color: var(--color-ink);
}

.two-col-shop__footer {
  margin-top: 20px;
}


/* =========================================
   12. STYLE QUIZ
========================================= */
/* =========================================
   12. SHOP BY OCCASION
========================================= */
.occasion-shop {
  background: var(--color-ink);
  padding: 72px 60px;
}

.occasion-shop__header {
  text-align: center;
  margin-bottom: 48px;
}

.occasion-shop__header .section-label {
  color: var(--color-gold-bright);
}

.occasion-shop__header h2 {
  color: var(--color-white);
}

.occasion-shop__header .gold-line {
  background: var(--color-gold-bright);
}

.occasion-shop__intro {
  font-size: .9375rem;
  color: rgba(250,247,244,.55);
  line-height: 1.8;
  max-width: 520px;
  margin: var(--space-20) auto 0;
}

/* 5-column card grid */
.occasion-shop__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
}

/* Base card */
.occasion-shop__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 32px 20px 28px;
  min-height: 300px;
  text-decoration: none;
  overflow: hidden;
  transition: transform 400ms cubic-bezier(.4,0,.2,1);
}

.occasion-shop__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  transition: transform 400ms cubic-bezier(.4,0,.2,1);
  z-index: 0;
}

.occasion-shop__card:hover { transform: none; }
.occasion-shop__card:hover::before { transform: scale(1.04); }

/* Per-occasion gradient backgrounds */
.occasion-shop__card--bridal  { background: linear-gradient(160deg, #3d0e1c 0%, #7a1f38 100%); }
.occasion-shop__card--festive { background: linear-gradient(160deg, #3d2508 0%, #7a4e12 100%); }
.occasion-shop__card--daily   { background: linear-gradient(160deg, #181510 0%, #38302a 100%); }
.occasion-shop__card--party   { background: linear-gradient(160deg, #0e1035 0%, #1f246a 100%); }
.occasion-shop__card--gift    { background: linear-gradient(160deg, #0e2a18 0%, #1f5230 100%); }

/* Shimmer overlay on hover */
.occasion-shop__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background 300ms;
  z-index: 1;
  pointer-events: none;
}
.occasion-shop__card:hover::after { background: rgba(255,255,255,.04); }

/* Icon circle */
.occasion-shop__card-icon {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(250,247,244,.85);
  margin-bottom: 20px;
  transition: background 300ms, border-color 300ms;
}

.occasion-shop__card:hover .occasion-shop__card-icon {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.3);
}

/* Name */
.occasion-shop__card-name {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-white);
  line-height: 1.2;
  margin-bottom: 6px;
  text-align: center;
}

/* Sub */
.occasion-shop__card-sub {
  position: relative;
  z-index: 2;
  font-family: var(--font-body);
  font-size: .75rem;
  color: rgba(250,247,244,.5);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* Product count */
.occasion-shop__card-count {
  position: relative;
  z-index: 2;
  font-family: var(--font-label);
  font-size: .5625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250,247,244,.35);
  margin-bottom: 16px;
}

/* Shop Now CTA — slides up on hover */
.occasion-shop__card-cta {
  position: relative;
  z-index: 2;
  font-family: var(--font-label);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-gold-bright);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 250ms, transform 250ms;
}

.occasion-shop__card:hover .occasion-shop__card-cta {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================
   13. REVIEWS
========================================= */
.reviews {
  background: var(--color-white);
  padding: 72px 60px;
}

.reviews__header {
  text-align: center;
  margin-bottom: 40px;
}

.reviews__aggregate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-16);
}

.reviews__stars { color: var(--color-gold-bright); font-size: 1rem; }

.reviews__score {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-ink);
}

.reviews__count {
  font-size: .8125rem;
  color: var(--color-ink-muted);
}

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
}

.review-card {
  background: var(--color-cream);
  padding: 28px 24px;
  position: relative;
}

/* Decorative large quotation mark */
.review-card__quote-mark {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 300;
  color: var(--color-rose-light);
  position: absolute;
  top: 4px;
  left: 18px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  aria-hidden: true;
}

.review-card__stars {
  color: var(--color-gold-bright);
  margin-bottom: 14px;
  font-size: .8125rem;
}

.review-card__text {
  font-size: 1rem;
  color: var(--color-ink-mid);
  line-height: 1.8;
  margin-bottom: var(--space-16);
  font-style: italic;
}

.review-card__author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-card__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-rose-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-label);
  font-size: .6875rem;
  font-weight: 500;
  color: var(--color-rose);
  flex-shrink: 0;
}

.review-card__name {
  font-family: var(--font-label);
  font-size: .6875rem;
  font-weight: 500;
  color: var(--color-ink);
}

.review-card__location {
  font-size: .6875rem;
  color: var(--color-ink-muted);
}


/* =========================================
   14. INSTAGRAM FEED
========================================= */
.instagram-feed {
  background: var(--color-cream);
  padding: 64px 60px;
}

.instagram-feed__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.instagram-feed__handle {
  font-family: var(--font-label);
  font-size: .6875rem;
  letter-spacing: .1em;
  color: var(--color-rose);
  transition: color var(--t-fast);
}
.instagram-feed__handle:hover { color: var(--color-rose-dark); }

.instagram-feed__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
}

.instagram-feed__photo {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}



/* =========================================
   15. BLOG PREVIEW
========================================= */
.blog-preview {
  background: var(--color-white);
  padding: 72px 60px;
}

.blog-preview__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
}

.blog-preview__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-32);
}



/* =========================================
   IMAGE RULES
========================================= */

/* (hero panel-img removed — image is now .hp-hero__bg-img) */

/* ── Jewellery Spotlight ─────────────────────────────────────── */
/* Parent .jewellery-spotlight__image has height: 500px */
.jewellery-spotlight__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow);
}
.jewellery-spotlight__visual:hover .jewellery-spotlight__img { transform: scale(1.03); }

/* ── Editorial Bridal ────────────────────────────────────────── */
.editorial-bridal__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Category Cards ─────────────────────────────────────────── */
/* Card already has position: relative; overflow: hidden */
.category-cards__card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow);
}
.category-cards__card:hover .category-cards__card-img { transform: scale(1.05); }

/* ── Lookbook photos ─────────────────────────────────────────── */
.hp-lookbook__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── New-arrivals featured ───────────────────────────────────── */
/* In the flexible grid context the img fills the entire image-wrap */
.new-arrivals__featured .product-tile__img {
  height: 100%;
}

/* ── Mini-tile images ────────────────────────────────────────── */
.mini-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Instagram photos ────────────────────────────────────────── */
.instagram-feed__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow);
}
.instagram-feed__photo:hover .instagram-feed__photo-img { transform: scale(1.04); }


/* =========================================
   RESPONSIVE — HOMEPAGE
========================================= */
@media (max-width: 1199px) {
  .hp-hero { max-height: none; }
  .hp-hero__content { padding: 56px 40px; max-width: 520px; }

  .jewellery-spotlight__grid { grid-template-columns: 1fr; gap: 40px; }
  .jewellery-spotlight__visual { display: none; } /* hide until real image available */

  .editorial-bridal { grid-template-columns: 1fr; }
  .editorial-bridal__panel { display: none; }

  .hp-lookbook__grid { grid-template-columns: 1fr;padding: 0 12px; }
  .hp-lookbook__photos { display: none; }

  .two-col-shop { grid-template-columns: 1fr; }

  /* Occasion shop: 3 cols at wide tablet */
  .occasion-shop { padding: 60px 32px; }
  .occasion-shop__grid { grid-template-columns: repeat(3, 1fr); }
  .occasion-shop__card { min-height: 280px; }
}

@media (max-width: 1023px) {
  .jewellery-subcats__grid { grid-template-columns: repeat(3, 1fr); }
  .best-sellers__grid { grid-template-columns: repeat(2, 1fr); }
  .category-cards__grid { grid-template-columns: repeat(2, 1fr); }
  /* Stack featured above secondary at tablet */
  .new-arrivals__grid { grid-template-columns: 1fr; }
  .new-arrivals__featured .product-tile { flex: none; }
  .new-arrivals__featured .product-tile .product-tile__image-wrap { aspect-ratio: 1/1; flex: none; }
  .new-arrivals__secondary { height: auto; grid-template-rows: auto; }
  .new-arrivals__secondary .product-tile .product-tile__image-wrap { aspect-ratio: 1/1; flex: none; }
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
  .instagram-feed__grid { grid-template-columns: repeat(3, 1fr); }
  .blog-preview__grid { grid-template-columns: repeat(2, 1fr); }
  .trust-strip { gap: 20px; padding-inline: 24px; }
  .trust-strip__divider { display: none; }
  /* Occasion shop: tighten padding at tablet */
  .occasion-shop { padding: 56px 24px; }
  .occasion-shop__grid { grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .occasion-shop__card { min-height: 250px; }
}

@media (max-width: 767px) {
  /* On mobile: slide stacks content at bottom, image fills full slide */
  .hp-hero__slide { align-items: flex-end; }
  .hp-hero__overlay {
    background: linear-gradient(
      0deg,
      rgba(28,26,24,.87) 100%,
      rgba(28,26,24,.68) 60%,
      rgba(28,26,24,.3)  70%,
      rgba(28,26,24,.0)  100%
    );
  }
  .hp-hero__content { padding: 0 24px 48px; max-width: 100%; width: 100%; }
  .hp-hero__headline { font-size: 40px; }
  .hp-hero__body { max-width: 100%; }
  .hp-hero__dots { padding-inline: 24px; }
  .hp-hero__scroll-hint { display: none; }

  .jewellery-spotlight,
  .jewellery-subcats,
  .best-sellers,
  .editorial-bridal,
  .category-cards,
  .new-arrivals,
  .hp-lookbook,
  .two-col-shop__col,
  .reviews,
  .instagram-feed,
  .blog-preview { padding-inline: 12px; }

  .jewellery-subcats__grid { grid-template-columns: repeat(2, 1fr); }
  .best-sellers__grid { grid-template-columns: repeat(2, 1fr); }
  .new-arrivals__secondary { grid-template-columns: repeat(2, 1fr);gap: 4px; }
  .category-cards__grid { grid-template-columns: 1fr 1fr; gap: 1px; }
  .category-cards__card { height: 240px; }
  .reviews__grid { grid-template-columns: 1fr; }
  .instagram-feed__grid { grid-template-columns: repeat(3, 1fr); }
  .blog-preview__grid { grid-template-columns: 1fr; }
  .two-col-shop__mini-grid { grid-template-columns: 1fr 1fr;gap: 4px; }
  /* Occasion shop: 2 cols on mobile */
  .occasion-shop { padding: 48px 0 0; }
  .occasion-shop__header { padding-inline: 24px; margin-bottom: 32px; }
  .occasion-shop__grid { grid-template-columns: repeat(2, 1fr); gap: 2px; }
  .occasion-shop__card { min-height: 200px; padding: 20px 14px 18px; }
  .occasion-shop__card-name { font-size: 1.05rem; }
  .occasion-shop__card-sub { font-size: .7rem; }
  /* Always show CTA on touch — no hover state */
  .occasion-shop__card-cta { opacity: 1; transform: none; }
}

@media (max-width: 479px) {
  .jewellery-subcats__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .instagram-feed__grid { grid-template-columns: repeat(2, 1fr); }
  .trust-strip {display: none;}
  .hp-hero {max-height: 420px;min-height: 420px;}
  .hp-hero__body, .editorial-bridal__body, .jewellery-spotlight__description, .jewellery-spotlight__feature {font-size: .9rem;}
  .hp-hero__ctas a, .jewellery-spotlight__content a, .editorial-bridal__content .btn, .hp-lookbook__content a {font-size: .7025rem;}
  /* Occasion shop: still 2 cols at very small screens, just shorter */
  .occasion-shop__card { min-height: 172px; padding: 16px 10px 14px; }
  .occasion-shop__card-icon { width: 40px; height: 40px; margin-bottom: 12px; }
  .occasion-shop__card-name { font-size: .95rem; }
  .occasion-shop__card-sub { display: none; }
  .occasion-shop__card-count { display: none; }
  .editorial-bridal__content{padding: 40px 15px;}
}