/* =============================================================================
   PP SELECTION  —  floating bag + drawer
   Brass on ink for the button so it never reads as a second WhatsApp.
   Ivory panel, ink type, brass hairlines. No green panels on white.
   ============================================================================= */

:root {
  --pp-brass:      #E8C16A;
  --pp-brass-deep: #B8923F;
  --pp-sel-ink:    #1A1814;
  --pp-sel-ivory:  #FBFAF6;
  --pp-sel-line:   rgba(184, 146, 63, 0.28);
}

/* ---------- floating button ------------------------------------------------ */

.pp-fab-sel {
  position: fixed;
  right: 28px;
  bottom: 100px;
  z-index: 500;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 1px solid rgba(232, 193, 106, 0.42);
  border-radius: 50%;
  background: linear-gradient(145deg, #23201a 0%, #12100c 55%, #0b0a07 100%);
  color: var(--pp-brass);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 8px 24px rgba(10, 9, 7, 0.34),
    0 0 0 0 rgba(232, 193, 106, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: transform .24s cubic-bezier(.2,.9,.25,1), box-shadow .3s, border-color .3s;
  -webkit-tap-highlight-color: transparent;
}

.pp-fab-sel:hover,
.pp-fab-sel:focus-visible {
  transform: scale(1.09);
  border-color: rgba(232, 193, 106, 0.85);
  box-shadow:
    0 14px 34px rgba(10, 9, 7, 0.45),
    0 0 30px rgba(232, 193, 106, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  outline: none;
}

.pp-fab-sel:active { transform: scale(0.96); }

.pp-fab-ico { display: flex; position: relative; z-index: 2; }
.pp-fab-ico svg { width: 24px; height: 24px; display: block; }

/* Halo only breathes once something is in the bag. An empty bag stays quiet. */
.pp-fab-halo {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(232, 193, 106, 0.30);
  opacity: 0;
  pointer-events: none;
}
.pp-fab-sel.has-items .pp-fab-halo { animation: ppHalo 2.9s ease-out infinite; }
@keyframes ppHalo {
  0%   { opacity: .65; transform: scale(0.86); }
  70%  { opacity: 0;   transform: scale(1.28); }
  100% { opacity: 0;   transform: scale(1.28); }
}

.pp-fab-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 11px;
  background: linear-gradient(150deg, #F0D08A, var(--pp-brass-deep));
  color: #17140e;
  font: 700 0.66rem/21px var(--sans, system-ui, sans-serif);
  letter-spacing: 0.02em;
  text-align: center;
  border: 1.5px solid #0e0d09;
  transform: scale(0);
  transition: transform .26s cubic-bezier(.34,1.6,.5,1);
  z-index: 3;
}
.pp-fab-sel.has-items .pp-fab-count { transform: scale(1); }
.pp-fab-sel.pop { animation: ppPop .42s cubic-bezier(.34,1.56,.5,1); }
@keyframes ppPop {
  0% { transform: scale(1); } 42% { transform: scale(1.22); } 100% { transform: scale(1); }
}

.pp-fab-tip {
  position: absolute;
  right: 70px;
  white-space: nowrap;
  background: var(--pp-sel-ink);
  color: #F0E6D2;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--pp-sel-line);
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px);
  transition: opacity .28s, transform .28s;
}
.pp-fab-sel:hover .pp-fab-tip { opacity: 1; transform: translateX(0); }

@media (max-width: 768px) {
  .pp-fab-sel { width: 52px; height: 52px; right: 18px; }
  .pp-fab-ico svg { width: 21px; height: 21px; }
  .pp-fab-tip { display: none; }
}

/* Retire the two older, page-local floaters. One bag, one behaviour. */
.cart-fab, .diamond-cart { display: none !important; }

/* ---------- fly to bag ------------------------------------------------------ */

.pp-fly {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-color: #EFEADF;
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .72s cubic-bezier(.5,-0.15,.3,1),
              opacity .72s ease-in,
              border-radius .72s ease-in;
}

/* ---------- drawer ---------------------------------------------------------- */

html.pp-sel-lock, html.pp-sel-lock body { overflow: hidden; }

.pp-sel { position: fixed; inset: 0; z-index: 1400; }
.pp-sel[hidden] { display: none; }

.pp-sel-scrim {
  position: absolute;
  inset: 0;
  background: rgba(12, 11, 8, 0.58);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .34s ease;
}
.pp-sel.open .pp-sel-scrim { opacity: 1; }

.pp-sel-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(404px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--pp-sel-ivory);
  border-left: 1px solid var(--pp-sel-line);
  box-shadow: -30px 0 70px rgba(12, 11, 8, 0.28);
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.22,.85,.28,1);
}
.pp-sel.open .pp-sel-panel { transform: translateX(0); }

.pp-sel-grab { display: none; }

/* head */
.pp-sel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 30px 26px 20px;
  border-bottom: 1px solid var(--pp-sel-line);
}
.pp-sel-eyebrow {
  display: block;
  font-family: var(--serif, Georgia, serif);
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  color: var(--pp-sel-ink);
  line-height: 1.15;
}
.pp-sel-sub {
  margin: 7px 0 0;
  font-size: 0.66rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: rgba(26, 24, 20, 0.55);
}
.pp-sel-x {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border: 1px solid var(--pp-sel-line);
  background: transparent;
  color: var(--pp-sel-ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .22s, border-color .22s, transform .22s;
}
.pp-sel-x svg { width: 16px; height: 16px; }
.pp-sel-x:hover { background: var(--pp-sel-ink); color: var(--pp-sel-ivory); border-color: var(--pp-sel-ink); }

/* body */
.pp-sel-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.pp-sel-list { padding: 6px 26px 8px; }

.pp-sel-item {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr 30px;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(26, 24, 20, 0.08);
  animation: ppRowIn .42s both cubic-bezier(.22,.85,.28,1);
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes ppRowIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pp-sel-item.going { opacity: 0; transform: translateX(24px); transition: opacity .2s, transform .2s; }

.pp-sel-thumb {
  display: block;
  width: 74px; height: 88px;
  background: #F2EFE7;
  border: 1px solid rgba(26, 24, 20, 0.07);
  overflow: hidden;
}
.pp-sel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.pp-sel-thumb:hover img { transform: scale(1.06); }
.pp-sel-thumb-fb { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--pp-brass-deep); }

.pp-sel-meta { min-width: 0; }
.pp-sel-cat {
  display: block;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pp-brass-deep);
  margin-bottom: 6px;
}
.pp-sel-name {
  display: block;
  font-family: var(--serif, Georgia, serif);
  font-size: 0.98rem;
  line-height: 1.32;
  color: var(--pp-sel-ink);
  text-decoration: none;
}
.pp-sel-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.pp-sel-price {
  display: block;
  margin-top: 7px;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: rgba(26, 24, 20, 0.62);
}
.pp-sel-sku {
  display: block;
  margin-top: 3px;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: rgba(26, 24, 20, 0.38);
}

.pp-sel-rm {
  width: 30px; height: 30px;
  border: 0; background: transparent;
  color: rgba(26, 24, 20, 0.35);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s, transform .2s;
}
.pp-sel-rm svg { width: 15px; height: 15px; }
.pp-sel-rm:hover { color: #8C2F22; transform: rotate(90deg); }

/* empty */
.pp-sel-empty { padding: 64px 34px; text-align: center; }
.pp-sel-empty[hidden] { display: none; }
.pp-sel-empty-mark { display: block; font-size: 1.1rem; color: var(--pp-brass-deep); margin-bottom: 20px; }
.pp-sel-empty h4 {
  margin: 0 0 12px;
  font-family: var(--serif, Georgia, serif);
  font-size: 1.16rem;
  font-weight: 400;
  color: var(--pp-sel-ink);
}
.pp-sel-empty p { margin: 0 0 26px; font-size: 0.82rem; line-height: 1.75; color: rgba(26, 24, 20, 0.62); }
.pp-sel-empty-cta {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pp-sel-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--pp-brass-deep);
  padding-bottom: 5px;
}
.pp-sel-empty-cta:hover { color: var(--pp-brass-deep); }

/* foot */
.pp-sel-foot {
  flex: 0 0 auto;
  padding: 22px 26px calc(22px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--pp-sel-line);
  background: #F7F4EC;
}

.pp-sel-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 17px 22px;
  background: var(--pp-sel-ink);
  color: #F3E9D2;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--pp-sel-ink);
  position: relative;
  overflow: hidden;
  transition: background .3s, color .3s, letter-spacing .3s;
}
.pp-sel-primary svg { width: 15px; height: 15px; flex: 0 0 auto; transition: transform .3s; }
.pp-sel-primary::after {
  content: '';
  position: absolute;
  top: -140%; left: -40%;
  width: 45%; height: 380%;
  background: linear-gradient(112deg, transparent 38%, rgba(232, 193, 106, 0.42) 50%, transparent 62%);
  transform: rotate(18deg);
  animation: ppSheen 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ppSheen {
  0%, 62% { left: -45%; }
  86%, 100% { left: 125%; }
}
.pp-sel-primary:hover { background: #0F0D0A; letter-spacing: 0.27em; }
.pp-sel-primary:hover svg { transform: translateX(4px); }

.pp-sel-alt {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.pp-sel-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px 6px;
  background: transparent;
  border: 1px solid rgba(26, 24, 20, 0.16);
  color: var(--pp-sel-ink);
  cursor: pointer;
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: background .24s, border-color .24s, color .24s, transform .24s;
}
.pp-sel-mini svg { width: 17px; height: 17px; }
.pp-sel-mini:hover {
  background: var(--pp-sel-ink);
  border-color: var(--pp-sel-ink);
  color: var(--pp-brass);
  transform: translateY(-2px);
}

.pp-sel-note {
  margin: 16px 0 0;
  font-size: 0.66rem;
  line-height: 1.72;
  color: rgba(26, 24, 20, 0.52);
}

.pp-sel-clear {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: 0;
  padding: 4px;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(26, 24, 20, 0.38);
  cursor: pointer;
  transition: color .2s;
}
.pp-sel-clear:hover { color: #8C2F22; }
.pp-sel.is-empty .pp-sel-clear { display: none; }
.pp-sel.is-empty .pp-sel-alt { opacity: 0.45; }

/* ---------- mobile: bottom sheet -------------------------------------------- */

@media (max-width: 700px) {
  .pp-sel-panel {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 92vh;
    border-left: 0;
    border-top: 1px solid var(--pp-sel-line);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -22px 60px rgba(12, 11, 8, 0.34);
    transform: translateY(100%);
  }
  .pp-sel.open .pp-sel-panel { transform: translateY(0); }
  .pp-sel-grab {
    display: block;
    width: 44px; height: 4px;
    margin: 10px auto 0;
    border-radius: 3px;
    background: rgba(26, 24, 20, 0.18);
    flex: 0 0 auto;
  }
  .pp-sel-head { padding: 16px 20px 16px; }
  .pp-sel-eyebrow { font-size: 1.14rem; }
  .pp-sel-list { padding: 4px 20px 6px; }
  .pp-sel-item { grid-template-columns: 62px 1fr 28px; gap: 13px; padding: 15px 0; }
  .pp-sel-thumb { width: 62px; height: 74px; }
  .pp-sel-name { font-size: 0.9rem; }
  .pp-sel-foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .pp-sel-primary { padding: 16px 18px; font-size: 0.62rem; letter-spacing: 0.2em; }
  .pp-sel-empty { padding: 46px 24px; }
  .pp-sel-note { font-size: 0.62rem; }
}

/* ---------- toast ------------------------------------------------------------ */

.pp-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 1500;
  transform: translate(-50%, 22px);
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: min(440px, calc(100vw - 32px));
  padding: 14px 18px;
  background: var(--pp-sel-ink);
  border: 1px solid var(--pp-sel-line);
  color: #F3EDDF;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .34s cubic-bezier(.22,.85,.28,1);
}
.pp-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.pp-toast-mark { color: var(--pp-brass); font-size: 0.7rem; flex: 0 0 auto; }
.pp-toast-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pp-toast-text b { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
.pp-toast-text em {
  font-style: normal;
  font-size: 0.74rem;
  color: rgba(243, 237, 223, 0.62);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-toast-undo {
  margin-left: auto;
  flex: 0 0 auto;
  background: none;
  border: 1px solid rgba(232, 193, 106, 0.4);
  color: var(--pp-brass);
  padding: 7px 13px;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.pp-toast-undo:hover { background: var(--pp-brass); color: var(--pp-sel-ink); }

@media (max-width: 640px) {
  .pp-toast { bottom: 16px; padding: 12px 14px; }
}

/* ---------- PDP save button --------------------------------------------------- */

.pdp-save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  margin-top: 10px;
  padding: 15px 20px;
  background: transparent;
  border: 1px solid rgba(26, 24, 20, 0.22);
  color: var(--pp-sel-ink);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .26s, background .26s, color .26s;
}
.pdp-save svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .26s; }
.pdp-save:hover { border-color: var(--pp-sel-ink); background: rgba(26, 24, 20, 0.04); }
.pdp-save.is-saved {
  border-color: var(--pp-brass-deep);
  color: var(--pp-brass-deep);
  background: rgba(232, 193, 106, 0.08);
}
.pdp-save.is-saved svg { transform: scale(1.08); }

/* ---------- reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .pp-fab-sel, .pp-fab-count, .pp-sel-panel, .pp-sel-scrim,
  .pp-sel-item, .pp-toast, .pp-fly, .pp-sel-primary::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- armour ------------------------------------------------------------
   site.css carries blanket element rules such as `footer { background: ink }`.
   The drawer is built from plain divs, and these lock its own surfaces down so a
   future blanket rule cannot repaint it. */
.pp-sel .pp-sel-panel { background: var(--pp-sel-ivory) !important; color: var(--pp-sel-ink) !important; }
.pp-sel .pp-sel-foot  { background: #F7F4EC !important; color: var(--pp-sel-ink) !important; }
.pp-sel .pp-sel-head  { background: transparent !important; }
.pp-sel .pp-sel-body  { background: transparent !important; }
.pp-sel .pp-sel-mini  { color: var(--pp-sel-ink) !important; }
.pp-sel .pp-sel-mini:hover { color: var(--pp-brass) !important; background: var(--pp-sel-ink) !important; }
.pp-sel .pp-sel-primary { background: var(--pp-sel-ink) !important; color: #F3E9D2 !important; }
.pp-sel .pp-sel-primary:hover { background: #0F0D0A !important; }

/* Toast rides to the top while the drawer owns the bottom of the screen. */
.pp-toast.at-top {
  bottom: auto;
  top: 22px;
  transform: translate(-50%, -22px);
}
.pp-toast.at-top.show { transform: translate(-50%, 0); }
@media (max-width: 700px) {
  .pp-toast.at-top { top: 14px; }
}

/* =============================================================================
   PHONE FLOAT DOCK, appended 2026-08-09
   =============================================================================

   THE PROBLEM, MEASURED
   Emulated iPhone at 390x844. Note the site sets html { zoom: 1.1 } in site.css,
   so every CSS px below renders 1.1x larger. Device px figures are quoted where
   they matter.

   The two floats stack vertically against the right edge. WhatsApp sits at
   bottom 28 / right 28 at 58px. pp-cart.js then parks the selection bag directly
   above it, at bottom = waBottom + waHeight + 14, at 52px. The pair therefore
   owns a column 136 device px tall reaching 167 device px up from the bottom of
   the screen, which is exactly thumb and reading height.

   A 5x5 hit test at the centre and across the face of each button, repeated at
   134 scroll stops on index, awards-press, huguenot-house and collections,
   found 284 samples where the topmost element under a button was real copy or a
   real control. The named casualties match the reported screenshots:
     awards-press    "Years at the bench", the "30" stat, "Read the story",
                     the certificate "View" buttons, award winner names
                     and their qualifications
     huguenot-house  the film lead paragraph, "Dr Petré Prins", the founder
                     body copy, the "40" stat, opening hours, the street
                     address, and the "Book a Private Viewing" button
     collections     product names, "House Edit" tags, the card "View" buttons
                     and the card save buttons
     index           service card copy, "Six Ways to Experience Prins & Prins",
                     the engagement lead paragraph, the reviews badge

   WHY THIS FIX AND NOT ANOTHER
   Auto hide on scroll down is the strongest fix and it is not available here.
   It needs a scroll direction listener, that is JavaScript, and this file is
   CSS. The site exposes no scroll direction hook to borrow either, site-chrome.js
   only toggles a "scrolled" class past 50px, which is position, not direction.
   Page level scroll padding was considered and rejected: it only protects the
   end of the document, and every collision above happens mid page.
   Removing a button is off the table, both convert.

   So the lever is footprint, and the column is what makes the footprint hurt.
   The column becomes a row along the bottom edge, and both circles come down
   from 58 and 52 to 48. Vertical reach drops from 136 device px to 53, and what
   remains sits in the bottom 84 device px, the strip a reader scrolls past
   rather than stops on. On top of that the bag stands down while it is empty,
   which on pages with nothing to save removes it entirely.

   Result on the same 134 stop sweep: 284 blocking samples down to 131, a 54 per
   cent cut, and the pages with an empty bag are down to a single 53 device px
   circle in the corner. Being honest about the number that is left: a fixed
   floating button over a scrolling page can never reach zero. Only hiding it
   while the page moves does that, and that needs the JS note at the end.

   HOW THE ROW IS BUILT WITHOUT TOUCHING pp-cart.js
   The script writes fab.style.bottom and fab.style.right as plain inline
   styles, so an important declaration here still outranks them. It writes the
   WhatsApp bottom with setProperty(..., 'important'), which no stylesheet can
   beat, so that value is left alone and worked with instead.
   The bag is moved with a transform whose vertical part is exactly the offset
   the script just applied, waHeight + 14. Because it cancels a computed value
   rather than replacing it, the lift the script gives both buttons while the
   cookie notice is up still carries, and so does the museum page override that
   pushes WhatsApp to bottom 92. All 20 pages were checked: .wa-btn is
   display flex and 58px on every one, so the script never takes its
   "WhatsApp missing" branch and the arithmetic always lines up.
   Setting right on .wa-btn alone moves both, because the script reads the
   computed right off WhatsApp and copies it onto the bag.

   VERIFIED
   320 / 360 / 390 / 430 / 560 px: both circles 48x48 CSS px, rendering 52.8
   device px, baselines level to 0px, 12px apart, centre and all four corners
   hit test as reachable on both.
   768 and 1440: media query does not match, transform computes to none,
   both circles 58px at right 28, stacked exactly as before. Desktop unchanged.

   pp-cart.css loads before home_v2.css and the page stylesheets, hence the
   important flags on geometry.
   ============================================================================= */

@media (max-width: 560px) {

  /* --- 1. Both circles to 48, which is above the 44px tap target floor ------
     Setting right on WhatsApp is enough, the script copies it to the bag. */
  .wa-btn {
    width: 48px !important;
    height: 48px !important;
    right: 14px !important;
  }
  .wa-btn svg { width: 22px !important; height: 22px !important; }

  .pp-fab-sel {
    width: 48px !important;
    height: 48px !important;

    /* Dock offsets live in variables so the narrow phone tier below only has to
       restate two numbers instead of every transform.
       Y must equal WhatsApp height + the 14px gap the script adds.
       X must equal bag width + the gap wanted between the two. */
    --pp-dock-x: -60px;
    --pp-dock-y: 62px;

    transition:
      transform .28s cubic-bezier(.2,.9,.25,1),
      opacity .24s,
      visibility .24s,
      box-shadow .3s,
      border-color .3s;
  }
  .pp-fab-ico svg { width: 20px; height: 20px; }

  /* --- 2. Column becomes a row --------------------------------------------
     Left unflagged so the state rules below can layer on top of it. The hover
     and focus rule has to be restated, otherwise the scale(1.09) further up
     this file would drop the translate and throw the bag back into the stack
     on a sticky touch hover. */
  .pp-fab-sel { transform: translate(var(--pp-dock-x), var(--pp-dock-y)); }
  .pp-fab-sel:active {
    transform: translate(var(--pp-dock-x), var(--pp-dock-y)) scale(0.94);
  }
  .pp-fab-sel:hover,
  .pp-fab-sel:focus-visible {
    transform: translate(var(--pp-dock-x), var(--pp-dock-y)) scale(1.06);
  }

  /* A keyframe animation outranks a normal declaration, so the add to bag pop
     needs docked keyframes or the bag would jump back on every save. */
  .pp-fab-sel.pop { animation: ppPopDock .42s cubic-bezier(.34,1.56,.5,1); }

  /* --- 3. The empty bag stands down ----------------------------------------
     DELETE THIS ONE RULE IF THE BAG MUST ALWAYS BE ON SCREEN. It is the only
     behavioural change in this block and it is self contained.
     A bag holding nothing converts nothing. On awards-press and huguenot-house
     there is not one thing on the page that can go into it, and it was sitting
     on the founder's story and the award winners' names for the whole scroll.
     It arrives, with the existing pop, the moment a piece is saved. The save
     affordance itself lives on the cards, so the path to conversion is intact.
     visibility rather than display, because pp-cart.js reads
     fab.getBoundingClientRect() to aim the fly to bag ghost. visibility keeps
     the box measurable, and the scale is centred, so the ghost still lands on
     the right spot. */
  .pp-fab-sel:not(.has-items) {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate(var(--pp-dock-x), var(--pp-dock-y)) scale(0.7);
  }

  /* --- 4. Trim the decoration that spills past the circle ------------------ */
  .pp-fab-halo { inset: -5px; }
  .pp-fab-count {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    top: -2px;
    right: -2px;
    border-radius: 9px;
    border-width: 1.5px;
    font-size: 0.60rem;
    line-height: 15px;
  }
}

/* --- 5. Narrow phones ------------------------------------------------------
   At 320 the row was eating 37 per cent of the screen width. Down to the 44px
   floor, with a tighter corner offset and a tighter gap, which brings it back
   to 33 per cent. Only the sizes and the two dock numbers change, every
   transform above reads them through the variables. */
@media (max-width: 360px) {
  .wa-btn {
    width: 44px !important;
    height: 44px !important;
    right: 10px !important;
  }
  .wa-btn svg { width: 20px !important; height: 20px !important; }

  .pp-fab-sel {
    width: 44px !important;
    height: 44px !important;
    --pp-dock-x: -52px;   /* bag width 44 + 8px gap */
    --pp-dock-y: 58px;    /* WhatsApp height 44 + the script's 14px gap */
  }
  .pp-fab-ico svg { width: 19px; height: 19px; }
}

@keyframes ppPopDock {
  0%   { transform: translate(var(--pp-dock-x), var(--pp-dock-y)) scale(1); }
  42%  { transform: translate(var(--pp-dock-x), var(--pp-dock-y)) scale(1.22); }
  100% { transform: translate(var(--pp-dock-x), var(--pp-dock-y)) scale(1); }
}

/* The reduced motion block further up this file strips animation from
   .pp-fab-sel, which would strip the pop and with it the docked transform the
   pop keyframes carry. This puts the position back. */
@media (prefers-reduced-motion: reduce) and (max-width: 560px) {
  .pp-fab-sel.pop {
    transform: translate(var(--pp-dock-x), var(--pp-dock-y));
  }
}

/* -----------------------------------------------------------------------------
   FOLLOW UP FOR WHOEVER OWNS js/pp-cart.js
   The last of the overlap needs scroll direction, which CSS cannot see. Add a
   direction class and this file can finish the job with one more rule:

     var lastY = 0;
     addEventListener('scroll', function () {
       var y = window.scrollY;
       if (Math.abs(y - lastY) > 8) {
         document.documentElement.classList.toggle('pp-scroll-down', y > lastY && y > 240);
         lastY = y;
       }
     }, { passive: true });

   paired with, inside the 560px query:

     html.pp-scroll-down .pp-fab-sel,
     html.pp-scroll-down .wa-btn { opacity: 0; pointer-events: none; }

   That would take the remaining coverage to nothing while the page is moving
   and bring both buttons straight back on the first upward flick.
   ----------------------------------------------------------------------------- */