.pp-container {
position: fixed;
z-index: 99990;
width: min(360px, calc(100vw - 32px));
pointer-events: none;
}
.pp-csize-sm { width: min(300px, calc(100vw - 32px)); }
.pp-csize-lg { width: min(420px, calc(100vw - 32px)); }
.pp-pos-bottom-left  { left: 20px;  bottom: 20px; }
.pp-pos-bottom-right { right: 20px; bottom: 20px; }
.pp-pos-top-left     { left: 20px;  top: 20px; }
.pp-pos-top-right    { right: 20px; top: 20px; }
.pp-pos-top-center    { left: 50%; top: 20px; transform: translateX(-50%); }
.pp-pos-bottom-center { left: 50%; bottom: 20px; transform: translateX(-50%); }
.pp-pos-center        { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.admin-bar .pp-pos-top-left,
.admin-bar .pp-pos-top-center,
.admin-bar .pp-pos-top-right { top: 52px; }
@media (max-width: 640px) {
.pp-container {
left: 12px;
right: 12px;
width: auto;
transform: none;
}
.pp-container.pp-mpos-bottom { top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
} .pp-notice {
--pp-accent: #7c6cf2;
--pp-bg: #ffffff;
--pp-text: #1f2033;
--pp-radius: 16px;
--pp-shadow: 0 12px 32px -10px rgba(31, 32, 51, 0.28), 0 2px 6px rgba(31, 32, 51, 0.06);
--pp-shift: 14px;
position: relative;
box-sizing: border-box;
pointer-events: auto;
font-family: inherit;
font-size: 14px;
line-height: 1.4;
color: var(--pp-text);
background: var(--pp-bg);
border-radius: var(--pp-radius);
box-shadow: var(--pp-shadow);
opacity: 0;
transform: translateY(var(--pp-shift));
transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pp-notice *,
.pp-notice *::before,
.pp-notice *::after { box-sizing: border-box; }
.pp-pos-top-left .pp-notice,
.pp-pos-top-center .pp-notice,
.pp-pos-top-right .pp-notice { --pp-shift: -14px; }
@media (max-width: 640px) {
.pp-mpos-bottom .pp-notice { --pp-shift: 14px; }
}
.pp-notice.pp-anim-fade { transform: none; }
.pp-notice.is-visible { opacity: 1; transform: none; }
.pp-notice.pp-no-shadow {
box-shadow: none;
border: 1px solid color-mix(in srgb, var(--pp-text) 12%, transparent);
}
.pp-inner {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 40px 12px 12px;
color: inherit;
text-decoration: none;
border-radius: inherit;
}
a.pp-inner:focus-visible {
outline: 2px solid var(--pp-accent);
outline-offset: 2px;
}
.pp-media {
flex: 0 0 56px;
width: 56px;
height: 56px;
display: grid;
place-items: center;
overflow: hidden;
border-radius: min(12px, var(--pp-radius));
background: color-mix(in srgb, var(--pp-accent) 12%, var(--pp-bg));
color: var(--pp-accent);
}
.pp-media img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
margin: 0;
border-radius: 0;
}
.pp-media svg { width: 26px; height: 26px; }
.pp-body {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.pp-text {
color: color-mix(in srgb, var(--pp-text) 72%, transparent);
}
.pp-name {
font-weight: 700;
color: var(--pp-text);
}
.pp-product {
display: block;
overflow: hidden;
font-weight: 600;
color: var(--pp-text);
white-space: nowrap;
text-overflow: ellipsis;
}
.pp-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 12px;
font-size: 12px;
color: color-mix(in srgb, var(--pp-text) 58%, transparent);
}
.pp-badge,
.pp-city {
display: inline-flex;
align-items: center;
gap: 4px;
}
.pp-badge { color: var(--pp-accent); font-weight: 600; }
.pp-badge svg,
.pp-city svg { width: 14px; height: 14px; flex: none; }
.pp-close {
position: absolute;
top: 8px;
right: 8px;
display: grid;
place-items: center;
width: 26px;
height: 26px;
padding: 0;
margin: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--pp-text);
opacity: 0.45;
cursor: pointer;
box-shadow: none;
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.pp-close svg { width: 14px; height: 14px; }
.pp-close:hover,
.pp-close:focus-visible {
opacity: 1;
background: color-mix(in srgb, var(--pp-text) 8%, transparent);
}
.pp-close:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 1px; } .pp-size-sm { font-size: 13px; }
.pp-size-sm .pp-inner { gap: 10px; padding: 10px 36px 10px 10px; }
.pp-size-sm .pp-media { flex-basis: 44px; width: 44px; height: 44px; }
.pp-size-sm .pp-media svg { width: 22px; height: 22px; }
.pp-size-sm .pp-meta { font-size: 11.5px; }
.pp-size-lg { font-size: 15px; }
.pp-size-lg .pp-inner { gap: 14px; padding: 14px 44px 14px 14px; }
.pp-size-lg .pp-media { flex-basis: 68px; width: 68px; height: 68px; }
.pp-size-lg .pp-media svg { width: 30px; height: 30px; }
.pp-size-lg .pp-meta { font-size: 12.5px; } .pp-tpl-accent { overflow: hidden; }
.pp-tpl-accent::before {
content: "";
position: absolute;
inset: 14px auto 14px 0;
width: 4px;
border-radius: 0 4px 4px 0;
background: var(--pp-accent);
}
.pp-tpl-accent .pp-inner { padding-left: 18px; }
.pp-tpl-accent .pp-product { color: var(--pp-accent); } .pp-notice:is(#pp-protect, .pp-notice) {
font-size: 14px;
line-height: 1.4;
text-align: left;
}
.pp-notice:is(#pp-protect, .pp-notice).pp-size-sm { font-size: 13px; }
.pp-notice:is(#pp-protect, .pp-notice).pp-size-lg { font-size: 15px; }
.pp-notice:is(#pp-protect, .pp-notice) *,
.pp-notice:is(#pp-protect, .pp-notice) *::before,
.pp-notice:is(#pp-protect, .pp-notice) *::after {
letter-spacing: normal;
text-transform: none;
text-shadow: none;
line-height: inherit;
font-family: inherit;
}
.pp-notice:is(#pp-protect, .pp-notice) span,
.pp-notice:is(#pp-protect, .pp-notice) strong,
.pp-notice:is(#pp-protect, .pp-notice) a {
font-size: inherit;
} .pp-notice:is(#pp-protect, .pp-notice) .pp-inner,
.pp-notice:is(#pp-protect, .pp-notice) .pp-inner:hover,
.pp-notice:is(#pp-protect, .pp-notice) .pp-inner:focus,
.pp-notice:is(#pp-protect, .pp-notice) .pp-inner:visited {
color: inherit;
background: transparent;
border: 0;
box-shadow: none;
text-decoration: none;
} .pp-notice:is(#pp-protect, .pp-notice) .pp-text { color: color-mix(in srgb, var(--pp-text) 72%, transparent); }
.pp-notice:is(#pp-protect, .pp-notice) .pp-name { color: var(--pp-text); font-weight: 700; }
.pp-notice:is(#pp-protect, .pp-notice) .pp-product { color: var(--pp-text); font-weight: 600; }
.pp-notice:is(#pp-protect, .pp-notice).pp-tpl-accent .pp-product { color: var(--pp-accent); }
.pp-notice:is(#pp-protect, .pp-notice) .pp-meta { font-size: 12px; color: color-mix(in srgb, var(--pp-text) 58%, transparent); }
.pp-notice:is(#pp-protect, .pp-notice).pp-size-sm .pp-meta { font-size: 11.5px; }
.pp-notice:is(#pp-protect, .pp-notice).pp-size-lg .pp-meta { font-size: 12.5px; }
.pp-notice:is(#pp-protect, .pp-notice).pp-tpl-pill .pp-meta { font-size: 11.5px; }
.pp-notice:is(#pp-protect, .pp-notice) .pp-badge { color: var(--pp-accent); font-weight: 600; } .pp-notice:is(#pp-protect, .pp-notice) .pp-media img {
display: block;
width: 100%;
height: 100%;
max-width: none;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: none;
object-fit: cover;
} .pp-notice:is(#pp-protect, .pp-notice) svg,
.pp-notice:is(#pp-protect, .pp-notice) svg * {
display: block;
fill: none;
stroke: currentColor;
max-width: none;
}
.pp-notice:is(#pp-protect, .pp-notice) .pp-media svg { width: 26px; height: 26px; }
.pp-notice:is(#pp-protect, .pp-notice).pp-size-sm .pp-media svg { width: 22px; height: 22px; }
.pp-notice:is(#pp-protect, .pp-notice).pp-size-lg .pp-media svg { width: 30px; height: 30px; }
.pp-notice:is(#pp-protect, .pp-notice) .pp-badge svg,
.pp-notice:is(#pp-protect, .pp-notice) .pp-city svg { width: 14px; height: 14px; } .pp-notice:is(#pp-protect, .pp-notice) .pp-close {
position: absolute;
top: 8px;
right: 8px;
display: grid;
place-items: center;
box-sizing: border-box;
width: 26px;
height: 26px;
min-width: 0;
min-height: 0;
max-width: none;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%; background: transparent !important;
color: var(--pp-text) !important;
opacity: 0.45;
box-shadow: none;
font-size: 0;
line-height: 0;
transform: none;
cursor: pointer;
}
.pp-notice:is(#pp-protect, .pp-notice) .pp-close:hover,
.pp-notice:is(#pp-protect, .pp-notice) .pp-close:focus-visible {
opacity: 1;
background: color-mix(in srgb, var(--pp-text) 8%, transparent) !important;
color: var(--pp-text) !important;
}
.pp-notice:is(#pp-protect, .pp-notice) .pp-close svg { width: 14px; height: 14px; }
.pp-notice:is(#pp-protect, .pp-notice).pp-tpl-pill .pp-close {
top: 50%;
right: 12px;
transform: translateY(-50%);
}  .pp-motion-float.is-visible {
animation: pp-float 4.5s ease-in-out 0.8s infinite;
}
@keyframes pp-float {
0%, 100% { translate: 0 0; }
50% { translate: 0 -4px; }
} .pp-notice:is(#pp-protect, .pp-notice):hover,
.pp-notice:is(#pp-protect, .pp-notice):focus-within,
.pp-notice:is(#pp-protect, .pp-notice):hover *,
.pp-notice:is(#pp-protect, .pp-notice):focus-within *,
.pp-notice:is(#pp-protect, .pp-notice):hover::after,
.pp-notice:is(#pp-protect, .pp-notice):focus-within::after {
animation-play-state: paused;
} @media (prefers-reduced-motion: reduce) {
.pp-notice,
.pp-notice.pp-anim-slide {
transform: none;
transition: opacity 0.2s linear;
}
.pp-notice:is(#pp-protect, .pp-notice),
.pp-notice:is(#pp-protect, .pp-notice) *,
.pp-notice:is(#pp-protect, .pp-notice)::after {
animation: none;
}
}