/* ━━━━ VIFIQUE v2 ADDITIONS ━━━━ */

/* ── CONTRAST POLISH ── */
:root {
  --border: #D8D0C8;
  --ink: #1A1410;
}
.product-card { background: #FFFFFF; border: 1.5px solid #D8D0C8; }
.pc-price { color: #1A1410; }

/* ── NAV DROPDOWN ── */
.header-nav-wrap { flex: 1; display: flex; justify-content: center; }
.header-nav { display: flex; gap: 32px; list-style: none; align-items: center; }
.header-nav a { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mid); transition: color .15s; }
.header-nav a:hover { color: var(--ink); }
.nav-arrow { font-size: 10px; margin-left: 2px; }
.has-dropdown { position: relative; }
.nav-dropdown {
  position: absolute; top: calc(100% + 0px); left: 50%; transform: translateX(-50%);
  background: white; border: 1.5px solid var(--border); border-radius: 12px;
  min-width: 160px; padding: 8px 0; z-index: 500; box-shadow: 0 8px 32px rgba(0,0,0,.08);
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
  transform: translateX(-50%) translateY(-4px);
  list-style: none;
  /* invisible bridge so mouse can travel from link to dropdown */
  margin-top: 0;
  padding-top: 12px;
}
/* Bridge gap between nav link and dropdown */
.has-dropdown::after {
  content: '';
  position: absolute;
  bottom: -12px; left: 0; right: 0;
  height: 12px;
}
.has-dropdown:hover .nav-dropdown { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); }
.nav-dropdown:hover { opacity: 1; pointer-events: all; }
.nav-dropdown li a { display: block; padding: 10px 18px; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: .02em; white-space: nowrap; color: var(--ink-mid); }
.nav-dropdown li a:hover { color: var(--gold); background: var(--cream); }

/* ── AUTH MODAL ── */
.auth-overlay {
  position: fixed; inset: 0; background: rgba(42,36,32,.6);
  z-index: 8000; display: none; opacity: 0; transition: opacity .2s;
}
.auth-overlay.open { display: block; opacity: 1; }
.auth-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.96);
  background: white; border-radius: 20px; width: 420px; max-width: calc(100vw - 32px);
  padding: 40px 36px 32px; z-index: 8001;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
  opacity: 0; transition: opacity .2s, transform .2s;
  max-height: 90vh; overflow-y: auto;
}
.auth-modal.open { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.auth-close {
  position: absolute; top: 16px; right: 18px;
  background: none; border: none; font-size: 22px; cursor: pointer; color: var(--ink-lt); line-height: 1;
}
.auth-logo { font-family: 'Cormorant Garamond',serif; font-size: 22px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; text-align: center; margin-bottom: 20px; }
.auth-tabs { display: flex; border: 1.5px solid var(--border); border-radius: var(--r-pill); overflow: hidden; margin-bottom: 20px; }
.auth-tab { flex: 1; padding: 10px; background: none; border: none; font-family: 'DM Sans',sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink-mid); transition: all .15s; }
.auth-tab.active { background: var(--ink); color: white; }
.auth-pts-tease {
  background: var(--gold-lt); border: 1.5px solid #e8d0a0; border-radius: 10px;
  padding: 12px 14px; font-size: 12px; color: var(--ink-mid); text-align: center;
  margin-bottom: 16px; line-height: 1.5;
}
.auth-input {
  display: block; width: 100%; padding: 12px 14px; margin-bottom: 12px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-family: 'DM Sans',sans-serif; font-size: 13px; color: var(--ink);
  outline: none; transition: border-color .15s;
}
.auth-input:focus { border-color: var(--gold); }
.auth-submit {
  width: 100%; padding: 14px; background: var(--ink); color: white;
  border: none; border-radius: var(--r-pill); font-family: 'DM Sans',sans-serif;
  font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 4px;
  transition: background .15s;
}
.auth-submit:hover { background: #333; }
.auth-sub-row { text-align: center; margin-top: 10px; }
.auth-checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--ink-mid); cursor: pointer; margin-bottom: 12px; }
.auth-checkbox-row input { margin-top: 2px; accent-color: var(--gold); }
.auth-msg { text-align: center; font-size: 12px; margin-top: 8px; min-height: 16px; }

/* ── PRODUCT CARD VIDEO HOVER ── */
.product-card { position: relative; border-radius: 16px; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.product-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.1); transform: translateY(-2px); }
.pc-media { position: relative; width: 100%; aspect-ratio: 3/4; overflow: hidden; border-radius: 16px 16px 0 0; cursor: pointer; }
.pc-cover {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--cream);
}
.pc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-emoji-placeholder { font-size: 48px; }
.pc-video-wrap {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .35s; z-index: 2; pointer-events: none;
  background: #000;
}
.pc-video { width: 100%; height: 100%; object-fit: cover; }
.pc-video-placeholder { width: 100%; height: 100%; position: relative; }
.pc-video-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #1a1410, #2a2420, #3a3028);
  animation: pcGradAnim 3s ease infinite alternate;
}
@keyframes pcGradAnim {
  from { filter: brightness(1); }
  to   { filter: brightness(1.2); }
}
.pc-video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: 32px; color: rgba(255,255,255,.4);
}
.pc-atc-overlay {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 16px; opacity: 0; transition: opacity .2s;
}
.pc-media:hover .pc-atc-overlay { opacity: 1; }
.pc-atc-btn {
  padding: 10px 20px; background: white; color: var(--ink);
  border: none; border-radius: var(--r-pill); font-family: 'DM Sans',sans-serif;
  font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,.15);
  transition: background .15s;
}
.pc-atc-btn:hover { background: var(--gold); color: white; }
.pc-media-link { position: absolute; inset: 0; z-index: 4; }
.pc-media-link:hover ~ .pc-atc-overlay { opacity: 1; }
.pc-atc-overlay { pointer-events: none; }
.pc-media:hover .pc-atc-overlay { pointer-events: all; }
.pc-body-link { text-decoration: none; color: inherit; }
.pc-body { padding: 12px 14px 16px; }
.pc-brand { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.pc-name { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; line-height: 1.3; }
.pc-stars { font-size: 11px; color: var(--gold); margin-bottom: 6px; }
.pc-stars span { color: var(--ink-lt); font-size: 11px; margin-left: 3px; }
.pc-price-row { display: flex; align-items: center; gap: 6px; margin-bottom: 0; }
.pc-price { font-family: 'Cormorant Garamond',serif; font-size: 18px; font-weight: 500; color: var(--ink); }
.pc-was { font-size: 13px; color: var(--ink-lt); text-decoration: line-through; }
.pc-save { font-size: 11px; font-weight: 700; color: var(--rose); }
.pc-swatches { display: flex; gap: 6px; padding: 8px 14px; }
.pc-swatch {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid transparent; outline: 1.5px solid rgba(0,0,0,.1);
  cursor: pointer; transition: all .15s;
}
.pc-swatch.active { border-color: var(--ink); outline-color: var(--ink); }
.pc-swatch:hover { transform: scale(1.15); }

/* ── SHOP FILTERS ── */
.shop-filters { background: white; border-bottom: 1.5px solid var(--border); padding: 14px 0; position: sticky; top: 109px; z-index: 90; }
.shop-filters-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-tab { padding: 7px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--border); font-size: 12px; font-weight: 600; color: var(--ink-mid); text-decoration: none; transition: all .15s; white-space: nowrap; }
.filter-tab:hover, .filter-tab.active { background: var(--ink); border-color: var(--ink); color: white; }
.filter-sort { display: flex; align-items: center; gap: 8px; }
.filter-label { font-size: 11px; font-weight: 600; color: var(--ink-lt); letter-spacing: .08em; text-transform: uppercase; }
.filter-select { border: 1.5px solid var(--border); border-radius: var(--r-pill); padding: 6px 14px; font-family: 'DM Sans',sans-serif; font-size: 12px; color: var(--ink-mid); background: white; cursor: pointer; outline: none; }

/* ── PAGE HERO ── */
.page-hero { text-align: center; padding: 60px 32px 40px; background: white; border-bottom: 1.5px solid var(--border); }
.page-hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.page-hero h1 { font-family: 'Cormorant Garamond',serif; font-size: clamp(36px,5vw,56px); font-weight: 300; color: var(--ink); margin-bottom: 10px; }
.page-hero p { font-size: 15px; color: var(--ink-mid); }

/* ── SINGLE PRODUCT CLOTHES ── */
.sp-breadcrumb { max-width: 1200px; margin: 0 auto; padding: 16px 32px; font-size: 12px; color: var(--ink-lt); }
.sp-breadcrumb a { color: var(--ink-lt); }
.sp-breadcrumb a:hover { color: var(--gold); }

.sp-wrap { display: grid; grid-template-columns: 1fr 480px; max-width: 1200px; margin: 0 auto 60px; padding: 0 32px; gap: 48px; }

/* Gallery column */
.sp-gallery-col { position: relative; }
.sp-gallery-panel {
  position: sticky; top: 109px; height: calc(100vh - 130px);
  overflow-x: scroll; scroll-snap-type: x mandatory;
  display: flex; flex-direction: row;
  scroll-behavior: smooth; border-radius: 16px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.sp-gallery-panel::-webkit-scrollbar { display: none; }
.sp-frame {
  scroll-snap-align: start; flex-shrink: 0; width: 100%;
  height: calc(100vh - 130px); position: relative;
  overflow: hidden; cursor: zoom-in;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream);
}
.sp-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-frame-video { cursor: default; }
.sp-video-el { width: 100%; height: 100%; object-fit: cover; }
.sp-video-placeholder { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; }
.sp-vid-grad { position: absolute; inset: 0; background: linear-gradient(135deg,#1a1410,#2a2420,#1a1410); animation: gradShift 4s ease infinite alternate; }
@keyframes gradShift { from { filter: brightness(.9); } to { filter: brightness(1.1); } }
.sp-vid-icon { position: relative; font-size: 48px; color: rgba(255,255,255,.3); }
.sp-vid-hint { position: relative; font-size: 11px; color: rgba(255,255,255,.3); letter-spacing: .08em; }
.sp-frame-hint { position: absolute; bottom: 12px; left: 12px; background: rgba(255,255,255,.12); backdrop-filter: blur(6px); border-radius: var(--r-pill); padding: 4px 12px; font-size: 11px; color: rgba(255,255,255,.7); font-weight: 700; letter-spacing: .06em; }
.sp-frame-zoom-hint { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,.3); color: rgba(255,255,255,.7); font-size: 11px; border-radius: var(--r-pill); padding: 4px 10px; opacity: 0; transition: opacity .2s; }
.sp-frame:hover .sp-frame-zoom-hint { opacity: 1; }
.sp-frame-placeholder { background: linear-gradient(135deg,#c8c0b8,#908880); }
.sp-placeholder-grad { position: absolute; inset: 0; }

.sp-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.sp-thumb { width: 60px; height: 60px; border-radius: 8px; overflow: hidden; cursor: pointer; flex-shrink: 0; border: 2px solid transparent; transition: border-color .15s; }
.sp-thumb.active { border-color: var(--ink); }
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; }

.sp-gallery-prev, .sp-gallery-next {
  position: absolute; top: 50%; z-index: 10;
  background: rgba(255,255,255,.9); border: 1.5px solid var(--border);
  border-radius: 50%; width: 40px; height: 40px;
  font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transform: translateY(-50%); box-shadow: 0 2px 12px rgba(0,0,0,.08);
  transition: all .15s; color: var(--ink);
}
.sp-gallery-prev { left: 12px; }
.sp-gallery-next { right: 12px; }
.sp-gallery-prev:hover, .sp-gallery-next:hover { background: var(--ink); color: white; border-color: var(--ink); }

/* Info column */
.sp-info-col { padding-top: 8px; }
.sp-title { font-family: 'Cormorant Garamond',serif; font-size: 32px; font-weight: 300; color: var(--ink); margin-bottom: 12px; }
.sp-rating-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.sp-stars { color: var(--gold); font-size: 16px; }
.sp-rating-num { font-size: 14px; font-weight: 700; color: var(--ink); }
.sp-rating-ct { font-size: 13px; color: var(--ink-lt); text-decoration: none; }
.sp-rating-ct:hover { color: var(--gold); }
.sp-price-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sp-price { font-family: 'Cormorant Garamond',serif; font-size: 28px; font-weight: 400; color: var(--ink); }
.sp-was { font-size: 16px; color: var(--ink-lt); text-decoration: line-through; }
.sp-save { font-size: 13px; font-weight: 700; color: var(--rose); }
.sp-pts-earn { font-size: 12px; color: var(--gold); font-weight: 600; margin-bottom: 16px; }
.sp-free-gift {
  background: #F5F0E8; border: 1.5px solid #E8D4A0; border-radius: 12px;
  padding: 12px 16px; font-size: 13px; color: var(--ink-mid); margin-bottom: 20px; line-height: 1.5;
}
.sp-section-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-lt); margin-bottom: 10px; margin-top: 18px; }
.sp-section-label span { color: var(--ink); font-weight: 600; text-transform: none; letter-spacing: 0; }
.sp-colors { display: flex; gap: 10px; margin-bottom: 4px; }
.sp-color-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid transparent; outline: 2px solid rgba(0,0,0,.1);
  cursor: pointer; transition: all .15s;
}
.sp-color-swatch.active { border-color: var(--ink); outline-color: var(--ink); }
.sp-color-swatch:hover { transform: scale(1.1); }
.sp-sizes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.sp-size-btn {
  padding: 8px 16px; border: 1.5px solid var(--border); border-radius: var(--r-pill);
  font-family: 'DM Sans',sans-serif; font-size: 13px; font-weight: 600; color: var(--ink-mid);
  cursor: pointer; background: white; transition: all .15s;
}
.sp-size-btn:hover { border-color: var(--ink); color: var(--ink); }
.sp-size-btn.active { background: var(--ink); border-color: var(--ink); color: white; }

/* Size chart */
.sp-sizechart { margin: 18px 0; border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden; }
.sp-sizechart-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: none; border: none; cursor: pointer;
  font-family: 'DM Sans',sans-serif; font-size: 13px; font-weight: 600; color: var(--ink);
}
.sp-sizechart-toggle:hover { background: var(--cream); }
.sp-sizechart-arrow { font-size: 14px; color: var(--ink-lt); }
.sp-sizechart-body { padding: 16px; border-top: 1.5px solid var(--border); }
.sp-sizechart-toggle-units { display: flex; gap: 6px; margin-bottom: 12px; }
.sc-unit { padding: 5px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: none; font-family: 'DM Sans',sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--ink-mid); }
.sc-unit.active { background: var(--ink); border-color: var(--ink); color: white; }
.sp-size-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sp-size-table th { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-lt); padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); }
.sp-size-table td { padding: 8px; color: var(--ink-mid); border-bottom: 1px solid var(--border); }
.sp-size-table tr:last-child td { border-bottom: none; }
.sc-fit-note { font-size: 11px; color: var(--ink-lt); margin-top: 10px; font-style: italic; }

/* QTY + ATC */
.sp-qty-atc { display: flex; gap: 10px; align-items: center; margin: 20px 0; }
.sp-qty { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: var(--r-pill); overflow: hidden; }
.sp-qty-btn { width: 36px; height: 44px; background: none; border: none; font-size: 18px; cursor: pointer; color: var(--ink); transition: background .15s; }
.sp-qty-btn:hover { background: var(--cream); }
.sp-qty-val { padding: 0 12px; font-size: 14px; font-weight: 700; min-width: 32px; text-align: center; }
.sp-atc-btn {
  flex: 1; padding: 14px 24px; background: var(--ink); color: white;
  border: none; border-radius: var(--r-pill); font-family: 'Cormorant Garamond',serif;
  font-size: 16px; font-weight: 500; cursor: pointer; transition: background .15s; letter-spacing: .04em;
}
.sp-atc-btn:hover { background: #333; }
.sp-wish-btn {
  width: 48px; height: 48px; border: 1.5px solid var(--border); border-radius: 50%;
  background: white; font-size: 20px; cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
}
.sp-wish-btn.wished, .sp-wish-btn:hover { background: var(--rose); border-color: var(--rose); color: white; }

.sp-desc { font-size: 14px; color: var(--ink-mid); line-height: 1.8; margin-bottom: 20px; }
.sp-shipping-box { background: var(--cream); border-radius: 10px; padding: 14px 16px; font-size: 13px; color: var(--ink-mid); line-height: 2; }

/* ── REVIEWS ── */
.sp-reviews-section { background: white; border-top: 1.5px solid var(--border); padding: 60px 0; }
.sp-reviews-inner { max-width: 900px; margin: 0 auto; padding: 0 32px; }
.sp-reviews-title { font-family: 'Cormorant Garamond',serif; font-size: 32px; font-weight: 300; color: var(--ink); margin-bottom: 32px; }
.rv-summary { display: grid; grid-template-columns: 140px 1fr; gap: 32px; margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1.5px solid var(--border); }
.rv-avg-block { text-align: center; }
.rv-avg-num { font-family: 'Cormorant Garamond',serif; font-size: 56px; font-weight: 300; color: var(--ink); line-height: 1; }
.rv-avg-stars { color: var(--gold); font-size: 18px; margin: 6px 0; }
.rv-avg-ct { font-size: 12px; color: var(--ink-lt); }
.rv-bars { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.rv-bar-row { display: flex; align-items: center; gap: 10px; }
.rv-bar-label { font-size: 12px; font-weight: 700; color: var(--ink-lt); width: 20px; text-align: right; }
.rv-bar-track { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.rv-bar-fill { height: 100%; background: var(--gold); border-radius: 3px; transition: width .4s; }
.rv-bar-count { font-size: 12px; color: var(--ink-lt); width: 20px; }
.rv-photo-strip { margin-bottom: 32px; }
.rv-photo-strip-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-lt); margin-bottom: 12px; }
.rv-photo-strip-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.rv-photo-thumb { width: 80px; height: 80px; border-radius: 10px; overflow: hidden; flex-shrink: 0; cursor: pointer; }
.rv-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rv-photo-thumb:hover { opacity: .85; }
.rv-list { display: flex; flex-direction: column; gap: 0; }
.rv-item { padding: 24px 0; border-bottom: 1.5px solid var(--border); }
.rv-item:last-child { border-bottom: none; }
.rv-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rv-item-stars { color: var(--gold); font-size: 14px; }
.rv-item-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.rv-item-date { font-size: 12px; color: var(--ink-lt); margin-left: auto; }
.rv-item-size { font-size: 11px; background: var(--cream); border-radius: var(--r-pill); padding: 2px 8px; color: var(--ink-mid); font-weight: 600; }
.rv-verified { font-size: 11px; font-weight: 700; color: #4a9a6a; }
.rv-item-text { font-size: 14px; color: var(--ink-mid); line-height: 1.7; margin-bottom: 12px; }
.rv-item-photos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.rv-item-photo { width: 70px; height: 70px; border-radius: 8px; overflow: hidden; cursor: pointer; }
.rv-item-photo img { width: 100%; height: 100%; object-fit: cover; }
.rv-helpful-btn { background: none; border: 1.5px solid var(--border); border-radius: var(--r-pill); padding: 5px 14px; font-family: 'DM Sans',sans-serif; font-size: 12px; color: var(--ink-mid); cursor: pointer; transition: all .15s; }
.rv-helpful-btn:hover { border-color: var(--ink); color: var(--ink); }

/* Gate */
.rv-gate { text-align: center; padding: 48px 32px; border: 1.5px dashed var(--border); border-radius: 16px; margin-top: 32px; }
.rv-gate-icon { font-size: 36px; margin-bottom: 10px; }
.rv-gate-title { font-family: 'Cormorant Garamond',serif; font-size: 22px; font-weight: 400; color: var(--ink); margin-bottom: 8px; }
.rv-gate-sub { font-size: 14px; color: var(--ink-lt); margin-bottom: 20px; }
.rv-gate-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rv-gate-buy { padding: 11px 24px; border: 1.5px solid var(--border); border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--ink-mid); text-decoration: none; transition: all .15s; }
.rv-gate-buy:hover { border-color: var(--ink); color: var(--ink); }
.rv-gate-verify { padding: 11px 24px; background: var(--ink); color: white; border: none; border-radius: var(--r-pill); font-family: 'DM Sans',sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s; }
.rv-gate-verify:hover { background: #333; }

/* Review form */
.rv-form-wrap { margin-top: 32px; padding: 32px; background: var(--cream); border-radius: 16px; }
.rv-form-title { font-family: 'Cormorant Garamond',serif; font-size: 22px; font-weight: 400; margin-bottom: 20px; color: var(--ink); }
.rv-star-row { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.rv-star-pick { font-size: 28px; cursor: pointer; color: var(--border); transition: color .1s; }
.rv-star-pick.lit { color: var(--gold); }
.rv-star-label { font-size: 13px; color: var(--ink-lt); margin-left: 6px; }
.rv-input { display: block; width: 100%; padding: 11px 14px; margin-bottom: 12px; border: 1.5px solid var(--border); border-radius: 10px; font-family: 'DM Sans',sans-serif; font-size: 13px; color: var(--ink); background: white; outline: none; }
.rv-input:focus { border-color: var(--gold); }
.rv-textarea { resize: vertical; min-height: 100px; }
.rv-name-preview { font-size: 12px; color: var(--ink-lt); margin-bottom: 12px; }
.rv-photo-label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px dashed var(--border); border-radius: 10px; font-size: 13px; color: var(--ink-mid); cursor: pointer; }
.rv-photo-label:hover { border-color: var(--gold); color: var(--gold); }
.rv-photo-upload-row { margin-bottom: 16px; }
.rv-photo-previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rv-photo-preview-thumb img, .rv-photo-preview-thumb video { border-radius: 6px; }
.rv-submit-btn { padding: 13px 28px; background: var(--ink); color: white; border: none; border-radius: var(--r-pill); font-family: 'DM Sans',sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s; }
.rv-submit-btn:hover { background: #333; }
.rv-submit-msg { margin-top: 10px; font-size: 13px; }

/* Verify modal */
.rv-modal-overlay { position: fixed; inset: 0; background: rgba(42,36,32,.6); z-index: 9000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; }
.rv-modal { background: white; border-radius: 16px; padding: 32px; width: 420px; max-width: calc(100vw - 32px); position: relative; }
.rv-modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--ink-lt); }
.rv-modal-title { font-family: 'Cormorant Garamond',serif; font-size: 22px; font-weight: 400; color: var(--ink); margin-bottom: 8px; }
.rv-modal-sub { font-size: 13px; color: var(--ink-lt); margin-bottom: 20px; }

/* ── LIGHTBOX ── */
.lb-overlay {
  position: fixed; inset: 0; background: rgba(10,8,6,.92);
  z-index: 9999; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  opacity: 0; transition: opacity .2s;
}
.lb-main { display: flex; align-items: center; justify-content: center; max-height: 80vh; }
.lb-main img { max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: 8px; }
.lb-close {
  position: absolute; top: 16px; right: 20px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%; width: 40px; height: 40px; font-size: 22px;
  color: white; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.lb-close:hover { background: rgba(255,255,255,.2); }
.lb-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%; width: 48px; height: 48px;
  font-size: 28px; color: white; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.lb-arrow:hover { background: rgba(255,255,255,.25); }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 90vw; padding: 4px; }
.lb-strip::-webkit-scrollbar { display: none; }
.lb-thumb { width: 56px; height: 56px; border-radius: 6px; overflow: hidden; cursor: pointer; flex-shrink: 0; border: 2px solid transparent; transition: border-color .15s; opacity: .6; }
.lb-thumb.active { border-color: white; opacity: 1; }
.lb-thumb:hover { opacity: .9; }

/* ── CART ADDITIONS ── */
.cart-item-free { background: #FFFBF0; }
.ci-free-tag { font-size: 10px; font-weight: 700; color: var(--gold); background: var(--gold-lt); border-radius: var(--r-pill); padding: 1px 6px; margin-left: 4px; }
.cd-progress { padding: 12px 20px; border-top: 1px solid var(--border); }
.cdp-label { font-size: 12px; color: var(--ink-mid); margin-bottom: 8px; font-weight: 500; }
.cdp-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.cdp-fill { height: 100%; background: linear-gradient(90deg,var(--gold),#e8c080); transition: width .4s; }
.cd-points-bar { padding: 10px 20px; background: var(--gold-lt); border-top: 1px solid #E8D4A0; font-size: 12px; color: var(--ink-mid); display: flex; justify-content: space-between; align-items: center; }
.cd-points-guest { background: #F5F8FF; border-top-color: #D0D8F0; }

/* ── YMAL (single product page) ── */
.sp-ymal { max-width: 1200px; margin: 0 auto; padding: 48px 32px; }
.sp-ymal-head { text-align: center; margin-bottom: 32px; }
.sp-ymal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .sp-wrap { grid-template-columns: 1fr; gap: 24px; padding: 0 16px; }
  .sp-gallery-panel { position: static; height: 70vw; min-height: 320px; }
  .sp-frame { height: 60vw; min-height: 300px; }
  .sp-gallery-prev { left: 8px; }
  .sp-gallery-next { right: 8px; }
  .rv-summary { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 600px) {
  .header-nav-wrap { display: none; }
  .auth-modal { padding: 28px 20px 24px; }
  .sp-qty-atc { flex-wrap: wrap; }
  .sp-atc-btn { flex: none; width: 100%; }
}

/* ━━ V2 PATCH ━━ */

/* FIX: hover - no z-index fighting */
.pc-media { cursor:pointer; position:relative; overflow:hidden; }
.pc-cover { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--cream);z-index:1; }
.pc-cover img { width:100%;height:100%;object-fit:contain;display:block; }
.pc-emoji-placeholder { font-size:52px; }
.pc-video-wrap { position:absolute;inset:0;opacity:0;transition:opacity 0.2s ease;z-index:2;pointer-events:none;background:#000; }
.pc-video { width:100%;height:100%;object-fit:cover;display:block; }
.pc-video-placeholder { width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center; }
.pc-video-gradient { position:absolute;inset:0;background:linear-gradient(135deg,#1a1410,#2a2420); }
.pc-video-play { position:relative;font-size:32px;color:rgba(255,255,255,.35); }
.pc-atc-overlay { position:absolute;inset:0;z-index:4;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px;opacity:0;transition:opacity .15s;pointer-events:none; }
.pc-media:hover .pc-atc-overlay { opacity:1;pointer-events:all; }
.pc-atc-btn { padding:9px 20px;background:white;color:var(--ink);border:none;border-radius:var(--r-pill);font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.15);transition:background .15s;position:relative;z-index:5; }
.pc-atc-btn:hover { background:var(--gold);color:white; }
.pc-media-link { position:absolute;inset:0;z-index:3;display:block; }
.pc-media:hover .pc-media-link { pointer-events:none; }
.pc-media:not(:hover) .pc-media-link { pointer-events:all; }
.pc-wish { position:absolute;top:10px;right:10px;z-index:6;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.9);border:1.5px solid var(--border);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s; }
.pc-wish:hover,.pc-wish.wished { background:var(--rose);border-color:var(--rose);color:white; }
.pc-badge { position:absolute;top:10px;left:10px;z-index:6;padding:3px 8px;border-radius:var(--r-pill);font-size:10px;font-weight:800;letter-spacing:.05em; }
.badge-sale { background:var(--rose);color:white; }
.badge-new { background:var(--gold);color:white; }
.badge-hot { background:var(--ink);color:white; }
.pc-swatches { display:flex;gap:6px;padding:8px 12px 0; }
.swatch-icon { position:absolute;font-size:48px;opacity:.35;pointer-events:none; }

/* REELS: 3 wide, larger, draggable */
.reels-scroll { display:flex;gap:14px;overflow-x:auto;padding-bottom:12px;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;cursor:grab; }
.reels-scroll:active { cursor:grabbing; }
.reels-scroll::-webkit-scrollbar { display:none; }
.reel-card { flex:0 0 calc(33.333% - 10px);min-width:200px;cursor:pointer; }
.reel-vid { width:100%;aspect-ratio:9/16;border-radius:16px;overflow:hidden;position:relative;background:var(--ink);display:flex;align-items:center;justify-content:center;min-height:280px; }
.reels-wrap { position:relative;overflow:hidden; }
.reels-arrow { position:absolute;top:40%;transform:translateY(-50%);z-index:10;width:40px;height:40px;background:white;border:1.5px solid var(--border);border-radius:50%;cursor:pointer;font-size:18px;color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,.1);transition:all .15s; }
.reels-arrow:hover { background:var(--ink);color:white;border-color:var(--ink); }
.reels-arrow.left { left:-20px; }
.reels-arrow.right { right:-20px; }

/* GALLERY: centered images */
.product-gallery .gallery-main { display:flex;align-items:center;justify-content:center;background:var(--cream);border-radius:16px;overflow:hidden;aspect-ratio:1/1; }
.product-gallery .gallery-main img { width:100%;height:100%;object-fit:contain;display:block; }
.sp-frame img { object-fit:contain !important; }
.sp-frame { background:var(--cream); }

/* GIFT POPUP */
.gift-popup-overlay { position:fixed;inset:0;background:rgba(42,36,32,.55);z-index:8500;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s;pointer-events:none; }
.gift-popup-overlay.open { opacity:1;pointer-events:all; }
.gift-popup { background:white;border-radius:20px;width:400px;max-width:calc(100vw - 32px);padding:32px 28px 24px;text-align:center;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.18);transform:scale(.93);transition:transform .25s; }
.gift-popup-overlay.open .gift-popup { transform:scale(1); }
.gift-popup-close { position:absolute;top:12px;right:14px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--ink-lt); }
.gift-popup-badge { display:inline-block;background:var(--rose);color:white;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:4px 12px;border-radius:var(--r-pill);margin-bottom:14px; }
.gift-popup-icon { font-size:52px;margin-bottom:12px; }
.gift-popup-title { font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:400;color:var(--ink);margin-bottom:8px;line-height:1.2; }
.gift-popup-sub { font-size:13px;color:var(--ink-mid);margin-bottom:16px;line-height:1.6; }
.gift-popup-item { display:flex;align-items:center;gap:12px;justify-content:center;background:var(--gold-lt);border:1.5px solid #e8d0a0;border-radius:12px;padding:12px 16px;margin-bottom:16px; }
.gift-popup-item-icon { font-size:24px; }
.gift-popup-item-name { font-size:14px;font-weight:700;color:var(--ink); }
.gift-popup-item-price { font-size:12px;color:var(--gold);font-weight:700;margin-left:auto; }
.gift-popup-timer { font-size:11px;color:var(--rose);font-weight:700;margin-bottom:14px;letter-spacing:.06em; }
.gift-popup-cta { width:100%;padding:13px;background:var(--ink);color:white;border:none;border-radius:var(--r-pill);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s;margin-bottom:8px; }
.gift-popup-cta:hover { background:#333; }
.gift-popup-skip { font-size:11px;color:var(--ink-lt);cursor:pointer;text-decoration:underline; }

/* ACCORDION */
.sp-accordion { margin:16px 0; }
.acc-item { border-bottom:1.5px solid var(--border); }
.acc-item:first-child { border-top:1.5px solid var(--border); }
.acc-btn { width:100%;display:flex;justify-content:space-between;align-items:center;padding:14px 0;background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;color:var(--ink);text-align:left;transition:color .15s; }
.acc-btn:hover { color:var(--gold); }
.acc-icon { font-size:18px;color:var(--ink-lt);transition:transform .2s;line-height:1;display:inline-block; }
.acc-btn.open .acc-icon { transform:rotate(45deg);color:var(--ink); }
.acc-body { display:none;padding:0 0 16px;font-size:13px;color:var(--ink-mid);line-height:1.8; }
.acc-body ul { padding-left:18px; }
.acc-body li { margin-bottom:4px; }
.sc-tabs { display:flex;gap:6px;margin-bottom:12px; }
.sc-tab { padding:5px 14px;border-radius:var(--r-pill);border:1.5px solid var(--border);background:none;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;cursor:pointer;color:var(--ink-mid); }
.sc-tab.active { background:var(--ink);border-color:var(--ink);color:white; }
.sc-table { width:100%;border-collapse:collapse;font-size:12px; }
.sc-table th { font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-lt);padding:6px 8px;text-align:left;border-bottom:1px solid var(--border); }
.sc-table td { padding:8px;color:var(--ink-mid);border-bottom:1px solid var(--border); }
.sc-table tr:last-child td { border-bottom:none; }
.sc-table tr:nth-child(even) td { background:var(--cream); }
.sc-table tr td:first-child { font-weight:700;color:var(--ink); }
.sc-note { font-size:11px;color:var(--ink-lt);font-style:italic;margin-top:8px; }
.sc-fit-helper { margin-top:14px;border-top:1px solid var(--border);padding-top:12px; }
.sc-helper-title { font-size:12px;font-weight:700;color:var(--ink);margin-bottom:10px; }
.sc-helper-row { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px; }
.sc-helper-field label { display:block;font-size:11px;font-weight:600;color:var(--ink-lt);margin-bottom:4px;letter-spacing:.06em;text-transform:uppercase; }
.sc-helper-field select { width:100%;padding:8px 10px;border:1.5px solid var(--border);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:12px;color:var(--ink);background:white;outline:none; }
.sc-suggestion { font-size:13px;font-weight:700;color:var(--gold);min-height:20px;text-align:center;padding:8px;background:var(--gold-lt);border-radius:8px;display:none; }
.sc-suggestion.visible { display:block; }
.trust-row { display:flex;gap:16px;margin:16px 0;flex-wrap:wrap; }
.trust-item { display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-mid); }
.ti-icon { font-size:18px; }

/* CART: points bar at TOP */
.cd-points-top { padding:10px 20px;background:linear-gradient(90deg,var(--gold-lt),#fff8ee);border-bottom:1px solid #e8d0a0;font-size:12px;color:var(--ink-mid);display:flex;justify-content:space-between;align-items:center;gap:8px; }
.cd-pts-earn { font-weight:700;color:var(--gold); }
.cd-pts-login-link { color:var(--gold);font-weight:600;text-decoration:none; }
.cd-pts-login-link:hover { text-decoration:underline; }
.acc-body.open { display:block; }

/* ━━ V3 BUG FIXES ━━ */

/* Bug 1: pc-media flex centering - prevents top-left snap */
.pc-media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}
.pc-cover {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream, #faf7f4); z-index: 1;
}
.pc-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.pc-emoji-placeholder { font-size:52px; line-height:1; position:relative; z-index:1; }

/* Bug 4: hover gradient animation for cards without video */
.pc-video-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #1a1410 0%, #2a2420 50%, #3a3028 100%);
  animation: pcGradShift 2.5s ease infinite alternate;
}
@keyframes pcGradShift {
  from { background: linear-gradient(135deg, #1a1410, #2a2420); }
  to   { background: linear-gradient(135deg, #2a2420, #4a3830); }
}
.pc-video-wrap { position:absolute; inset:0; opacity:0; transition:opacity 0.3s ease; z-index:2; pointer-events:none; }
.pc-media:hover .pc-video-wrap { opacity:1; }

/* Bug 6: mobile touch fixes */
.product-card { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pc-media-link { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pc-body-link  { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pc-atc-btn    { touch-action: manipulation; }

/* Bug 8: Auth modal fixes */
.auth-overlay { display:none; position:fixed; inset:0; background:rgba(42,36,32,.6); z-index:9000; }
.auth-overlay.open { display:block; }
.auth-modal {
  display: none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  background:white; border-radius:20px; padding:36px 32px 28px; width:380px;
  max-width:calc(100vw - 32px); z-index:9001; box-shadow:0 20px 60px rgba(0,0,0,.2);
}
.auth-modal.open { display:block; }
.auth-close { position:absolute; top:12px; right:14px; background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink-lt); }
.auth-logo { text-align:center; font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:400; letter-spacing:.12em; margin-bottom:20px; }
.auth-tabs { display:flex; border-bottom:1.5px solid var(--border,#D8D0C8); margin-bottom:20px; gap:0; }
.auth-tab { flex:1; padding:10px 0; background:none; border:none; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; cursor:pointer; color:var(--ink-lt,#8a7f78); border-bottom:2.5px solid transparent; margin-bottom:-1.5px; transition:color .15s; }
.auth-tab.active { color:var(--ink,#1A1410); border-bottom-color:var(--ink,#1A1410); }
.auth-pts-tease { background:var(--gold-lt,#fdf6e7); border:1px solid #e8d0a0; border-radius:8px; padding:10px 14px; font-size:12px; color:var(--ink-mid,#5a4f48); margin-bottom:14px; line-height:1.5; }
.auth-input { width:100%; padding:11px 14px; border:1.5px solid var(--border,#D8D0C8); border-radius:8px; font-family:'DM Sans',sans-serif; font-size:14px; color:var(--ink,#1A1410); outline:none; box-sizing:border-box; margin-bottom:10px; transition:border-color .15s; }
.auth-input:focus { border-color:var(--gold,#B8860B); }
.auth-submit { width:100%; padding:13px; background:var(--ink,#1A1410); color:white; border:none; border-radius:var(--r-pill,100px); font-family:'DM Sans',sans-serif; font-size:14px; font-weight:700; cursor:pointer; margin-top:4px; transition:background .15s; }
.auth-submit:hover { background:#333; }
.auth-sub-row { text-align:center; margin-top:10px; }
.auth-msg { font-size:12px; margin-top:8px; text-align:center; min-height:18px; }
.auth-checkbox-row { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-mid); margin-bottom:10px; cursor:pointer; }
.auth-checkbox-row input { width:14px; height:14px; }

/* Beauty section on homepage */
.beauty-section { padding: 0 0 48px; }
.beauty-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:768px) { .beauty-grid { grid-template-columns:repeat(2,1fr); gap:14px; } }

/* Fix: z-index on atc overlay vs media-link (z-index wars) */
.pc-atc-overlay { position:absolute; inset:0; z-index:4; display:flex; align-items:flex-end; justify-content:center; padding-bottom:14px; opacity:0; transition:opacity .2s; pointer-events:none; }
.pc-media:hover .pc-atc-overlay { opacity:1; pointer-events:all; }
.pc-media-link { position:absolute; inset:0; z-index:3; display:block; }
.pc-media:hover .pc-media-link { pointer-events:none; }
.pc-media:not(:hover) .pc-media-link { pointer-events:all; }
.pc-wish { position:absolute; top:10px; right:10px; z-index:6; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.9); border:1.5px solid var(--border,#D8D0C8); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.pc-wish:hover, .pc-wish.wished { background:var(--rose,#e8a0a0); border-color:var(--rose,#e8a0a0); color:white; }
.pc-badge { position:absolute; top:10px; left:10px; z-index:6; padding:3px 8px; border-radius:var(--r-pill,100px); font-size:10px; font-weight:800; letter-spacing:.05em; }

/* Swatches */
.pc-swatches { display:flex; gap:6px; padding:8px 12px 0; }
.pc-swatch { width:18px; height:18px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:all .15s; flex-shrink:0; }
.pc-swatch.active { border-color:var(--ink,#1A1410); transform:scale(1.15); }
.pc-swatch:hover { transform:scale(1.1); }


/* ━━ INFINITE REELS CAROUSEL ━━ */

/* ━━ INFINITE REELS CAROUSEL ━━ */
.reels-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 -20px; /* bleed to edges on mobile */
}
.reels-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.reels-track {
  display: flex;
  gap: 14px;
  transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  padding: 4px 0 12px; /* breathing room for box-shadow */
}
.reels-track.no-transition {
  transition: none !important;
}
.reel-card {
  flex: 0 0 calc((100% - 28px) / 3); /* 3 visible: subtract 2 gaps */
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: var(--cream, #faf7f4);
  box-shadow: 0 4px 20px rgba(0,0,0,0.10);
  cursor: pointer;
  flex-shrink: 0;
}
/* Responsive breakpoints */
@media (max-width: 1024px) and (min-width: 641px) {
  .reel-card { flex: 0 0 calc((100% - 14px) / 2); } /* 2 visible */
}
@media (max-width: 640px) {
  .reel-card { flex: 0 0 calc(100% / 1.2); } /* 1.2 peek */
  .reels-wrap { margin: 0 -16px; }
}

/* Reel card internals */
.rc-thumb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 72px;
  line-height: 1;
}
.rc-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.rc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 14px 14px;
}
.rc-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(4px);
  border: 2px solid rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: white;
  transition: transform 0.2s, background 0.2s;
}
.reel-card:hover .rc-play { transform: translate(-50%,-50%) scale(1.1); background: rgba(255,255,255,0.38); }
.rc-views {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(0,0,0,0.45);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 100px;
  letter-spacing: 0.04em;
}
.rc-user {
  color: white;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}
.rc-caption {
  color: rgba(255,255,255,0.88);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rc-heart {
  position: absolute;
  top: 12px; left: 12px;
  color: white;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.rc-heart-icon { font-size: 18px; }
.rc-heart-count { font-family:'DM Sans',sans-serif; font-size:10px; font-weight:700; }

/* Arrow buttons */
.reels-arrow {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border, #D8D0C8);
  background: white;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  color: var(--ink, #1A1410);
}
.reels-arrow:hover { background: var(--ink, #1A1410); color: white; border-color: var(--ink); }
@media (max-width: 640px) { .reels-arrow { display: none; } }



/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   VIFIQUÉ RETHEME v4 — Logo Palette
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 1. COLOR TOKENS ──────────────────────────────── */
:root {
  --hot-pink:    #E8427A;
  --pink:        #F0789A;
  --pink-lt:     #F9C4D4;
  --peach:       #F5A86E;
  --peach-lt:    #FAD4B0;
  --yellow-soft: #F7D580;
  --powder-blue: #B8D4E8;
  --blue-lt:     #DCE8F4;
  --blue-mist:   #EEF4FA;

  --bg:          #FAF6FC;
  --bg-alt:      #FDF0F5;
  --cream:       #FFF8FC;

  --aura-radial: radial-gradient(
    ellipse at center,
    #F5A86E 0%, #E8427A 20%, #F0789A 40%,
    #F9C4D4 65%, #C8DDF0 85%, #EEF4FA 100%
  );
  --aura-soft: radial-gradient(
    ellipse at 40% 50%,
    rgba(232,66,122,0.15) 0%,
    rgba(245,168,110,0.10) 35%,
    rgba(184,212,232,0.08) 70%,
    transparent 100%
  );

  --ink:         #2A1820;
  --ink-mid:     #7A4A5C;
  --ink-lt:      #B090A0;

  --accent:      #E8427A;
  --accent-dk:   #C43060;
  --accent-lt:   #F9C4D4;

  /* Remap gold → peach for backwards compat */
  --gold:        #F5A86E;
  --gold-lt:     #FAD4B0;
  --gold-dk:     #D4804A;

  /* Remap rose → pink */
  --rose:        #F0789A;

  --border:      #EDD8E4;
  --border-dk:   #D4B8C8;

  --white:       #FFFFFF;
  --r-pill:      100px;
}

/* ── 2. BODY + PAGE BACKGROUND ──────────────────── */
body {
  background-color: var(--bg) !important;
  background-image: radial-gradient(
    ellipse at 50% 0%,
    rgba(232,66,122,0.06) 0%,
    rgba(184,212,232,0.04) 60%,
    transparent 100%
  ) !important;
  color: var(--ink) !important;
}

/* ── 3. ANNOUNCEMENT BAR ─────────────────────────── */
.announcement-bar,
.ann-bar,
.site-announcement,
[class*="announce"] {
  background: linear-gradient(90deg, #E8427A, #F5A86E) !important;
  color: white !important;
}

/* ── 4. HEADER + NAV ─────────────────────────────── */
header, .site-header, .main-header {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--border) !important;
}
.site-logo, .logo-text, .brand-name,
header .site-title, .header-logo-text {
  color: var(--hot-pink) !important;
}
.nav-link:hover, .main-nav a:hover { color: var(--hot-pink) !important; }

/* ── 5. IRIDESCENT / HOLOGRAPHIC TEXT ────────────── */
.logo-iridescent,
.site-logo a,
.header-logo,
.footer-logo {
  background: linear-gradient(
    135deg,
    #B8D4E8 0%, #E8B4C8 20%, #F5D080 40%,
    #A8E8D0 60%, #C8B4F0 80%, #B8D4E8 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: viShimmer 4s linear infinite;
}
@keyframes viShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── 6. HERO SECTION ─────────────────────────────── */
.hero {
  background: var(--aura-radial) !important;
  position: relative;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
.hero-eyebrow { color: rgba(255,255,255,0.9) !important; }
.hero-title   { color: white !important; text-shadow: 0 2px 20px rgba(0,0,0,0.15); }
.hero-sub     { color: rgba(255,255,255,0.85) !important; }
.hero-badge   { background: rgba(255,255,255,0.25) !important; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.4) !important; color: white !important; }
.hero-badge .hb-val { color: var(--yellow-soft) !important; }
.hero-tag     { background: rgba(255,255,255,0.2) !important; color: white !important; border: 1px solid rgba(255,255,255,0.35) !important; }

/* ── 7. BUTTONS ──────────────────────────────────── */
.btn-primary,
.pc-atc-btn,
.auth-submit,
.sp-atc-btn,
button.btn-primary {
  background: var(--hot-pink) !important;
  color: white !important;
  border-color: var(--hot-pink) !important;
}
.btn-primary:hover,
.pc-atc-btn:hover,
.auth-submit:hover,
.sp-atc-btn:hover {
  background: var(--accent-dk) !important;
  border-color: var(--accent-dk) !important;
}
.btn-outline {
  border: 1.5px solid var(--hot-pink) !important;
  color: var(--hot-pink) !important;
  background: transparent !important;
}
.btn-outline:hover {
  background: var(--pink-lt) !important;
  color: var(--accent-dk) !important;
}

/* ── 8. FLOATING NAV ─────────────────────────────── */
.fn-btn { background: white !important; border: 1.5px solid var(--border) !important; color: var(--ink) !important; }
.fn-btn:hover { background: var(--hot-pink) !important; color: white !important; border-color: var(--hot-pink) !important; }
.fn-badge { background: var(--hot-pink) !important; }

/* ── 9. PRODUCT CARDS ────────────────────────────── */
.product-card {
  background: white !important;
  border: 1px solid var(--border) !important;
}
.product-card:hover {
  box-shadow: 0 12px 40px rgba(232,66,122,0.12) !important;
}
.pc-cover:not(:has(img)),
.pc-cover:has(.pc-emoji-placeholder) {
  background: radial-gradient(ellipse at center, #FAD4B0, #F9C4D4, #DCE8F4) !important;
}
.pc-emoji-placeholder { color: var(--hot-pink); }
.pc-name  { color: var(--hot-pink) !important; }
.pc-price { color: var(--ink) !important; }
.pc-stars { color: var(--peach) !important; }
.pc-badge.badge-sale, .pc-badge[class*="sale"] { background: var(--ink) !important; color: white !important; }
.pc-badge.badge-new,  .pc-badge[class*="new"]  { background: var(--peach) !important; color: white !important; }
.pc-badge.badge-hot,  .pc-badge[class*="hot"]  { background: var(--hot-pink) !important; color: white !important; }
.pc-wish { border-color: var(--border) !important; }
.pc-wish:hover, .pc-wish.wished { background: var(--hot-pink) !important; border-color: var(--hot-pink) !important; color: white !important; }

/* ── 10. PRODUCT MEDIA GRADIENT (no-video hover) ─── */
.pc-video-gradient {
  background: linear-gradient(135deg, #2A1820 0%, #4A2030 50%, #6A3050 100%) !important;
  animation: pcGradShift 2.5s ease infinite alternate;
}
@keyframes pcGradShift {
  from { background: linear-gradient(135deg, #2A1820, #4A2030); }
  to   { background: linear-gradient(135deg, #4A2030, #6A3050); }
}

/* ── 11. GIFT PROGRESS BAR ───────────────────────── */
.gp-fill {
  background: linear-gradient(90deg, #F5A86E, #E8427A, #C8B4F0) !important;
}

/* ── 12. LOYALTY BANNER ──────────────────────────── */
.loyalty-banner {
  background: linear-gradient(135deg, #2A1820, #4A2030) !important;
  color: white !important;
}
.loyalty-banner h2 { color: white !important; }
.loyalty-banner h2 em { color: var(--peach) !important; -webkit-text-fill-color: var(--peach) !important; }
.loyalty-banner p  { color: rgba(255,255,255,0.7) !important; }
.lb-cta { background: var(--hot-pink) !important; color: white !important; }
.lb-cta:hover { background: var(--accent-dk) !important; }
.lb-num { color: var(--peach) !important; }
.lb-desc { color: rgba(255,255,255,0.65) !important; }
.lb-point-item { border-color: rgba(255,255,255,0.15) !important; }

/* ── 13. FEATURED PRODUCT ────────────────────────── */
.featured-product {
  background: linear-gradient(135deg, #2A1820, #4A2030) !important;
}
.fp-eyebrow { color: var(--peach) !important; }
.fp-name    { color: white !important; }
.fp-desc    { color: rgba(255,255,255,0.7) !important; }
.fp-price   { color: var(--peach) !important; }
.fp-tag     { background: rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.85) !important; border: 1px solid rgba(255,255,255,0.2) !important; }

/* ── 14. TRUST STRIP ─────────────────────────────── */
.trust-strip { background: var(--bg-alt) !important; border-top: 1px solid var(--border) !important; border-bottom: 1px solid var(--border) !important; }
.trust-icon  { color: var(--hot-pink) !important; }

/* ── 15. SECTION EYEBROWS — solid color, no shimmer ──── */
.section-eyebrow, .hero-eyebrow, .hero-title em {
  font-weight: 600;
  letter-spacing: 0.12em;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--hot-pink, #E8427A) !important;
  background-clip: unset !important;
  animation: none !important;
  color: var(--hot-pink, #E8427A) !important;
}
.hero-title em { font-style: italic; }
/* ── 16. PROMO CARDS ─────────────────────────────── */
.promo-card { border: 1px solid var(--border) !important; }
.promo-title { color: white !important; }
.promo-sub   { color: rgba(255,255,255,0.8) !important; }

/* ── 17. REVIEWS ─────────────────────────────────── */
.rm-stars { color: var(--peach) !important; }
.review-mini { border: 1px solid var(--border) !important; background: white !important; }

/* ── 18. AUTH MODAL ──────────────────────────────── */
.auth-tab.active { color: var(--hot-pink) !important; border-bottom-color: var(--hot-pink) !important; }
.auth-input:focus { border-color: var(--hot-pink) !important; }
.auth-pts-tease { background: #FFF0F5 !important; border-color: var(--pink-lt) !important; }
.auth-logo { color: var(--hot-pink) !important; }

/* ── 19. CART DRAWER ─────────────────────────────── */
.cd-head { background: var(--bg-alt) !important; border-bottom: 1px solid var(--border) !important; }
.cd-title { color: var(--ink) !important; }
.ci-qty-btn { border-color: var(--border) !important; color: var(--ink) !important; }
.ci-qty-btn:hover { background: var(--hot-pink) !important; color: white !important; border-color: var(--hot-pink) !important; }
.ci-remove:hover { color: var(--hot-pink) !important; }
.cd-checkout-btn { background: var(--hot-pink) !important; }
.cd-checkout-btn:hover { background: var(--accent-dk) !important; }
.cdp-fill { background: linear-gradient(90deg, var(--peach), var(--hot-pink), #C8B4F0) !important; }

/* ── 20. FOOTER ──────────────────────────────────── */
footer, .site-footer {
  background: linear-gradient(135deg, #2A1820, #3A2028) !important;
  border-top: 1px solid rgba(237,216,228,0.2) !important;
  color: rgba(255,255,255,0.65) !important;
}
footer a, .site-footer a { color: rgba(255,255,255,0.65) !important; }
footer a:hover, .site-footer a:hover { color: var(--peach) !important; }
.footer-logo, .footer-title { color: white !important; }

/* ── 21. SINGLE PRODUCT PAGE ─────────────────────── */
.sp-title      { color: var(--ink) !important; }
.sp-price      { color: var(--hot-pink) !important; }
.sp-stars      { color: var(--peach) !important; }
.acc-btn       { color: var(--ink) !important; border-color: var(--border) !important; }
.acc-btn.open, .acc-btn:hover { color: var(--hot-pink) !important; }
.acc-icon      { color: var(--hot-pink) !important; }
.sc-tab.active { background: var(--hot-pink) !important; border-color: var(--hot-pink) !important; color: white !important; }
.sc-tab        { border: 1.5px solid var(--border) !important; color: var(--ink) !important; }
.sp-color-swatch.active { border-color: var(--hot-pink) !important; box-shadow: 0 0 0 2px var(--pink-lt); }
.sp-size-btn.active { background: var(--ink) !important; color: white !important; border-color: var(--ink) !important; }
.sp-size-btn { border: 1.5px solid var(--border) !important; color: var(--ink) !important; background: white !important; }
.sp-size-btn:hover:not(.unavailable) { border-color: var(--hot-pink) !important; color: var(--hot-pink) !important; }
.sp-size-btn.unavailable { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }
.sp-atc-btn { background: var(--hot-pink) !important; border-color: var(--hot-pink) !important; }
.gift-popup-badge { background: var(--hot-pink) !important; }
.gift-popup-cta   { background: var(--hot-pink) !important; }
.gift-popup-cta:hover { background: var(--accent-dk) !important; }

/* ── 22. SHOP / ARCHIVE PAGE ─────────────────────── */
.shop-tabs .tab.active { background: var(--hot-pink) !important; border-color: var(--hot-pink) !important; color: white !important; }
.shop-tabs .tab { border: 1.5px solid var(--border) !important; color: var(--ink) !important; }
.shop-tabs .tab:hover { border-color: var(--hot-pink) !important; color: var(--hot-pink) !important; }

/* ── 23. SWATCHES ────────────────────────────────── */
.pc-swatch.active, .sp-color-swatch.active { border-color: var(--hot-pink) !important; }

/* ── 24. GIFT POPUP ──────────────────────────────── */
.gift-popup-overlay { background: rgba(42,24,32,0.65) !important; }
.gift-popup { background: white !important; }
.gift-popup-timer { color: var(--hot-pink) !important; }

/* ── 25. NEWSLETTER POPUP ─────────────────────────── */
.nl-visual, .popup-visual, .newsletter-top {
  background: var(--aura-radial) !important;
}

/* ── 26. SPARKLE (override inline) ───────────────── */
.sparkle-particle { /* colors handled via JS */ }

/* ── 27. BEAUTY/SKINCARE SECTION ─────────────────── */
.beauty-section .section-eyebrow { /* color: var(--hot-pink) */ }

/* ── 28. REELS CAROUSEL ACCENTS ──────────────────── */
.rc-cred { color: var(--yellow-soft) !important; }
.rc-play { border-color: rgba(255,255,255,0.6) !important; }
.reels-arrow:hover { background: var(--hot-pink) !important; border-color: var(--hot-pink) !important; color: white !important; }

/* ── Size buttons (sp-sizes) ──────────────────────────────── */
.sp-sizes-wrap { margin: 14px 0 10px; }
.sp-size-label { font-family:'DM Sans',sans-serif; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:8px; }
.sp-size-label span { color:var(--hot-pink); font-weight:700; text-transform:uppercase; }
.sp-sizes { display:flex; gap:8px; flex-wrap:wrap; }
.sp-size-btn {
  padding:8px 18px; border-radius:8px; font-family:'DM Sans',sans-serif;
  font-size:13px; font-weight:600; cursor:pointer; transition:all .15s;
  background:white; border:1.5px solid var(--border,#EDD8E4); color:var(--ink);
  min-width:48px; text-align:center;
}
.sp-size-btn:hover:not(.unavailable) { border-color:var(--hot-pink,#E8427A); color:var(--hot-pink,#E8427A); }
.sp-size-btn.active { background:var(--ink,#2A1820); color:white; border-color:var(--ink,#2A1820); }
.sp-size-btn.unavailable { opacity:.35; text-decoration:line-through; cursor:not-allowed; pointer-events:none; }
.sp-size-note { font-size:11px; color:var(--ink-lt,#B090A0); margin-top:6px; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.shake { animation:shake .35s ease; }

/* ── Reel card gradient placeholder ──────────────────────────── */
.rc-gradient-bg { position:absolute; inset:0; background:linear-gradient(160deg,#F9C4D4,#F5A86E,#B8D4E8); }
.rc-icon-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:72px; }
.rc-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rc-cred { color:var(--yellow-soft,#F7D580); font-family:'DM Sans',sans-serif; font-size:11px; font-weight:700; margin-bottom:4px; letter-spacing:.03em; }

/* ── Variation Quick-Select Popup ────────────────────────────── */
.vfq-popup-overlay{position:fixed;inset:0;background:rgba(42,24,32,.5);z-index:7999;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(4px);}
.vfq-popup-overlay.open{opacity:1;pointer-events:all;}
.vfq-variant-popup{position:fixed;bottom:0;left:0;right:0;background:#fff;border-radius:24px 24px 0 0;padding:28px 24px 40px;z-index:8000;box-shadow:0 -8px 40px rgba(0,0,0,.15);transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);max-width:480px;margin:0 auto;}
.vfq-variant-popup.open{transform:translateY(0);}
.vfq-popup-handle{width:40px;height:4px;background:#EDD8E4;border-radius:50px;margin:0 auto 20px;}
.vfq-popup-product{display:flex;gap:14px;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #EDD8E4;}
.vfq-popup-img{width:64px;height:80px;border-radius:10px;object-fit:cover;background:#F9C4D4;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden;}
.vfq-popup-name{font-family:'Cormorant Garamond',serif;font-size:18px;color:#2A1820;margin-bottom:4px;}
.vfq-popup-price{font-size:16px;color:#E8427A;font-weight:600;}
.vfq-popup-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7A4A5C;margin-bottom:10px;}
.vfq-color-options{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.vfq-color-btn{display:flex;align-items:center;gap:8px;padding:9px 16px;border:1.5px solid #EDD8E4;border-radius:50px;background:#fff;cursor:pointer;font-size:13px;font-weight:600;color:#2A1820;transition:all .15s;font-family:'DM Sans',sans-serif;}
.vfq-color-btn.active{border-color:#E8427A;background:#E8427A;color:#fff;}
.vfq-color-swatch{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.1);flex-shrink:0;}
.vfq-size-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:24px;}
.vfq-size-btn{padding:11px 8px;border:1.5px solid #EDD8E4;border-radius:10px;background:#fff;cursor:pointer;font-family:'Cormorant Garamond',serif;font-size:15px;font-weight:600;text-align:center;color:#2A1820;transition:all .15s;}
.vfq-size-btn:hover{border-color:#E8427A;}
.vfq-size-btn.active{border-color:#2A1820;background:#2A1820;color:#fff;}
.vfq-popup-atc{width:100%;padding:15px;background:linear-gradient(135deg,#E8427A,#F5A86E,#F7D580);color:#fff;border:none;border-radius:50px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 18px rgba(232,66,122,.3);}
.vfq-popup-atc:disabled{opacity:.5;cursor:not-allowed;}

/* Desktop: centered modal instead of bottom sheet */
@media (min-width:769px){
  .vfq-variant-popup{
    top:50%;bottom:auto;left:50%;right:auto;
    width:480px;max-width:calc(100vw - 40px);
    border-radius:20px;margin:0;
    transform:translateX(-50%) translateY(calc(-50% - 20px));
    opacity:0;pointer-events:none;
    transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .25s;
  }
  .vfq-variant-popup.open{
    transform:translateX(-50%) translateY(-50%);
    opacity:1;pointer-events:all;
  }
  .vfq-popup-handle{display:none;}
}