/* Editorial pass on the landing page (Jan, 19 Oct 2026): breathing room, build-in motion and the chapter rail.
   See README "The editorial pass". Behaviour is in js/editorial.js. Nothing here changes a word of copy. */

/* ---------- Text links that replace the pink buttons (three pink buttons stay: hero, Signature Conversations, Book) ---------- */
.mp-more{display:inline-block;font:500 19px/1.4 var(--font-body);letter-spacing:0.2em;text-transform:uppercase;color:#F21EA1;border-bottom:1px solid rgba(242,30,161,0.45);padding-bottom:6px;transition:color 280ms ease,border-color 280ms ease}
.mp-more:hover{color:#C8177F;border-color:#C8177F}
.mp-more--light{color:#FAF5E7;border-color:rgba(242,30,161,0.7)}
.mp-more--light:hover{color:#F21EA1;border-color:#F21EA1}

/* ---------- Build-in: a block fades in and rises 10px once, when it reaches the lower part of the screen ----------
   Only when the script runs (html.mp-js), so without JavaScript everything is simply there. A reader who asks for
   reduced motion gets no movement and no delay. */
html.mp-js .mp-rv{opacity:0;translate:0 10px}
html.mp-js .mp-rv.is-in{opacity:1;translate:none;transition:opacity 700ms var(--ease-calm),translate 700ms var(--ease-calm)}
/* The transition is declared on the revealed state only: the script adds html.mp-js after the first paint, and a transition declared on the hidden
   state would run then too, fading everything OUT over its own delay before it had been revealed (measured with the word cloud's long delays). */
/* A fade-only reveal for a block holding a blended image: a transform in flight would switch the blend off and flash the image's white. */
html.mp-js .mp-rv--fade{translate:none}
/* A slower arrival for the seven Signature Conversations rows: each is watched on its own, so they come in one by one as the reader scrolls. */
html.mp-js .mp-rv--slow.is-in{transition-duration:1600ms}
/* The Endorsed word cloud (Jan, 21 Oct 2026): the cream words arrive with their phrase; each magenta word then appears out of nowhere at its own
   moment and pace (--ink-delay, --ink-dur on the word), once, and stays. Slow and deliberate: the last one lands about eight seconds in. */
.mp-ink{color:#F21EA1}
html.mp-js .mp-ink{opacity:0}
html.mp-js .mp-rv.is-in .mp-ink{opacity:1;transition:opacity var(--ink-dur,2.4s) ease var(--ink-delay,0s)}
/* The passionflower turns, slowly, for as long as the page is open (one revolution in four minutes); the drift still moves it with the scroll. */
.mp-turn{animation:mp-turn 240s linear infinite}
@keyframes mp-turn{from{rotate:-6deg}to{rotate:354deg}}
@media (prefers-reduced-motion:reduce){
  html.mp-js .mp-rv{opacity:1;translate:none;transition:none;transition-delay:0s !important}
  html.mp-js .mp-ink{opacity:1;transition:none}
  .mp-turn{animation:none}
  [data-drift]{translate:none !important}
}

/* ---------- The chapter rail: its own gutter down the left of wide screens, one dot per section, filling as the page is read ----------
   Screens 1100px and wider only; on phones and tablets the menu lists the sections. Built by js/editorial.js.
   The gutter (--rail-gutter) is reserved for the rail: every band keeps its full-bleed background and moves its content right by that
   much, so the rail never sits on top of a heading or a number. Made to be reused on the main website (Jan, 19 Oct 2026). */
.mp-rail{display:none}
@media (min-width:1100px){
  :root{--rail-gutter:132px}
  /* bands with the standard side padding, and the footer, add the gutter to it; Meet (no side padding of its own) adds just the gutter;
     the cover, the photo strip and the marquee stay full bleed; the hero keeps its own centred layout (the rail is not shown over it) */
  section[data-rail]:not(#top):not(#meet),footer[data-tone]{padding-left:calc(clamp(24px,6vw,96px) + var(--rail-gutter)) !important}
  #meet{padding-left:var(--rail-gutter) !important}
  /* Meet keeps its three columns from 1412px; up to 1599px its heading and paragraph are a little narrower, so the text clears the photos beside the gutter */
  @media (max-width:1599px){
    body #meet h2{font-size:clamp(44px,5.3vw,112px) !important}
    body #meet > div > div:nth-child(2) > p{max-width:420px !important}
  }

  /* One colour on every band (Jan, 20 Oct 2026): a mid grey from the brand's teal scale that reads on teal, cream, sage and the photographs
     alike, so the rail never vanishes against its background. The section being read is magenta. */
  .mp-rail{display:block;position:fixed;left:0;top:calc(50% + 24px);translate:0 -50%;width:var(--rail-gutter);z-index:40;opacity:0;transition:opacity 500ms ease;pointer-events:none;
    --rail-ink:#8A9797;--rail-soft:rgba(138,151,151,0.45)}
  .mp-rail.is-on{opacity:1;pointer-events:auto}
  .mp-rail ol{list-style:none;margin:0 0 0 26px;padding:0;position:relative;display:flex;flex-direction:column;gap:30px;width:14px}
  .mp-rail-line,.mp-rail-fill{position:absolute;left:6px;top:7px;width:2px;background:var(--rail-soft)}
  .mp-rail-line{bottom:7px}
  .mp-rail-fill{height:0;background:var(--rail-ink);transition:height 180ms linear}
  .mp-rail li{position:relative;height:14px}
  .mp-rail a{position:relative;display:block;width:14px;height:14px;color:var(--rail-ink);text-decoration:none}
  .mp-rail a::before{content:"";position:absolute;inset:-12px -80px -12px -12px}
  .mp-rail-dot{position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--rail-soft);transition:background-color 300ms ease,scale 280ms ease}
  .mp-rail a:hover .mp-rail-dot{background:var(--rail-ink)}
  .mp-rail li.is-active .mp-rail-dot{background:#F21EA1;scale:1.4}
  /* The section's one-word name, horizontal, to the right of its dot, 12px (below the Media Pack's 19px copy minimum: navigation furniture, flagged for
     Dr Kirstey, Jan 20 Oct 2026), shown for the section being read (magenta) and for any dot under the mouse (grey). */
  .mp-rail-label{position:absolute;left:26px;top:50%;translate:0 -50%;white-space:nowrap;
    font:600 12px/1 var(--font-body);letter-spacing:0.2em;text-transform:uppercase;color:var(--rail-ink);opacity:0;transition:opacity 300ms ease}
  .mp-rail li.is-active .mp-rail-label{color:#F21EA1}
  .mp-rail li.is-active .mp-rail-label,.mp-rail li:hover .mp-rail-label{opacity:1}
  .mp-rail a:focus-visible{outline:2px solid #F21EA1;outline-offset:3px}
  .mp-rail a:focus-visible .mp-rail-label{opacity:1}
}

/* ---------- The site's own menu, on every page: three pink lines that float, and on the landing page are drawn into the rail (Jan, 20 Oct 2026) ----------
   The hamburger is fixed top right and fades in slowly. The moment the rail appears (the first chaptered band reaching the
   reading line) the button is pulled across the screen into the rail's first dot, shrinking as it goes, like a genie drawn back into the bottle;
   scrolling back up releases it. js/editorial.js measures the two points and sets --genie-x / --genie-y. The panel it opens fades rather than pops.
   Below 1100px, and on every subpage (no rail), the button simply stays. */
header > nav#mp-nav:not(.is-open){display:none !important}
.mp-menu-btn{display:flex;align-items:center;justify-content:center;position:fixed;top:calc(var(--mp-header-bottom,0px) + 18px);right:22px;z-index:1001;width:56px;height:56px;padding:0;border:0;border-radius:2px;background:transparent !important;cursor:pointer;
  opacity:0;transform-origin:50% 50%;transition:transform 4200ms cubic-bezier(.5,-0.06,.4,1),opacity 900ms ease}
/* js/editorial.js adds is-ready 400ms after the page runs, so the lines fade in slowly rather than appearing with the page */
.mp-menu-btn.is-ready{opacity:1}
.mp-menu-btn span,.mp-menu-btn span::before,.mp-menu-btn span::after{display:block;width:28px;height:3px;border-radius:2px;background:#F21EA1;transition:transform 280ms ease,background-color 280ms ease}
.mp-menu-btn span{position:relative}
.mp-menu-btn span::before,.mp-menu-btn span::after{content:"";position:absolute;left:0}
.mp-menu-btn span::before{top:-8px}
.mp-menu-btn span::after{top:8px}
.mp-menu-btn[aria-expanded="true"]{z-index:1002}
.mp-menu-btn[aria-expanded="true"] span{background:transparent}
.mp-menu-btn[aria-expanded="true"] span::before{transform:translateY(8px) rotate(45deg)}
.mp-menu-btn[aria-expanded="true"] span::after{transform:translateY(-8px) rotate(-45deg)}
.mp-menu-btn:focus-visible{outline:2px solid #F21EA1;outline-offset:2px}
/* drawn into the rail: a long pull across the screen, a twist, and gone */
body.mp-rail-on .mp-menu-btn:not([aria-expanded="true"]){transform:translate(var(--genie-x,-1200px),var(--genie-y,300px)) rotate(-540deg) scale(0.08);opacity:0;pointer-events:none;
  transition:transform 4200ms cubic-bezier(.5,-0.06,.4,1),opacity 1800ms ease-in 2300ms}
@media (prefers-reduced-motion:reduce){
  .mp-menu-btn,body.mp-rail-on .mp-menu-btn:not([aria-expanded="true"]){transition:opacity 200ms ease;transform:none}
}
/* The Book Dr Kirstey button (Jan, 21 Oct 2026; every width since 5 Nov 2026). From 768px up it sits beside the hamburger, fixed, the
   same height, so it is always in reach. On the landing page, when the rail appears (1100px and up), the hamburger is pulled into it first;
   the button follows the same path 700ms behind, shrinking to seven tenths, and settles just above the rail, where it stays in view and
   clickable. js/editorial.js measures both journeys (--genie-x/-y for the lines, --genie-bx/-by for the button). On a phone it sits in line
   with the hamburger at the top of the page and scrolls away with it, as the subpages' own header did on phones before 16 Oct 2026.
   From 16 Oct to 5 Nov 2026 the main website's header was pinned above every page and its pink button did this job below 1400px; the
   mediakit is standalone now (Dr Kirstey, relayed by Jan), so the page's own button does it at every width. */
.mp-book-btn{display:inline-flex;align-items:center;position:absolute;top:10px;right:76px;z-index:1001;height:56px;padding:0 14px;
  font:500 19px/1 var(--font-body);letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap;text-decoration:none;color:#FFFFFF;background:#F21EA1;border:1px solid #F21EA1;border-radius:2px;transition:background-color 150ms ease}
.mp-book-btn:hover{background:#C4107F;border-color:#C4107F;color:#FFFFFF}
.mp-book-btn:focus-visible{outline:2px solid #F21EA1;outline-offset:3px}
/* phones: the hamburger is 12px from the edge and the button moves in with it; the tighter tracking keeps it inside a 320px screen. The
   landing hero's header already starts 10px down. */
@media (max-width:767px){ section#top > header > .mp-book-btn{top:0} }
@media (min-width:768px){
  .mp-book-btn{position:fixed;top:calc(var(--mp-header-bottom,0px) + 18px);right:86px;padding:0 22px;letter-spacing:0.12em;
    opacity:0;transform-origin:50% 50%;transition:transform 4200ms cubic-bezier(.5,-0.06,.4,1) 700ms,opacity 900ms ease,background-color 150ms ease}
  .mp-book-btn.is-ready{opacity:1}
  body.mp-rail-on .mp-book-btn{transform:translate(var(--genie-bx,0px),var(--genie-by,0px)) scale(0.7)}
  /* A subpage has no rail to park them above, and left at full size they covered the right edge of the text for the whole page. So once
     the reader has scrolled past the top (160px; js/editorial.js sets body.mp-docked) the pair shrinks to the same seven tenths and tucks
     up against the top of the screen, the hamburger first and the button a beat behind; scrolling back to the top restores them. */
  html.mp-norail .mp-menu-btn{transition:transform 900ms ease,opacity 900ms ease}
  html.mp-norail .mp-book-btn{transition:transform 900ms ease 120ms,opacity 900ms ease,background-color 150ms ease}
  body.mp-docked .mp-menu-btn{transform:translate(0,-12px) scale(0.7);transform-origin:100% 0}
  body.mp-docked .mp-book-btn{transform:translate(14px,-12px) scale(0.7);transform-origin:100% 0}
  @media (prefers-reduced-motion:reduce){ .mp-book-btn,body.mp-rail-on .mp-book-btn,html.mp-norail .mp-menu-btn,html.mp-norail .mp-book-btn{transition:opacity 200ms ease} .mp-book-btn,body.mp-rail-on .mp-book-btn{transform:none} }
}
/* wide screens (1400px and up): the hamburger's lines are drawn larger, and the button matches its 52px */
@media (min-width:1400px){
  .mp-menu-btn{width:52px;height:52px}
  .mp-menu-btn span,.mp-menu-btn span::before,.mp-menu-btn span::after{width:40px;height:4px}
  .mp-menu-btn span::before{top:-13px}
  .mp-menu-btn span::after{top:13px}
  .mp-menu-btn[aria-expanded="true"] span::before{transform:translateY(13px) rotate(45deg)}
  .mp-menu-btn[aria-expanded="true"] span::after{transform:translateY(-13px) rotate(-45deg)}
  .mp-book-btn{right:90px;height:52px}
}
header > nav#mp-nav.is-open{display:flex !important;position:fixed !important;inset:var(--mp-header-bottom,0px) 0 0 0;width:auto;max-width:none !important;z-index:1000;margin:0 !important;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;gap:32px !important;padding:96px 24px 48px;background:#1E3F3F;overflow-y:auto;font:500 19px/1.4 var(--font-body) !important;letter-spacing:0.18em;text-transform:uppercase;animation:mp-panel-in 450ms ease both}
@keyframes mp-panel-in{from{opacity:0}to{opacity:1}}
header > nav#mp-nav.is-open a{color:#FAF5E7 !important;text-align:center}
header > nav#mp-nav.is-open a[aria-current]{text-decoration:none}
header > nav#mp-nav.is-open a[aria-current] .mp-line{text-decoration:underline;text-decoration-color:#F21EA1;text-decoration-thickness:1.5px;text-underline-offset:10px}
body.mp-menu-open{overflow:hidden}
@media (min-width:768px){ #top > header{min-height:72px} }
@media (max-width:767px){ .mp-menu-btn{top:calc(var(--mp-header-bottom,0px) + 10px) !important;right:12px !important} }
/* The footer's Navigate column and the clinic logo beside it are gone (Jan, 20 Oct 2026; the column's markup is kept in index.html, commented out),
   so the directory starts at the top of the footer at every width. */

/* The Interview Question Bank's section headings stick beside their questions on wide screens (two columns). On a phone the grid is one
   column, so a stuck heading sat on top of its own questions with nothing behind it (found in the subpage pass, 21 Oct 2026); there it
   simply scrolls with its list. The selector matches on "sticky" alone: the build-in script writes a transition delay into the inline
   style, and the browser then re-serialises the attribute with spaces ("position: sticky; top: 168px"), so an exact-string selector stops
   matching the moment a heading reveals. They stick just under the pinned topic strip: js/editorial.js writes the strip's bottom edge into
   --mp-header-bottom while it is pinned (the design's 168px allowed for a pinned page header above the strip, which the page no longer has). */
section > div > h2[style*="sticky"]{top:calc(var(--mp-header-bottom,0px) + 16px) !important}
@media (max-width:767px){ section > div > h2[style*="sticky"]{position:static !important} }

/* ---------- The subpages (Jan, 20 Oct 2026) ----------
   The masthead (clinic logo on the sage illustration) is gone: the three pink lines are the menu, so the subpage's own header box keeps
   nothing but those and the Book button, and takes no room. The page starts at the top of the screen. */
body > div > header, body > div > div > header{padding:0 !important;min-height:0 !important;height:0;border:0 !important;background:none !important;overflow:visible !important}
/* A long section's heading column stays in view while its text is read (Signature Conversations, every conversation): the column is pinned
   near the top of the screen for as long as its section's text runs on beside it. Two columns and wider only; stacked, it simply scrolls. */
@media (min-width:700px){ .mp-aside{position:sticky;top:32px;align-self:start} }

/* ---------- The podcast carousel on the landing page (Jan, 21 Oct 2026) ----------
   The six artworks are tabs: the chosen one is full strength with a magenta rule beneath it, the rest sit back; the episode's details
   (show, title, date, description, Listen) fade in beneath. The details' two columns are the layout the latest-episode card already had. */
.mp-tabs{justify-content:center;align-items:center}
.mp-tab{display:block;padding:0;border:0;background:none;cursor:pointer;opacity:0.4;filter:saturate(0.6);transition:opacity 400ms ease,filter 400ms ease}
.mp-tab img{display:block;transition:width 400ms ease,height 400ms ease}
.mp-tab:hover,.mp-tab:focus-visible{opacity:0.75;filter:none}
/* the chosen tile is sharp, full strength and half as big again; the others sit back (Jan, 21 Oct 2026) */
.mp-tab[aria-selected="true"]{opacity:1;filter:none}
.mp-tab[aria-selected="true"] img{width:clamp(144px,13.5vw,198px) !important;height:clamp(144px,13.5vw,198px) !important}
.mp-tab:focus-visible{outline:2px solid #F21EA1;outline-offset:3px}
.mp-tabs-dots{margin:0 0 clamp(32px,4vw,48px)}
@media (prefers-reduced-motion:reduce){ .mp-tab,.mp-tab img{transition:none} }
.mp-panel{display:none}
.mp-panel.is-current{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(28px,4vw,64px);align-items:start;animation:mp-panel-fade 600ms ease}
.mp-panel:focus-visible{outline:2px solid #F21EA1;outline-offset:8px}
@keyframes mp-panel-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .mp-panel.is-current{animation:none} }

/* ---------- The book excerpt embed (Jan, 21 Oct 2026) ----------
   The flipbook sits in the band's own column, right of the rail's gutter, so the two never overlap. Its cover (see js/editorial.js) keeps the
   page scrolling under the pointer until the reader clicks into the book. */
.mp-embed{position:relative;width:100%}
.mp-embed iframe{display:block;width:100%;height:380px;border:0;background:#1E3F3F}
.mp-embed-cover{position:absolute;inset:0;cursor:pointer}
.mp-embed.is-live .mp-embed-cover{display:none}

/* ---------- The excerpts reel (Jan, 21 Oct 2026) ----------
   The four clip cards keep their design and sit in one row the reader swipes (or scrolls, or drags) through: one card in full, the next
   showing at the side at half strength, and four dots beneath that say how many there are and which is in view. */
.mp-reel-track{display:flex;gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding:4px 0;scroll-padding:0}
.mp-reel-track::-webkit-scrollbar{display:none}
.mp-reel-track:focus-visible{outline:2px solid #F21EA1;outline-offset:6px}
.mp-reel-item{flex:0 0 min(86%,640px);scroll-snap-align:start;transition:opacity 450ms ease}
html.mp-js .mp-reel-item:not(.is-current){opacity:0.45}
.mp-reel-dots{display:flex;justify-content:center;gap:14px;margin-top:clamp(24px,3vw,36px)}
/* The inactive dots are filled, in a quiet tone, so the magenta one reads as one of a row of six or four rather than a dot on its own
   (Jan, 21 Oct 2026); on a light band they are a teal grey, on a teal band a cream grey. */
.mp-reel-dots button{width:12px;height:12px;padding:0;border-radius:50%;border:0;background:rgba(250,245,231,0.38);cursor:pointer;transition:background-color 300ms ease}
.mp-dots--dark button{background:rgba(30,63,63,0.28)}
/* The last card never scrolls to the start: the row stops where it ends, so the third card stays in view, faded, beside the fourth
   in focus, and the pair that every other position shows is kept (Jan, 21 Oct 2026; the spacer that let it scroll alone is gone). */
.mp-reel-item:last-child{scroll-snap-align:end}
.mp-reel-dots button[aria-selected="true"]{background:#F21EA1}
.mp-reel-dots button:focus-visible{outline:2px solid #F21EA1;outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .mp-reel-track{scroll-behavior:auto} .mp-reel-item{transition:none} }

/* ---------- The woman who falls through the cracks (Jan, 21 Oct 2026) ----------
   In the Mission band the photograph of Dr Kirstey on the crossing is not simply there: a pixelated ghost of it holds its place, and the
   photograph itself spins in from the bottom left of the screen, driven by the scroll (js/editorial.js), to cover the ghost; scrolling back
   up lets it fall away again and the ghost shows through. The text column sits above its flight path. Reduce-motion: the photo is in place. */
.mp-crack-photo{will-change:transform;transform-origin:50% 50%}
@media (prefers-reduced-motion:reduce){ .mp-crack-photo{transform:none !important;opacity:1 !important} }

/* ---------- The Hierarchy of Healing reveal (Jan, 21 Oct 2026) ----------
   Repair, Rebalance, Reclaim, Release arrive one at a time, 1.6s apart, each heading lit magenta with its rule while it is the newest,
   then settling to bone as the next one arrives; Release is the last and stays lit (its own colour anyway). The rule sits on the heading,
   not the block, so the lighting is not held back by the block's reveal delay. Slow on purpose: the eye is meant to rest on each. */
[data-rv-lit] .mp-hh{transition:color 1500ms ease,border-color 1500ms ease}
[data-rv-lit] .mp-rv.is-lit .mp-hh{color:#F21EA1 !important;border-top-color:#F21EA1 !important} /* !important: the headings carry their bone colour inline */
@media (prefers-reduced-motion:reduce){ [data-rv-lit] .mp-hh{transition:none} }

/* ---------- The audience (Jan, 21 Oct 2026) ----------
   The one silhouette in the Enquiries band became a crowd across the whole width: thirteen copies of the same figure, each a brand colour
   (sage, grey, magenta, teal, off-white, near-black), different sizes, overlapping like a crowd at an event, fading in at their own moments.
   The outermost two look into the page; the rest look either way. The figure is the PNG used as a mask over a colour, so no new file.
   They sit above the photograph and beneath the words (the text column carries z-index 2). */
.mp-crowd{position:absolute;inset:0;overflow:hidden;z-index:1;pointer-events:none}
.mp-crowd-fig{position:absolute;bottom:-6%;aspect-ratio:420/630;background:var(--fig-c,#8A9797);opacity:var(--fig-o,0.55);
  -webkit-mask:url(../assets/botanicals/silhouette.png) center/contain no-repeat;mask:url(../assets/botanicals/silhouette.png) center/contain no-repeat}
.mp-crowd-fig.is-flipped{transform:scaleX(-1)}
html.mp-js .mp-crowd-fig{opacity:0}
html.mp-js .mp-rv.is-in .mp-crowd-fig{opacity:var(--fig-o,0.55);transition:opacity var(--fig-dur,2.4s) ease var(--fig-delay,0s)}
@media (prefers-reduced-motion:reduce){ html.mp-js .mp-crowd-fig{opacity:var(--fig-o,0.55);transition:none} }

/* ---------- The giveaway in the footer (Jan, 21 Oct 2026) ----------
   A big round magenta button for anyone who scrolls to the foot of the page: "Grab a copy of my 7-day Anti-Inflammatory Meal Plan",
   "Grab a copy" in the brand serif (Cormorant italic). The moment it is PRESSED (pointer down, before release) the disc starts shrinking
   and turning away while the passionflower opens in its place and stays; the release opens the meal plan in a window half the screen
   wide at the right, so the flower is still in view (js/editorial.js). The text stays white under the pointer and while pressed: the
   global link hover turned it magenta on magenta. Round on purpose (Jan's ask; the 2px rule is for boxes). Reduce-motion swaps without
   the turn. */
.mp-gift{position:relative;width:min(272px,70vw);aspect-ratio:1}
/* The link itself never moves or shrinks, so the release lands on it however long the press was held; the disc inside it is what turns. */
.mp-gift-btn{position:absolute;inset:0;display:block;border-radius:50%;color:#FFFFFF;text-decoration:none}
.mp-gift-disc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:28px;border-radius:50%;background:#F21EA1;
  box-shadow:0 18px 44px rgba(0,0,0,0.28);transition:transform 1100ms cubic-bezier(.6,-0.2,.4,1),opacity 900ms ease,background-color 150ms ease}
.mp-gift-script{display:block;font:italic 500 clamp(34px,3vw,42px)/1 var(--font-display);letter-spacing:0.01em;color:#FFFFFF}
.mp-gift-rest{display:block;font:500 19px/1.3 var(--font-body);letter-spacing:0.02em;color:#FFFFFF}
.mp-gift-btn:hover .mp-gift-disc{background:#C4107F}
.mp-gift-btn:hover,.mp-gift-btn:active,.mp-gift-btn:focus,.mp-gift-btn:hover *,.mp-gift-btn:active *,.mp-gift-btn:focus *{color:#FFFFFF !important}
.mp-gift-btn:focus-visible{outline:2px solid #FAF5E7;outline-offset:4px}
.mp-gift-flower{position:absolute;inset:-14%;width:128%;height:128%;object-fit:contain;opacity:0;transform:rotate(-50deg) scale(0.35);pointer-events:none;
  transition:opacity 1400ms ease 250ms,transform 1800ms cubic-bezier(.2,.8,.2,1) 250ms}
.mp-gift.is-picked .mp-gift-disc{transform:rotate(200deg) scale(0.15);opacity:0}
.mp-gift.is-picked .mp-gift-flower{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .mp-gift-disc,.mp-gift-flower{transition:opacity 200ms ease} .mp-gift-flower{transform:none} .mp-gift.is-picked .mp-gift-disc{transform:none} }

/* ---------- The reviews panel (Jan, 21 Oct 2026) ----------
   The Starwall widget in a native dialog: cream panel, full height on a phone, centred and capped on a wide screen. */
.mp-reviews-dialog{border:0;padding:clamp(56px,6vw,72px) clamp(16px,3vw,40px) clamp(24px,3vw,40px);background:#FAF5E7;color:#1E3F3F;width:min(1120px,100vw);max-width:100vw;max-height:100dvh;height:100dvh;margin:0 auto;overflow:auto;overscroll-behavior:contain}
@media (min-width:900px){ .mp-reviews-dialog{height:min(640px,90vh);max-height:90vh;margin:auto;border-radius:2px} }
.mp-reviews-dialog::backdrop{background:rgba(30,63,63,0.72)}
.mp-reviews-close{position:absolute;top:8px;right:8px;width:48px;height:48px;border:1px solid rgba(30,63,63,0.3);border-radius:2px;background:#FAF5E7;color:#1E3F3F;font:400 32px/1 var(--font-body);cursor:pointer;transition:color 280ms ease,border-color 280ms ease}
.mp-reviews-close:hover{color:#F21EA1;border-color:#F21EA1}
/* the vendor's own text is 13 to 16px; this site's floor is 19px everywhere (CLAUDE.md), so the widget is held to it */
.mp-reviews-dialog [class*="reviews-widget"]{font-size:max(19px,1em) !important}