/*
 * VogueVault Homepage Styles
 * ─────────────────────────────────────────────────────────────
 * File location in your theme:
 *   wp-content/themes/YOUR-THEME/css/voguevault-homepage.css
 *
 * Enqueued via functions.php — see voguevault-functions-snippet.php
 * ─────────────────────────────────────────────────────────────
 */

/* ─── CSS VARIABLES ─── */
:root {
  --ink: #0a0a0a;
  --ivory: #f5f0e8;
  --cream: #faf7f2;
  --gold: #c9a84c;
  --gold-light: #e8c96a;
  --warm-gray: #9a9086;
  --charcoal: #2a2520;
  --accent: #c94c4c;
  --white: #ffffff;
  --border: rgba(10,10,10,0.1);
}

/* ─── RESET (scoped to homepage template) ─── */
.voguevault-page *, .voguevault-page *::before, .voguevault-page *::after {
  box-sizing: border-box;
}
.voguevault-page {
  font-family: 'Barlow', sans-serif;
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
}

/* ─── HERO SLIDER ─── */
.hero-slider {
  position: relative; width: 100%; height: 100vh;
  min-height: 600px; overflow: hidden;
  margin-top: 0;
}
.slides-track { display: flex; height: 100%; transition: transform .8s cubic-bezier(.77,0,.175,1); }
.slide {
  min-width: 100%; height: 100%; position: relative; overflow: hidden;
  flex-shrink: 0;
}
.slide-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.08);
  transition: transform 8s ease;
}
.slide.active .slide-bg { transform: scale(1); }
.slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.2) 60%, transparent 100%);
}
.slide-content {
  position: absolute; left: 7%; top: 50%;
  max-width: 580px; color: var(--white);
  opacity: 0; transform: translateY(-50%) translateX(-30px);
  transition: all .9s .3s cubic-bezier(.23,1,.32,1);
}
.slide.active .slide-content { opacity: 1; transform: translateY(-50%) translateX(0); }
.slide-tag {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--gold); padding: 6px 16px;
  margin-bottom: 1.5rem;
}
.slide-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  font-weight: 900; line-height: 1.0;
  margin-bottom: 1.2rem;
}
.slide-title em { font-style: italic; color: var(--gold-light); }
.slide-sub {
  font-size: 1rem; font-weight: 300; color: rgba(255,255,255,0.75);
  line-height: 1.65; margin-bottom: 2.2rem;
  max-width: 420px;
}
.slide-cta { display: inline-flex; gap: 1rem; flex-wrap: wrap; }

.btn-primary {
  background: var(--gold); color: var(--ink);
  padding: 14px 36px; font-size: 0.78rem;
  font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; border: none; cursor: pointer;
  transition: all .3s; display: inline-block;
}
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
.btn-outline {
  background: transparent; color: var(--white);
  padding: 14px 36px; font-size: 0.78rem;
  font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; border: 1px solid rgba(255,255,255,0.5); cursor: pointer;
  transition: all .3s; display: inline-block;
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.slider-nav {
  position: absolute; bottom: 2.5rem; left: 7%;
  display: flex; gap: 10px; z-index: 10;
}
.dot { width: 32px; height: 3px; background: rgba(255,255,255,0.35); cursor: pointer; transition: all .3s; }
.dot.active { background: var(--gold); width: 52px; }
.slider-arrows {
  position: absolute; bottom: 2rem; right: 5%;
  display: flex; gap: 1rem; z-index: 10;
}
.arrow-btn {
  width: 52px; height: 52px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(10,10,10,0.4); backdrop-filter: blur(8px);
  color: var(--white); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; transition: all .3s;
}
.arrow-btn:hover { border-color: var(--gold); background: rgba(201,168,76,0.2); }

/* ─── SECTION HEADERS ─── */
.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.35em;
  text-transform: uppercase; color: var(--gold);
  display: block; margin-bottom: 0.8rem;
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900; line-height: 1.15;
  color: var(--ink);
}
.section-title em { font-style: italic; color: var(--warm-gray); }
.section-line { width: 60px; height: 2px; background: var(--gold); margin: 1.2rem auto 0; }

/* ─── CATEGORIES ─── */
.categories { padding: 6rem 4% 5rem; background: var(--cream); }
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem; }
.cat-card {
  position: relative; overflow: hidden;
  aspect-ratio: 3/4; cursor: pointer;
  background: var(--ink);
}
.cat-card:first-child { grid-column: span 2; aspect-ratio: auto; }
.cat-card:nth-child(2) { grid-column: span 2; }
.cat-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.23,1,.32,1);
  filter: brightness(0.82);
}
.cat-card:hover img { transform: scale(1.07); filter: brightness(0.65); }
.cat-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.8rem 1.5rem 1.5rem;
  background: linear-gradient(to top, rgba(10,10,10,0.85) 0%, transparent 100%);
  color: var(--white);
}
.cat-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem; font-weight: 700;
  display: block; margin-bottom: 4px;
}
.cat-count { font-size: 0.72rem; font-weight: 400; color: rgba(255,255,255,0.6); letter-spacing: 0.12em; text-transform: uppercase; }
.cat-arrow {
  position: absolute; top: 1rem; right: 1rem;
  width: 36px; height: 36px;
  background: var(--gold); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  opacity: 0; transform: translateY(-8px);
  transition: all .3s;
}
.cat-card:hover .cat-arrow { opacity: 1; transform: translateY(0); }

/* ─── BANNERS ─── */
.banner-shoes {
  height: 75vh; min-height: 500px; position: relative; overflow: hidden;
  display: flex; align-items: center;
}
.banner-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.05); transition: transform 12s ease;
}
.banner-shoes:hover .banner-bg { transform: scale(1); }
.banner-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,0.8) 0%, rgba(10,10,10,0.35) 55%, transparent 100%);
}
.banner-content { position: relative; z-index: 2; padding: 0 7%; color: var(--white); max-width: 600px; }
.banner-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.2rem; display: block;
}
.banner-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 900; line-height: 1.0; margin-bottom: 1.2rem;
}
.banner-title em { font-style: italic; display: block; font-weight: 400; }
.banner-desc { font-size: 1rem; font-weight: 300; color: rgba(255,255,255,0.75); line-height: 1.7; margin-bottom: 2rem; max-width: 400px; }
.banner-price { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--gold-light); margin-bottom: 2rem; }
.banner-price span { font-size: 0.85rem; font-weight: 300; font-family: 'Barlow', sans-serif; color: rgba(255,255,255,0.5); }

/* ─── PRODUCT GRID ─── */
.products-section { padding: 5.5rem 4% 5rem; }
.products-section.dark { background: var(--ink); }
.products-section.dark .section-title { color: var(--ivory); }
.products-section.dark .section-label { color: var(--gold); }
.products-section.light { background: var(--cream); }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.product-card { position: relative; overflow: hidden; cursor: pointer; background: var(--white); }
.product-image-wrap { position: relative; overflow: hidden; aspect-ratio: 3/4; background: #e8e3da; }
.product-image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.23,1,.32,1); }
.product-card:hover .product-image-wrap img { transform: scale(1.06); }
.product-badge {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--accent); color: var(--white);
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; padding: 5px 12px; z-index: 2;
}
.product-badge.gold { background: var(--gold); color: var(--ink); }
.product-badge.dark { background: var(--ink); color: var(--white); }
.product-actions {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; transform: translateY(100%);
  transition: transform .4s cubic-bezier(.23,1,.32,1);
}
.product-card:hover .product-actions { transform: translateY(0); }
.action-btn {
  flex: 1; padding: 12px 8px;
  background: rgba(10,10,10,0.88); backdrop-filter: blur(4px);
  color: var(--white); border: none; cursor: pointer;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; transition: background .25s;
}
.action-btn:hover { background: var(--gold); color: var(--ink); }
.action-btn.icon-btn { flex: 0; width: 44px; font-size: 1rem; }
.product-info { padding: 1.2rem 1rem 1.4rem; }
.product-info .p-brand { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--warm-gray); margin-bottom: 5px; }
.product-info .p-name { font-family: 'Playfair Display', serif; font-size: 0.95rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; line-height: 1.3; }
.dark .product-info .p-name { color: var(--ivory); }
.p-price-row { display: flex; align-items: center; gap: 0.6rem; }
.p-price { font-size: 1rem; font-weight: 600; color: var(--ink); font-family: 'Barlow Condensed', sans-serif; }
.dark .p-price { color: var(--gold-light); }
.p-old-price { font-size: 0.82rem; color: #aaa; text-decoration: line-through; }
.wc-stars { color: var(--gold); font-size: 0.7rem; letter-spacing: 1px; }
.dark .product-card { background: #1a1510; }
.dark .product-info .p-brand { color: #6a6055; }

/* ─── MARQUEE ─── */
.marquee-bar { background: var(--gold); padding: 14px 0; overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-flex; gap: 4rem; animation: marqueeMove 20s linear infinite; }
.marquee-item {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink);
  display: flex; align-items: center; gap: 1rem;
}
.marquee-item::before { content: '✦'; font-size: 0.6rem; }
@keyframes marqueeMove { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ─── NECKLACE BANNER ─── */
.banner-necklace { height: 80vh; min-height: 500px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: flex-end; }
.banner-necklace .banner-overlay { background: linear-gradient(270deg, rgba(10,10,10,0.8) 0%, rgba(10,10,10,0.3) 55%, transparent 100%); }
.banner-necklace .banner-content { text-align: right; max-width: 550px; margin-left: auto; padding: 0 7%; }
.banner-necklace .banner-desc { margin-left: auto; }

/* ─── SHOWCASE (Women Shoes) ─── */
.showcase-section { padding: 5.5rem 4% 5rem; background: var(--ivory); }
.showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.showcase-feature { position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--ink); }
.showcase-feature img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.23,1,.32,1); filter: brightness(0.78); }
.showcase-feature:hover img { transform: scale(1.06); filter: brightness(0.62); }
.showcase-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 3rem 2.5rem 2.5rem;
  background: linear-gradient(to top, rgba(10,10,10,0.85) 0%, transparent 100%);
  color: var(--white);
}
.showcase-cat { font-family: 'Barlow Condensed', sans-serif; font-size: 0.65rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; display: block; }
.showcase-name { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 700; margin-bottom: 1rem; }
.showcase-link { display: inline-flex; align-items: center; gap: 8px; color: var(--white); text-decoration: none; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; transition: gap .3s, color .3s; }
.showcase-link:hover { color: var(--gold); gap: 14px; }
.showcase-small-grid { display: grid; grid-template-rows: 1fr 1fr; gap: 2rem; }
.showcase-small { position: relative; overflow: hidden; background: var(--ink); }
.showcase-small img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.23,1,.32,1); filter: brightness(0.78); }
.showcase-small:hover img { transform: scale(1.07); filter: brightness(0.62); }
.showcase-small .showcase-info { padding: 2rem 2rem 1.8rem; }
.showcase-small .showcase-name { font-size: 1.2rem; }

/* ─── PURSES ─── */
.purses-section { padding: 5.5rem 4% 5rem; background: var(--cream); }
.purses-scroll { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }

/* ─── NEWSLETTER ─── */
.newsletter {
  background: var(--ink); padding: 6rem 4%;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; text-align: center;
  position: relative; overflow: hidden;
}
.newsletter::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(201,168,76,0.08) 0%, transparent 65%);
}
.newsletter-title { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 900; color: var(--ivory); line-height: 1.1; margin-bottom: 1rem; position: relative; }
.newsletter-title em { font-style: italic; color: var(--gold); }
.newsletter-sub { color: rgba(255,255,255,0.55); font-size: 0.95rem; font-weight: 300; margin-bottom: 2.5rem; position: relative; }
.newsletter-form { display: flex; gap: 0; max-width: 480px; width: 100%; position: relative; }
.newsletter-form input { flex: 1; padding: 16px 24px; background: rgba(255,255,255,0.06); border: 1px solid rgba(201,168,76,0.3); color: var(--white); font-size: 0.9rem; font-family: 'Barlow', sans-serif; outline: none; transition: border-color .3s; }
.newsletter-form input::placeholder { color: rgba(255,255,255,0.35); }
.newsletter-form input:focus { border-color: var(--gold); }
.newsletter-form button { background: var(--gold); color: var(--ink); border: none; cursor: pointer; padding: 16px 32px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; transition: background .3s; white-space: nowrap; }
.newsletter-form button:hover { background: var(--gold-light); }

/* ─── SKELETON LOADERS ─── */
.skeleton-card { pointer-events: none; }
.skeleton-card .product-image-wrap,
.skeleton-card.cat-card {
  background: linear-gradient(90deg, #e8e3da 25%, #f0ebe2 50%, #e8e3da 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite;
}
.skeleton-card.dark .product-image-wrap {
  background: linear-gradient(90deg, #1a1510 25%, #2a2018 50%, #1a1510 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite;
}
.skel-line {
  background: linear-gradient(90deg, #e0dbd2 25%, #ede8e0 50%, #e0dbd2 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite;
  border-radius: 4px; display: block;
}
.skel-line.dark {
  background: linear-gradient(90deg, #2a2018 25%, #362a1e 50%, #2a2018 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ─── API ERROR ─── */
.api-error {
  grid-column: 1/-1;
  background: rgba(201,76,76,0.08); border: 1px solid rgba(201,76,76,0.3);
  color: #c94c4c; padding: 1.5rem 2rem;
  font-size: 0.88rem; line-height: 1.6; text-align: center;
}
.api-error strong { display: block; margin-bottom: 6px; font-size: 1rem; }
.api-error code { background: rgba(201,76,76,0.1); padding: 2px 8px; font-family: monospace; font-size: 0.82rem; border-radius: 3px; }

/* ─── SCROLL REVEAL ─── */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal:nth-child(2) { transition-delay: .1s; }
.reveal:nth-child(3) { transition-delay: .2s; }
.reveal:nth-child(4) { transition-delay: .3s; }

/* ─── PAGE LOADER ─── */
.page-loader { position: fixed; inset: 0; background: var(--ink); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity .8s, visibility .8s; }
.page-loader.hidden { opacity: 0; visibility: hidden; }
.loader-logo { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 900; color: var(--gold); animation: vv-pulse 1.2s ease-in-out infinite; }
.loader-logo span { color: var(--white); font-style: italic; font-weight: 400; }
@keyframes vv-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ─── RESPONSIVE ─── */
@media (max-width: 1200px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .purses-scroll { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-card:first-child { grid-column: span 1; }
  .cat-card:nth-child(2) { grid-column: span 1; }
}
@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .purses-scroll { grid-template-columns: repeat(2, 1fr); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .showcase-grid { grid-template-columns: 1fr; }
  .showcase-small-grid { grid-template-rows: auto; grid-template-columns: 1fr 1fr; }
  .banner-necklace .banner-content { text-align: left; margin-left: 0; }
  .banner-necklace .banner-desc { margin-left: 0; }
  .banner-necklace .banner-overlay { background: linear-gradient(105deg, rgba(10,10,10,0.8) 0%, rgba(10,10,10,0.3) 60%, transparent 100%); }
}
@media (max-width: 600px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .purses-scroll { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form button { width: 100%; }
  .categories { padding: 4rem 4% 3rem; }
  .products-section, .showcase-section, .purses-section { padding: 4rem 4% 3rem; }
  .banner-shoes, .banner-necklace { height: 55vh; }
  .showcase-small-grid { grid-template-columns: 1fr; }
}
/* ─── WORDPRESS NAV ─── */
.vv-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3rem; height: 72px;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(201,168,76,0.2);
  transition: all .3s;
}
.vv-nav .nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem; font-weight: 900;
  color: #c9a84c; text-decoration: none; letter-spacing: 0.08em;
}
.vv-nav .nav-links {
  display: flex; gap: 2.5rem; list-style: none; margin: 0; padding: 0;
}
.vv-nav .nav-links a {
  color: rgba(255,255,255,0.8); text-decoration: none;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.15em;
  text-transform: uppercase; transition: color .25s; position: relative;
}
.vv-nav .nav-links a:hover { color: #c9a84c; }
.vv-nav .nav-links li { list-style: none; margin: 0; padding: 0; }
.nav-actions { display: flex; gap: 0.8rem; align-items: center; }
.nav-icon-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.8); width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: all .25s; text-decoration: none;
}
.nav-icon-btn:hover { background: rgba(201,168,76,0.15); color: #c9a84c; }
.cart-icon-btn { position: relative; }
.cart-count {
  position: absolute; top: 4px; right: 4px;
  background: #c9a84c; color: #0a0a0a;
  font-size: 0.6rem; font-weight: 700;
  width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.vv-hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.vv-hamburger span { width: 24px; height: 2px; background: #fff; display: block; }
.vv-mobile-menu {
  display: none; position: fixed; top: 72px; left: 0; right: 0;
  background: rgba(10,10,10,0.97); padding: 2rem; z-index: 999;
}
.vv-mobile-menu.open { display: block; }
.vv-mobile-links { list-style: none; padding: 0; margin: 0; }
.vv-mobile-links li { margin-bottom: 1.2rem; }
.vv-mobile-links a { color: rgba(255,255,255,0.85); text-decoration: none; font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; }
.vv-search-bar {
  display: none; position: fixed; top: 72px; left: 0; right: 0; z-index: 998;
  background: #111; padding: 1.2rem 3rem;
  border-bottom: 1px solid rgba(201,168,76,0.2);
}
.vv-search-bar.open { display: block; }
.vv-search-bar input[type="search"] {
  width: 100%; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(201,168,76,0.3); color: #fff;
  padding: 12px 20px; font-size: 1rem; outline: none;
}

/* Push content below fixed nav */
.voguevault-page { padding-top: 72px; }
.hero-slider { margin-top: -72px; } /* slider goes edge to edge */

/* ─── WORDPRESS FOOTER ─── */
.vv-footer { background: #060504; color: rgba(255,255,255,0.7); padding: 5rem 4% 0; }
.vv-footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 4rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.vv-footer-logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 900; color: #c9a84c; text-decoration: none; letter-spacing: 0.08em; display: block; margin-bottom: 1rem; }
.vv-footer-brand p { font-size: 0.88rem; line-height: 1.8; margin-bottom: 1.5rem; max-width: 260px; }
.vv-social-links { display: flex; gap: 0.8rem; }
.vv-social-links a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); text-decoration: none; transition: all .25s; font-size: 0.85rem; }
.vv-social-links a:hover { border-color: #c9a84c; color: #c9a84c; }
.vv-footer-col h4, .vv-footer-nav h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: #f5f0e8; margin-bottom: 1.5rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(201,168,76,0.3); }
.vv-footer-col ul, .vv-footer-nav ul { list-style: none; padding: 0; margin: 0; }
.vv-footer-col ul li, .vv-footer-nav ul li { margin-bottom: 0.7rem; }
.vv-footer-col a, .vv-footer-nav a { color: rgba(255,255,255,0.55); text-decoration: none; font-size: 0.86rem; transition: color .25s; }
.vv-footer-col a:hover, .vv-footer-nav a:hover { color: #c9a84c; }
.vv-footer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 1.8rem 0; flex-wrap: wrap; gap: 1rem; }
.vv-footer-bottom p { font-size: 0.78rem; color: rgba(255,255,255,0.35); margin: 0; }
.vv-pay-badges { display: flex; gap: 0.6rem; }
.vv-pay-badges span { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); padding: 5px 10px; font-size: 0.65rem; color: rgba(255,255,255,0.5); font-weight: 600; }

/* Responsive nav */
@media (max-width: 900px) {
  .vv-nav { padding: 0 1.5rem; }
  .vv-nav .nav-links { display: none; }
  .vv-hamburger { display: flex; }
  .vv-footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .vv-footer-top { grid-template-columns: 1fr; }
  .vv-footer-bottom { flex-direction: column; text-align: center; }
}
/* ═══════════════════════════════════════════════════════════
   APPEND THIS TO THE BOTTOM OF voguevault-homepage.css
   ═══════════════════════════════════════════════════════════ */

/* ─── WARM SECTION BG ─── */
.products-section.warm { background: #f0ebe2; }

/* ═══════════════════════════════════════════════════════════
   WOOCOMMERCE PRODUCT CATEGORIES SHORTCODE
   [product_categories]
   ═══════════════════════════════════════════════════════════ */
.woo-categories-wrap .woocommerce {
  width: 100%;
}
.woo-categories-wrap ul.products {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 1.2rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
.woo-categories-wrap ul.products::before,
.woo-categories-wrap ul.products::after { display: none !important; }

.woo-categories-wrap ul.products li.product-category {
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  cursor: pointer;
  background: var(--ink);
}
.woo-categories-wrap ul.products li.product-category:hover img {
  transform: scale(1.07);
  filter: brightness(0.65);
}
.woo-categories-wrap ul.products li.product-category img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform .7s cubic-bezier(.23,1,.32,1), filter .7s !important;
  filter: brightness(0.82) !important;
}
.woo-categories-wrap ul.products li.product-category h2,
.woo-categories-wrap ul.products li.product-category .woocommerce-loop-category__title {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 2.5rem 1.2rem 1.2rem !important;
  background: linear-gradient(to top, rgba(10,10,10,0.88) 0%, transparent 100%) !important;
  color: #fff !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
.woo-categories-wrap ul.products li.product-category h2 mark,
.woo-categories-wrap ul.products li.product-category .woocommerce-loop-category__title mark {
  background: none !important;
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-top: 3px !important;
}

/* ═══════════════════════════════════════════════════════════
   WOOCOMMERCE PRODUCTS SHORTCODE
   [products]
   ═══════════════════════════════════════════════════════════ */
.woo-section-wrap { width: 100%; }
.woo-section-wrap .woocommerce { width: 100%; }

.woo-section-wrap ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.6rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
.woo-section-wrap ul.products::before,
.woo-section-wrap ul.products::after { display: none !important; }

.woo-section-wrap ul.products li.product {
  background: #fff !important;
  overflow: hidden !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  border: none !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
  position: relative !important;
}
.woo-section-wrap ul.products li.product:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.12) !important;
}

/* Product Image */
.woo-section-wrap ul.products li.product a img {
  width: 100% !important;
  aspect-ratio: 3/4 !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform .6s cubic-bezier(.23,1,.32,1) !important;
}
.woo-section-wrap ul.products li.product:hover a img {
  transform: scale(1.05) !important;
}

/* Sale badge */
.woo-section-wrap .onsale {
  background: #c94c4c !important;
  color: #fff !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 5px 12px !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1.5 !important;
  top: 1rem !important;
  left: 1rem !important;
}

/* Product Title */
.woo-section-wrap ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Playfair Display', serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #0a0a0a !important;
  padding: 1rem 1rem 0.4rem !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* Star Rating */
.woo-section-wrap .star-rating {
  margin: 0 1rem 0.4rem !important;
  color: #c9a84c !important;
  font-size: 0.75rem !important;
}
.woo-section-wrap .star-rating span { color: #c9a84c !important; }

/* Price */
.woo-section-wrap ul.products li.product .price {
  color: #0a0a0a !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  padding: 0 1rem 0.8rem !important;
  display: block !important;
  margin: 0 !important;
}
.woo-section-wrap ul.products li.product .price del {
  color: #bbb !important;
  font-size: 0.82rem !important;
  margin-right: 6px !important;
  font-weight: 400 !important;
}
.woo-section-wrap ul.products li.product .price ins {
  text-decoration: none !important;
  color: #c94c4c !important;
}

/* Add to Cart Button */
.woo-section-wrap ul.products li.product .button,
.woo-section-wrap ul.products li.product .add_to_cart_button,
.woo-section-wrap ul.products li.product .product_type_simple {
  background: #0a0a0a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 20px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin: 0.4rem 1rem 1rem !important;
  display: block !important;
  text-align: center !important;
  transition: background .25s, color .25s !important;
  width: calc(100% - 2rem) !important;
  box-shadow: none !important;
}
.woo-section-wrap ul.products li.product .button:hover,
.woo-section-wrap ul.products li.product .add_to_cart_button:hover {
  background: #c9a84c !important;
  color: #0a0a0a !important;
}
/* Added to cart checkmark */
.woo-section-wrap ul.products li.product .added_to_cart {
  display: none !important;
}

/* ─── DARK SECTION PRODUCT CARDS ─── */
.products-section.dark .woo-section-wrap ul.products li.product {
  background: #1a1510 !important;
}
.products-section.dark .woo-section-wrap ul.products li.product
  .woocommerce-loop-product__title {
  color: #f5f0e8 !important;
}
.products-section.dark .woo-section-wrap ul.products li.product .price {
  color: #c9a84c !important;
}
.products-section.dark .woo-section-wrap ul.products li.product .button {
  background: #c9a84c !important;
  color: #0a0a0a !important;
}
.products-section.dark .woo-section-wrap ul.products li.product .button:hover {
  background: #e8c96a !important;
}

/* ─── NO PRODUCTS FOUND MESSAGE ─── */
.woo-section-wrap .woocommerce-info {
  background: rgba(201,168,76,0.08) !important;
  border-top-color: #c9a84c !important;
  color: #6a6055 !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 0.9rem !important;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .woo-section-wrap ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .woo-categories-wrap ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 900px) {
  .woo-section-wrap ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .woo-categories-wrap ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .woo-section-wrap ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.7rem !important;
  }
  .woo-categories-wrap ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.7rem !important;
  }
  .woo-section-wrap ul.products li.product
    .woocommerce-loop-product__title {
    font-size: 0.82rem !important;
    padding: 0.6rem 0.6rem 0.3rem !important;
  }
  .woo-section-wrap ul.products li.product .price {
    padding: 0 0.6rem 0.5rem !important;
    font-size: 0.9rem !important;
  }
  .woo-section-wrap ul.products li.product .button {
    margin: 0.3rem 0.6rem 0.6rem !important;
    width: calc(100% - 1.2rem) !important;
    padding: 10px !important;
    font-size: 0.62rem !important;
  }
}