/* Velvet Mandarin brand system
   Based on the supplied official brand guidelines.
   Display: Didot-style serif. Supporting type: Open Sans.
*/
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500&family=Open+Sans:wght@300;400;500;600;700&display=swap');

:root{
  --vm-navy:#040650;
  --vm-blue-grey:#80979F;
  --vm-charcoal:#231F20;
  --vm-pink:#FF20A5;
  --vm-ivory:#FBF5EE;
  --vm-white:#FFFFFF;
  --vm-display:"Didot","Bodoni Moda","Bodoni 72","Times New Roman",serif;
  --vm-sans:"Open Sans",Arial,Helvetica,sans-serif;

  /* map the existing platform variables onto the brand */
  --ink:var(--vm-charcoal);
  --paper:var(--vm-ivory);
  --cream:#F2E9DF;
  --line:rgba(4,6,80,.16);
  --muted:#66777D;
  --sidebar:var(--vm-navy);
}

html,body,input,select,textarea,button{font-family:var(--vm-sans)}
body,.store,.admin-page{background:var(--vm-ivory);color:var(--vm-charcoal)}
h1,h2,h3,.product-meta h3,.metric-grid strong,.journey-row b,.login-art,.brand-mark,.mobile-menu-panel nav a{
  font-family:var(--vm-display);
  font-weight:400;
}

/* Brand typography rules */
h1,h2,.fashion-hero h1,.section-intro h2,.brand-story h2,.editorial-intro h2,.search-hero h1{
  color:var(--vm-navy);
  text-transform:uppercase;
  letter-spacing:-.025em;
}
.eyebrow,.store-nav a,.header-search,.bag-link,.fashion-link,.sidebar-group,.data-table th,.tag{
  font-family:var(--vm-sans);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:600;
}
p,.muted,.intro,.product-meta p{font-family:var(--vm-sans)}

/* Header and navigation */
.store-header{
  color:var(--vm-white);
  border-bottom-color:rgba(255,255,255,.24);
  background:linear-gradient(to bottom,rgba(4,6,80,.40),rgba(4,6,80,0));
}
.store-header.scrolled,.store-header.menu-light{
  background:rgba(251,245,238,.96);
  color:var(--vm-navy);
  border-color:rgba(4,6,80,.14);
  box-shadow:0 12px 34px rgba(4,6,80,.08);
}
.store-logo{
  color:inherit;
  font-family:var(--vm-display);
  font-size:15px;
  font-weight:400;
  letter-spacing:.12em;
  line-height:1;
  text-transform:uppercase;
}
.store-logo span{font-weight:400}
.store-nav a,.header-search,.bag-link{font-weight:600}
.store-nav a,.header-search,.bag-link,.store-logo{transition:color .25s ease,opacity .25s ease}
.store-nav a:hover,.header-search:hover,.bag-link:hover{color:var(--vm-pink)}
.currency-switcher select{border-color:currentColor;font-family:var(--vm-sans)}
.menu-trigger span{height:2px}

/* Hero */
.fashion-hero{
  background-color:var(--vm-navy);
  background-image:linear-gradient(90deg,rgba(4,6,80,var(--hero-overlay,.48)),rgba(4,6,80,calc(var(--hero-overlay,.48) * .16))),var(--hero-desktop);
}
.fashion-hero h1{color:var(--vm-white);letter-spacing:-.035em;line-height:.86}
.fashion-hero .eyebrow{color:var(--vm-white)}
.fashion-hero .hero-content>p:not(.eyebrow){color:var(--vm-white);font-weight:300}
.fashion-link{color:var(--vm-white);border-bottom-color:var(--vm-pink)}
.fashion-link b{color:var(--vm-pink)}
.scroll-cue span{background:var(--vm-pink)}

/* Editorial content */
.editorial-intro{background:var(--vm-blue-grey);color:var(--vm-white)}
.editorial-intro h2,.editorial-intro .eyebrow{color:var(--vm-white)}
.editorial-intro p{color:var(--vm-white)}
.collection-section{background:var(--vm-ivory)}
.section-intro h2,.product-meta h3{color:var(--vm-navy)}
.text-link{color:var(--vm-navy);border-bottom-color:var(--vm-pink)}
.text-link:hover{color:var(--vm-pink)}
.product-card .product-image{background-color:var(--vm-blue-grey)}
.product-card .sale-flag{background:var(--vm-pink);color:var(--vm-white)}
.brand-story,.cinematic-story{background:var(--vm-navy);color:var(--vm-white)}
.brand-story h2,.brand-story .eyebrow,.cinematic-story h2{color:var(--vm-white)}
.brand-story p{color:#D9E0E2}

/* Buttons and controls */
.button{background:var(--vm-navy);color:var(--vm-white);font-family:var(--vm-sans);text-transform:uppercase;letter-spacing:.12em}
.button:hover{background:var(--vm-pink);opacity:1}
.button.secondary{background:var(--vm-blue-grey);color:var(--vm-white)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--vm-pink);outline-offset:1px;border-color:var(--vm-pink)}

/* Footer */
.store-footer{background:var(--vm-charcoal);color:var(--vm-white)}
.footer-brand>a{font-family:var(--vm-display);color:var(--vm-white);text-transform:uppercase}
.footer-links a:hover{color:var(--vm-pink)}

/* Mobile menu */
.mobile-menu-panel{background:var(--vm-navy);color:var(--vm-white)}
.mobile-menu-panel nav a{color:var(--vm-white);text-transform:uppercase}
.mobile-menu-panel nav a:hover{color:var(--vm-pink)}
.mobile-menu-meta{border-color:rgba(255,255,255,.24)}

/* Studio / admin */
.sidebar{background:var(--vm-navy)}
.sidebar nav a.active,.sidebar nav a:hover{background:rgba(255,255,255,.10);color:var(--vm-white);border-left:2px solid var(--vm-pink)}
.sidebar-brand strong{font-family:var(--vm-display);font-weight:400;letter-spacing:.04em}
.sidebar-brand span,.sidebar-group{color:#B7C5CA}
.brand-mark{border-color:var(--vm-pink);color:var(--vm-white)}
.admin-header h1{color:var(--vm-navy);text-transform:uppercase}
.metric-grid article,.panel{border-top:2px solid transparent}
.metric-grid article:hover,.panel:hover{border-top-color:var(--vm-pink)}
.status-pill span{background:var(--vm-pink)}
.launch-panel{background:var(--vm-navy)}
.launch-number{color:var(--vm-pink)}
.media-choice:has(input:checked){outline-color:var(--vm-pink)}

/* Keep status colours meaningful while bringing them into the brand */
.notice.success{background:#E7EFF1;border-color:var(--vm-blue-grey)}
.notice.error{background:#FFE8F5;border-color:var(--vm-pink)}

@media(max-width:900px){
  .fashion-hero{
    background-image:linear-gradient(90deg,rgba(4,6,80,var(--hero-overlay,.48)),rgba(4,6,80,calc(var(--hero-overlay,.48) * .14))),var(--hero-mobile);
  }
  .store-logo{font-size:13px}
}