@media (max-width:1023px){.vfoot a{display:inline-block;padding:14px 6px}.vfoot{line-height:1.2 !important}}
body{font-family:Satoshi,system-ui,-apple-system,'Segoe UI',sans-serif;font-variant-numeric:tabular-nums}
[style*="Epilogue"],input,button,select,textarea{font-family:Satoshi,system-ui,-apple-system,'Segoe UI',sans-serif !important}
[style*="Space Mono"]{font-family:Satoshi,system-ui,-apple-system,'Segoe UI',sans-serif !important;font-weight:700;letter-spacing:0 !important;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid #F6F3EE;outline-offset:3px;border-radius:2px}
@keyframes vfade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
h1{animation:vfade .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes vpulse{0%{text-shadow:0 0 0 rgba(255,170,80,0)}25%{text-shadow:0 0 30px rgba(255,170,80,.95),0 0 6px rgba(255,197,138,.9);color:#FFC58A}100%{text-shadow:0 0 0 rgba(255,170,80,0)}}
.hl-pulse{animation:vpulse 1.6s ease-out 1}
@media (prefers-reduced-motion:reduce){h1{animation:none}.hl-pulse{animation:none}}
img[alt$=" bottle"]{border-radius:12px}
#tiltInner img,#tiltInnerP img{width:auto !important;height:auto !important;max-width:100% !important;max-height:100% !important;object-fit:fill !important;box-sizing:content-box !important;background:#fff;padding:34px 0;max-height:calc(100% - 68px) !important;border-radius:10px !important;box-shadow:0 24px 50px -24px rgba(0,0,0,.7);transition:box-shadow .4s ease}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#05060F;color:#F6F3EE;
font-family:Satoshi,-apple-system,Segoe UI,sans-serif;overflow-x:hidden}
a{color:#F6F3EE;text-decoration:none}
a:hover{color:#FFFFFF}
.row-link:hover{background:rgba(30,36,71,0.45) !important}
.buy-btn:hover{background:#FFFFFF !important;color:#05060F !important}
/* C117: every buy link answers hover (pointer only), tap and keyboard. Rows lift one step (hairline navy, the .row-link hover)
   across the card's side padding, the arrow brightens and moves 4 px. The orange price-card button (.buy-main) keeps its own state.
   iOS applies :active to links only when the page has a touch listener: body ontouchstart="". */
a.prow{cursor:pointer;transition:background-color .18s ease,box-shadow .18s ease}
a.prow .parr{color:#8D8D96;transition:transform .18s ease,color .18s ease}
a.prow:active{background:rgba(30,36,71,.55);box-shadow:-18px 0 0 rgba(30,36,71,.55),18px 0 0 rgba(30,36,71,.55)}
a.prow:active .parr{color:#F6F3EE}
@media (hover:hover){a.prow:hover{background:rgba(30,36,71,.55);box-shadow:-18px 0 0 rgba(30,36,71,.55),18px 0 0 rgba(30,36,71,.55)}
a.prow:hover .parr{color:#F6F3EE;transform:translateX(4px)}}
.buy-btn:not(.buy-main){transition:background-color .18s ease}
/* C117 follow-up (his ask): the action row under the price card (universe, save, collection, share, alert) gets the same lift
   on its own box; padding and negative margin of equal size keep the layout where it was. */
.vact{padding:0 10px !important;margin:0 -10px;border-radius:4px;transition:background-color .18s ease}
.vact:active{background:rgba(30,36,71,.55)}
@media (hover:hover){.vact:hover{background:rgba(30,36,71,.55)}}
.buy-btn:not(.buy-main):active{background:#DCD6CC !important}
/* C109: the perfume page's fixed buy bar no longer covers the footer (was a 90 px spacer above the footer) */
@media (max-width:1023px){body:has(#buyBar){padding-bottom:calc(80px + env(safe-area-inset-bottom))}}
.crumb a{display:inline-block;padding:13px 0}   /* C109: 44 px tap height on the phone breadcrumb */
/* C120 (his ask): every clickable answers the pointer. Grey text links go ivory; bordered or filled buttons get a neutral
   tint laid over whatever background they have (works on dark and ivory, needs no !important against inline styles).
   Excluded: the orange buy button and the elements with their own state (.buy-btn, .vact, .prow, .cmpl, cards). */
a,button,summary{transition:color .18s ease,box-shadow .18s ease,background-color .18s ease}
@media (hover:hover){
  a[style*="color: #8D8D96"]:hover,a[style*="color: #B4B4BA"]:hover,a[style*="color: #A9A3BE"]:hover,.cmpl:hover{color:#F6F3EE!important}
  button:not(:disabled):not(.vact):not(.heart):hover,a[style*="border: 1px solid"]:not(.buy-btn):hover,summary:hover,select:hover,.vaz a:hover{box-shadow:inset 0 0 0 999px rgba(138,141,170,.16)}
  .row-link:hover .name,.dl-row:hover{color:#F6F3EE}
}
button:not(:disabled):not(.vact):not(.heart):active,a[style*="border: 1px solid"]:not(.buy-btn):active,summary:active{box-shadow:inset 0 0 0 999px rgba(138,141,170,.22)}
/* C101 compare page */
.cmp{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1fr);column-gap:32px;margin-top:28px}
.cmp .cl{padding:16px 0;border-top:1px solid #1E2447;font-size:13px;color:#8D8D96}
.cmp .cv{padding:16px 0;border-top:1px solid #1E2447;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;font-size:15px;color:#E7E7EA;min-width:0}
.cmp .ch{display:flex;flex-direction:column;gap:6px;width:100%}
.cmp .cimg{width:100%;max-width:260px;aspect-ratio:4/5;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cmp .cimg img{max-width:80%;max-height:85%;object-fit:contain}
.cmp .chh{font-size:13px;color:#B4B4BA;margin-top:6px}.cmp .chn{font:700 24px/1.2 Satoshi,sans-serif;color:#F6F3EE;overflow-wrap:anywhere}
.cmp a.chn{text-decoration:underline;text-decoration-color:#3A4170;text-underline-offset:5px}.cmp .chm{font-size:14px;color:#8D8D96}
.cmp .cc{font-size:14px;line-height:1.3;padding:5px 10px;border:1px solid #2A3160;border-radius:999px;color:#8D8D96}
.cmp .cc.on{color:#F6F3EE;border-color:#8A8DAA;background:#1E2447}
.cmp .cz{color:#5C6699;font-size:14px}.cmp .cpv{font-size:14px;color:#8D8D96;width:100%}.cmp .cpv b{font:700 26px/1.2 Satoshi,sans-serif;color:#F6F3EE}
.cmp .cps{font-size:13px;color:#B4B4BA;width:100%}
.cmp .cbuy{margin-top:8px;min-height:44px;padding:0 16px;display:inline-flex;align-items:center;background:#F6F3EE;color:#05060F !important;border-radius:3px;font-weight:600;font-size:14px;text-decoration:none}
.csh{font:700 28px/1.2 Satoshi,sans-serif;color:#F6F3EE;margin:0 0 14px}.csl{display:flex;flex-wrap:wrap;gap:8px}
.csb{min-height:44px;padding:8px 14px;background:transparent;border:1px solid #2A3160;border-radius:4px;color:#F6F3EE;font:500 15px Satoshi,sans-serif;cursor:pointer;text-align:left;display:flex;flex-direction:column}
.csb span{font-size:12px;color:#8D8D96}
@media (hover:hover){.csb:hover{background:rgba(30,36,71,.55)}}.csb:active{background:rgba(30,36,71,.55)}
@media (max-width:700px){.cmp{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px}.cmp .cl{grid-column:1/-1;padding:14px 0 0}
.cmp .cv{border-top:0;padding-top:8px}.cmp .chn{font-size:19px}.cmp .cc{font-size:13px;padding:4px 8px}.cmp .cpv b{font-size:22px}}
/* C118: price rows outside the short list open with "Show all" (no script); browsers without :has show every row. */
.plist .pextra{display:none !important}
.plist:has(.pmore[open]) .pextra{display:flex !important}
@supports not selector(:has(a)){.plist .pextra{display:flex !important}.pmore{display:none}}
.pmore .t-on{display:none}.pmore[open] .t-on{display:inline}.pmore[open] .t-off{display:none}
.dual{position:relative}
.dual input{position:absolute;left:0;top:0;width:250px;height:28px;margin:0;
background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.dual input::-webkit-slider-runnable-track{background:transparent;height:28px}
.dual input::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;
width:18px;height:18px;margin-top:5px;border-radius:50%;background:#F6F3EE;
border:none;cursor:pointer}
.dual input::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;
border-radius:50%;background:#F6F3EE;border:none;cursor:pointer}
.dual input::-moz-range-track{background:transparent}
/* Phone filter sheet's own slider (Phone-Catalogue.dc.html): 26px thumbs,
   a real touch target, not the desktop's 18px mouse-sized one. */
.dual-phone{position:relative}
.dual-phone input{position:absolute;left:0;top:0;width:100%;max-width:342px;
height:36px;margin:0;background:none;pointer-events:none;
-webkit-appearance:none;appearance:none}
.dual-phone input::-webkit-slider-runnable-track{background:transparent;height:36px}
.dual-phone input::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;
width:26px;height:26px;margin-top:5px;border-radius:50%;background:#F6F3EE;
border:none;cursor:pointer}
.dual-phone input::-moz-range-thumb{pointer-events:auto;width:26px;height:26px;
border-radius:50%;background:#F6F3EE;border:none;cursor:pointer}
.dual-phone input::-moz-range-track{background:transparent}
#dust{position:absolute;left:0;top:0;width:100%;height:0;pointer-events:none}
.hs{overflow-x:auto;scrollbar-width:none}
.hs::-webkit-scrollbar{display:none}
/* C42 (2026-09-23): phone catalogue/perfume pages are a real, separately
   designed layout (design/universe-v1/Phone-{Catalogue,Perfume}.dc.html),
   not the desktop page reflowed -- same reasoning as the main page's own
   phone layout. #phoneCat only exists on pages that pass shell() a
   phone_body; pages that don't (house, houses index, 404) have no phone
   mock and keep showing their desktop layout at every width. */
#phoneCat{display:none}
#phoneCat .phDealRow .dealonly{flex-wrap:nowrap!important}#phoneCat .phDealRow .dealonly button{flex:none}
/* 2026-10-11 (page plan item 7): the phone body runs up to 1023 px, the same step as the shared shell (desktop header from 768, phone tab bar below).
   At 768-1023 the desktop bodies had a 250 px filter column beside 114 px cards and the perfume page overflowed (806 px); the phone bodies reflow cleanly there. */
@media (max-width:1023px){
  body:has(#phoneCat) .desktopCat{display:none}
  #phoneCat{display:block}
  /* C110: pages with no phone mock (house, houses index) were blanked by the
     rule above; now they stay and reflow instead. */
  body:not(:has(#phoneCat)) .desktopCat > div{padding-left:20px!important;padding-right:20px!important}
  body:not(:has(#phoneCat)) .desktopCat h1{font-size:48px!important;line-height:1.12!important}
  body:not(:has(#phoneCat)) .desktopCat h2{font-size:26px!important}
  body:not(:has(#phoneCat)) .az2{columns:2!important;column-gap:16px!important}
  /* C109: house links and letters are full 44 px tap targets on phones */
  .az2 a{display:flex!important;align-items:center;min-height:44px;padding:0!important}
  .aznav a{min-width:44px;min-height:44px;display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box}
  body:not(:has(#phoneCat)) #mixWrap{width:100%!important}
  body:not(:has(#phoneCat)) .row-link{gap:12px!important}
  body:not(:has(#phoneCat)) .row-link > div:nth-child(2){font-size:17px!important}
  body:not(:has(#phoneCat)) .row-link > div:nth-child(3){display:none!important}
  body:not(:has(#phoneCat)) .row-link > div:nth-child(4){width:auto!important;font-size:15px!important}
}