@font-face{font-family:Satoshi;src:url(/fonts/Satoshi-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(/fonts/Satoshi-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(/fonts/Satoshi-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(/fonts/Satoshi-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/Inter-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/Inter-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* Shared Vialo chrome (header, search, phone tab bar, footer) for the generated pages. Extracted from next.css, class-scoped so it
   cannot disturb a page's own inline layout. Built for C113/C112 (one shell on every page). */
:root{--bg:#05060F;--mid:#0B1020;--panel:#121A32;--line:#1E2447;--ink:#F6F3EE;--soft:#E7E7EA;--muted:#A3A6C2;--dim:#7C80A0;--blue:#5868FF;--gut:16px;--max:1320px;--tab:64px;--sans:Satoshi,system-ui,-apple-system,'Segoe UI',sans-serif;--data:Inter,system-ui,-apple-system,'Segoe UI',sans-serif}
/* C114 spacing scale: 4 px steps, every padding / margin / gap uses one of these */
:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:28px;--s8:32px;--s9:36px;--s10:40px;--s11:44px;--s12:48px;--s14:56px;--s16:64px;--s18:72px;--s24:96px;}

body.vchrome{padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom))}
body.vchrome.notabs{padding-bottom:0}
body.vchrome.notabs .tabs{display:none}
@media (min-width:768px){body.vchrome{padding-bottom:var(--s12)}}
body.vchrome .top a,body.vchrome .tabs a,body.vchrome .foot a{text-decoration:none}
body.vchrome .foot a{text-decoration:underline}
.top{position:sticky;top:0;z-index:20;background:rgba(5,6,15,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.bar{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;height:56px;padding:0 var(--s2);max-width:var(--max);margin:0 auto}
.ico{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--ink)}
.logo{display:flex;justify-content:center;align-items:center;gap:var(--s2);height:44px}
.logo .m{height:24px;width:auto;display:block}
.logo .w{height:19px;width:auto;display:block}
.dnav,.dicons{display:none}
.searchrow{padding:0 var(--gut) var(--s3);max-width:var(--max);margin:0 auto;position:relative}
.search{display:flex;align-items:center;gap:var(--s3);height:48px;border:1px solid #2B3366;border-radius:3px;padding:0 var(--s4);background:rgba(18,26,50,.7);color:var(--muted)}
.search:focus-within{border-color:var(--blue)}
.search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font:400 16px var(--sans)}
.search input::placeholder{color:var(--dim)}
#res{max-height:calc(100dvh - 190px);overflow-y:auto;overscroll-behavior:contain;position:absolute;left:var(--gut);right:var(--gut);top:54px;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:none;z-index:30}
#res a{display:flex;flex-direction:column;gap:2px;padding:var(--s3) var(--s4);min-height:44px;border-top:1px solid var(--line)}
#res a:first-child{border-top:0}
#res small{color:var(--muted);font-size:13px}
.toast{position:fixed;left:50%;bottom:calc(var(--tab) + env(safe-area-inset-bottom) + 18px);transform:translate(-50%,12px);z-index:60;max-width:calc(100vw - 32px);padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:500 14px/1.4 var(--sans);text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:768px){.toast{bottom:28px}}
.title{display:none}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:25;height:calc(var(--tab) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(5,6,15,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:stretch}
.tabs a{flex:1;max-width:160px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);font:500 12px var(--sans);color:var(--dim)}
.tabs a.on{color:var(--ink)}.tabs a.on svg{fill:currentColor;fill-opacity:.15}
@media (min-width:768px){
  :root{--gut:28px}
  .tabs{display:none}
  .top{padding-top:0}
  .bar{grid-template-columns:auto auto 1fr auto;gap:var(--s6);height:68px;padding:0 var(--gut)}
  .logo{justify-content:flex-start}.logo .m{height:28px}.logo .w{height:22px}
  .bar .l,.bar .title{display:none!important}
  .dnav{display:flex;gap:var(--s2)}
  .dnav a{display:flex;align-items:center;min-height:44px;padding:0 var(--s3);font:500 15px var(--sans);color:var(--muted)}
  .dnav a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--blue)}
  .dicons{display:flex;justify-content:flex-end;gap:0}
  .bar>.ico.acct{display:none}
  .searchrow{padding:0 var(--gut) var(--s3)}
  .search{height:44px}
  #res{left:var(--gut);right:var(--gut);top:50px}
  .dicons .ico:first-child{display:none}
}
@media (min-width:1024px){
  .searchrow{position:absolute;left:50%;top:12px;width:min(420px,32vw);padding:0;transform:translateX(-10%)}
  #res{left:0;right:0}
  .dicons .ico:first-child{display:flex}
}
.foot{max-width:var(--max);margin:var(--s14) auto 0;padding:var(--s6) var(--gut) var(--s2);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s8);justify-content:space-between;color:var(--dim);font:400 12px/1.5 var(--data)}
.foot a{text-decoration:underline;text-underline-offset:3px;color:var(--muted)}
@media(max-width:760px){.foot a{display:inline-block;padding:var(--s4) var(--s2)}}

/* save / collection actions on the perfume page (heart = wishlist, bottle = collection) */
.vact{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0;background:none;border:0;color:#F6F3EE;font:500 15px var(--sans);cursor:pointer}
.vact .t-on{display:none}.vact.on .t-on{display:inline}.vact.on .t-off{display:none}
.vheart.on svg{fill:#E5484D;stroke:#E5484D}
.vown.on svg{fill:currentColor;fill-opacity:.22}

/* the card grid lives in next/cards.css (shared with the nebula Shop list) */
/* A-Z strip and chips on the generated pages: 44 px boxes, square corners */
.vaz{display:flex;flex-wrap:wrap;gap:var(--s2)}
.vaz a{min-width:44px;min-height:44px;padding:0 var(--s3);display:flex;align-items:center;justify-content:center;border:1px solid #2B3366;border-radius:3px;font:500 15px var(--sans);color:var(--soft);text-decoration:none}
.vaz a:hover{border-color:var(--blue);color:var(--ink)}
/* C120: header, tabs and footer links answer the pointer too */
.dnav a,.top .ico,.dicons a,.foot a{transition:background-color .18s ease,color .18s ease}
@media (hover:hover){
  .dnav a:not(.on):hover{color:var(--ink);background:rgba(30,36,71,.55);border-radius:4px}
  .top .ico:hover,.dicons a:hover{color:var(--ink);background:rgba(30,36,71,.55);border-radius:50%}
  .foot a:hover{color:var(--ink)}
  .tabs a:not(.on):hover{color:var(--soft)}
}
.tabs a:active{color:var(--ink)}

/* C109 round 2 (2026-10-15): phone header slides away on scroll down (shell.js sets body.hdrhide) */
@media (max-width:767px){.top{transition:transform .25s ease}body.hdrhide .top{transform:translateY(-100%)}}
@media (prefers-reduced-motion:reduce){.top{transition:none}}
/* catalogue phone body has its own live search: no second search box in the header */
@media (max-width:1023px){body:has(#pc-search) .searchrow{display:none}}