:root{
  --pcxbar-h:58px;
  --pcxbar-bg:rgba(247,243,234,.96);
  --pcxbar-ink:#8A8378;
  --pcxbar-active:#6B1F2B;
  --pcxbar-line:rgba(20,17,13,.10);
}
html[data-theme="dark"]{
  --pcxbar-bg:rgba(20,17,13,.94);
  --pcxbar-ink:#8E877B;
  --pcxbar-active:#C98A78;
  --pcxbar-line:rgba(247,243,234,.12);
}

.pcx-progress,.pcx-nav,.pcx-ptr{display:none}
html.pcxapp .pcx-progress{display:block}
html.pcxapp .pcx-nav{display:grid}
html.pcxapp .pcx-ptr{display:flex}

html.pcxapp,html.pcxapp body{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  overscroll-behavior-y:contain;
}
html.pcxapp body{padding-bottom:calc(var(--pcxbar-h) + 20px + env(safe-area-inset-bottom,0px))}

html.pcxapp #main{animation:pcxfade .26s ease both}
@keyframes pcxfade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

.pcx-progress{position:fixed;top:0;left:0;height:2.5px;width:0;background:var(--pcxbar-active);
  z-index:9999;opacity:0;transition:width .25s ease,opacity .2s ease;pointer-events:none}
.pcx-progress.on{opacity:1}

.pcx-nav{position:fixed;left:0;right:0;bottom:0;z-index:9998;grid-template-columns:repeat(6,1fr);
  background:var(--pcxbar-bg);border-top:1px solid var(--pcxbar-line);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
.pcx-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0 2px;
  color:var(--pcxbar-ink);text-decoration:none;border:0;font-size:10px;letter-spacing:.01em;
  line-height:1;-webkit-user-select:none;user-select:none}
.pcx-nav a svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.pcx-nav a.active{color:var(--pcxbar-active)}
.pcx-nav a[data-random-app]{color:var(--pcxbar-active)}
.pcx-nav a[data-random-app] svg{display:block}
.pcx-nav a:active{transform:scale(.94)}

.pcx-ptr{position:fixed;top:0;left:50%;transform:translate(-50%,-40px);width:30px;height:30px;
  border-radius:50%;background:var(--pcxbar-bg);border:1px solid var(--pcxbar-line);z-index:9997;
  align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.08);
  transition:transform .18s ease;pointer-events:none}
.pcx-ptr::after{content:"";width:13px;height:13px;border:1.8px solid var(--pcxbar-active);
  border-top-color:transparent;border-radius:50%}
.pcx-ptr.pull{transform:translate(-50%,14px)}
.pcx-ptr.spin{transform:translate(-50%,14px)}
.pcx-ptr.spin::after{animation:pcxspin .7s linear infinite}
@keyframes pcxspin{to{transform:rotate(360deg)}}

html.pcxapp .site-foot{padding-bottom:0}
/* ── app: force fit-to-width (no horizontal scroll) ── */
html.pcxapp,html.pcxapp body{width:100%;max-width:100%;overflow-x:hidden}
html.pcxapp img,html.pcxapp svg,html.pcxapp video{max-width:100%}
html.pcxapp table{width:100%;max-width:100%}
html.pcxapp .wrap,html.pcxapp main,html.pcxapp .site-foot .cols{max-width:100%}

@media (max-width:640px){
  html.pcxapp .site-head .bar{gap:10px;padding:10px 14px;flex-wrap:nowrap;min-width:0}
  html.pcxapp .brandmark{min-width:0;flex:1 1 auto;overflow:hidden}
  html.pcxapp .brandmark .bt{min-width:0}
  html.pcxapp .brandmark .bt b{font-size:17px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.pcxapp .brandmark .bt small{display:none}
  html.pcxapp .brandmark img{width:34px;height:34px}
  html.pcxapp .searchbtn{flex:none;padding:7px 10px}
  html.pcxapp .burger{flex:none;margin-left:0}
  html.pcxapp .hero{padding:44px 0 40px}
  html.pcxapp .hero h1{font-size:clamp(27px,8.2vw,40px);line-height:1.14}
  html.pcxapp .hero-cta{flex-direction:column;align-items:stretch;gap:10px}
  html.pcxapp .hero-cta .btn{width:100%;text-align:center}
  html.pcxapp .hero-stats{grid-template-columns:repeat(2,1fr);gap:16px}
  html.pcxapp .grid.g-tile,html.pcxapp .grid.g-perfume,html.pcxapp .grid.g-brand{grid-template-columns:repeat(2,1fr)}
  html.pcxapp main,html.pcxapp .wrap{padding-left:16px;padding-right:16px}
  html.pcxapp .site-foot .cols{grid-template-columns:1fr;padding-left:16px;padding-right:16px}
  html.pcxapp .sec-head{flex-wrap:wrap;gap:10px}
}