/* [PPS-THEMES] Store themes, done as "editions" (Admin -> Themes). Loaded only while a theme is showing; every rule needs
   body.pth (the front page also has body.pth-home, and each theme body.pth-<key>). Looks only: no rule here moves or
   covers a button, and the cart, checkout, account and order pages never load this file.
   Every page: the theme's colour on the notice line, a thin line under the top bar and above the footer.
   The front page's top section: a dark colour mood of its own for each theme, a soft glow behind the vials, what the
   vials wear, the title above the headline and one quiet moving detail (themes.js). */

/* ------------------------------------------------------------ each theme's colours
   --pth-a: accent on white · --pth-a2: accent on dark · --pth-g: the glow behind the vials
   --pth-deep / --pth-mid / --pth-dark: the top section's colour, from its lit centre out to its edges */
body.pth-halloween { --pth-a: #E8590C; --pth-a2: #FF8A2A; --pth-g: rgba(255,128,32,.42); --pth-deep: #3A1A07; --pth-mid: #190C05; --pth-dark: #0C0A0B; }
body.pth-fall      { --pth-a: #B4531F; --pth-a2: #F0A050; --pth-g: rgba(240,160,70,.40); --pth-deep: #4E2A0C; --pth-mid: #1E1108; --pth-dark: #0D0A08; }
body.pth-winter    { --pth-a: #2F6FB3; --pth-a2: #8DB8E8; --pth-g: rgba(120,170,255,.38); --pth-deep: #1E3A6B; --pth-mid: #0D1A35; --pth-dark: #060A16; }
body.pth-newyear   { --pth-a: #A88412; --pth-a2: #E9C45A; --pth-g: rgba(233,196,90,.40); --pth-deep: #3A2E0C; --pth-mid: #17120A; --pth-dark: #0B0B0C; }
body.pth-valentine { --pth-a: #C2255C; --pth-a2: #FF8FB0; --pth-g: rgba(255,80,140,.36); --pth-deep: #5C1030; --pth-mid: #230914; --pth-dark: #0D0609; }
body.pth-stpatrick { --pth-a: #1E7F3E; --pth-a2: #6BD08F; --pth-g: rgba(50,200,110,.34); --pth-deep: #0F4A2B; --pth-mid: #072315; --pth-dark: #040C08; }
body.pth-july4     { --pth-a: #B22234; --pth-a2: #FF5A6A; --pth-g: rgba(90,130,230,.36); --pth-deep: #1C2B5E; --pth-mid: #0E1634; --pth-dark: #080C1D; }

/* ------------------------------------------------------------ every themed page: small touches only */
body.pth .ann .ann-item + .ann-item::before, body.pth .ann .ann-dot::before { color: var(--pth-a2) !important; }
body.pth-home .pv5-tick-run li::after { background: var(--pth-a2) !important; }
body.pth .hv2-header { box-shadow: inset 0 -2px 0 var(--pth-a); }
body.pth footer.hv2-footer { box-shadow: inset 0 3px 0 var(--pth-a); }

/* ------------------------------------------------------------ the front page: the theme's colour instead of blue */
body.pth-home .pv5 { --signal: var(--pth-a); --signal-ink: var(--pth-a2); }
body.pth-home .pv5 .pv5-dot--live { animation-name: pth-pulse; }
@keyframes pth-pulse { 0% { box-shadow: 0 0 0 0 var(--pth-g); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
body.pth-home .pv5 .pv5-hdeal-tag { background: var(--pth-a2); color: #0A0A0B; }
body.pth-home .pv5 .pv5-hero-in { position: relative; z-index: 1; }   /* the headline and the buttons above the moving detail */

/* the greeting above the headline: a drawn title (static/img/themes/greet-<theme>.svg) whose capitals rise in one after
   another; the picture animates itself. Sized from its own width (--gw), never wider than the column; the small negative
   left margin lines its capitals up with the headline (the picture keeps a little room around them for the glow). */
body.pth .pth-greet { margin: 0 0 14px; line-height: 0; }   /* body.pth: outranks the front page's ".hv2 p { margin: 0 }" */
.pth-greet img { display: block; width: calc(var(--gw, 600) * .40px); max-width: 100%; height: auto; margin-left: -6px; }
@media (min-width: 900px) { body.pth .pth-greet { margin-bottom: 18px; } .pth-greet img { width: calc(var(--gw, 600) * .64px); margin-left: -10px; } }

/* ------------------------------------------------------------ the top section of the front page, lit from behind the vials.
   The top section only; the header and everything below it stay as they are. */
body.pth.pth-home .pv5 .pv5-hero {
  background: radial-gradient(95% 48% at 50% 22%, var(--pth-deep) 0%, var(--pth-mid) 45%, var(--pth-dark) 82%); color: #F5F5F6; }
@media (min-width: 900px) {
  body.pth.pth-home .pv5 .pv5-hero {
    background: radial-gradient(62% 82% at 73% 46%, var(--pth-deep) 0%, var(--pth-mid) 42%, var(--pth-dark) 78%); }
}
body.pth.pth-home .pv5 .pv5-hero .pv5-wall-row { color: rgba(255,255,255,.035); }
body.pth.pth-home .pv5 .pv5-hero .pv5-wall-row i { color: rgba(255,255,255,.02); }
body.pth.pth-home .pv5 .pv5-hero .pv5-kicker { color: #A9AAB1; }
body.pth.pth-home .pv5 .pv5-hero-copy h1 { color: #FFFFFF; }
body.pth.pth-home .pv5 .pv5-hero .pv5-h1-b { color: #A2A3AA; }
body.pth.pth-home .pv5 .pv5-hero .pv5-lead { color: #C9CAD0; }
body.pth.pth-home .pv5 .pv5-hero .pv5-hdeal-row {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 24px 40px -24px rgba(0,0,0,.8);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body.pth.pth-home .pv5 .pv5-hero .pv5-btn--ink { background: #FFFFFF; color: #0A0A0B !important; }
body.pth.pth-home .pv5 .pv5-hero .pv5-btn--ink:hover { background: #E9E9EC; color: #0A0A0B !important; }
body.pth.pth-home .pv5 .pv5-hero .pv5-link { color: #FFFFFF; }
body.pth.pth-home .pv5 .pv5-hero .pv5-stats { border-top-color: rgba(255,255,255,.14); }
body.pth.pth-home .pv5 .pv5-hero .pv5-stats b { color: #FFFFFF; }
body.pth.pth-home .pv5 .pv5-hero .pv5-stats span { color: #9D9EA5; }
body.pth.pth-home .pv5 .pv5-hero .pv5-fv img {
  filter: drop-shadow(0 28px 30px rgba(0,0,0,.6)) drop-shadow(0 0 26px var(--pth-g)); }
body.pth.pth-home .pv5 .pv5-hero .pv5-fv-shadow { background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,0)); }
body.pth.pth-home .pv5 .pv5-hero .pv5-fv-name { background: #FFFFFF; color: #0A0A0B; }

/* ------------------------------------------------------------ the glow behind the vials (soft, no edge) */
.pth-sky, .pth-glow, .pth-fog, .pth-greet, .pth-hat { pointer-events: none; user-select: none; -webkit-user-select: none; }
.pth-glow { position: absolute; z-index: 0; left: 50%; top: 50%; width: min(120%, 700px); aspect-ratio: 1 / 1; border-radius: 50%;
  transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--pth-g), transparent 100%); animation: pth-breathe 7s ease-in-out infinite alternate; }
@keyframes pth-breathe { from { opacity: .75; transform: translate(-50%, -50%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }

/* ------------------------------------------------------------ what the vials wear (a hat, or Valentine's satin bow)
   one on each vial; the vial picture's cap is its full width at the very top, so the brim sits on the cap. It is in the
   vial's bobbing part, so it tilts and floats with it. */
body.pth-home .pv5 .pv5-fv-bob { position: relative; }
.pth-hat { position: absolute; z-index: 3; left: 47%; top: -21%; width: 92%; transform: translateX(-50%) rotate(-10deg);
  filter: drop-shadow(0 6px 8px rgba(10,10,11,.28)); animation: pth-hat-in .9s cubic-bezier(.16,.84,.24,1) 1s both; }
.pth-hat svg { display: block; width: 100%; height: auto; overflow: visible; }
.pth-hat--winter { left: 49%; top: -22%; width: 100%; transform: translateX(-50%) rotate(-6deg); }
.pth-hat--newyear { left: 50%; top: -15%; width: 64%; transform: translateX(-50%) rotate(-9deg); }
.pth-hat--stpatrick { left: 49%; top: -22.5%; width: 96%; transform: translateX(-50%) rotate(-7deg); }
.pth-hat--fall { left: 48%; top: -22%; width: 96%; transform: translateX(-50%) rotate(-8deg); }
.pth-hat--valentine { left: 50%; top: -15%; width: 86%; transform: translateX(-50%) rotate(-4deg); }
.pth-hat--july4 { left: 49%; top: -23%; width: 90%; transform: translateX(-50%) rotate(-7deg); }
@keyframes pth-hat-in { from { opacity: 0; transform: translateX(-50%) translateY(-22px) rotate(-16deg); } }
/* the softer vials at the back on a computer screen: their hats as soft as they are */
@media (min-width: 900px) {
  body.pth-home .pv5 .pv5-fv--2 .pth-hat svg { filter: blur(1.2px); }
  body.pth-home .pv5 .pv5-fv--4 .pth-hat svg { filter: blur(2.4px); opacity: .9; }
}
/* phones and tablets: room above the vials for the hats */
@media (max-width: 899px) {
  body.pth.pth-home .pv5 .pv5-stage { margin-top: 54px; }
}

/* ------------------------------------------------------------ the moving detail, around the vials only */
.pth-sky { position: absolute; z-index: 0; inset: -18% -8% -10% -8%; overflow: hidden; }
.pth-p { position: absolute; top: -30px; display: block; opacity: var(--o, .7); will-change: transform; animation: pth-fall var(--t, 14s) linear var(--d, 0s) infinite; }
.pth-up { top: auto; bottom: -30px; animation-name: pth-rise; }
.pth-s { display: block; animation: pth-sway var(--w, 3.4s) ease-in-out var(--d, 0s) infinite alternate; }
.pth-p svg { display: block; width: 100%; height: auto; }
.pth-dot .pth-s i { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; }
@keyframes pth-fall { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, var(--h, 900px), 0); } }
@keyframes pth-rise { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 15% { opacity: var(--o, .7); } 75% { opacity: var(--o, .7); }
  100% { transform: translate3d(0, calc(var(--h, 900px) * -1), 0); opacity: 0; } }
@keyframes pth-sway { from { transform: translateX(calc(var(--sw, 16px) * -1)) rotate(calc(var(--r, 10deg) * -1)); } to { transform: translateX(var(--sw, 16px)) rotate(var(--r, 10deg)); } }

/* Halloween: low smoke, Winter: cold mist, drifting along the bottom of the top section */
.pth-fog { position: absolute; z-index: 0; left: -20%; right: -20%; bottom: 0; height: 42%; overflow: hidden; }
.pth-fog i { position: absolute; left: 0; bottom: -30%; width: 200%; height: 100%;
  background: radial-gradient(28% 55% at 20% 60%, rgba(255,255,255,.07), transparent 70%), radial-gradient(24% 50% at 55% 70%, rgba(255,255,255,.055), transparent 70%),
              radial-gradient(30% 60% at 85% 55%, rgba(255,255,255,.06), transparent 70%);
  animation: pth-smoke 48s linear infinite; }
.pth-fog i + i { bottom: -45%; opacity: .7; animation-duration: 70s; animation-direction: reverse; }
@keyframes pth-smoke { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 4th of July: slow, fine fireworks and a few stars */
.pth-fw { position: absolute; width: 0; height: 0; }
.pth-fw i { position: absolute; left: -1px; top: -5px; width: 2px; height: 10px; border-radius: 2px; background: linear-gradient(var(--c), transparent);
  opacity: 0; animation: pth-burst 4.2s cubic-bezier(.15,.7,.3,1) var(--dl, 0s) infinite; }
@keyframes pth-burst { 0% { transform: rotate(var(--a)) translateY(0) scaleY(.3); opacity: 0; } 6% { opacity: 1; }
  45% { transform: rotate(var(--a)) translateY(calc(var(--R, 70px) * -1)) scaleY(1); opacity: .9; }
  70%, 100% { transform: rotate(var(--a)) translateY(calc(var(--R, 70px) * -1.12)) scaleY(.4); opacity: 0; } }
.pth-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 6px #FFFFFF;
  animation: pth-twinkle var(--t, 3s) ease-in-out var(--d, 0s) infinite; }
@keyframes pth-twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: .9; transform: scale(1); } }

/* ------------------------------------------------------------ less motion: the colours stay, nothing moves */
@media (prefers-reduced-motion: reduce) {
  .pth-glow, .pth-hat { animation: none !important; }
  .pth-sky, .pth-fog { display: none; }
}