/* =============================================================================
   LE PETIT CANDY CO — shared site styles (every page links this after ds/)
   LAYOUT GLUE — .lpc-* prefix. Colour and type come from the design system.
   No raw hex: every colour is a --lp-* token.
   ============================================================================= */

/* -------------------------------------------------------------------------
   PALETTE - olive main, berry accents (client, 2026-10-04)
   -------------------------------------------------------------------------
   From the client's swatch card: Olive with a Berry dot. ds/ is untouched:
   this block re-points the system's own --lp-* tokens.

     Dark olive #61602D  main: logo, buttons, headings, solid bands  (--lp-velvet)
     Olive      #A0964C  main fill: card shadows, dividers
     Berry      #90414D  accent: prices, links, ribbons, labels, badges (--lp-ruby)
     Sand       #C6A77E  tan accents

   The lighter Olive can't carry white text (2.8:1) or be read as text on
   the page (2.7:1), so anything with lettering on it uses Dark olive (6.3:1).
   Mixed shades: page #F6F3E6, card #FDFBF4, deep #3E3D1C, muted #5E5A3B,
   placeholder #E4DFC4, line #DCD5B4.
   ------------------------------------------------------------------------- */
:root {
  --lpc-moss:  #61602D;
  --lpc-olive: #A0964C;
  --lpc-berry: #90414D;
  --lpc-sand:  #C6A77E;

  --lp-velvet:  var(--lpc-moss);
  --lp-ruby:    var(--lpc-berry);
  --lp-cream:   #F6F3E6;
  --lp-coconut: #FDFBF4;
  --lp-wine:    #3E3D1C;
  --lp-muted:   #5E5A3B;
  --lp-line:    #DCD5B4;
}

/* end palette -------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   SANCTIONED DEVIATION FROM THE DESIGN SYSTEM — radius
   -------------------------------------------------------------------------
   ds/tokens/radius.css says the brand is square-edged (--lp-radius-none):
   "The brand is square-edged; curves belong to the lettering."

   Lucas decided on 2026-09-20 to go rounded instead, preferring the softer
   earlier direction. That call outranks the token here, because the same
   bundle's content proved unreliable.

   This is the ONLY place the system is overridden, and ds/ is untouched —
   so reverting is deleting this block. Do not scatter radii elsewhere.
   ------------------------------------------------------------------------- */
:root {
  --lpc-radius-md:   16px;
  --lpc-radius-lg:   28px;   /* cards, image slots */
  --lpc-radius-pill: 9999px; /* buttons, tags */
}
.lp-button { border-radius: var(--lpc-radius-pill); }
.lp-card   { border-radius: var(--lpc-radius-lg); }
.lp-tag    { border-radius: var(--lpc-radius-pill); }
/* end deviation ---------------------------------------------------------- */


*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--lp-surface-page);
  color: var(--lp-text-primary);
  font-family: var(--lp-font-text);
  font-size: var(--lp-text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

:focus-visible { outline: 2px solid var(--lp-focus-ring); outline-offset: 3px; }

.lpc-skip {
  position: absolute; left: -9999px;
  background: var(--lp-velvet); color: var(--lp-coconut);
  padding: var(--lp-space-3) var(--lp-space-5);
  border-radius: var(--lpc-radius-pill);
  font-family: var(--lp-font-display);
  letter-spacing: var(--lp-tracking-caps);
  text-transform: uppercase;
  z-index: 99;
}
.lpc-skip:focus { left: var(--lp-space-4); top: var(--lp-space-4); }

.lpc-section { padding: clamp(56px, 8vw, 104px) var(--lp-space-7); }
.lpc-wrap { width: 100%; max-width: 1180px; margin: 0 auto; }
.lpc-ground-cream   { background: var(--lp-surface-page); }
.lpc-ground-coconut { background: var(--lp-surface-card); }

/* --- header ------------------------------------------------------------- */
.lpc-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--lp-space-5);
  padding: var(--lp-space-4) var(--lp-space-7);
  border-bottom: 1px solid var(--lp-line);
  background: var(--lp-surface-card);
  position: sticky; top: 0; z-index: 10;
}
.lpc-nav { display: flex; gap: var(--lp-space-6); align-items: center; }
/* :not(.lp-button) is load-bearing. This selector is (0,1,1); the design
   system's .lp-button--primary is (0,1,0), so without the exclusion this rule
   wins and paints the button's label velvet-on-velvet — invisible. Same below
   for the mobile menu. The .lpc-* prefix prevents NAME collisions with .lp-*,
   not SPECIFICITY ones. */
.lpc-nav a:not(.lp-button) {
  font-family: var(--lp-font-display);
  font-size: 15px;
  letter-spacing: var(--lp-tracking-caps);
  text-transform: uppercase;
  color: var(--lp-velvet);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .15s ease;
}
.lpc-nav a:not(.lp-button):hover { border-bottom-color: var(--lp-velvet); }

.lpc-nav-toggle {
  display: none;
  min-height: 44px; min-width: 44px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--lp-line);
  border-radius: var(--lpc-radius-pill);
  color: var(--lp-velvet); cursor: pointer;
}
.lpc-nav-mobile { display: none; }
.lpc-nav-mobile.is-open {
  display: block;
  background: var(--lp-surface-card);
  border-bottom: 1px solid var(--lp-line);
  padding: 0 var(--lp-space-7) var(--lp-space-5);
}
.lpc-nav-mobile a:not(.lp-button) {
  display: block; padding: var(--lp-space-4) 0;
  border-bottom: 1px solid var(--lp-line);
  font-family: var(--lp-font-display); font-size: 18px;
  letter-spacing: var(--lp-tracking-caps); text-transform: uppercase;
  color: var(--lp-velvet); text-decoration: none;
}
.lpc-nav-mobile .lp-button { width: 100%; margin-top: var(--lp-space-4); border-bottom: 0; }

/* --- hero --------------------------------------------------------------- */
.lpc-hero { padding: clamp(40px, 6vw, 80px) var(--lp-space-7) clamp(56px, 8vw, 104px); }
.lpc-hero h1 {
  margin: 0 0 var(--lp-space-5);
  font-family: var(--lp-font-display);
  font-weight: 400;
  font-size: clamp(36px, 5.2vw, 60px);
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--lp-velvet);
}
.lpc-hero h1 .lpc-script {
  display: block;
  font-family: var(--lp-font-script);
  font-size: 1.3em;
  line-height: 1.05;
  text-transform: none;
  letter-spacing: 0;
}
.lpc-lede {
  margin: 0;
  font-size: var(--lp-text-lead);
  line-height: 1.6;
  color: var(--lp-muted);
  max-width: 46ch;
}
.lpc-actions { display: flex; flex-wrap: wrap; gap: var(--lp-space-3); margin-top: var(--lp-space-6); }

.lpc-meta {
  display: flex; flex-wrap: wrap; gap: var(--lp-space-3) var(--lp-space-6);
  margin-top: var(--lp-space-6); padding-top: var(--lp-space-5);
  border-top: 1px solid var(--lp-line);
  font-family: var(--lp-font-display);
  font-size: var(--lp-text-caption);
  letter-spacing: var(--lp-tracking-caps);
  text-transform: uppercase;
  color: var(--lp-muted);
}
.lpc-meta span { display: inline-flex; align-items: center; gap: var(--lp-space-2); }
.lpc-meta svg { color: var(--lp-velvet); flex: none; }


/* --- image slots -------------------------------------------------------- */
.lpc-ph {
  position: relative;
  border-radius: var(--lpc-radius-lg);
  background: #E4DFC4;   /* solid light olive, no fades (client, 2026-10-04) */
  border: 1px solid var(--lp-line);
  display: grid; place-items: center;
  overflow: hidden;
}
.lpc-ph::after {
  content: attr(data-label);
  font-family: var(--lp-font-display);
  font-size: 11px; letter-spacing: var(--lp-tracking-caps);
  text-transform: uppercase; color: var(--lp-text-deep);
  text-align: center; padding: 0 var(--lp-space-5); line-height: 1.7;
}

.lpc-chip {
  position: absolute; left: -16px; bottom: 30px;
  background: var(--lp-surface-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--lpc-radius-pill);
  padding: var(--lp-space-3) var(--lp-space-5);
  box-shadow: 0 10px 28px rgba(62, 61, 28, .12);
  display: flex; align-items: center; gap: var(--lp-space-2);
  font-size: 15px;
}
.lpc-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lp-ruby); flex: none; }

/* --- marquee ------------------------------------------------------------ */
.lpc-marquee {
  border-top: 1px solid var(--lp-line);
  border-bottom: 1px solid var(--lp-line);
  background: var(--lp-surface-card);
  padding: var(--lp-space-4) 0;
  overflow: hidden;
}
.lpc-track { display: flex; gap: var(--lp-space-7); width: max-content; animation: lpc-slide 42s linear infinite; }
.lpc-track span {
  display: inline-flex; align-items: center; gap: var(--lp-space-7);
  font-family: var(--lp-font-display);
  font-size: 18px; letter-spacing: var(--lp-tracking-caps);
  text-transform: uppercase; color: var(--lp-muted); white-space: nowrap;
}
.lpc-track span::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lp-velvet); opacity: .5; flex: none;
}
@keyframes lpc-slide { to { transform: translateX(-50%); } }

/* --- headings ----------------------------------------------------------- */
.lpc-head { max-width: 62ch; margin-bottom: clamp(36px, 5vw, 56px); }
.lpc-head.is-center { margin-inline: auto; text-align: center; }
.lpc-head.is-center .lp-heading { align-items: center; }
.lpc-head.is-center .lp-heading__description { margin-inline: auto; }

/* --- steps -------------------------------------------------------------- */
.lpc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lp-space-5); }
.lpc-step {
  background: var(--lp-surface-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--lpc-radius-lg);
  padding: var(--lp-space-6);
}
.lpc-step-num {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; margin-bottom: var(--lp-space-4);
  border-radius: 50%;
  background: var(--lp-velvet); color: var(--lp-coconut);
  font-family: var(--lp-font-display); font-size: 18px;
}
.lpc-step h3 {
  margin: 0 0 var(--lp-space-2);
  font-family: var(--lp-font-display); font-weight: 400; font-size: 21px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--lp-velvet);
}
.lpc-step p { margin: 0; color: var(--lp-muted); }

/* --- what you get ------------------------------------------------------- */
.lpc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lp-space-5); }
.lpc-card-media { aspect-ratio: 4 / 3; border-radius: 0; border: 0; border-bottom: 1px solid var(--lp-line); }
.lp-card { transition: transform .25s ease, box-shadow .25s ease; }
.lp-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(62, 61, 28, .10); }

/* --- events (velvet ground) --------------------------------------------- */
.lpc-onred { color: var(--lp-text-on-red); }
.lpc-onred .lp-heading__title { color: var(--lp-coconut); }
.lpc-onred .lp-heading__eyebrow { color: var(--lp-cream); opacity: .85; }
.lpc-onred .lp-heading__description { color: rgba(253, 251, 244, .78); }

.lpc-events { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lp-space-4); }
.lpc-event {
  background: rgba(253, 251, 244, .07);
  border: 1px solid rgba(253, 251, 244, .18);
  border-radius: var(--lpc-radius-lg);
  padding: var(--lp-space-6) var(--lp-space-5);
  transition: background-color .25s ease, transform .25s ease;
}
.lpc-event:hover { background: rgba(253, 251, 244, .12); transform: translateY(-3px); }
.lpc-event h3 {
  margin: 0 0 var(--lp-space-2);
  font-family: var(--lp-font-display); font-weight: 400; font-size: 20px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--lp-coconut);
}
.lpc-event p { margin: 0; font-size: 16px; color: rgba(253, 251, 244, .72); }

.lpc-btn-invert.lp-button--primary { background: var(--lp-coconut); color: var(--lp-velvet); }
.lpc-btn-invert.lp-button--primary:hover { background: var(--lp-cream); }

/* --- pricing ------------------------------------------------------------ */
.lpc-plans {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--lp-space-5);
  margin-bottom: clamp(40px, 5vw, 68px);
}
.lpc-plan {
  display: flex; flex-direction: column; gap: var(--lp-space-3);
  background: var(--lp-surface-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--lpc-radius-lg);
  padding: var(--lp-space-6);
}
.lpc-plan .lp-tag { align-self: flex-start; }
.lpc-plan h3 {
  margin: 0;
  font-family: var(--lp-font-display); font-weight: 400; font-size: 26px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--lp-velvet);
}
.lpc-plan p { margin: 0; color: var(--lp-muted); }
.lpc-plan-for {
  margin-top: auto; padding-top: var(--lp-space-4);
  border-top: 1px solid var(--lp-line);
  font-size: 15px; font-style: italic;
}
.lpc-subhead { margin-bottom: var(--lp-space-5); }
.lpc-price-grid {
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
.lpc-price-box {
  background: var(--lp-surface-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--lpc-radius-lg);
  padding: var(--lp-space-6);
  text-align: center;
}
.lpc-price-amount {
  display: block;
  font-family: var(--lp-font-display);
  font-size: 58px; line-height: 1; color: var(--lp-velvet);
  font-variant-numeric: tabular-nums;
}
.lpc-price-from,
.lpc-price-unit {
  display: block;
  font-family: var(--lp-font-display);
  font-size: var(--lp-text-caption);
  letter-spacing: var(--lp-tracking-caps);
  text-transform: uppercase; color: var(--lp-muted);
}
.lpc-price-from { margin-bottom: var(--lp-space-3); }
.lpc-price-unit { margin-top: var(--lp-space-3); }
.lpc-price-todo {
  margin: var(--lp-space-4) 0 0;
  padding-top: var(--lp-space-3);
  border-top: 1px solid var(--lp-line);
  font-size: 14px; font-style: italic; color: var(--lp-muted);
}
.lpc-vars li {
  display: flex; gap: var(--lp-space-4); align-items: flex-start;
  padding: var(--lp-space-4) 0; border-bottom: 1px solid var(--lp-line);
}
.lpc-vars li:last-child { border-bottom: 0; }
.lpc-vars h3 {
  margin: 0 0 2px;
  font-family: var(--lp-font-display); font-weight: 400; font-size: 18px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--lp-velvet);
}
.lpc-vars p { margin: 0; font-size: 16px; color: var(--lp-muted); }
.lpc-vars-icon {
  width: 36px; height: 36px; flex: none;
  border-radius: 50%; background: var(--lp-cream);
  display: grid; place-items: center; color: var(--lp-velvet);
}

/* --- service area ------------------------------------------------------- */
.lpc-area-grid {
  display: grid; grid-template-columns: 1fr .85fr;
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
.lpc-area-media .lpc-ph { aspect-ratio: 4 / 3; }
.lpc-tags { display: flex; flex-wrap: wrap; gap: var(--lp-space-2); margin-top: var(--lp-space-5); }

/* --- interstitial ------------------------------------------------------- */
.lpc-interstitial {
  padding: clamp(56px, 8vw, 104px) var(--lp-space-7);
  display: grid; place-items: center; gap: var(--lp-space-6);
}

/* --- form --------------------------------------------------------------- */
.lpc-form-shell {
  background: var(--lp-surface-card);
  border: 1px solid var(--lp-line);
  border-radius: var(--lpc-radius-lg);
  padding: clamp(24px, 4vw, 44px);
  max-width: 780px; margin: 0 auto;
}
.lpc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lp-space-4); }
.lpc-field { display: flex; flex-direction: column; gap: var(--lp-space-2); margin-bottom: var(--lp-space-4); }
.lpc-field label {
  font-family: var(--lp-font-display);
  font-size: var(--lp-text-caption);
  letter-spacing: var(--lp-tracking-caps);
  text-transform: uppercase; color: var(--lp-muted);
}
.lpc-field input, .lpc-field select, .lpc-field textarea {
  font-family: var(--lp-font-text);
  font-size: var(--lp-text-body);
  color: var(--lp-text-primary);
  background: var(--lp-surface-page);
  border: 1px solid var(--lp-line);
  border-radius: var(--lpc-radius-md);
  padding: var(--lp-space-3) var(--lp-space-4);
  min-height: 48px; width: 100%;
}
.lpc-field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.lpc-field input:focus, .lpc-field select:focus, .lpc-field textarea:focus {
  outline: none; border-color: var(--lp-velvet);
  box-shadow: 0 0 0 3px rgba(97, 96, 45, .12);
}
.lpc-hp { position: absolute; left: -9999px; }
.lpc-form-note { margin: var(--lp-space-4) 0 0; font-size: 15px; font-style: italic; color: var(--lp-muted); }

/* --- form states -------------------------------------------------------- */
.lpc-form-success { text-align: center; padding: var(--lp-space-5) 0; }
.lpc-form-success-mark {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px; margin-bottom: var(--lp-space-5);
  border-radius: 50%;
  background: var(--lp-velvet); color: var(--lp-coconut);
}
.lpc-form-success h3 {
  margin: 0 0 var(--lp-space-3);
  font-family: var(--lp-font-display); font-weight: 400; font-size: 30px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--lp-velvet);
}
.lpc-form-success p { margin: 0 auto; max-width: 44ch; color: var(--lp-muted); }
.lpc-form-error {
  margin: var(--lp-space-4) 0 0; padding: var(--lp-space-3) var(--lp-space-4);
  border: 1px solid var(--lp-velvet); border-radius: var(--lpc-radius-md);
  background: var(--lp-cream);
  font-size: 15px; color: var(--lp-text-deep);
}
.lp-button[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* --- footer ------------------------------------------------------------- */
.lpc-footer { padding: clamp(48px, 7vw, 88px) var(--lp-space-7) var(--lp-space-6); color: var(--lp-text-on-red); }
.lpc-footer-grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--lp-space-7);
  padding-bottom: var(--lp-space-7);
  border-bottom: 1px solid rgba(253, 251, 244, .2);
}
.lpc-footer p { margin: var(--lp-space-4) 0 0; font-size: 16px; color: rgba(253, 251, 244, .75); max-width: 34ch; }
.lpc-footer h4 {
  margin: 0 0 var(--lp-space-4);
  font-family: var(--lp-font-display); font-weight: 400;
  font-size: var(--lp-text-caption);
  letter-spacing: var(--lp-tracking-caps); text-transform: uppercase;
  color: rgba(253, 251, 244, .6);
}
.lpc-footer li { margin-bottom: var(--lp-space-3); }
.lpc-footer li a { font-size: 16px; color: rgba(253, 251, 244, .82); text-decoration: none; }
.lpc-footer li a:hover { color: var(--lp-coconut); text-decoration: underline; text-underline-offset: 3px; }
.lpc-footer-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--lp-space-3);
  padding-top: var(--lp-space-5);
  font-size: 14px; color: rgba(253, 251, 244, .55);
}
.lpc-footer-base a { color: inherit; }

/* --- mobile call bar ---------------------------------------------------- */
.lpc-callbar { display: none; }

/* --- reveal ------------------------------------------------------------- */
.lpc-reveal { opacity: 0; transform: translateY(14px); transition: opacity .65s ease, transform .65s ease; }
.lpc-reveal.is-in { opacity: 1; transform: none; }

/* --- responsive --------------------------------------------------------- */
@media (max-width: 1080px) { .lpc-events { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 940px)  { .lpc-steps, .lpc-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px)  { .lpc-plans { grid-template-columns: 1fr; } }
@media (max-width: 1060px) {
  .lpc-nav { display: none; }
  .lpc-nav-toggle { display: inline-flex; }
}
@media (max-width: 860px) {
  .lpc-price-grid, .lpc-area-grid { grid-template-columns: 1fr; }
  .lpc-footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .lpc-section, .lpc-hero, .lpc-interstitial, .lpc-footer, .lpc-header { padding-inline: var(--lp-space-5); }
  .lpc-nav-mobile.is-open { padding-inline: var(--lp-space-5); }
  .lpc-steps, .lpc-grid-3, .lpc-events, .lpc-field-row { grid-template-columns: 1fr; }
  body { padding-bottom: 66px; }
  .lpc-callbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    align-items: center; justify-content: center; gap: var(--lp-space-2);
    min-height: 58px;
    background: var(--lp-velvet); color: var(--lp-coconut);
    font-family: var(--lp-font-display); font-size: 17px;
    letter-spacing: var(--lp-tracking-caps); text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 -4px 18px rgba(62, 61, 28, .22);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .lpc-reveal { opacity: 1 !important; transform: none !important; }
  .lpc-track { animation: none; }
}

/* =============================================================================
   v4 — multi-page site: announcement bar, cart, candy builder, estimator,
   calendar, events, FAQ, checkout. Same rules: tokens only, .lpc-* only,
   radii only from the deviation block at the top.
   ============================================================================= */

.lpc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lpc-icon svg { display: block; }

/* --- running announcement bar (above the header) ------------------------- */
.lpc-announce {
  color: var(--lp-text-on-red);
  overflow: hidden;
  padding: 9px 0;
  font-family: var(--lp-font-display);
  font-size: 14px; letter-spacing: var(--lp-tracking-caps); text-transform: uppercase;
}
.lpc-announce .lpc-track { animation-duration: 38s; gap: var(--lp-space-6); }
.lpc-announce .lpc-track span { color: var(--lp-wine); font-size: 14px; gap: var(--lp-space-6); }
.lpc-announce .lpc-track span::after { background: var(--lp-wine); opacity: .6; width: 5px; height: 5px; }
.lpc-announce a { color: inherit; text-decoration: none; }
.lpc-announce:hover .lpc-track { animation-play-state: paused; }

/* --- header additions: active link, cart button --------------------------- */
.lpc-nav a[aria-current="page"]:not(.lp-button) { border-bottom-color: var(--lp-velvet); }
.lpc-nav-mobile a[aria-current="page"]:not(.lp-button) { font-style: italic; }
.lpc-header-tools { display: flex; align-items: center; gap: var(--lp-space-3); }
.lpc-cart-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  background: none; border: 1px solid var(--lp-line);
  border-radius: var(--lpc-radius-pill);
  color: var(--lp-velvet); cursor: pointer;
}
.lpc-cart-btn:hover { background: var(--lp-cream); }
.lpc-cart-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--lpc-radius-pill);
  background: var(--lp-velvet); color: var(--lp-coconut);
  font-family: var(--lp-font-display); font-size: 12px; line-height: 1;
}
.lpc-cart-count[hidden] { display: none; }
@keyframes lpc-pop { 50% { transform: scale(1.3); } }
.lpc-cart-count.is-bump { animation: lpc-pop .35s ease; }

/* --- preview ribbon (shown while LPC.preview is true) --------------------- */
.lpc-preview {
  padding: var(--lp-space-2) var(--lp-space-7);
  background: var(--lp-cream);
  border-bottom: 1px solid var(--lp-velvet);
  text-align: center;
  font-size: 15px; font-style: italic; color: var(--lp-text-deep);
}

/* --- page head (inner pages) ---------------------------------------------- */
.lpc-pagehead { padding: clamp(40px, 6vw, 80px) var(--lp-space-7) clamp(28px, 4vw, 48px); text-align: center; }
.lpc-pagehead h1 {
  margin: 0 0 var(--lp-space-4);
  font-family: var(--lp-font-display); font-weight: 400;
  font-size: clamp(34px, 4.6vw, 54px); line-height: 1.05;
  text-transform: uppercase; letter-spacing: .01em; color: var(--lp-velvet);
}
.lpc-pagehead h1 .lpc-script {
  display: block;
  font-family: var(--lp-font-script); font-size: 1.25em;
  text-transform: none; letter-spacing: 0;
}
.lpc-pagehead .lpc-lede { margin: 0 auto; }
.lpc-sweetline {
  display: block; margin-top: var(--lp-space-5);
  font-family: var(--lp-font-script); font-size: 30px; line-height: 1.1;
  color: var(--lp-velvet);
}
.lpc-center { text-align: center; }
.lpc-cta-row { display: flex; flex-wrap: wrap; gap: var(--lp-space-3); justify-content: center; margin-top: clamp(32px, 4vw, 48px); }

/* --- running photo banner ------------------------------------------------- */
.lpc-photostrip { overflow: hidden; padding: var(--lp-space-5) 0; background: var(--lp-surface-card); border-block: 1px solid var(--lp-line); }
.lpc-photostrip .lpc-track { gap: var(--lp-space-4); animation-duration: 60s; }
.lpc-photostrip:hover .lpc-track { animation-play-state: paused; }
.lpc-photo-tile {
  flex: none; width: clamp(170px, 20vw, 240px); aspect-ratio: 4 / 5;
  border-radius: var(--lpc-radius-lg); overflow: hidden;
}
.lpc-photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.lpc-photo-tile.lpc-ph { display: grid; }

/* --- offerings ------------------------------------------------------------ */
.lpc-offer-link {
  margin-top: auto; padding-top: var(--lp-space-2);
  font-family: var(--lp-font-display); font-size: 15px;
  letter-spacing: var(--lp-tracking-caps); text-transform: uppercase;
  color: var(--lp-velvet); text-underline-offset: 4px;
}
.lp-card__body { flex: 1; }

/* --- photo frames (home page, click-through stack) -----------------------
   Every photo sits in an oval frame (client, 2026-10-04).
   The frame paper is .lpc-frame-shape; the figure only positions, tilts and
   casts the shadow (drop-shadow, so it follows masked edges too). */
#moments { overflow: hidden; }   /* the leaving frame flies off to the right */
.lpc-moments { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.lpc-polaroids {
  display: block; position: relative; width: min(420px, calc(100% - 40px)); height: clamp(400px, 48vw, 480px); margin: 0 auto;
  border: 0; background: none; padding: 0; cursor: pointer;
}
.lpc-polaroid {
  position: absolute; left: 50%; top: 50%; margin: 0;
  width: var(--w, 70%);
  filter: drop-shadow(0 12px 22px rgba(62, 61, 28, .18));
  transform: translate(-50%, -50%) rotate(var(--r, 0deg)) translate(var(--x, 0), var(--y, 0));
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
}
.lpc-frame-shape { background: var(--lp-coconut); padding: 12px; }
.lpc-frame-shape .lpc-ph, .lpc-frame-shape img { width: 100%; aspect-ratio: var(--ar, 1); object-fit: cover; border-radius: var(--photo-r, 4px); }
.lpc-polaroid figcaption {
  padding-top: var(--lp-space-3); text-align: center;
  font-family: var(--lp-font-script); font-size: 30px; line-height: 1.1; color: var(--lp-velvet);
}
.lpc-polaroid[aria-hidden="true"] figcaption { visibility: hidden; }   /* only the top frame's caption shows */
.lpc-polaroid.is-leaving { transform: translate(-50%, -50%) rotate(14deg) translate(120%, -6%); opacity: 0; }

/* oval - every photo in the stack, framed by a thin Berry line - no white
   mat, no shadow, no caption (client, 2026-10-04) */
.lpc-polaroid.is-oval { --w: 66%; --ar: 4 / 5; --photo-r: 50%; filter: none; }
.lpc-polaroid.is-oval .lpc-frame-shape { border-radius: 50%; padding: 0; background: none; border: 1.5px solid var(--lpc-berry); }
.lpc-polaroid.is-oval .lpc-frame-shape > .lpc-ph { border: 0; }

/* --- meet the founders: one photo left, story right ----------------------- */
.lpc-founder { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start;   /* text top lines up with the photo top (client, 2026-10-04) */ }
.lpc-founder .lpc-ph { aspect-ratio: 4 / 5; }
.lpc-founder-sign { display: block; margin-top: var(--lp-space-5); font-family: var(--lp-font-script); font-size: 46px; line-height: 1; color: var(--lp-velvet); }
.lpc-todo { font-size: 15px; font-style: italic; color: var(--lp-muted); border-top: 1px solid var(--lp-line); padding-top: var(--lp-space-3); margin-top: var(--lp-space-4); }

/* --- events list (pop-ups) ------------------------------------------------ */
.lpc-eventlist { display: grid; gap: var(--lp-space-4); }
.lpc-eventitem {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--lp-space-5); align-items: center;
  background: var(--lp-surface-card); border: 1px solid var(--lp-line);
  border-radius: var(--lpc-radius-lg); padding: var(--lp-space-5) var(--lp-space-6);
}
.lpc-eventdate {
  display: grid; place-items: center; width: 74px; height: 74px;
  border-radius: 50%; background: var(--lp-velvet); color: var(--lp-coconut);
  font-family: var(--lp-font-display); text-transform: uppercase; line-height: 1;
}
.lpc-eventdate b { display: block; font-weight: 400; font-size: 28px; }
.lpc-eventdate small { display: block; font-size: 12px; letter-spacing: var(--lp-tracking-caps); margin-top: 4px; }
.lpc-eventitem h3 {
  margin: 0 0 2px; font-family: var(--lp-font-display); font-weight: 400; font-size: 21px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--lp-velvet);
}
.lpc-eventitem p { margin: 0; color: var(--lp-muted); }
.lpc-eventitem .lpc-icon { color: var(--lp-velvet); }
.lpc-empty {
  text-align: center; padding: var(--lp-space-7) var(--lp-space-5);
  border: 1px solid var(--lp-line); border-radius: var(--lpc-radius-lg);
  background: var(--lp-surface-card);
}
.lpc-empty .lpc-icon { display: inline-block; color: var(--lp-velvet); margin-bottom: var(--lp-space-3); }
.lpc-empty h3 { margin: 0 0 var(--lp-space-2); font-family: var(--lp-font-display); font-weight: 400; font-size: 24px; text-transform: uppercase; letter-spacing: .04em; color: var(--lp-velvet); }
.lpc-empty p { margin: 0 auto; max-width: 46ch; color: var(--lp-muted); }

/* --- candy legend (what each candy means) --------------------------------- */
.lpc-legend { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--lp-space-4); }
.lpc-legend-item {
  text-align: center; padding: var(--lp-space-6) var(--lp-space-4);
  background: rgba(253, 251, 244, .07); border: 1px solid rgba(253, 251, 244, .18);
  border-radius: var(--lpc-radius-lg);
}
.lpc-legend-item .lpc-icon {
  display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--lp-space-3);
  border-radius: 50%; background: var(--lp-coconut); color: var(--lp-velvet);
}
.lpc-legend-item h3 { margin: 0 0 4px; font-family: var(--lp-font-display); font-weight: 400; font-size: 18px; text-transform: uppercase; letter-spacing: .05em; color: var(--lp-coconut); }
.lpc-legend-item p { margin: 0; font-size: 15px; color: rgba(253, 251, 244, .75); }

/* --- instagram carousel --------------------------------------------------- */
.lpc-ig-top { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--lp-space-5); flex-wrap: wrap; margin-bottom: var(--lp-space-6); }
.lpc-ig-top .lpc-head { margin-bottom: 0; }
.lpc-ig-arrows { display: flex; gap: var(--lp-space-2); }
.lpc-round-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--lp-velvet);
  background: transparent; color: var(--lp-velvet); cursor: pointer;
}
.lpc-round-btn:hover { background: var(--lp-cream); }
.lpc-round-btn[disabled] { opacity: .35; cursor: default; }
.lpc-ig {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 26vw, 290px);
  gap: var(--lp-space-4); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px;
}
.lpc-ig::-webkit-scrollbar { display: none; }
.lpc-ig a {
  scroll-snap-align: start; display: block; aspect-ratio: 4 / 5;   /* Instagram portrait */
  border-radius: var(--lpc-radius-lg); overflow: hidden; position: relative;
}
.lpc-ig img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.lpc-ig a:hover img { transform: scale(1.04); }
.lpc-ig a.lpc-ph { display: grid; }

/* --- "what are we celebrating?" ------------------------------------------- */
.lpc-celebrate { text-align: center; }
.lpc-celebrate h2 {
  margin: 0; font-family: var(--lp-font-script); font-weight: 400;
  font-size: clamp(44px, 6vw, 72px); line-height: 1.05; color: var(--lp-coconut);
}
.lpc-celebrate p { margin: var(--lp-space-3) auto 0; max-width: 48ch; color: rgba(253, 251, 244, .8); font-size: var(--lp-text-lead); }
.lpc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--lp-space-3); margin: var(--lp-space-6) 0; }
.lpc-chip-link {
  display: inline-flex; align-items: center; gap: var(--lp-space-2);
  min-height: 48px; padding: var(--lp-space-2) var(--lp-space-5);
  border: 1px solid rgba(253, 251, 244, .4); border-radius: var(--lpc-radius-pill);
  color: var(--lp-coconut); text-decoration: none;
  font-family: var(--lp-font-display); font-size: 16px;
  letter-spacing: var(--lp-tracking-caps); text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
}
.lpc-chip-link:hover { background: var(--lp-coconut); color: var(--lp-velvet); }

/* --- notify (pop-up alerts) ----------------------------------------------- */
.lpc-notify { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 4vw, 60px); align-items: center; }
.lpc-notify-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--lp-space-3); align-items: end; }
.lpc-notify-form .lpc-field { margin: 0; }

/* --- treats of the week --------------------------------------------------- */
.lpc-candy-media {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: var(--lp-cream);
  color: var(--lp-velvet); border-bottom: 1px solid var(--lp-line);
}
.lpc-candy-media img { width: 100%; height: 100%; object-fit: cover; }
.lpc-candy-media .lpc-icon svg { width: 54px; height: 54px; }
.lpc-type-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lpc-type-tags .lp-tag { font-size: 11px; padding: 2px 10px; }

/* --- candy builder -------------------------------------------------------- */
.lpc-builder { display: grid; grid-template-columns: 1fr 340px; gap: clamp(24px, 3vw, 44px); align-items: start; }
.lpc-stepbar { display: flex; gap: var(--lp-space-2); margin-bottom: var(--lp-space-6); flex-wrap: wrap; }
.lpc-stepbar button {
  display: inline-flex; align-items: center; gap: var(--lp-space-2);
  min-height: 44px; padding: var(--lp-space-2) var(--lp-space-4);
  border: 1px solid var(--lp-line); border-radius: var(--lpc-radius-pill);
  background: var(--lp-surface-card); color: var(--lp-muted); cursor: pointer;
  font-family: var(--lp-font-display); font-size: 15px;
  letter-spacing: var(--lp-tracking-caps); text-transform: uppercase;
}
.lpc-stepbar button b {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--lp-cream); color: var(--lp-velvet); font-weight: 400; font-size: 13px;
}
.lpc-stepbar button[aria-current="step"] { border-color: var(--lp-velvet); color: var(--lp-velvet); }
.lpc-stepbar button[aria-current="step"] b, .lpc-stepbar button.is-done b { background: var(--lp-velvet); color: var(--lp-coconut); }
.lpc-stepbar button[disabled] { opacity: .5; cursor: not-allowed; }

.lpc-stage[hidden] { display: none; }
.lpc-stage h2 { margin: 0 0 var(--lp-space-2); font-family: var(--lp-font-display); font-weight: 400; font-size: 28px; text-transform: uppercase; letter-spacing: .03em; color: var(--lp-velvet); }
.lpc-stage > p { margin: 0 0 var(--lp-space-5); color: var(--lp-muted); }
.lpc-stage-nav { display: flex; justify-content: space-between; gap: var(--lp-space-3); margin-top: var(--lp-space-6); flex-wrap: wrap; }

.lpc-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lp-space-4); }
.lpc-options.is-3 { grid-template-columns: repeat(3, 1fr); }
.lpc-option { position: relative; display: block; cursor: pointer; }
.lpc-option input { position: absolute; opacity: 0; pointer-events: none; }
.lpc-option-card {
  display: flex; flex-direction: column; gap: var(--lp-space-2); height: 100%;
  padding: var(--lp-space-5);
  background: var(--lp-surface-card); border: 1px solid var(--lp-line);
  border-radius: var(--lpc-radius-lg);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.lpc-option:hover .lpc-option-card { transform: translateY(-2px); }
.lpc-option input:checked + .lpc-option-card { border-color: var(--lp-velvet); box-shadow: 0 0 0 2px var(--lp-velvet); }
.lpc-option input:focus-visible + .lpc-option-card { outline: 2px solid var(--lp-focus-ring); outline-offset: 3px; }
.lpc-option-card .lpc-icon { color: var(--lp-velvet); }
.lpc-option-card h3 { margin: 0; font-family: var(--lp-font-display); font-weight: 400; font-size: 21px; text-transform: uppercase; letter-spacing: .05em; color: var(--lp-velvet); }
.lpc-option-card p { margin: 0; font-size: 16px; color: var(--lp-muted); }
.lpc-option-meta { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: var(--lp-space-3); padding-top: var(--lp-space-3); border-top: 1px solid var(--lp-line); }
.lpc-option-meta small { font-family: var(--lp-font-display); font-size: var(--lp-text-caption); letter-spacing: var(--lp-tracking-caps); text-transform: uppercase; color: var(--lp-muted); }

.lpc-filters { display: flex; flex-wrap: wrap; gap: var(--lp-space-2); margin-bottom: var(--lp-space-5); }
.lpc-filter {
  min-height: 40px; padding: 6px var(--lp-space-4);
  border: 1px solid var(--lp-line); border-radius: var(--lpc-radius-pill);
  background: var(--lp-surface-card); color: var(--lp-velvet); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--lp-font-display); font-size: 14px;
  letter-spacing: var(--lp-tracking-caps); text-transform: uppercase;
}
.lpc-filter .lpc-icon svg { width: 16px; height: 16px; }
.lpc-filter[aria-pressed="true"] { background: var(--lp-velvet); border-color: var(--lp-velvet); color: var(--lp-coconut); }

.lpc-candy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lp-space-4); }
.lpc-candy-grid .lpc-option-card { padding: 0; overflow: hidden; gap: 0; }
.lpc-candy-grid .lpc-candy-media { aspect-ratio: 16 / 10; }
.lpc-candy-grid .lpc-option-body { padding: var(--lp-space-4); display: flex; flex-direction: column; gap: 6px; }
.lpc-candy-grid h3 { font-size: 18px; }
.lpc-candy-grid p { font-size: 15px; }
.lpc-option input:disabled + .lpc-option-card { opacity: .45; cursor: not-allowed; }

.lpc-summary {
  position: sticky; top: 96px;
  background: var(--lp-surface-card); border: 1px solid var(--lp-line);
  border-radius: var(--lpc-radius-lg); padding: var(--lp-space-6);
}
.lpc-summary h2 { margin: 0 0 var(--lp-space-4); font-family: var(--lp-font-display); font-weight: 400; font-size: 22px; text-transform: uppercase; letter-spacing: .05em; color: var(--lp-velvet); }
.lpc-summary dl { margin: 0; }
.lpc-summary dt { font-family: var(--lp-font-display); font-size: var(--lp-text-caption); letter-spacing: var(--lp-tracking-caps); text-transform: uppercase; color: var(--lp-muted); margin-top: var(--lp-space-4); }
.lpc-summary dd { margin: 2px 0 0; color: var(--lp-text-deep); }
.lpc-summary .lp-button { width: 100%; margin-top: var(--lp-space-5); }
.lpc-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--lp-space-5); padding-top: var(--lp-space-4); border-top: 1px solid var(--lp-line);
  font-family: var(--lp-font-display); text-transform: uppercase; letter-spacing: var(--lp-tracking-caps); color: var(--lp-velvet);
}
.lpc-total-row strong { font-weight: 400; font-size: 30px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.lpc-added { margin: var(--lp-space-3) 0 0; text-align: center; font-style: italic; color: var(--lp-velvet); }

.lpc-qty { display: inline-flex; align-items: center; border: 1px solid var(--lp-line); border-radius: var(--lpc-radius-pill); }
.lpc-qty button { width: 36px; height: 36px; border: 0; background: none; color: var(--lp-velvet); cursor: pointer; font-size: 18px; border-radius: 50%; }
.lpc-qty button:hover { background: var(--lp-cream); }
.lpc-qty button[disabled] { opacity: .35; cursor: default; background: none; }
.lpc-qty output { min-width: 54px; text-align: center; font-family: var(--lp-font-display); font-size: 17px; font-variant-numeric: tabular-nums; }

/* --- cart drawer ---------------------------------------------------------- */
.lpc-scrim { position: fixed; inset: 0; z-index: 140; background: rgba(62, 61, 28, .38); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.lpc-scrim.is-open { opacity: 1; pointer-events: auto; }
.lpc-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 150;
  width: min(420px, 100%);
  display: flex; flex-direction: column;
  background: var(--lp-surface-page);
  box-shadow: -12px 0 40px rgba(62, 61, 28, .2);
  transform: translateX(105%); transition: transform .32s cubic-bezier(.2, .8, .2, 1);
  visibility: hidden;
}
.lpc-drawer.is-open { transform: none; visibility: visible; }
.lpc-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: var(--lp-space-5) var(--lp-space-6); border-bottom: 1px solid var(--lp-line); background: var(--lp-surface-card); }
.lpc-drawer-head h2 { margin: 0; font-family: var(--lp-font-display); font-weight: 400; font-size: 22px; text-transform: uppercase; letter-spacing: .06em; color: var(--lp-velvet); }
.lpc-drawer-body { flex: 1; overflow-y: auto; padding: var(--lp-space-5) var(--lp-space-6); }
.lpc-drawer-foot { padding: var(--lp-space-5) var(--lp-space-6); border-top: 1px solid var(--lp-line); background: var(--lp-surface-card); }
.lpc-drawer-foot .lp-button { width: 100%; margin-top: var(--lp-space-4); }
.lpc-line { display: grid; grid-template-columns: 1fr auto; gap: var(--lp-space-2) var(--lp-space-4); padding: var(--lp-space-4) 0; border-bottom: 1px solid var(--lp-line); }
.lpc-line h3 { margin: 0; font-family: var(--lp-font-display); font-weight: 400; font-size: 18px; text-transform: uppercase; letter-spacing: .05em; color: var(--lp-velvet); }
.lpc-line p { margin: 0; font-size: 15px; color: var(--lp-muted); grid-column: 1 / -1; }
.lpc-line-price { font-family: var(--lp-font-display); font-size: 18px; color: var(--lp-velvet); font-variant-numeric: tabular-nums; }
.lpc-line-tools { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.lpc-linkbtn { background: none; border: 0; padding: 4px 0; color: var(--lp-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; font-size: 15px; }
.lpc-linkbtn:hover { color: var(--lp-velvet); }
.lpc-sums { margin: 0; }
.lpc-sums div { display: flex; justify-content: space-between; padding: 4px 0; color: var(--lp-muted); font-size: 16px; }
.lpc-sums div.is-total { margin-top: var(--lp-space-2); padding-top: var(--lp-space-3); border-top: 1px solid var(--lp-line); font-family: var(--lp-font-display); font-size: 22px; color: var(--lp-velvet); text-transform: uppercase; letter-spacing: .04em; }
.lpc-sums dd { margin: 0; font-variant-numeric: tabular-nums; }
.lpc-drawer-empty { text-align: center; padding: var(--lp-space-8) 0; color: var(--lp-muted); }
.lpc-drawer-empty .lpc-icon { display: inline-block; color: var(--lp-velvet); margin-bottom: var(--lp-space-3); }
.lpc-drawer-empty p { margin: 0 0 var(--lp-space-5); }

/* --- pricing estimator ---------------------------------------------------- */
.lpc-est { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.lpc-est-panel { background: var(--lp-surface-card); border: 1px solid var(--lp-line); border-radius: var(--lpc-radius-lg); padding: clamp(24px, 3vw, 40px); }
.lpc-est-panel + .lpc-est-panel { display: flex; flex-direction: column; }
.lpc-est-label { display: block; margin-bottom: var(--lp-space-3); font-family: var(--lp-font-display); font-size: var(--lp-text-caption); letter-spacing: var(--lp-tracking-caps); text-transform: uppercase; color: var(--lp-muted); }
.lpc-est-group + .lpc-est-group { margin-top: var(--lp-space-6); }
.lpc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--lp-line); border-radius: var(--lpc-radius-pill); background: var(--lp-surface-page); }
.lpc-seg label { position: relative; cursor: pointer; }
.lpc-seg input { position: absolute; opacity: 0; }
.lpc-seg span {
  display: grid; place-items: center; min-height: 44px; padding: 0 var(--lp-space-3); text-align: center;
  border-radius: var(--lpc-radius-pill);
  font-family: var(--lp-font-display); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--lp-velvet);
}
.lpc-seg input:checked + span { background: var(--lp-velvet); color: var(--lp-coconut); }
.lpc-seg input:focus-visible + span { outline: 2px solid var(--lp-focus-ring); outline-offset: 2px; }
.lpc-stepper { display: flex; align-items: center; justify-content: space-between; gap: var(--lp-space-4); }
.lpc-stepper .lpc-round-btn { width: 56px; height: 56px; font-size: 26px; font-family: var(--lp-font-display); }
.lpc-stepper output { flex: 1; text-align: center; font-family: var(--lp-font-display); font-size: 56px; line-height: 1; color: var(--lp-velvet); font-variant-numeric: tabular-nums; }
.lpc-stepper output small { display: block; margin-top: 6px; font-size: var(--lp-text-caption); letter-spacing: var(--lp-tracking-caps); text-transform: uppercase; color: var(--lp-muted); }
.lpc-range { width: 100%; margin-top: var(--lp-space-4); accent-color: var(--lp-velvet); }
.lpc-est-note { margin: var(--lp-space-4) 0 0; font-size: 15px; font-style: italic; color: var(--lp-muted); }
.lpc-est-total { margin-top: auto; padding-top: var(--lp-space-5); text-align: center; }
.lpc-est-total .lpc-price-amount { font-size: clamp(48px, 6vw, 68px); }

/* --- calendar ------------------------------------------------------------- */
.lpc-cal-shell { background: var(--lp-surface-card); border: 1px solid var(--lp-line); border-radius: var(--lpc-radius-lg); padding: clamp(20px, 3vw, 36px); }
.lpc-cal-top { display: flex; justify-content: space-between; align-items: center; gap: var(--lp-space-4); margin-bottom: var(--lp-space-5); }
.lpc-cal-top h3 { margin: 0; font-family: var(--lp-font-display); font-weight: 400; font-size: 26px; text-transform: uppercase; letter-spacing: .06em; color: var(--lp-velvet); }
.lpc-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.lpc-cal-dow { text-align: center; padding-bottom: var(--lp-space-2); font-family: var(--lp-font-display); font-size: 12px; letter-spacing: var(--lp-tracking-caps); text-transform: uppercase; color: var(--lp-muted); }
.lpc-day {
  position: relative; aspect-ratio: 1; min-height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--lp-line); border-radius: var(--lpc-radius-md);
  background: var(--lp-surface-page); color: var(--lp-velvet);
  font-family: var(--lp-font-display); font-size: 17px; font-variant-numeric: tabular-nums;
}
button.lpc-day { cursor: pointer; }
button.lpc-day:hover { border-color: var(--lp-velvet); }
.lpc-day.is-blank { border: 0; background: none; }
.lpc-day.is-past { opacity: .35; }
.lpc-day.is-available::after { content: ''; position: absolute; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--lp-velvet); opacity: .55; }
.lpc-day.is-booked { background: var(--lp-velvet); border-color: var(--lp-velvet); color: var(--lp-coconut); text-decoration: line-through; text-decoration-thickness: 1px; }
.lpc-day.is-popup { background: var(--lp-coconut); border-color: var(--lp-velvet); box-shadow: inset 0 0 0 1px var(--lp-velvet); }
.lpc-day.is-popup .lpc-icon { position: absolute; top: 3px; right: 3px; }
.lpc-day.is-popup .lpc-icon svg { width: 14px; height: 14px; }
.lpc-day.is-today { box-shadow: inset 0 0 0 2px var(--lp-ruby); }
.lpc-cal-legend { display: flex; flex-wrap: wrap; gap: var(--lp-space-3) var(--lp-space-5); margin-top: var(--lp-space-5); font-family: var(--lp-font-display); font-size: var(--lp-text-caption); letter-spacing: var(--lp-tracking-caps); text-transform: uppercase; color: var(--lp-muted); }
.lpc-cal-legend span { display: inline-flex; align-items: center; gap: var(--lp-space-2); }
.lpc-swatch { width: 16px; height: 16px; border-radius: 5px; border: 1px solid var(--lp-velvet); background: var(--lp-surface-page); }
.lpc-swatch.is-booked { background: var(--lp-velvet); }
.lpc-swatch.is-popup { background: var(--lp-coconut); box-shadow: inset 0 0 0 1px var(--lp-velvet); }
.lpc-cal-detail { margin-top: var(--lp-space-4); min-height: 1.6em; font-style: italic; color: var(--lp-text-deep); }
.lpc-book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 44px); align-items: start; }
.lpc-book-grid .lpc-form-shell { max-width: none; margin: 0; }

/* --- FAQ ------------------------------------------------------------------ */
.lpc-faq { max-width: 820px; margin: 0 auto; }
.lpc-faq details { border-bottom: 1px solid var(--lp-line); }
.lpc-faq details:first-child { border-top: 1px solid var(--lp-line); }
.lpc-faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--lp-space-4);
  padding: var(--lp-space-5) 0;
  font-family: var(--lp-font-display); font-size: 20px; text-transform: uppercase; letter-spacing: .05em; color: var(--lp-velvet);
}
.lpc-faq summary::-webkit-details-marker { display: none; }
.lpc-faq summary::after { content: '+'; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--lp-line); border-radius: 50%; font-size: 20px; transition: transform .2s ease; }
.lpc-faq details[open] summary::after { transform: rotate(45deg); }
.lpc-faq details p { margin: 0 0 var(--lp-space-5); max-width: 64ch; color: var(--lp-muted); }

/* --- checkout ------------------------------------------------------------- */
.lpc-checkout { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 3vw, 44px); align-items: start; }
.lpc-checkout .lpc-form-shell { max-width: none; margin: 0; }
.lpc-checkout fieldset { border: 0; margin: 0 0 var(--lp-space-5); padding: 0; }
.lpc-checkout legend { margin-bottom: var(--lp-space-4); font-family: var(--lp-font-display); font-size: 20px; text-transform: uppercase; letter-spacing: .06em; color: var(--lp-velvet); }
.lpc-pay-note { margin-top: var(--lp-space-4); padding: var(--lp-space-4); border-radius: var(--lpc-radius-md); background: var(--lp-cream); font-size: 16px; color: var(--lp-text-deep); }

/* --- v4 responsive -------------------------------------------------------- */
@media (max-width: 1060px) {
  .lpc-builder, .lpc-checkout { grid-template-columns: 1fr; }
  .lpc-summary { position: static; }
  .lpc-legend { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .lpc-moments, .lpc-founder, .lpc-notify, .lpc-est, .lpc-book-grid { grid-template-columns: 1fr; }
  .lpc-candy-grid, .lpc-options.is-3 { grid-template-columns: repeat(2, 1fr); }
  .lpc-notify-form { grid-template-columns: 1fr 1fr; }
  .lpc-notify-form .lp-button { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .lpc-pagehead, .lpc-preview { padding-inline: var(--lp-space-5); }
  .lpc-options, .lpc-options.is-3, .lpc-notify-form { grid-template-columns: 1fr; }
  .lpc-candy-grid { grid-template-columns: 1fr 1fr; gap: var(--lp-space-3); }
  .lpc-candy-grid p { display: none; }
  .lpc-legend { grid-template-columns: 1fr 1fr; }
  .lpc-eventitem { grid-template-columns: auto 1fr; padding: var(--lp-space-4); }
  .lpc-eventitem > .lpc-icon { display: none; }
  .lpc-eventdate { width: 60px; height: 60px; }
  .lpc-cal { gap: 3px; }
  .lpc-day { font-size: 14px; border-radius: 10px; min-height: 0; }
  .lpc-header-tools .lp-button { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lpc-announce .lpc-track, .lpc-photostrip .lpc-track { animation: none; }
  .lpc-photostrip { overflow-x: auto; }
  .lpc-announce .lpc-track { flex-wrap: wrap; justify-content: center; width: auto; }
  .lpc-dup { display: none !important; }
}


.lpc-line-parts { grid-column: 1 / -1; display: grid; gap: 6px; }
.lpc-line-parts li { display: flex; justify-content: space-between; align-items: center; gap: var(--lp-space-3); font-size: 16px; color: var(--lp-text-deep); }
.lpc-line-parts .lpc-qty button { width: 30px; height: 30px; font-size: 16px; }
.lpc-line-min { font-style: italic; color: var(--lp-muted); font-size: 14px; }

/* --- candy page: ounces per candy + the drawn bag ------------------------- */
.lpc-candycard { position: relative; }
.lpc-candycard.is-on { border-color: var(--lp-velvet); box-shadow: 0 0 0 2px var(--lp-velvet); }
.lpc-candycard[hidden] { display: none; }
.lpc-candy-qty { margin-top: auto; padding: 0 var(--lp-space-4) var(--lp-space-4); display: flex; justify-content: center; }
.lpc-candy-qty .lpc-qty { background: var(--lp-surface-page); }
.lpc-candycard.is-on .lpc-candy-qty .lpc-qty { background: var(--lp-velvet); border-color: var(--lp-velvet); color: var(--lp-coconut); }
.lpc-candycard.is-on .lpc-candy-qty .lpc-qty button { color: var(--lp-coconut); }
.lpc-candycard.is-on .lpc-candy-qty .lpc-qty button:hover { background: var(--lp-wine); }

.lpc-bagviz { --bag-scale: .72; display: grid; justify-items: center; margin: 0 0 var(--lp-space-3); }
.lpc-bag-svg { width: calc(220px * var(--bag-scale)); height: auto; overflow: visible; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.lpc-bag-svg .glass  { fill: var(--lp-surface-page); }
.lpc-bag-svg .bg     { fill: var(--lp-cream); }
.lpc-bag-svg .c0     { fill: var(--lp-ruby); }
.lpc-bag-svg .c1     { fill: var(--lp-velvet); }
.lpc-bag-svg .c2     { fill: var(--lp-coconut); stroke: var(--lp-ruby); stroke-width: 1; }
.lpc-bag-svg .outline { fill: none; stroke: var(--lp-velvet); stroke-width: 2.2; stroke-linejoin: round; }
.lpc-bag-svg .shine  { fill: none; stroke: var(--lp-coconut); stroke-width: 4; stroke-linecap: round; opacity: .75; }
.lpc-bag-svg .ruffle { fill: var(--lp-coconut); stroke: var(--lp-velvet); stroke-width: 1.8; stroke-linejoin: round; }
.lpc-bag-svg .tie    { fill: none; stroke: var(--lp-ruby); stroke-width: 5; stroke-linecap: round; }
.lpc-bag-svg .bow    { fill: var(--lp-ruby); stroke: var(--lp-velvet); stroke-width: 1.2; }
.lpc-bag-svg .knot   { fill: var(--lp-velvet); }
.lpc-bag-svg .min    { stroke: var(--lp-velvet); stroke-width: 1.4; }
.lpc-bag-svg .min-label { fill: var(--lp-velvet); font-family: var(--lp-font-display); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.lpc-bag-fill, [data-bag-min] { transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; }
.lpc-bag-readout { text-align: center; margin-top: var(--lp-space-2); }
.lpc-bag-readout strong { display: block; font-family: var(--lp-font-display); font-weight: 400; font-size: 34px; line-height: 1; color: var(--lp-velvet); font-variant-numeric: tabular-nums; }
.lpc-bag-readout small { font-family: var(--lp-font-display); font-size: var(--lp-text-caption); letter-spacing: var(--lp-tracking-caps); text-transform: uppercase; color: var(--lp-muted); }
.lpc-bag-status { margin: 0 0 var(--lp-space-3); text-align: center; font-style: italic; color: var(--lp-text-deep); }
.lpc-bag-status b { font-style: normal; color: var(--lp-velvet); }
.lpc-sum-parts { display: grid; gap: 4px; margin-bottom: var(--lp-space-2); }
.lpc-sum-parts li { display: flex; justify-content: space-between; gap: var(--lp-space-3); font-size: 16px; color: var(--lp-text-deep); border-bottom: 1px solid var(--lp-line); padding: 4px 0; }


/* =============================================================================
   Section dividers (client, 2026-10-03; candy stickers removed 2026-10-04)
   ============================================================================= */

/* --- dividers ---------------------------------------------------------------
   Used now and then between sections, never everywhere. Each sits between
   two grounds: --above is the colour of the section before, --below after. */
.lpc-divider { display: block; position: relative; z-index: 1; }

/* zigzag — a ticket-stub edge */
.lpc-divider--zigzag { height: 16px; background: var(--below); }
.lpc-divider--zigzag::before {
  content: ''; position: absolute; inset: 0; background: var(--above);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 32px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 32px 100%;
}



/* =============================================================================
   Cute UI kit (client, 2026-10-03) — patterned grounds, frames and box styles.
   Each is a class applied to a FEW chosen elements, never globally, so the
   pages stay varied rather than busy. Brand colours only.
   ============================================================================= */

/* --- patterned section grounds (applied sporadically) ---------------------- */

/* --- ribbon heading — an eyebrow turned into a little notched banner ------- */
.lp-heading__eyebrow.lpc-ribbon {
  align-self: flex-start;
  display: inline-block;
  padding: 7px 26px 6px;
  background: var(--lp-velvet); color: var(--lp-coconut);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%);
}
.lpc-head.is-center .lp-heading__eyebrow.lpc-ribbon,
.lpc-center .lp-heading__eyebrow.lpc-ribbon { align-self: center; }
.lpc-onred .lp-heading__eyebrow.lpc-ribbon { background: var(--lp-coconut); color: var(--lp-velvet); opacity: 1; }

/* --- rosette — a scalloped seal for step numbers --------------------------- */
.lpc-rosette {
  width: 52px !important; height: 52px !important;
  border-radius: 0 !important;
  clip-path: polygon(50% 0%, 61% 7%, 75% 6%, 81% 19%, 94% 25%, 93% 39%, 100% 50%, 93% 61%, 94% 75%, 81% 81%, 75% 94%, 61% 93%, 50% 100%, 39% 93%, 25% 94%, 19% 81%, 6% 75%, 7% 61%, 0% 50%, 7% 39%, 6% 25%, 19% 19%, 25% 6%, 39% 7%);
}

/* --- pop — a hard offset shadow, like a sticker lifted off the page -------- */
.lpc-pop { border-color: var(--lp-velvet) !important; box-shadow: 7px 7px 0 var(--lpc-olive); }
.lpc-pop:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--lpc-olive); }

/* --- rose frame - a solid Rose border (booking form; client, 2026-10-04) --- */
.lpc-rose-frame { border: 10px solid #C56A79 !important; }

/* --- receipt — a torn zigzag bottom edge, like a sweet-shop receipt ------- */
.lpc-receipt {
  border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important;
  padding-bottom: calc(var(--lp-space-6) + 12px) !important;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 12px repeat-x,
                linear-gradient(#000 0 0) top / 100% calc(100% - 11px) no-repeat;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 12px repeat-x,
                linear-gradient(#000 0 0) top / 100% calc(100% - 11px) no-repeat;
}

/* --- FAQ card - a clean card with plain dividers (client, 2026-10-04) ---- */
.lpc-faq-card {
  background: var(--lp-coconut);
  border: 1px solid var(--lp-line);
  border-radius: var(--lpc-radius-lg);
  padding: var(--lp-space-3) var(--lp-space-6);
}
.lpc-faq-card details:first-child { border-top: 0; }
.lpc-faq-card details:last-child { border-bottom: 0; }

/* --- scallop — scalloped edges cut straight into an image or box ---------- */
.lpc-scallop {
  --s: 12px;
  border-radius: 0 !important; border: 0 !important;
  -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - var(--s) * 2) calc(100% - var(--s) * 2) no-repeat,
                radial-gradient(circle closest-side, #000 97%, #0000) 0 0 / calc(var(--s) * 2) calc(var(--s) * 2) round;
          mask: linear-gradient(#000 0 0) center / calc(100% - var(--s) * 2) calc(100% - var(--s) * 2) no-repeat,
                radial-gradient(circle closest-side, #000 97%, #0000) 0 0 / calc(var(--s) * 2) calc(var(--s) * 2) round;
}

/* --- arch + offset frame — an arched photo with a drawn outline behind ---- */
/* --- rounded-square photo, no outline (founders; client 2026-10-04) */
.lpc-square-frame { position: relative; }
.lpc-square-frame > .lpc-ph, .lpc-square-frame > img {
  position: relative; aspect-ratio: 1 !important; border: 0 !important; border-radius: var(--lpc-radius-lg) !important;
}

/* --- full-width hero (client, 2026-10-04) --------------------------------
   The photo runs edge to edge; the headline sits on one even dark-olive shade
   laid over the whole photo (solid, no fade - client, 2026-10-04). */
.lpc-hero--full {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: min(86vh, 780px);
  padding: clamp(80px, 11vw, 150px) var(--lp-space-7) clamp(96px, 12vw, 160px);
  color: var(--lp-text-on-red);
}
.lpc-hero-bg { position: absolute; inset: 0; }
.lpc-hero-bg > .lpc-ph, .lpc-hero-bg > img {
  width: 100%; height: 100%; object-fit: cover;
  border: 0; border-radius: 0;
}
.lpc-hero-bg > .lpc-ph { place-items: start end; padding: 28px; }
.lpc-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(97, 96, 45, .78);   /* one even dark-olive shade, no fade */
}
.lpc-hero-copy { position: relative; z-index: 1; }
.lpc-hero--full h1 { color: var(--lp-coconut); max-width: 680px; }
.lpc-hero--full .lpc-lede { color: rgba(253, 251, 244, .9); }
.lpc-hero--full .lpc-meta { color: rgba(253, 251, 244, .85); border-top-color: rgba(253, 251, 244, .3); max-width: 560px; }
.lpc-hero--full .lpc-meta svg { color: var(--lp-coconut); }
.lpc-hero--full .lp-button--secondary { color: var(--lp-coconut); border-color: var(--lp-coconut); }
.lpc-hero--full .lp-button--secondary:hover { background: rgba(253, 251, 244, .14); }
.lpc-hero--full .lpc-chip { left: auto; right: var(--lp-space-7); bottom: 28px; z-index: 1; color: var(--lp-text-deep); }
@media (max-width: 860px) {
  .lpc-hero--full { min-height: 0; }
  .lpc-hero--full .lpc-chip { right: auto; left: var(--lp-space-5); bottom: 18px; }
}
@media (max-width: 620px) { .lpc-hero--full { padding-inline: var(--lp-space-5); padding-bottom: 96px; } }

/* =============================================================================
   Berry accents - the dot on the olive card (client, 2026-10-04).
   Kept LAST so they win over the component rules above.
   ============================================================================= */
.lp-heading__eyebrow,
.lpc-offer-link,
.lp-price, .lpc-price-amount, .lpc-line-price, .lpc-total-row strong,
.lpc-sweetline, .lpc-founder-sign,
.lpc-pagehead h1 .lpc-script { color: var(--lpc-berry); }
.lp-heading__eyebrow.lpc-ribbon { background: var(--lpc-berry); color: var(--lp-coconut); }
.lpc-onred .lp-heading__eyebrow { color: var(--lp-coconut); }
.lpc-onred .lp-heading__eyebrow.lpc-ribbon { background: var(--lp-coconut); color: var(--lpc-berry); }
.lpc-cart-count { background: var(--lpc-berry); }
.lpc-nav a[aria-current="page"]:not(.lp-button),
.lpc-nav a:not(.lp-button):hover { border-bottom-color: var(--lpc-berry); }
.lpc-candycard.is-on { border-color: var(--lpc-berry); box-shadow: 0 0 0 2px var(--lpc-berry); }
.lpc-candycard.is-on .lpc-candy-qty .lpc-qty { background: var(--lpc-berry); border-color: var(--lpc-berry); }
.lpc-step-num { background: var(--lpc-berry); }

/* Top announcement banner: solid Blush with deep-olive lettering (client,
   2026-10-04). White on Blush is 1.7:1, so the text is deep olive (6.2:1).
   The check texture is dropped here so the pink stays solid. */
.lpc-announce.lp-check { background: #EAB4BB; background-image: none; color: var(--lp-wine); }

/* --- solid Rose section + Rose rule (client, 2026-10-04) ------------------
   Rose is a mid-tone: white on it is 3.7:1, enough only for LARGE text. So
   the title is white, the description is set large-and-bold (20px/600 counts
   as large), the label is a light ribbon with Berry text, and the button is
   solid dark olive. Cards inside keep their own light ground. */
.lpc-bg-rose { background: #C56A79; }
.lpc-bg-rose .lp-heading__title { color: #FFFFFF; }
.lpc-bg-rose .lp-heading__description { color: #FFFFFF; font-size: 20px; font-weight: 600; }
.lpc-bg-rose .lp-heading__eyebrow.lpc-ribbon { background: var(--lp-coconut); color: var(--lpc-berry); }

/* "Book the cart" is always Berry (client, 2026-10-04). Card text 6.6:1. */
.lp-button.lpc-btn-berry, .lpc-nav .lp-button.lpc-btn-berry { background: var(--lpc-berry); color: var(--lp-coconut); }
.lp-button.lpc-btn-berry:hover { background: #6E3039; }

/* Three Sweet Steps: Rose instead of Berry for the ribbon and step badges
   (client, 2026-10-04). White on Rose is 3.7:1 - the badge numbers are set
   bold at 20px so they count as large text; the small ribbon label is a
   little under the 4.5:1 guideline for small text. */
.lpc-rose-accents .lp-heading__eyebrow.lpc-ribbon { background: #C56A79; color: #FFFFFF; font-weight: 600; }
.lpc-rose-accents .lpc-step-num { background: #C56A79; color: #FFFFFF; font-size: 20px; font-weight: 700; }


/* Solid dark-olive ground with no grid texture (client, 2026-10-04) - used
   for the "Petites douceurs" band and the "What are we celebrating?" box. */
.lpc-solid { background: var(--lp-velvet); color: var(--lp-text-on-red); }

/* Sweet treats of the week: solid light pink, no stripes (client,
   2026-10-04). Heading and description use deep olive (6.2:1 on Blush). */
.lpc-bg-blush { background: #EAB4BB; }
.lpc-bg-blush .lp-heading__title,
.lpc-bg-blush .lp-heading__description { color: var(--lp-wine); }

/* --- Three Sweet Steps: photo left, steps as a list (client, 2026-10-04) ---
   Each step is a long rectangle: badge on the left, title and text beside it. */
.lpc-steps-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 4vw, 48px); align-items: stretch; }
.lpc-steps-media .lpc-ph { height: 100%; min-height: 360px; }
.lpc-steps--list { grid-template-columns: 1fr !important; gap: var(--lp-space-4); }
.lpc-steps--list .lpc-step {
  display: grid; grid-template-columns: auto 1fr; gap: var(--lp-space-5); align-items: center;
  padding: var(--lp-space-5) var(--lp-space-6);
}
.lpc-steps--list .lpc-step-num { margin-bottom: 0; }
@media (max-width: 860px) {
  .lpc-steps-split { grid-template-columns: 1fr; }
  .lpc-steps-media .lpc-ph { min-height: 0; aspect-ratio: 16 / 10; height: auto; }
}
@media (max-width: 620px) {
  .lpc-steps--list .lpc-step { gap: var(--lp-space-4); padding: var(--lp-space-5); }
}

/* Pricing options fill with olive on hover so it's clear which one you're on
   (client, 2026-10-04). Lettering flips to card cream (6.3:1 on dark olive). */
.lpc-plan { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.lpc-plan[data-plan] { cursor: pointer; }
.lpc-plan:hover, .lpc-plan.is-selected {
  background: var(--lp-velvet); border-color: var(--lp-velvet);
  transform: translateY(-3px);
}
.lpc-plan:hover h3, .lpc-plan.is-selected h3,
.lpc-plan:hover p, .lpc-plan.is-selected p,
.lpc-plan:hover .lpc-plan-cta, .lpc-plan.is-selected .lpc-plan-cta { color: var(--lp-coconut); }
.lpc-plan:hover .lpc-plan-for, .lpc-plan.is-selected .lpc-plan-for { border-top-color: rgba(253, 251, 244, .35); }
.lpc-plan:hover .lp-tag, .lpc-plan.is-selected .lp-tag { color: var(--lp-coconut); border-color: rgba(253, 251, 244, .6); }
.lpc-plan:hover .lp-tag--solid, .lpc-plan.is-selected .lp-tag--solid { background: var(--lp-coconut); border-color: var(--lp-coconut); color: var(--lp-velvet); }
.lpc-plan:focus-visible { outline: 2px solid var(--lp-focus-ring); outline-offset: 4px; }
/* "Build my estimate" cue on each option card */
.lpc-plan-cta {
  margin-top: var(--lp-space-2);
  font-family: var(--lp-font-display); font-size: 14px;
  letter-spacing: var(--lp-tracking-caps); text-transform: uppercase;
  color: var(--lpc-berry);
}

/* Pricing: a clear prompt to pick an option card (client, 2026-10-04) */
.lpc-pick-cue {
  margin: var(--lp-space-5) 0 0;
  font-family: var(--lp-font-display); font-size: 16px;
  letter-spacing: var(--lp-tracking-caps); text-transform: uppercase;
  color: var(--lpc-berry);
}

/* A ribbon label as a smooth oval instead of a notched banner
   ("Sweeten the deal"; client, 2026-10-04) */
.lp-heading__eyebrow.lpc-ribbon.lpc-ribbon--oval { clip-path: none; border-radius: var(--lpc-radius-pill); padding: 7px 22px 6px; }


/* =============================================================================
   Change batch - client, 2026-10-04
   ============================================================================= */

/* Ribbon labels are solid rounded rectangles now, not notched tickets */
.lp-heading__eyebrow.lpc-ribbon { clip-path: none; border-radius: 8px; padding: 7px 16px 6px; }
.lp-heading__eyebrow.lpc-ribbon.lpc-ribbon--oval { border-radius: var(--lpc-radius-pill); padding: 7px 22px 6px; }

/* Our delicious offerings: the card fills moss on hover */
.lp-card.lpc-pop { transition: background-color .2s ease, transform .25s ease, box-shadow .25s ease; }
.lp-card.lpc-pop:hover { background: var(--lp-velvet); }
.lp-card.lpc-pop:hover .lp-card__name,
.lp-card.lpc-pop:hover .lp-card__description,
.lp-card.lpc-pop:hover .lpc-offer-link { color: var(--lp-coconut); }

/* Sweet moments: Rose ground (client, 2026-10-04; cleaned up the same day).
   Three clear levels: big title, one regular-weight description at 24px
   (white on Rose is 3.7:1 - AA as large text), then a cream note card with
   the script line and the Swedish fact in dark ink. */
.lpc-moments-rose .lpc-moments { grid-template-columns: .9fr 1.1fr; }
.lpc-moments-rose .lp-heading__title { font-size: clamp(38px, 4.6vw, 54px); }
.lpc-moments-rose .lp-heading__description { margin-top: var(--lp-space-4); font-size: 24px; font-weight: 400; line-height: 1.45; max-width: 26ch; }
.lpc-moments-note {
  margin-top: var(--lp-space-6); max-width: 400px; padding: 20px 24px;
  background: var(--lp-coconut); border-radius: var(--lpc-radius-md);
}
.lpc-moments-note__script { display: block; font-family: var(--lp-font-script); font-size: 30px; line-height: 1.1; color: var(--lpc-berry); }
.lpc-moments-note p { margin: 8px 0 0; font-size: 17px; line-height: 1.5; color: #3E3D1C; }
/* bigger photo: the frame box takes the oval's own 4:5 shape */
.lpc-moments-rose .lpc-polaroids { width: min(480px, 100%); height: auto; aspect-ratio: 4 / 5; }
.lpc-moments-rose .lpc-polaroid.is-oval { --w: 100%; }
@media (max-width: 860px) {
  .lpc-moments-rose .lpc-moments { grid-template-columns: 1fr; }
  .lpc-moments-rose .lpc-polaroids { width: min(360px, 100%); }
}

/* One oval photo at a time, cross-fading - no stack */
.lpc-polaroid.is-oval { opacity: 0; transform: translate(-50%, -50%); transition: opacity .45s ease; pointer-events: none; }
.lpc-polaroid.is-oval.is-current { opacity: 1; pointer-events: auto; }
.lpc-moments-rose .lpc-polaroid.is-oval .lpc-frame-shape { border: 2px solid #FFFFFF; }
.lpc-photo-nav { display: flex; align-items: center; justify-content: center; gap: var(--lp-space-4); margin-top: var(--lp-space-5); }
.lpc-moments-rose .lpc-round-btn { background: var(--lp-coconut); border-color: var(--lp-coconut); color: var(--lpc-berry); }
.lpc-moments-rose .lpc-round-btn:hover { background: #FFFFFF; }
.lpc-photo-dots { display: flex; gap: 8px; }
.lpc-photo-dot { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 1.5px solid #FFFFFF; background: transparent; cursor: pointer; }
.lpc-photo-dot[aria-current="true"] { background: #FFFFFF; }

/* Candy stock labels: running low / seasonal / out of stock */
.lpc-stock {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 4px 12px; border-radius: var(--lpc-radius-pill);
  font-family: var(--lp-font-display); font-size: 12px; letter-spacing: var(--lp-tracking-caps); text-transform: uppercase;
  color: var(--lp-coconut);
}
.lpc-stock.is-low      { background: var(--lpc-berry); }
.lpc-stock.is-seasonal { background: var(--lp-velvet); }
.lpc-stock.is-out      { background: var(--lp-wine); }
.is-out .lpc-candy-media, .is-out .lpc-option-body, .is-out .lp-card__body { opacity: .55; }
.lpc-filter-empty { margin: var(--lp-space-4) 0 0; padding: var(--lp-space-5); text-align: center; font-style: italic; color: var(--lp-text-deep); background: var(--lp-surface-card); border: 1px solid var(--lp-line); border-radius: var(--lpc-radius-lg); }

/* Solid light olive ground (Find the Cart signup; client, 2026-10-04).
   Dark olive 4.9:1, muted 5.2:1, Berry 5.4:1 on it. */
.lpc-bg-light-olive { background: #E4DFC4; }

/* --- TAN Harmoni (client, 2026-10-04) --------------------------------------
   Used for "Swedish candy cart" in the home hero.
   Drop the font file at
     assets/fonts/TAN-Harmoni.woff2   (or .woff / .otf - add a src line)
   and it takes over automatically. Until then the line falls back to the
   brand script font. */
@font-face {
  font-family: 'TAN Harmoni';
  src: url('../assets/fonts/TAN-Harmoni.woff2') format('woff2'),
       url('../assets/fonts/TAN-Harmoni.woff') format('woff'),
       url('../assets/fonts/TAN-Harmoni.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
.lpc-harmoni,
.lpc-hero h1 .lpc-script.lpc-harmoni { font-family: 'TAN Harmoni', var(--lp-font-script); }

/* --- Parisienne (client, 2026-10-05) ----------------------------------------
   Chosen for "Swedish candy cart" in the hero.
   Free Google font (SIL Open Font Licence), self-hosted. To go back to TAN
   Harmoni later, delete this block. */
@font-face {
  font-family: 'Parisienne';
  src: url('../assets/fonts/Parisienne.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
/* "LPC Script" (client, 2026-10-05): Parisienne, but the capital S and B come
   from Great Vibes - unicode-range swaps in just those two letters. */
@font-face {
  font-family: 'LPC Script';
  src: url('../assets/fonts/Parisienne.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'LPC Script';
  src: url('../assets/fonts/GreatVibes.woff2') format('woff2');
  unicode-range: U+0042, U+0053;   /* B, S - declared last, so it wins for these */
  font-weight: 400; font-style: normal; font-display: swap;
}
.lpc-harmoni,
.lpc-hero h1 .lpc-script.lpc-harmoni,
.lpc-founder .lpc-founder-sign { font-family: 'LPC Script', 'Parisienne', var(--lp-font-script); }

/* Three Sweet Steps: solid light rose, no stripes (client, 2026-10-04).
   Dark olive heading 4.9:1, muted text 5.2:1 on it. */
.lpc-bg-light-rose { background: #F4D8DD; }

/* Hero: headline left, illustrated cart right (client, 2026-10-04) */
.lpc-hero-split { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.lpc-hero-split .lpc-hero-copy { position: static; }
.lpc-hero-art { position: relative; }
.lpc-hero-art img { width: 100%; max-width: 520px; height: auto; margin-left: auto; filter: drop-shadow(0 18px 30px rgba(62, 61, 28, .25)); }
.lpc-hero--full .lpc-hero-art .lpc-chip { position: absolute; left: 4%; right: auto; bottom: 6%; }
@media (max-width: 860px) {
  .lpc-hero-split { grid-template-columns: 1fr; }
  .lpc-hero-art img { max-width: 340px; margin: 0 auto; }
  .lpc-hero-art { text-align: center; }
  .lpc-hero--full .lpc-hero-art .lpc-chip { position: static; display: inline-flex; margin-top: 8px; transform: none; white-space: nowrap; }
  .lpc-hero--full { padding-bottom: clamp(48px, 10vw, 80px); }
}

/* Whole offering tile is clickable (client, 2026-10-04): the card's one link
   stretches over the card, so there's still a single link per tile. */
.lp-card.lpc-pop { position: relative; cursor: pointer; }
.lp-card.lpc-pop .lpc-offer-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.lp-card.lpc-pop .lpc-offer-link:focus-visible { outline: none; }
.lp-card.lpc-pop:has(.lpc-offer-link:focus-visible) { outline: 3px solid var(--lpc-berry); outline-offset: 4px; }

/* Hero (client, 2026-10-04): "Swedish candy cart" smaller and on one line;
   the illustrated cart bigger. */
.lpc-hero h1 .lpc-script.lpc-harmoni { font-size: 1em; white-space: nowrap; }
.lpc-hero-split { grid-template-columns: .9fr 1.1fr; }
.lpc-hero--full .lpc-hero-split h1 { font-size: clamp(34px, 4vw, 54px); }
@media (min-width: 861px) { .lpc-hero-split h1 { white-space: nowrap; } }
.lpc-hero-art img { max-width: 640px; }
@media (max-width: 860px) {
  .lpc-hero-split { grid-template-columns: 1fr; }
  .lpc-hero-art img { max-width: 420px; }
}
@media (max-width: 420px) {
  .lpc-hero h1 .lpc-script.lpc-harmoni { font-size: .9em; }
}

/* Meet the founders - one paragraph about the two of them (client, 2026-10-04) */
.lpc-founder-story { margin: var(--lp-space-4) 0 0; font-size: 18px; line-height: 1.65; color: var(--lp-velvet); max-width: 54ch; }

/* Founders (client, 2026-10-04): signature smaller and lowered to sit level
   with the bottom of the photo. */
.lpc-founder > .lpc-reveal:last-child { display: flex; flex-direction: column; align-self: stretch; }
.lpc-founder .lpc-founder-sign { margin-top: auto; padding-top: var(--lp-space-5); font-size: 34px; }
/* Founders: the ribbon sits level with the photo top, with room below it */
#founders .lp-heading__eyebrow.lpc-ribbon { margin-top: 0; margin-bottom: var(--lp-space-4); }
#founders .lp-heading { margin-top: 0; padding-top: 0; }

/* Why Swedish candy? - under the founders' story (client, 2026-10-05) */
.lpc-why { margin-top: clamp(48px, 7vw, 88px); }
.lpc-why-head { text-align: center; margin: 0 auto var(--lp-space-6); max-width: 620px; }
.lpc-why-title { margin: 0; font-family: var(--lp-font-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: .02em; text-transform: uppercase; color: var(--lp-velvet); }
.lpc-why-title .lpc-harmoni { text-transform: none; font-size: 1.25em; color: var(--lpc-berry); letter-spacing: 0; }
.lpc-why-intro { margin: var(--lp-space-3) 0 0; font-size: 18px; line-height: 1.55; color: var(--lp-velvet); }
.lpc-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lp-space-4); }
.lpc-why-card { padding: 22px 20px; background: var(--lp-coconut); border: 1.5px solid #DCD5B4; border-radius: var(--lpc-radius-md); }
.lpc-why-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lpc-berry); color: var(--lp-coconut); }
.lpc-why-card h4 { margin: 14px 0 6px; font-family: var(--lp-font-display); font-weight: 400; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: var(--lp-velvet); }
.lpc-why-card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--lp-velvet); }
@media (max-width: 980px) { .lpc-why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .lpc-why-grid { grid-template-columns: 1fr; } }

/* Hero on solid Rose (client, 2026-10-05). White on Rose is 3.7:1 - fine for
   the big headline, not for small text - so the intro is set large and bold,
   the three meta points become cream pills with Berry text, and the
   secondary button is filled cream. */
.lpc-hero-bg::after { background: #C56A79; }
.lpc-hero--full .lpc-lede { color: #FFFFFF; font-size: 20px; font-weight: 600; }
.lpc-hero--full .lpc-meta { border-top-color: rgba(255, 255, 255, .45); gap: var(--lp-space-2); }
.lpc-hero--full .lpc-meta > span { padding: 7px 14px; border-radius: var(--lpc-radius-pill); background: var(--lp-coconut); color: var(--lpc-berry); font-weight: 600; }
.lpc-hero--full .lpc-meta svg { color: var(--lpc-berry); }
.lpc-hero--full .lp-button--secondary { background: var(--lp-coconut); color: var(--lpc-berry); border-color: var(--lp-coconut); }
.lpc-hero--full .lp-button--secondary:hover { background: #FFFFFF; color: var(--lpc-berry); }
.lpc-hero-bg > .lpc-ph { color: transparent; }   /* hide the photo-slot label on the solid Rose */

/* Swaying flower on the hero cart (client, 2026-10-05). The flower is an inline
   SVG laid over the PNG in the drawing's own coordinates (PNG viewBox 350 40
   600 760; flower box 835 200 50 80), so the percentages below put it exactly
   on its pot. It rocks from the base of the stem. */
.lpc-cart-wrap { position: relative; max-width: 640px; margin-left: auto; }
.lpc-hero-art .lpc-cart-wrap img { width: 100%; max-width: none; margin: 0; }
.lpc-flower { position: absolute; left: 80.8333%; top: 21.0526%; width: 8.3333%; height: 10.5263%; overflow: visible; pointer-events: none; }
.lpc-flower-sway { transform-box: view-box; transform-origin: 860px 273px; animation: lpc-sway 3.2s ease-in-out infinite alternate; }
@keyframes lpc-sway { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .lpc-flower-sway { animation: none; } }
.lpc-flower-stem  { fill: none; stroke: #61602D; stroke-width: 3; stroke-linecap: round; }
.lpc-flower-leaf  { fill: #A0964C; stroke: #3B2E25; stroke-width: 2; stroke-linejoin: round; }
.lpc-flower-petal { fill: #EAB4BB; stroke: #3B2E25; stroke-width: 2; }
.lpc-flower-eye   { fill: #C6A77E; stroke: #3B2E25; stroke-width: 2; }
.lpc-flower-shine { fill: #FDFBF4; }
@media (max-width: 860px) { .lpc-cart-wrap { max-width: 420px; margin: 0 auto; } }
/* the jar in "Your mix" (client, 2026-10-13 - was a bag) */
.lpc-bag-svg .lid { fill: var(--lp-coconut); stroke: var(--lp-velvet); stroke-width: 2.2; stroke-linejoin: round; }
.lpc-bag-svg .lid-shine { stroke: #FFFFFF; stroke-width: 2.5; stroke-linecap: round; opacity: .8; }
.lpc-bag-svg .shine.thin { stroke-width: 2.5; }