/* latin-ext */
@font-face {
  font-family: 'Caprasimo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/caprasimo-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caprasimo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/caprasimo-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat Brush';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/caveat-brush-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Caveat Brush';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/caveat-brush-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-vietnamese-2.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-latin-ext-2.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-latin-2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fraunces-vietnamese-2.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fraunces-latin-ext-2.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fraunces-latin-2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fraunces-vietnamese-2.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fraunces-latin-ext-2.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fraunces-latin-2.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Sweet Jenny's Bakery — Design Tokens
   Warm, homey, soft pinks & creams with Spanish heritage warmth */

:root {
  /* Rhythm and display scale, retunable by a LOOK. The shipped values are
     exactly what the site has always used, so the default is a no-op; the
     "Refined" look tightens all three together, which is the difference
     between a page that shouts and one that is merely confident. */
  --rhythm: 140px;
  --h1-size: clamp(64px, 8vw, 120px);
  --h2-size: clamp(48px, 6vw, 80px);
  /* === COLOR — "Rosa & Burgundy" — matched to logo === */
  --cream: #FDF4F5;          /* base background — palest pink-cream */
  --cream-deep: #FBE5EC;     /* soft blush — secondary surfaces */
  --rosa-50: #FCEEF2;        /* lightest pink */
  --rosa-100: #F5C9D6;       /* scallop pink */
  --rosa-200: #ECA9BE;       /* dusty rose-pink */
  --rosa-400: #C45F87;       /* mid berry */
  --rosa-600: #7A1F4A;       /* deep magenta — primary brand */
  --rosa-800: #4F0F30;       /* darkest plum for emphasis */

  --butter: #F4C242;         /* daisy yellow */
  --lavender: #C9B8E0;       /* daisy lavender */
  --caramel: #D88871;        /* warm caramel accent */
  --cocoa: #3A0F22;          /* near-black, plum-warm */
  --ink: #3A0F22;            /* main text — deep plum-black */
  --ink-soft: #7A4A60;       /* secondary text */
  --line: #F0D5DE;           /* soft pink hairline */

  /* === TYPOGRAPHY === */
  --font-display: "Caprasimo", "Cooper Black", Georgia, serif;
  --font-script: "Caveat Brush", "Marker Felt", cursive;
  --font-body: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-ui: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* === SPACING === */
  --gap-xs: 8px;
  --gap-sm: 16px;
  --gap-md: 24px;
  --gap-lg: 40px;
  --gap-xl: 64px;
  --gap-2xl: 96px;
  --gap-3xl: 144px;

  /* === RADII === */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-xl: 48px;
  --r-pill: 999px;

  /* === SHADOWS — soft, plum-tinted === */
  --shadow-sm: 0 2px 8px rgba(79, 15, 48, 0.06);
  --shadow-md: 0 8px 24px rgba(79, 15, 48, 0.10);
  --shadow-lg: 0 24px 60px rgba(79, 15, 48, 0.14);
}

/* === BASE === */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }

/* === TYPE PRIMITIVES === */
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.95;
}
.t-script {
  font-family: var(--font-script);
  font-weight: 400;
  font-style: italic;
}
.t-eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rosa-600);
}
.t-body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  text-wrap: pretty;
}
.t-ui {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--rosa-600);
  color: var(--cream);
}
.btn-primary:hover {
  background: var(--rosa-800);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-secondary:hover {
  background: var(--ink);
  color: var(--cream);
}
.btn-ghost {
  background: var(--cream-deep);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--rosa-100); }

/* === DECORATIVE === */
.divider-dot {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--rosa-400);
}
.divider-dot::before, .divider-dot::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--rosa-200);
}

/* tag pill */
.tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--cream-deep);
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tag-rosa { background: var(--rosa-100); color: var(--rosa-800); }
.tag-butter { background: var(--butter); color: var(--cocoa); }

/* Sweet Jenny's Bakery — Site styles */

/* === LAYOUT === */
.sj-section-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}
.sj-section-head {
  max-width: 720px;
  margin-bottom: 56px;
}
.sj-section-sub {
  margin-top: 16px;
  color: var(--ink-soft);
  max-width: 520px;
}
.sj-h2 {
  font-size: var(--h2-size);
  margin: 16px 0 0;
  color: var(--rosa-800);
}
.sj-script-accent {
  font-family: var(--font-script);
  color: var(--rosa-600);
  font-size: 1em;
  font-weight: 400;
}

/* === NAV === */
.sj-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 16px 0;
  transition: background 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
}
.sj-nav.is-scrolled {
  background: rgba(253, 244, 245, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
  padding: 10px 0;
}
.sj-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.sj-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sj-logo-mark {
  display: flex;
  align-items: center;
}
.sj-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.sj-logo-line1 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--rosa-800);
  letter-spacing: -0.01em;
}
.sj-logo-line2 {
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--rosa-600);
  margin-top: 2px;
  text-transform: uppercase;
}
.sj-nav-links {
  display: flex;
  gap: 32px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.sj-nav-links a {
  position: relative;
  padding: 4px 0;
}
.sj-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1.5px;
  background: var(--rosa-600);
  transition: width 0.2s ease;
}
.sj-nav-links a:hover::after { width: 100%; }
.sj-nav-cta { padding: 10px 20px; font-size: 14px; }

/* === HERO === */
.sj-hero {
  position: relative;
  /* Clear the fixed bar, whatever height Jenny's logo has made it.
     --nav-h is measured and published by the nav itself; the fallback is the
     shipped bar's height, so a browser without ResizeObserver still lands
     somewhere sane. max() means a short bar keeps the designed rhythm and
     only a tall one pushes the hero down. */
  padding: max(var(--rhythm), calc(var(--nav-h, 74px) + 22px)) 0 0;
  background:
    radial-gradient(ellipse at 80% 10%, rgba(245, 201, 214, 0.6), transparent 50%),
    radial-gradient(ellipse at 10% 90%, rgba(201, 184, 224, 0.35), transparent 50%),
    var(--cream);
  overflow: hidden;
}
/* Which side the picture sits on. The grid keeps its source order — the words
   come first for a screen reader and for the one-column phone layout — and
   only the painted order flips. */
.sj-hero-grid.flip > .sj-hero-text { order: 2; }
.sj-hero-grid.flip > .sj-hero-visual { order: 1; }
.sj-about-grid.flip > *:first-child { order: 2; }
.sj-about-grid.flip > *:last-child { order: 1; }
@media (max-width: 1024px) {
  /* One column: source order wins, so the words always lead on a phone. */
  .sj-hero-grid.flip > .sj-hero-text, .sj-hero-grid.flip > .sj-hero-visual,
  .sj-about-grid.flip > * { order: 0; }
}

.sj-hero-grid {
  /* The badge's coordinate space. This box is capped and centred, so a badge
     percentage means the same pixels on every desktop monitor — the window
     grows, the content does not, and the badge stays with the content. */
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
  min-height: 80vh;
  padding-bottom: 60px;
}
.sj-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.sj-hero-h1 {
  font-size: var(--h1-size);
  color: var(--rosa-800);
  margin: 0 0 28px;
}
.sj-hero-script {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--rosa-600);
  font-size: 0.92em;
  display: inline-block;
  transform: rotate(-2deg);
}
.sj-hero-sub {
  font-size: 20px;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 0 36px;
}
.sj-hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.sj-hero-meta {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.sj-hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sj-hero-meta-item strong {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--rosa-800);
  font-weight: 400;
}
.sj-hero-meta-item em {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.sj-stars { display: inline-flex; gap: 2px; }
.sj-hero-divider {
  width: 1px;
  height: 36px;
  background: var(--line);
}
.sj-hero-visual {
  position: relative;
  height: 540px;
}
.sj-hero-cake {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
}
.sj-hero-badge {
  position: absolute;
  /* Its home corner, measured from the picture column it now lives in. */
  top: -30px;
  right: -30px;
  /* Set inline from content, and used by the position clamp so a dragged
     badge can never hang outside the hero. */
  /* A share of the photograph's width, not a fixed pixel count.
   *
   * The photo is about 490px across on a desktop and about 300px on a phone.
   * A badge fixed at 135px is a quarter of the first and nearly half the
   * second — so it looked small on a monitor and enormous on a phone, and a
   * badge that much bigger overhangs the corner by a different amount too.
   * Pinning where it sits was only half the job; it has to keep its size
   * relative to the picture as well.
   *
   * 28.6% is 140px against that 490px desktop photo, so nothing shifts on a
   * big screen — it just stops growing on small ones. */
  --badge-size: 28.6%;
  width: var(--badge-size);
  /* Height has to come from the width. A percentage height would resolve
     against the photo's HEIGHT, which has its own aspect, and the circle
     would come out an oval. */
  aspect-ratio: 1;
  height: auto;
  transform: rotate(-12deg);
  animation: sj-spin 30s linear infinite;
  z-index: 2;
}
.sj-hero-badge svg { width: 100%; height: 100%; }
/* Jenny's own picture instead of the drawn stamp. Round-cropped so any
   photograph still reads as a badge rather than a floating rectangle. */
.sj-hero-badge.is-photo img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
  box-shadow: var(--shadow-md);
}
/* A spinning logo reads as decoration; a still one reads as a mark. Jenny
   picks. Reduced-motion stops it regardless — an endlessly rotating object is
   exactly what that setting is for. */
.sj-hero-badge.is-still { animation: none; }
@media (prefers-reduced-motion: reduce) { .sj-hero-badge { animation: none; } }
/* Where a dragged badge sits — one position, every screen.
 *
 * A percentage of the picture column, which is the box the badge is visually
 * attached to. That column carries the photo in both layouts, so a badge put
 * on the photo's corner stays on the photo's corner whatever the width. No
 * media query, nothing to set twice.
 *
 * No min() clamp here, unlike the polaroids: overhanging the photo's edge is
 * the look, not a bug. The drag keeps the badge's centre inside the column so
 * it can never be lost entirely, and .sj-hero's overflow hides anything that
 * reaches past the section. */
.sj-hero-badge.is-placed {
  /* Overhanging the photo is the look; overhanging the SCREEN is a badge with
     a slice missing. The clamp keeps a placement exactly as dropped wherever
     there is room — every desktop — and on a narrow phone pulls it in by the
     few pixels that would otherwise be cut. Caught by the Debug tab's phone
     check, which measured it 13-20px past the edge at phone widths. */
  left: clamp(
    calc(-1 * (var(--inset-side) + var(--room-side))),
    var(--badge-x),
    calc(100% + var(--inset-side) + var(--room-side) - var(--badge-size))
  );
  top: var(--badge-y);
  right: auto;
}

body.sj-editing .sj-hero-badge { cursor: grab; }
/* Say it is draggable before anyone has to guess. The outline is the editor's
   usual hover cue; the label names the gesture. */
body.sj-editing .sj-hero-badge::after {
  content: "drag me";
  position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%);
  font: 600 10px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--rosa-600); background: var(--cream); border: 1px solid var(--rosa-200);
  padding: 4px 8px; border-radius: 999px; white-space: nowrap;
  opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
body.sj-editing .sj-hero-badge:hover::after { opacity: 1; }
body.sj-editing .sj-hero-badge.sj-dragging { cursor: grabbing; animation: none; }
@keyframes sj-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.sj-hero-float {
  position: absolute;
  filter: drop-shadow(0 12px 24px rgba(79, 15, 48, 0.15));
}
.sj-float-cookie {
  width: 130px;
  bottom: 30px;
  left: 0;
  transform: rotate(-15deg);
}
.sj-float-macaron {
  width: 150px;
  bottom: 80px;
  right: 10px;
  transform: rotate(8deg);
}
.sj-float-cupcake {
  width: 110px;
  top: 100px;
  left: 30px;
  transform: rotate(6deg);
}
.sj-hero-arrow {
  position: absolute;
  bottom: 0;
  right: 180px;
  transform: rotate(8deg);
  z-index: 3;
}

.sj-marquee {
  background: var(--rosa-600);
  color: var(--cream);
  padding: 22px 0;
  overflow: hidden;
  border-top: 2px solid var(--rosa-800);
  border-bottom: 2px solid var(--rosa-800);
  margin-top: 40px;
}
.sj-marquee-track {
  display: flex;
  gap: 32px;
  white-space: nowrap;
  animation: sj-marquee 50s linear infinite;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.01em;
}
.sj-marquee-dot { color: var(--butter); }
@keyframes sj-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* === ABOUT === */
.sj-about { padding: var(--rhythm) 0; }
.sj-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.sj-about-visual {
  position: relative;
  /* Room to scatter half a dozen polaroids. They are meant to overlap — it is
     a pile of photos on a table, not a grid — so this only has to be deep
     enough that the pile has somewhere to spread. */
  height: 720px;

  /* The polaroid's own size, published as variables so the inline `left`/`top`
     can subtract it. A card is positioned by its TOP-LEFT corner but occupies
     --pw to the right of it, so the furthest it can sit and still stay inside
     is `100% - --pw`. Height is padding-top + the square photo + the caption
     strip: 14 + (240-28) + 36 = 262. */
  --pw: 240px;
  --ph: 262px;
}
@media (max-width: 980px) {
  /* Cards shrink with the column, so the collage box can too. */
  .sj-about-visual { height: 600px; --pw: 200px; --ph: 219px; }
  .sj-polaroid { width: 200px; padding: 11px 11px 30px; }
  .sj-polaroid-caption { font-size: 18px; }
}
.sj-polaroid {
  position: absolute;
  background: var(--cream);
  padding: 14px 14px 36px;
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
  width: var(--pw);
}
/* A photo you can open. Only outside the editor, where a click means "edit
   this" instead. */
.sj-polaroid.sj-zoomable { cursor: zoom-in; }
.sj-polaroid.sj-zoomable .sj-polaroid-photo img { transition: transform .25s ease; }
.sj-polaroid.sj-zoomable:hover .sj-polaroid-photo img { transform: scale(1.03); }
.sj-polaroid-photo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sj-polaroid-caption {
  position: absolute;
  bottom: 8px;
  left: 14px;
  right: 14px;
  font-size: 22px;
  color: var(--rosa-800);
  text-align: center;
}
.sj-about-text .sj-h2 { margin-top: 12px; }
.sj-about-text .t-body {
  margin-top: 24px;
  color: var(--ink-soft);
  font-size: 19px;
}
.sj-signature {
  margin-top: 40px;
  display: flex;
  align-items: flex-end;
  gap: 20px;
}
.sj-signature-tag {
  font-size: 22px;
  color: var(--rosa-600);
  margin-bottom: 4px;
}

/* === MENU === */
.sj-menu {
  padding: var(--rhythm) 0;
  background: var(--cream-deep);
  border-top: 1px solid var(--line);
}
.sj-menu-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 48px;
}
.sj-filter {
  padding: 10px 20px;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line);
  transition: all 0.15s ease;
}
.sj-filter:hover { border-color: var(--rosa-400); }
.sj-filter.is-active {
  background: var(--rosa-800);
  color: var(--cream);
  border-color: var(--rosa-800);
}
.sj-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.sj-menu-card {
  background: var(--cream);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--line);
}
.sj-menu-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.sj-menu-card-img {
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--rosa-50), var(--cream-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sj-menu-card-img > svg { max-width: 80%; max-height: 80%; }
.sj-menu-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 11px;
}
.sj-menu-card-body { padding: 24px; }
.sj-menu-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.sj-menu-name {
  font-family: var(--font-display);
  font-size: 24px;
  margin: 0;
  color: var(--rosa-800);
  font-weight: 400;
}
.sj-menu-price {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--rosa-600);
}
.sj-menu-unit {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sj-menu-desc {
  margin: 12px 0 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.sj-menu-order {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--rosa-600);
  border-bottom: 1px solid var(--rosa-200);
  padding-bottom: 2px;
  display: inline-block;
}
.sj-menu-order:hover { color: var(--rosa-800); border-color: var(--rosa-600); }

/* === GALLERY === */
.sj-gallery { padding: var(--rhythm) 0; }
.sj-gallery-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  /* Without wrapping, the heading and the "Commission your own" link fight for
     one row on a phone: the link overflowed the viewport and the whole page
     scrolled sideways. */
  flex-wrap: wrap;
  gap: 40px;
  max-width: 100%;
}
/* A long word in the heading must be allowed to shrink its flex item, or the
   item keeps its min-content width and pushes the row wide anyway. */
.sj-gallery-head > * { min-width: 0; }
.sj-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
}
.sj-gallery-tile {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 0;
  transition: transform 0.25s ease;
}
.sj-gallery-tile:hover { transform: scale(1.02); }
.sj-gallery-bg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.sj-gallery-bg > svg { max-width: 75%; max-height: 75%; }
.sj-tile-tall { grid-row: span 2; }
.sj-tile-wide { grid-column: span 2; }
.sj-tile-sq { /* default */ }
.sj-gallery-cap {
  position: absolute;
  bottom: 12px;
  left: 16px;
  font-size: 20px;
  color: var(--cream);
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.sj-tile-photo { background: var(--rosa-100); }
.sj-gallery-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sj-gallery-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--butter);
  color: var(--cocoa);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}

/* === TESTIMONIALS === */
.sj-testimonials {
  padding: var(--rhythm) 0;
  background: var(--cream-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sj-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 1080px;
  margin: 0 auto;
}
/* Column count is Jenny's choice. Three needs more room than the two-up
   default, so the wall widens rather than squeezing the quotes. */
.sj-tg-c3 { grid-template-columns: repeat(3, 1fr); max-width: 1240px; gap: 24px; }

/* "Quotes" — the same content with the card taken away. Suits a handful of
   long, considered reviews, where a grid of boxes reads as heavier than what
   is inside them. */
.sj-tg-quotes .sj-testimonial {
  background: none;
  border: none;
  box-shadow: none;
  padding: 8px 12px 0;
  transform: none;
}
.sj-tg-quotes .sj-testimonial-quote { font-size: 1.05rem; }

/* "Row" — one line that scrolls sideways. Keeps a long wall of reviews from
   pushing the rest of the page down, and reads naturally as a swipe on a
   phone. Snap points stop it drifting between two half-shown cards. */
.sj-tg-row {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 24px;
  max-width: none;
  padding-bottom: 12px;
  /* Bleed to the edges so a cut-off card reads as "more this way". */
  margin-inline: calc(var(--gutter, 24px) * -1);
  padding-inline: var(--gutter, 24px);
  -webkit-overflow-scrolling: touch;
}
.sj-tg-row .sj-testimonial {
  flex: 0 0 min(88vw, 380px);
  scroll-snap-align: start;
  transform: none;
}
.sj-testimonial {
  background: var(--cream);
  padding: 36px 32px 28px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  margin: 0;
  position: relative;
  border: 1px solid var(--line);
}
.sj-tilt-l { transform: rotate(-1deg); }
.sj-tilt-r { transform: rotate(1deg); }
.sj-testimonial-stars { display: flex; gap: 2px; margin-bottom: 16px; }
.sj-testimonial-quote {
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 24px;
  font-weight: 400;
  text-wrap: pretty;
}
.sj-testimonial-cite {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sj-testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--rosa-800);
}
.sj-testimonial-name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--rosa-800);
}
.sj-testimonial-role {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* === ORDER === */
.sj-order { padding: var(--rhythm) 0; background: var(--cream); }
.sj-order-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}
.sj-order-text .sj-h2 { margin-top: 12px; }
.sj-order-text .t-body {
  margin: 24px 0 32px;
  color: var(--ink-soft);
}
.sj-order-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sj-order-checklist li {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink);
  display: flex;
  gap: 12px;
  align-items: center;
}
.sj-check {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--rosa-100);
  color: var(--rosa-800);
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}
.sj-order-aside {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: var(--rosa-50);
  border-radius: var(--r-lg);
  border: 1px dashed var(--rosa-200);
}
.sj-order-note {
  font-size: 22px;
  color: var(--rosa-800);
  margin: 0;
  line-height: 1.2;
}

.sj-order-form {
  background: var(--cream-deep);
  padding: 40px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sj-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sj-order-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sj-order-form label > span {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
/* input[type="tel"] was missing here, so the phone field alone rendered as a
   bare browser box — narrower, differently styled, visibly not part of the
   form. Now that a phone number is required, it has to look like every other
   field being asked for. */
.sj-order-form input[type="text"],
.sj-order-form input[type="email"],
.sj-order-form input[type="tel"],
.sj-order-form input[type="date"],
.sj-order-form select,
.sj-order-form textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sj-order-form input:focus,
.sj-order-form select:focus,
.sj-order-form textarea:focus {
  outline: none;
  border-color: var(--rosa-400);
  box-shadow: 0 0 0 3px var(--rosa-50);
}
.sj-order-form textarea { resize: vertical; min-height: 80px; }
.sj-order-form input[type="range"] {
  width: 100%;
  accent-color: var(--rosa-600);
}
.sj-range-marks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-soft);
  font-style: normal;
}
.sj-range-marks em { font-style: normal; }
.sj-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sj-chip {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--cream);
  border: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  transition: all 0.15s ease;
}
.sj-chip:hover { border-color: var(--rosa-400); }
.sj-chip.is-on {
  background: var(--rosa-100);
  border-color: var(--rosa-400);
  color: var(--rosa-800);
}
.sj-order-submit {
  margin-top: 8px;
  padding: 18px 32px;
  font-size: 16px;
  align-self: flex-start;
}
.sj-order-success {
  text-align: center;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.sj-order-success h3 {
  font-size: 36px;
  color: var(--rosa-800);
  margin: 0;
}

/* === SHOP === */
.sj-shop { padding: var(--rhythm) 0; background: var(--cream-deep); border-top: 1px solid var(--line); }
.sj-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sj-shop-card {
  background: var(--cream);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sj-shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sj-shop-img {
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--rosa-50), var(--cream-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.sj-shop-img > svg { max-width: 70%; max-height: 70%; }
.sj-shop-body { padding: 22px; }
.sj-shop-name {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--rosa-800);
  margin: 0 0 8px;
  font-weight: 400;
}
.sj-shop-desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 20px;
  min-height: 42px;
}
.sj-shop-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.sj-shop-price {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--rosa-800);
}
.sj-shop-price em {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-style: normal;
}
.sj-shop-add { padding: 8px 18px; font-size: 13px; }
.sj-qty {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--cream-deep);
  border-radius: var(--r-pill);
  padding: 6px 6px;
}
.sj-qty button {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--rosa-600);
  color: var(--cream);
  font-size: 16px;
}
.sj-qty span {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--rosa-800);
  min-width: 18px;
  text-align: center;
}
.sj-cart-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  background: var(--rosa-800);
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
}
.sj-cart-fab strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
}
.sj-cart-popover {
  position: fixed;
  bottom: 90px;
  right: 24px;
  z-index: 91;
  width: 320px;
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}
.sj-cart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.sj-cart-head button {
  font-size: 22px;
  color: var(--ink-soft);
  width: 28px; height: 28px;
}
.sj-cart-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-family: var(--font-body);
  font-size: 15px;
  border-bottom: 1px solid var(--line);
}
.sj-cart-total {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--rosa-800);
  margin-bottom: 12px;
}

/* === FAQ === */
.sj-faq { padding: var(--rhythm) 0; }
.sj-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
.sj-faq-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sj-faq-item {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  padding: 24px 0;
  transition: padding 0.2s ease;
}
.sj-faq-item:first-child { border-top: 1px solid var(--line); }
.sj-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.sj-faq-q h3 {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--rosa-800);
  margin: 0;
  font-weight: 400;
}
.sj-faq-toggle {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--rosa-600);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sj-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, margin-top 0.2s ease;
}
.sj-faq-item.is-open .sj-faq-a {
  max-height: 200px;
  margin-top: 16px;
}
.sj-faq-a p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 620px;
}

/* === FOOTER === */
.sj-footer {
  position: relative;
  background: var(--rosa-800);
  color: var(--cream);
  padding: 100px 0 40px;
  position: relative;
  overflow: hidden;
}
.sj-footer::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rosa-600), transparent 70%);
  opacity: 0.5;
}
.sj-footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(253, 244, 245, 0.15);
  position: relative;
}
.sj-footer-h {
  font-size: clamp(40px, 5vw, 64px);
  margin: 0;
  color: var(--cream);
  max-width: 720px;
}
.sj-footer-h .sj-script-accent { color: var(--butter); }
.sj-footer-cta { background: var(--butter); color: var(--cocoa); flex-shrink: 0; }
.sj-footer-cta:hover { background: var(--cream); color: var(--rosa-800); }
.sj-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding: 60px 0;
  position: relative;
}
.sj-footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sj-footer-col .sj-logo-line1,
.sj-footer-col .sj-logo-line2 { color: var(--cream); }
.sj-footer-col .sj-logo-line2 { color: rgba(253, 244, 245, 0.6); }
.sj-footer-col .t-eyebrow {
  color: var(--butter);
  margin-bottom: 4px;
}
.sj-footer-blurb {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: rgba(253, 244, 245, 0.8);
  max-width: 280px;
}
.sj-footer-col a, .sj-footer-col p {
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(253, 244, 245, 0.85);
  margin: 0;
}
.sj-footer-col a:hover { color: var(--butter); }
.sj-footer-form {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.sj-footer-form input {
  flex: 1;
  padding: 12px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(253, 244, 245, 0.3);
  background: rgba(253, 244, 245, 0.08);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 14px;
}
.sj-footer-form input::placeholder { color: rgba(253, 244, 245, 0.5); }
.sj-footer-form input:focus {
  outline: none;
  border-color: var(--butter);
}
.sj-footer-form button { padding: 10px 20px; font-size: 13px; background: var(--butter); color: var(--cocoa); }
.sj-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid rgba(253, 244, 245, 0.15);
  font-family: var(--font-ui);
  font-size: 13px;
  color: rgba(253, 244, 245, 0.6);
  position: relative;
}
.sj-footer-bottom .t-script {
  font-size: 22px;
  color: var(--butter);
  font-family: var(--font-script);
}

/* === PROMISE RIBBON === */
.sj-promise {
  background: var(--rosa-600);
  color: var(--cream);
  padding: 64px 0;
  border-top: 4px solid var(--rosa-800);
  border-bottom: 4px solid var(--rosa-800);
}
.sj-promise-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 48px;
  align-items: center;
}
.sj-promise-text .t-eyebrow { color: var(--butter); }
.sj-promise-h {
  font-size: clamp(28px, 3.4vw, 44px);
  color: var(--cream);
  margin: 8px 0 12px;
}
.sj-promise-h .sj-script-accent { color: var(--butter); }
.sj-promise-sub { color: rgba(253, 244, 245, 0.85); max-width: 540px; margin: 0; font-size: 17px; }
.sj-promise-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 32px;
  border-left: 1px solid rgba(253, 244, 245, 0.25);
}
.sj-promise-stats > div { display: flex; flex-direction: column; gap: 2px; }
.sj-promise-stats strong {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--butter);
  font-weight: 400;
}
.sj-promise-stats em {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(253, 244, 245, 0.8);
}

/* An uploaded logo. Width is intrinsic so any aspect ratio works — a square
   mark and a wide lockup both sit correctly; only the height is controlled. */
.sj-logo-img { width: auto; display: block; object-fit: contain; max-width: 260px; }
@media (max-width: 640px) { .sj-logo-img { max-width: 170px; } }

/* === RESPONSIVE === */
/* Belt and braces: fix the cause above, but never let one overflowing element
   make the entire storefront scroll horizontally on a phone. */
html, body { overflow-x: clip; }

@media (max-width: 1024px) {
  .sj-hero-grid, .sj-about-grid, .sj-order-grid, .sj-faq-grid { grid-template-columns: 1fr; gap: 48px; }
  .sj-promise-inner { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .sj-promise-stats { flex-direction: row; padding-left: 0; padding-top: 24px; border-left: none; border-top: 1px solid rgba(253, 244, 245, 0.25); justify-content: center; gap: 32px; }
  .sj-menu-grid, .sj-shop-grid { grid-template-columns: repeat(2, 1fr); }
  .sj-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .sj-testimonial-grid:not(.sj-tg-row) { grid-template-columns: 1fr; }
  .sj-footer-grid { grid-template-columns: repeat(2, 1fr); }
  .sj-nav-links { display: none; }
}
@media (max-width: 640px) {
  .sj-section-inner, .sj-hero-grid { padding: 0 24px; }
  .sj-menu-grid, .sj-shop-grid, .sj-gallery-grid, .sj-footer-grid { grid-template-columns: 1fr; }
  /* A wide tile still asked for TWO columns in a one-column grid, so Grid
     invented a second column and the gallery ran off the side of the phone.
     The overflow guard stopped the page scrolling but the tiles stayed cut
     off — the span is the actual bug. Tall tiles are fine: an extra ROW in a
     single column is just a taller picture. */
  .sj-tile-wide { grid-column: span 1; }

  /* .btn is white-space: nowrap, which is right on a roomy screen and wrong on
     a 320px one: "Send to Jenny's kitchen" simply cannot fit on one line, so
     the button grew past the edge. On the narrowest phones let long labels
     wrap and trim the generous padding. */
  .btn { white-space: normal; }
  .sj-order-submit { padding: 16px 22px; align-self: stretch; }
  /* The drawn bake beside the handwritten note is a fixed-size SVG; cap it so
     it scales with the card instead of setting the card's width. */
  .sj-order-aside > svg { max-width: 100%; height: auto; }

  /* The floating bakes sit at left: 0 and are then ROTATED, which swings a
     corner past the edge. Harmless at desktop width where the hero has room;
     on a 320px screen it clips a slice off the cookie. Inset them so the
     rotated bounding box still lands inside. */
  .sj-float-cookie { left: 14px; }
  .sj-float-cupcake { left: 40px; }
  .sj-float-macaron { right: 18px; }
  /* The "today's special" arrow is pinned right: 180px inside a 272px box, so
     on a narrow phone its 130px width starts left of zero and the tip gets
     sliced. Pull it in and shrink it to suit the space. */
  .sj-hero-arrow { right: 92px; max-width: 108px; }
  .sj-hero-arrow svg, .sj-hero-arrow { height: auto; }

  /* Grid items default to min-width:auto, which means they refuse to shrink
     below their own content's intrinsic width — so the order column stayed
     358px wide inside a 327px box and pushed 7px off the screen. This is the
     single most common cause of a grid overflowing on a phone. */
  .sj-order-grid > *, .sj-hero-grid > *, .sj-about-grid > *,
  .sj-faq-grid > *, .sj-footer-grid > *, .sj-section-inner > * { min-width: 0; }

  /* The About collage is free-dragged, and those positions are percentages of
     a box that is much wider on a desktop. At phone width a card parked at 47%
     hangs off the edge, and clamping a fixed-width card inside a narrow box is
     not something CSS can do. So on phones the scatter is abandoned entirely:
     the photos stack in normal flow, still tilted, nothing cropped. */
  .sj-about-visual { height: auto; display: flex; flex-direction: column; gap: 18px; align-items: center; }
  .sj-polaroid {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    z-index: auto !important;
    width: min(240px, 100%);
  }
  .sj-polaroid:nth-child(odd)  { transform: rotate(-2.5deg); }
  .sj-polaroid:nth-child(even) { transform: rotate(2.5deg); }
  .sj-form-row { grid-template-columns: 1fr; }
  .sj-hero-visual { height: 400px; }
  .sj-hero-cake { width: 280px; }
  .sj-gallery-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .sj-footer-top { flex-direction: column; align-items: flex-start; }
  .sj-footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* ── Live content additions ─────────────────────────────────────────────── */
/* Menu items can carry a real uploaded photo instead of the SVG illustration. */
.sj-menu-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sold-out items stay on the menu but read as unavailable. */
.tag-soldout { background: var(--ink-100, #e6e0e2); color: var(--ink-700, #4a3b40); }
/* The bestseller. Gold, because it is an honour rather than a category —
   and computed from real orders in the editor, never typed. */
.tag-best { background: var(--butter); color: var(--cocoa, #4F2E17); }
.sj-menu-card.is-soldout .sj-menu-card-img > svg,
.sj-menu-card.is-soldout .sj-menu-photo { opacity: 0.45; filter: grayscale(0.7); }
.sj-menu-card.is-soldout .sj-menu-price { text-decoration: line-through; opacity: 0.6; }
.sj-menu-order.is-disabled {
  color: var(--ink-400, #9a8b90);
  cursor: default;
  pointer-events: none;
}

/* Limited-run items advertise how long they're around for. */
.sj-menu-limited {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--butter, #F4C242);
  color: var(--rosa-800, #4F0F30);
}

.sj-order-error {
  margin: 4px 0 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #FDECEC;
  border: 1px solid #F0BDBD;
  color: #8A2A2A;
  font-size: 14px;
  line-height: 1.45;
}
.sj-order-submit[disabled] { opacity: 0.6; cursor: progress; }
.sj-footer-note { font-size: 13px; opacity: 0.75; margin-top: 6px; }

/* ── Custom pages (admin-created tabs) ──────────────────────────────────── */
/* Clear the fixed bar, like .sj-hero does.
   The hero was fixed when the logo grew the bar to 169px; THIS was not, and
   it is every route except the homepage — order tracking, checkout, the
   thank-you screen, the review form, custom pages. On all of them the first
   line sat under the header: "← Back to the bakery" was completely invisible,
   with only the tail of it poking out beside the logo. */
.sj-page {
  padding: max(var(--rhythm), calc(var(--nav-h, 74px) + 22px)) 0 90px;
  background: var(--cream, #FDF4F5); min-height: 70vh;
}
.sj-page-inner { max-width: 780px; }
.sj-page-back {
  display: inline-block; margin-bottom: 26px; font-size: 14px; font-weight: 600;
  color: var(--rosa-600, #7A1F4A); text-decoration: none;
}
.sj-page-back:hover { text-decoration: underline; }
.sj-page-h { font-size: clamp(38px, 6vw, 62px); line-height: 1.04; color: var(--rosa-800, #4F0F30); margin: 6px 0 26px; }
.sj-page-h2 { font-size: clamp(24px, 3.4vw, 34px); color: var(--rosa-800, #4F0F30); margin: 38px 0 12px; }
.sj-page-p { margin-bottom: 18px; line-height: 1.7; }
.sj-page-photos { display: grid; gap: 16px; margin: 28px 0 34px; }
.sj-page-photos.cols-1 { grid-template-columns: 1fr; }
.sj-page-photos.cols-2 { grid-template-columns: repeat(2, 1fr); }
.sj-page-photos.cols-3 { grid-template-columns: repeat(3, 1fr); }
.sj-page-photos figure { margin: 0; }
.sj-page-photos img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 14px; display: block; background: var(--rosa-50, #FBE5EC);
}
.sj-page-photos figcaption { margin-top: 8px; font-size: 17px; color: var(--rosa-600, #7A1F4A); }
@media (max-width: 720px) {
  .sj-page-photos.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .sj-page-photos.cols-2, .sj-page-photos.cols-3 { grid-template-columns: 1fr; }
}

/* Draft-preview marker (admin host only). */
.sj-preview-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  background: #4F0F30; color: #FDF4F5; text-align: center;
  padding: 9px 16px; font: 600 13px/1.4 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.sj-preview-banner a { color: #F4C242; margin-left: 6px; }

/* ── Basket ─────────────────────────────────────────────────────────────── */
.sj-nav-right { display: flex; align-items: center; gap: 12px; }

.sj-cart-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--rosa-200, #F5C9D6);
  background: #fff; color: var(--rosa-600, #7A1F4A); cursor: pointer; flex: none;
  transition: background .15s, border-color .15s;
}
.sj-cart-btn:hover { background: var(--rosa-50, #FDF4F5); border-color: var(--rosa-600, #7A1F4A); }
.sj-cart-wrap { position: relative; display: inline-flex; flex: none; }
.sj-cart-count {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--rosa-600, #7A1F4A); color: #fff;
  font: 700 11px/20px -apple-system, BlinkMacSystemFont, system-ui, sans-serif; text-align: center;
  border: 2px solid #fff;
}

button.sj-menu-order {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--rosa-600, #7A1F4A); font-weight: 600;
  border-bottom: 1.5px solid currentColor; align-self: flex-start;
}
button.sj-menu-order:hover { color: var(--rosa-800, #4F0F30); }

.sj-cart-flash {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 900;
  display: flex; align-items: center; gap: 14px; max-width: calc(100% - 28px);
  background: var(--rosa-800, #4F0F30); color: #FDF4F5; padding: 11px 12px 11px 18px;
  border-radius: 999px; box-shadow: 0 10px 30px rgba(79, 15, 48, .32);
  font-size: 14px; animation: sj-pop .22s ease-out;
}
.sj-cart-flash button {
  background: var(--butter, #F4C242); color: var(--rosa-800, #4F0F30); border: none;
  border-radius: 999px; padding: 7px 14px; font: 700 13px inherit; cursor: pointer; white-space: nowrap;
}
@keyframes sj-pop { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }

.sj-drawer-wrap {
  position: fixed; inset: 0; z-index: 1000; background: rgba(44, 22, 32, .45);
  display: flex; justify-content: flex-end; animation: sj-fade .18s ease-out;
}
@keyframes sj-fade { from { opacity: 0; } to { opacity: 1; } }
.sj-drawer {
  width: min(420px, 100%); background: var(--cream, #FDF4F5); display: flex; flex-direction: column;
  box-shadow: -8px 0 40px rgba(79, 15, 48, .22); animation: sj-slide .24s cubic-bezier(.2,.8,.3,1);
}
@keyframes sj-slide { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.sj-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: 1px solid var(--rosa-200, #F0D5DE);
}
.sj-drawer-head h2 { font-size: 26px; color: var(--rosa-800, #4F0F30); }
.sj-drawer-x {
  border: none; background: none; font-size: 19px; cursor: pointer; color: var(--rosa-600, #7A1F4A);
  width: 36px; height: 36px; border-radius: 50%;
}
.sj-drawer-x:hover { background: var(--rosa-100, #FBE5EC); }
.sj-drawer-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px; }
.sj-drawer-empty p { font-size: 21px; color: var(--rosa-600, #7A1F4A); }
.sj-drawer-lines { flex: 1; overflow-y: auto; padding: 8px 22px; }

.sj-line { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rosa-200, #F0D5DE); }
.sj-line:last-child { border-bottom: none; }
.sj-line-img {
  width: 66px; height: 66px; flex: none; border-radius: 12px; overflow: hidden;
  background: var(--rosa-100, #FBE5EC); display: grid; place-items: center; padding: 6px;
}
.sj-line-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.sj-line-img > svg { max-width: 100%; max-height: 100%; }
.sj-line-body { flex: 1; min-width: 0; }
.sj-line-body strong { display: block; color: var(--rosa-800, #4F0F30); }
.sj-line-unit { font-size: 12.5px; color: var(--rosa-600, #7A1F4A); opacity: .8; }
.sj-line-price { font-weight: 700; color: var(--rosa-800, #4F0F30); white-space: nowrap; }

.sj-qty { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.sj-qty button {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--rosa-200, #F0D5DE);
  background: #fff; color: var(--rosa-600, #7A1F4A); font-size: 15px; cursor: pointer; line-height: 1;
}
.sj-qty button:hover { background: var(--rosa-100, #FBE5EC); }
.sj-qty span { min-width: 22px; text-align: center; font-weight: 600; }
.sj-qty-sm button { width: 24px; height: 24px; font-size: 13px; }
.sj-line-del {
  width: auto !important; padding: 0 8px; font-size: 12px !important; border: none !important;
  background: none !important; opacity: .7; text-decoration: underline;
}

.sj-drawer-foot { padding: 18px 22px 22px; border-top: 1px solid var(--rosa-200, #F0D5DE); background: #fff; }
.sj-drawer-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.sj-drawer-total strong { font-size: 24px; color: var(--rosa-800, #4F0F30); }
.sj-drawer-note { font-size: 12.5px; line-height: 1.5; color: var(--rosa-600, #7A1F4A); opacity: .85; margin-bottom: 14px; }
.sj-drawer-cta { width: 100%; justify-content: center; text-align: center; }

/* ── Checkout ───────────────────────────────────────────────────────────── */
.sj-checkout { max-width: 1000px; }
.sj-checkout-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px; align-items: start; }
.sj-summary {
  background: #fff; border: 1px solid var(--rosa-200, #F0D5DE); border-radius: 16px; padding: 22px;
  /* Below the bar, whatever height the logo has made it. */
  position: sticky; top: calc(var(--nav-h, 74px) + 20px);
}
.sj-summary h2 { font-size: 21px; color: var(--rosa-800, #4F0F30); margin-bottom: 14px; }
.sj-summary-line {
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--rosa-100, #FBE5EC);
}
.sj-summary-line strong { display: block; font-size: 14.5px; color: var(--rosa-800, #4F0F30); }
.sj-summary-line > span { font-weight: 700; white-space: nowrap; }
.sj-summary-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0 10px; font-size: 15px;
}
.sj-summary-total strong { font-size: 24px; color: var(--rosa-800, #4F0F30); }
.sj-checkout-done { text-align: center; max-width: 560px; padding: 40px 0; }
.sj-checkout-done p { margin: 12px 0 26px; }

@media (max-width: 860px) {
  .sj-checkout-grid { grid-template-columns: 1fr; }
  .sj-summary { position: static; order: -1; }
}
@media (max-width: 560px) {
  .sj-nav-cta { display: none; }

  /* With the CTA gone it is the LOGO and the basket competing for what is left:
     at 320px, 64px of padding leaves 256px, and a wide logo lockup plus a 42px
     basket does not fit. Reclaim the padding, let the logo shrink rather than
     insist on its natural width, and cap the uploaded image so it scales down
     with everything else. */
  .sj-nav-inner { padding: 0 18px; gap: 12px; }
  .sj-logo { min-width: 0; flex: 1 1 auto; }
  .sj-logo-text { min-width: 0; }
  .sj-logo-img { max-height: 34px; max-width: 45vw; }
  .sj-cart-btn { flex: 0 0 auto; }
}

/* ── Edit mode (inside the site editor's live preview only) ─────────────── */
/* Deliberately does NOT set `position` — doing so outranks the absolute
   positioning on .sj-polaroid and collapses the collage into a stack. */
body.sj-editing [data-sj-ref] { cursor: pointer; }
body.sj-editing [data-sj-ref]:hover {
  outline: 2px dashed var(--rosa-600, #7A1F4A);
  outline-offset: 3px;
  border-radius: 6px;
}
body.sj-editing .sj-edit-on {
  outline: 3px solid var(--rosa-600, #7A1F4A) !important;
  outline-offset: 3px;
  border-radius: 6px;
}
/* The nav is sticky; keep it from covering what we scroll to. */
body.sj-editing { scroll-padding-top: calc(var(--nav-h, 74px) + 46px); }

/* ── Reviews ────────────────────────────────────────────────────────────── */
.sj-reviews-empty {
  text-align: center; font-size: 24px; color: var(--rosa-600, #7A1F4A);
  opacity: .75; padding: 26px 0 6px; min-height: 46px;
}
.sj-reviews-cta { text-align: center; margin-top: 30px; }

.sj-review-form {
  max-width: 560px; margin: 0 auto; text-align: left;
  background: #fff; border: 1px solid var(--rosa-200, #F0D5DE);
  border-radius: 16px; padding: 24px;
}
.sj-review-form h3 { font-size: 24px; color: var(--rosa-800, #4F0F30); margin-bottom: 4px; }
.sj-review-hint { font-size: 13.5px; color: var(--rosa-600, #7A1F4A); opacity: .85; margin-bottom: 16px; line-height: 1.5; }
.sj-review-form label { display: block; margin-bottom: 14px; }
.sj-review-form label > span {
  display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--rosa-800, #4F0F30); margin-bottom: 6px;
}
.sj-review-form input[type=text], .sj-review-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--rosa-200, #F0D5DE);
  border-radius: 10px; font: 15px inherit; background: #fff; color: inherit;
}
.sj-review-form textarea { resize: vertical; }
.sj-review-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sj-review-form.is-done { text-align: center; }
.sj-review-form.is-done p { margin: 12px 0 18px; }

.sj-star-pick { display: flex; gap: 4px; }
.sj-star-pick button {
  background: none; border: none; cursor: pointer; font-size: 30px; line-height: 1;
  color: var(--rosa-200, #F0D5DE); padding: 0 2px;
}
.sj-star-pick button.on { color: var(--butter, #F4C242); }

/* Confirmation number on the checkout thank-you */
.sj-code-card {
  display: inline-block; margin: 18px 0 8px; padding: 16px 28px;
  background: #fff; border: 2px dashed var(--rosa-300, #F0D5DE); border-radius: 14px;
}
.sj-code-card strong {
  display: block; font: 700 30px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em; color: var(--rosa-800, #4F0F30); margin: 4px 0 6px;
}
.sj-code-card p { font-size: 12.5px; color: var(--rosa-600, #7A1F4A); opacity: .85; margin: 0; }
.sj-pay-note {
  max-width: 480px; margin: 4px auto 26px; font-size: 14.5px;
  color: var(--rosa-600, #7A1F4A); opacity: .9;
}

/* Polaroid photos fill their frame; without one the drawn bake shows through. */
.sj-polaroid-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.sj-polaroid-photo > svg { max-width: 85%; max-height: 85%; }

/* Drag-to-arrange, edit mode only. */
body.sj-editing .sj-polaroid { cursor: grab; }
body.sj-editing .sj-polaroid.sj-dragging {
  cursor: grabbing;
  filter: drop-shadow(0 14px 26px rgba(79, 15, 48, .32));
  transition: none;
}

/* Type-on-the-page text (editor only). */
body.sj-editing [data-sj-text] {
  cursor: text;
  border-radius: 4px;
  transition: background .12s, box-shadow .12s;
}
body.sj-editing [data-sj-text]:hover {
  background: rgba(244, 194, 66, .22);
  box-shadow: 0 0 0 3px rgba(244, 194, 66, .22);
}
body.sj-editing [data-sj-text]:focus {
  outline: none;
  background: rgba(244, 194, 66, .3);
  box-shadow: 0 0 0 3px var(--butter, #F4C242);
}
/* A section outline on top of a text highlight is just noise. */
body.sj-editing [data-sj-ref]:hover:has([data-sj-text]:hover) { outline: none; }

/* The corner you drag to give a typing box more room. Editor only — this
 * class is rendered by EditBoxResizer, which returns null outside ?edit=1.
 *
 * The visible dot is 14px because a bigger one covers the words underneath it;
 * the button is 44px because a fingertip is not a mouse pointer, and this
 * editor gets used on a phone. Hence the transparent padding and the dot drawn
 * as a background rather than as the element's own box.
 *
 * touch-action:none is load-bearing, not tidiness: without it a drag on a
 * touchscreen scrolls the page instead of resizing, and pointermove stops
 * arriving mid-gesture. */
.sj-editbox-grip {
  position: fixed;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;   /* centred on the box's bottom-right corner */
  padding: 0; border: 0; background: none;
  cursor: nwse-resize; touch-action: none;
  z-index: 40;
  display: grid; place-items: center;
}
.sj-editbox-grip::after {
  content: "";
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--butter, #F4C242);
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(79, 15, 48, .35);
}
.sj-editbox-grip:hover::after,
.sj-editbox-grip:focus-visible::after { transform: scale(1.18); }
.sj-editbox-grip:focus-visible { outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .sj-editbox-grip::after { transition: transform .12s; }
}

/* A real photo in the hero, in place of the illustrated cluster. */
.sj-hero-photo {
  position: absolute;
  inset: 6% 4% 10%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(79, 15, 48, .18);
  background: var(--rosa-100, #FBE5EC);
}
.sj-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The badge's coordinate space: the photograph's exact box, without the
   clipping. Keeping these insets identical to .sj-hero-photo above is the
   whole point — if they drift apart, so does the badge. */
.sj-hero-anchor {
  position: absolute; inset: 0; pointer-events: none;
  /* How far past this box the badge may hang before it would run off the
     screen: the gap between this box's edge and the section's, which is the
     photo's own inset plus the grid's side padding. */
  --room-side: 48px;
  --inset-side: 0%;
}
.sj-hero-anchor.on-photo {
  inset: 6% 4% 10%;
  /* 4% of the COLUMN, expressed against this box's width (92% of it). */
  --inset-side: 4.35%;
}
@media (max-width: 640px) { .sj-hero-anchor { --room-side: 24px; } }
/* The wrapper only lends its geometry; the badge itself stays grabbable. */
.sj-hero-anchor > * { pointer-events: auto; }

/* An uploaded signature. multiply blending lets a photo taken on white paper
   sit on the cream background as if it were inked straight onto the page. */
.sj-signature-img {
  max-width: 220px;
  max-height: 90px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* The nav is fixed, so an anchor jump would otherwise tuck the section heading
   underneath it. Offset every jump target by the nav's height. */
#home, #about, #menu, #gallery, #testimonials, #order, #faq, #contact {
  scroll-margin-top: calc(var(--nav-h, 74px) + 18px);
}
@media (max-width: 720px) {
  #home, #about, #menu, #gallery, #testimonials, #order, #faq, #contact {
    scroll-margin-top: calc(var(--nav-h, 74px) + 12px);
  }
}

/* ── Order tracking ─────────────────────────────────────────────────────── */
.sj-track { max-width: 720px; }
.sj-track-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 6px 0 22px; }
.sj-track-form label { flex: 1; min-width: 220px; }
.sj-track-form label > span {
  display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--rosa-800, #4F0F30); margin-bottom: 6px;
}
.sj-track-form input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--rosa-200, #F0D5DE);
  border-radius: 10px; font: 600 17px ui-monospace, Menlo, monospace;
  letter-spacing: .05em; background: #fff; color: inherit; text-transform: uppercase;
}

.sj-track-card {
  background: #fff; border: 1px solid var(--rosa-200, #F0D5DE);
  border-radius: 16px; padding: 26px; margin-top: 8px;
}
.sj-track-head { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.sj-track-head h2 { font-size: 26px; color: var(--rosa-800, #4F0F30); margin: 2px 0 4px; }
.sj-track-meta { font-size: 13.5px; color: var(--rosa-600, #7A1F4A); opacity: .8; }
.sj-track-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.sj-track-when { text-align: right; }
.sj-track-when span { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--rosa-600, #7A1F4A); opacity: .8; }
.sj-track-when strong { font-size: 16px; color: var(--rosa-800, #4F0F30); }

.sj-track-steps { list-style: none; margin: 24px 0 6px; padding: 0; }
.sj-track-steps li { display: flex; gap: 14px; padding-bottom: 22px; position: relative; opacity: .45; }
/* the connecting line */
.sj-track-steps li:not(:last-child)::before {
  content: ""; position: absolute; left: 15px; top: 32px; bottom: 4px;
  width: 2px; background: var(--rosa-200, #F0D5DE);
}
.sj-track-steps li.is-done, .sj-track-steps li.is-now { opacity: 1; }
.sj-track-steps li.is-done::before { background: var(--rosa-600, #7A1F4A); }
.sj-track-dot {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--rosa-100, #FBE5EC); color: var(--rosa-600, #7A1F4A);
  font: 700 14px system-ui; position: relative; z-index: 1;
}
.sj-track-steps li.is-done .sj-track-dot { background: var(--rosa-600, #7A1F4A); color: #fff; }
.sj-track-steps li.is-now .sj-track-dot {
  background: var(--butter, #F4C242); color: var(--rosa-800, #4F0F30);
  box-shadow: 0 0 0 5px rgba(244, 194, 66, .28);
}
.sj-track-steps strong { display: block; color: var(--rosa-800, #4F0F30); padding-top: 5px; }
.sj-track-steps p { font-size: 14px; color: var(--rosa-600, #7A1F4A); margin-top: 3px; }

.sj-track-cancelled {
  margin: 20px 0; padding: 14px 16px; border-radius: 10px;
  background: #FDECEC; border: 1px solid #F0BDBD; color: #8A2A2A; font-size: 14.5px;
}
.sj-track-items { margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--rosa-100, #FBE5EC); }
.sj-track-items > div { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: 14.5px; }
.sj-track-total { border-top: 1px solid var(--rosa-100, #FBE5EC); margin-top: 8px; padding-top: 12px !important; }
.sj-track-total strong { font-size: 19px; color: var(--rosa-800, #4F0F30); }
.sj-track-pay { font-size: 13.5px; line-height: 1.55; color: var(--rosa-600, #7A1F4A); margin-bottom: 18px; }

.sj-done-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* The back link is inline-block, so a following eyebrow was sitting on the same
   line and butting straight up against it. */
.sj-track .sj-page-back,
.sj-page-inner .sj-page-back,
.sj-checkout .sj-page-back { display: block; }
.sj-track .t-eyebrow,
.sj-page-inner .t-eyebrow { display: block; }

/* === SEASONAL DECORATIONS ===================================================
 * Festive overlay driven by content.decorations (see 15-decor.jsx and the
 * editor's Decorations tab). Every layer is pointer-events: none — decorations
 * can never block a click, a form, or the cart. z-index 80 keeps them above
 * page content but under the cart FAB (90), nav (100) and drawer (999).
 */
.sj-seasonal, .sj-seasonal * { pointer-events: none !important; }

.sj-seasonal-sky {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: hidden;
}
.sj-seasonal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.sj-seasonal-p {
  position: absolute;
  top: -8%;
  will-change: transform;
  animation-name: sj-seasonal-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
/* Rising particles — balloons and bubbles go UP. Same span, same thinning
   and reduced-motion rules as the falling kind; only the direction differs. */
.sj-seasonal-p--rise { animation-name: sj-seasonal-rise; bottom: -8vh; top: auto; }
@keyframes sj-seasonal-rise {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); }
  50%  { transform: translateY(-55vh) translateX(var(--sway)) rotate(var(--rot)); }
  100% { transform: translateY(-118vh) translateX(0) rotate(0deg); }
}
@keyframes sj-seasonal-fall {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); }
  50%  { transform: translateY(55vh) translateX(var(--sway, 0px)) rotate(var(--rot, 0deg)); }
  100% { transform: translateY(110vh) translateX(0) rotate(0deg); }
}
/* Snow reads white with a whisper of plum so it survives the cream page. */
.sj-seasonal-snow { color: #fff; text-shadow: 0 0 5px rgba(79, 15, 48, 0.35); }

.sj-seasonal-bat {
  position: absolute;
  left: -8%;
  will-change: transform, left;
  animation-name: sj-seasonal-fly;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes sj-seasonal-fly {
  0%   { left: -8%;  transform: translateY(0) scaleX(1); }
  48%  { transform: translateY(-30px) scaleX(1); }
  50%  { transform: translateY(-32px) scaleX(-1); }
  98%  { transform: translateY(4px) scaleX(-1); }
  100% { left: 106%; transform: translateY(0) scaleX(-1); }
}

/* Christmas light string across the very top of the page (scrolls away). */
.sj-seasonal-lights {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 101; /* over the transparent nav at the top of the page */
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  border-top: 3px solid rgba(79, 15, 48, 0.45);
}
.sj-seasonal-lights i {
  width: 9px; height: 14px;
  margin-top: 3px;
  border-radius: 45% 45% 50% 50%;
  background: var(--c, #F4C242);
  box-shadow: 0 0 9px 2px var(--c, #F4C242);
  animation: sj-twinkle 1.7s ease-in-out infinite;
  animation-delay: var(--td, 0s);
}
@keyframes sj-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Pumpkin row + corner pieces sit along the bottom of the viewport. The right
 * corner clears the cart FAB so the snowman never hides the basket. */
.sj-seasonal-row {
  position: fixed;
  left: 0; right: 74px; bottom: 4px;
  z-index: 80;
  display: flex;
  justify-content: space-around;
}
.sj-seasonal-corner { position: fixed; bottom: 8px; z-index: 80; display: inline-block; }
.sj-seasonal-corner[style*="right"] { bottom: 84px; }

.sj-bob { display: inline-block; animation: sj-bob 2.6s ease-in-out infinite; }
@keyframes sj-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.sj-sway { display: inline-block; transform-origin: bottom center; animation: sj-sway 3.6s ease-in-out infinite; }
@keyframes sj-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* Phones: thin the flurry; Jenny can also switch decorations off on phones. */
@media (max-width: 640px) {
  .sj-seasonal-p:nth-child(2n) { display: none; }
  .sj-seasonal-row { right: 64px; }
}
@media (max-width: 768px) {
  .sj-seasonal--no-phones { display: none; }
}

/* Reduce motion: moving pieces stop moving; still trimmings stay. */
@media (prefers-reduced-motion: reduce) {
  .sj-seasonal-p, .sj-seasonal-bat { display: none; }
  .sj-seasonal-canvas { display: none; }
  .sj-seasonal-lights i, .sj-bob, .sj-sway { animation: none; }
}

/* === ANNOUNCEMENT RIBBON === */
.sj-announce {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: var(--rosa-800);
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(79, 15, 48, 0.22);
}
.sj-announce-text { outline: none; }
@media (max-width: 640px) {
  .sj-announce { font-size: 12.5px; padding: 6px 13px; }
}

/* === CLOSEUP LIGHTBOX === */
.sj-zoomable { cursor: zoom-in; }
.sj-lightbox {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(44, 22, 32, 0.84);
  display: grid; place-items: center;
  padding: 26px;
}
.sj-lightbox figure { margin: 0; max-width: min(1100px, 94vw); }
.sj-lightbox img {
  display: block; max-width: 100%; max-height: 82vh;
  border-radius: 14px; background: #fff;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.5);
}
.sj-lightbox figcaption { color: var(--cream); text-align: center; margin-top: 14px; font-size: 24px; }
.sj-lightbox-x {
  position: fixed; top: 18px; right: 18px;
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(253, 244, 245, 0.16); color: var(--cream);
  font-size: 17px; cursor: pointer;
}
.sj-lightbox-x:hover { background: rgba(253, 244, 245, 0.3); }

/* A short reason under a field, for the ones people resist filling in.
   "Phone" alone reads as data collection; "so Jenny can call about your date"
   reads as the reason it is being asked, which is what it is. */
.sj-field-why {
  font-style: normal; font-size: 12.5px; line-height: 1.45;
  color: var(--ink-soft); margin-top: -2px;
}

/* === HOW YOU PAY ===========================================================
 * The answer to the one question a custom order always raises, sitting where
 * the decision is made — directly above the Send button, on the enquiry form
 * and at checkout alike. It is a statement, not a form control, so it never
 * takes a click.
 */
.sj-pay-callout {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--rosa-400);
  border-radius: var(--r-md);
  background: var(--cream);
}
/* One chip per way she takes money, stacked when there are several. */
.sj-pay-chips { flex: none; display: flex; flex-direction: column; gap: 6px; }
.sj-pay-chip {
  flex: none;
  font-family: var(--font-ui); font-weight: 700; font-size: 12.5px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--rosa-600);
  background: var(--rosa-50);
  border: 1px solid var(--rosa-100);
  border-radius: var(--r-pill); padding: 7px 13px;
  max-width: 14ch; text-align: center; line-height: 1.25;
}
/* The $cashtag or address under a chip's name — only when Jenny filled one
   in. Lower case on purpose: it is an address, not a heading. */
.sj-pay-handle {
  display: block; font-weight: 600; font-size: 11px;
  letter-spacing: .02em; text-transform: none; font-style: normal;
  color: var(--rosa-800); margin-top: 2px; word-break: break-all;
}
a.sj-pay-handle { text-decoration: underline; }
.sj-pay-words strong {
  display: block; font-family: var(--font-ui); font-size: 13px;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 4px;
}
.sj-pay-words p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }

@media (max-width: 560px) {
  .sj-pay-callout { flex-direction: column; gap: 10px; padding: 14px 16px; }
  .sj-pay-chip { max-width: none; }
  .sj-pay-chips { flex-direction: row; flex-wrap: wrap; }
}

/* === CLICK FEEDBACK ========================================================
 * Nothing acknowledged a tap before this — no press state, no ripple, no sign
 * the basket heard you. On a phone a button that doesn't react feels broken
 * and people tap it twice. See 10-motion.jsx for the JS half.
 *
 * Every decorative piece is pointer-events: none, so none of it can ever
 * swallow the click it is reacting to.
 */

/* Press. The one piece that is feedback rather than decoration, so it stays
   even for people who ask for reduced motion. */
.btn:active,
.sj-filter:active,
.sj-chip:active,
.sj-menu-order:active,
.sj-nav-cta:active,
.sj-cart-fab:active,
.sj-cart-btn:active,
.sj-lightbox-x:active { transform: scale(0.96); }
.sj-menu-card:active,
.sj-gallery-tile:active { transform: scale(0.988); }
.sj-faq-item:active .sj-faq-q { opacity: 0.72; }
.sj-menu-card, .sj-gallery-tile { transition: transform 0.16s ease, box-shadow 0.2s ease; }
.sj-filter, .sj-chip, .sj-menu-order, .sj-cart-fab, .sj-lightbox-x { transition: transform 0.14s ease, background 0.2s ease, border-color 0.2s ease; }

/* Ripple — a soft bloom from the exact point touched. The host needs to clip
   it and to establish a positioning context. */
.btn, .sj-filter, .sj-chip, .sj-menu-order, .sj-nav-cta, .sj-cart-fab, .sj-cart-btn, .sj-lightbox-x {
  position: relative;
  overflow: hidden;
}
.sj-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: currentColor;
  opacity: 0.26;
  transform: scale(0);
  animation: sj-ripple 0.55s ease-out forwards;
}
@keyframes sj-ripple {
  to { transform: scale(1); opacity: 0; }
}

/* Sugar thrown when something joins the basket. Fixed and on <body> so a
   button that clips its ripple cannot also clip these. */
.sj-burst-dot {
  position: fixed;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1100;
  animation: sj-burst 0.62s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes sj-burst {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(1); opacity: 0; }
}

/* The basket notices it grew. */
.sj-bump { animation: sj-bump 0.42s cubic-bezier(0.3, 1.4, 0.5, 1); }
@keyframes sj-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.16) rotate(-4deg); }
  100% { transform: scale(1); }
}

/* The closeup shipped without a transition — it just appeared. */
.sj-lightbox { animation: sj-fade 0.18s ease-out; }
.sj-lightbox figure { animation: sj-zoom-in 0.24s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes sj-fade { from { opacity: 0; } }
@keyframes sj-zoom-in {
  from { transform: scale(0.92); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sj-ripple, .sj-burst-dot { display: none; }
  .sj-bump { animation: none; }
  .sj-lightbox, .sj-lightbox figure { animation: none; }
}

/* === MOBILE MENU ===========================================================
 * The desktop links row hides below 1024px, and from the prototype until now
 * NOTHING replaced it — phone visitors simply had no menu. This is the burger
 * and slide-down drawer that should have existed from day one. */
.sj-burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--rosa-200); border-radius: 50%;
  background: var(--cream); color: var(--rosa-800);
  cursor: pointer; flex: 0 0 auto;
  align-items: center; justify-content: center;
  transition: transform 0.14s ease, background 0.2s ease;
}
.sj-burger:active { transform: scale(0.94); }
@media (max-width: 1024px) {
  .sj-burger { display: inline-flex; }
}
.sj-nav-drawer {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 84px 26px 26px;
  background: var(--cream);
  box-shadow: 0 18px 40px rgba(79, 15, 48, 0.18);
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
  z-index: -1; /* under the nav bar itself, so the logo and ✕ stay tappable */
  animation: sj-drawer 0.22s ease-out;
}
@keyframes sj-drawer { from { transform: translateY(-12px); opacity: 0; } }
.sj-nav-drawer a {
  font-family: var(--font-ui);
  font-size: 17px; font-weight: 600;
  color: var(--rosa-800);
  padding: 13px 6px;
  border-bottom: 1px solid var(--line);
}
.sj-nav-drawer a:last-child { border-bottom: 0; margin-top: 12px; }
.sj-nav-drawer .btn { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .sj-nav-drawer { animation: none; } }
/* Rotating a tablet (or resizing) past the breakpoint with the drawer open
   left it hanging over the desktop layout — the state survives the resize, so
   the width has to win. */
@media (min-width: 1025px) { .sj-nav-drawer { display: none; } }

/* === THE PROBLEM REPORTER ==================================================
 * "Something not working?" in the footer opens this. Same visual family as
 * the order form so it reads as part of the bakery, not a bolted-on widget.
 */
.sj-report-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: inherit; opacity: .7;
  text-decoration: underline; text-underline-offset: 3px;
}
.sj-report-link:hover { opacity: 1; }

.sj-report-wrap {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(44, 22, 32, .5);
  display: grid; place-items: center; padding: 18px;
}
.sj-report {
  width: 100%; max-width: 440px; max-height: calc(100dvh - 36px); overflow: auto;
  background: var(--cream); border-radius: var(--r-lg);
  padding: 28px 26px; box-shadow: var(--shadow-lg);
}
.sj-report h3 { font-size: 26px; color: var(--rosa-800, #4F0F30); margin-bottom: 6px; }
.sj-report-sub { font-size: 14px; color: var(--ink-soft); margin-bottom: 16px; line-height: 1.5; }
.sj-report label { display: block; margin-bottom: 14px; }
.sj-report label > span {
  display: block; font-family: var(--font-ui); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 7px;
}
.sj-report-opt { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .8; }
.sj-report textarea, .sj-report input[type="email"] {
  width: 100%; padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: #fff;
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
}
.sj-report textarea { resize: vertical; min-height: 96px; }
.sj-report textarea:focus, .sj-report input:focus {
  outline: none; border-color: var(--rosa-400); box-shadow: 0 0 0 3px var(--rosa-50);
}
.sj-report-fine { font-size: 12px; color: var(--ink-soft); opacity: .85; margin-bottom: 12px; line-height: 1.5; }
.sj-report-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* === LOCATIONS =============================================================
 * One home kitchen today; a market stall and a unit somewhere later. Each
 * entry stands as its own small block so several read as a list rather than
 * one run-on paragraph.
 */
.sj-loc + .sj-loc { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(253, 244, 245, .16); }
.sj-loc-name { display: block; font-weight: 600; margin-bottom: 2px; }
.sj-loc-hours, .sj-loc-note { margin-top: 4px; }
.sj-loc-note { opacity: .78; font-size: 13px; }
/* The address doubles as the map link — the arrow marks it as leaving. */
.sj-loc-map { display: inline-flex; align-items: baseline; gap: 5px; }
.sj-loc-map svg { flex: none; opacity: .7; }
.sj-loc-map:hover svg { opacity: 1; }

/* ── floating words ───────────────────────────────────────────────────────
   Text accents Jenny drops onto a section. The layer covers its section and
   never takes clicks; in the editor the words themselves become grabbable.
   Positions are percentages of the section, the polaroids' anchoring. */
.sj-about, .sj-menu, .sj-gallery, .sj-testimonials, .sj-order, .sj-faq { position: relative; }
.sj-accent-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.sj-accent {
  position: absolute;
  font-family: var(--font-script);
  line-height: 1.1;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  will-change: transform;
  pointer-events: none;
}
body.sj-editing .sj-accent { pointer-events: auto; cursor: grab; outline: 1.5px dashed var(--rosa-400); outline-offset: 6px; border-radius: 4px; }
body.sj-editing .sj-accent.sj-dragging { cursor: grabbing; animation: none; }

.sj-accent--bounce { animation: sj-acc-bounce 1.7s ease-in-out infinite; }
@keyframes sj-acc-bounce {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-14px) scale(1.05); }
  45%      { transform: translateY(3px) scale(0.98); }
  62%      { transform: translateY(-6px); }
  78%      { transform: translateY(0); }
}
.sj-accent--wiggle { animation: sj-acc-wiggle 2.1s ease-in-out infinite; }
@keyframes sj-acc-wiggle { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.sj-accent--float { animation: sj-acc-float 4.6s ease-in-out infinite; }
@keyframes sj-acc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
.sj-accent--pulse { animation: sj-acc-pulse 1.9s ease-in-out infinite; }
@keyframes sj-acc-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.13); } }
.sj-accent--still { animation: none; }

@media (prefers-reduced-motion: reduce) { .sj-accent { animation: none !important; } }
/* Phones keep the words but calm the size a touch via the layer, not the
   font, so Jenny's chosen size still means what it says on desktop. */
@media (max-width: 640px) { .sj-accent { text-shadow: none; } }

/* ── the flyer section ────────────────────────────────────────────────────
   A pinned-up flyer beside its pitch. The slight tilt says "taped to the
   counter"; tapping opens it full size because flyers are made of small
   print. */
.sj-flyer { padding: 110px 0; background: var(--cream-deep); position: relative; }
.sj-flyer-inner { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 56px; align-items: center; }
.sj-flyer-card { margin: 0; transform: rotate(-1.5deg); }
.sj-flyer-card img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-md);
  border: 10px solid var(--cream);
  box-shadow: var(--shadow-md);
}
.sj-flyer-words .sj-h2 { margin-bottom: 14px; }
.sj-flyer-words p { max-width: 480px; margin: 0 0 26px; color: var(--ink-soft); }
@media (max-width: 1024px) {
  .sj-flyer-inner { grid-template-columns: 1fr; gap: 36px; }
  .sj-flyer-card { max-width: 380px; margin: 0 auto; }
}

/* Custom-page extras: a button that stands on its own line, and a small
   hand-drawn breath between parts of the page. */
.sj-page-btn { margin: 26px 0; }
.sj-page-divider { margin: 34px 0; text-align: center; }

/* ── the deposit step ─────────────────────────────────────────────────────
   On the thank-you screen: what to do next, with somewhere to actually send
   it. Only rendered when Jenny has switched deposits on AND filled in a
   handle, so it can never be an address-less instruction. */
.sj-deposit {
  margin: 30px auto 0;
  max-width: 520px;
  text-align: left;
  background: var(--rosa-50);
  border: 1px solid var(--rosa-100);
  border-left: 4px solid var(--rosa-400);
  border-radius: var(--r-md);
  padding: 22px 24px;
}
.sj-deposit-h { font-size: 1.35rem; margin: 0 0 8px; }
.sj-deposit p { margin: 0 0 14px; color: var(--ink-soft); font-size: 15px; }
.sj-deposit-ways { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sj-deposit-ways li {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-sm, 10px);
}
.sj-deposit-name {
  font-family: var(--font-ui); font-weight: 700; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--rosa-600);
}
.sj-deposit-handle { font-weight: 600; font-size: 15px; color: var(--rosa-800); word-break: break-all; }
a.sj-deposit-handle { text-decoration: underline; }

/* ── touch targets ────────────────────────────────────────────────────────
   Found by the width audit: on phones, "Add to basket" measured 21px tall,
   the menu filter chips 35px, the footer's report link 17px — all under the
   ~44px a fingertip needs. Coarse pointers get padded hit areas; the look on
   desktop, where a mouse is precise, stays exactly as designed. */
/* Width joins pointer in the gate: a narrow window is a phone in practice,
   it lets the fit checker measure the real thing with no simulation, and a
   mouse user in a slim window merely gets slightly comfier buttons. */
@media (pointer: coarse), (max-width: 640px) {
  /* a.… and button.… to outrank the base button.sj-menu-order rule. */
  a.sj-menu-order, button.sj-menu-order { padding: 12px 10px; margin: -4px 0; display: inline-block; }
  /* The order form's "what are we baking" chips. The screen checker kept
     reporting 35px buttons named Cake and Cupcakes; the fix went to the menu
     FILTERS twice because their labels read the same. The checker was right
     both times — it was these. */
  /* A floor, not more padding. Padding meant solving font-size and
     line-height separately for each of these, and the answers landed at 40
     and 42 — close enough to look done and still short of the bar. The
     checker measures height, so height is what this sets. */
  .sj-chip, .sj-filter {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .sj-chip { padding: 6px 14px; }
  .sj-filter { padding: 6px 16px; }
  .sj-report-link { padding: 14px 10px; display: inline-block; }
  /* The basket and the menu button: 42px square, and between them the two
     most-tapped controls on the site. They reported as `""` for a long time
     because they hold an icon and no text, which is easy to skim past in a
     list of findings. */
  .sj-cart-btn, .sj-burger { min-height: 44px; min-width: 44px; }
  /* The basket's − and + were 28px, and they sit on the checkout page: the
     one screen where a mis-tap costs an order. The pill grows with them. */
  .sj-qty button { width: 44px; height: 44px; font-size: 18px; }
  .sj-qty { gap: 10px; }
  /* Rating stars were 30px of glyph with 2px either side. Choosing a rating
     is the whole job of that form. */
  .sj-star-pick button { min-width: 44px; min-height: 44px; padding: 0 4px; }
}

/* Floating words scale with the section they sit on.
   The badge taught this: a fixed pixel size on a box that reshapes means the
   thing "changes size" as screens change — 30px is a whisper on a desktop
   section and a shout on a phone one. --acc-size is the stored size divided
   by 12.8 (i.e. px per 1% of a 1280px section), so 1cqw of the section
   reproduces the desktop look exactly and shrinks in proportion below it.
   Browsers without container queries keep the inline px fallback. */
@supports (container-type: size) {
  .sj-accent-layer { container-type: size; }
  /* !important so the container-relative size beats the inline px fallback —
     the inline style exists only for browsers that cannot run this block. */
  .sj-accent { font-size: calc(var(--acc-size, 2.34) * 1cqw) !important; }
}

/* ── the smallest screens (fold cover screens, ~280-344px) ────────────────
   Nothing overflows down here — the audit is clean at 280 — but the display
   sizes floor too high: a 64px headline on a 280px screen is one word per
   line, two screens of scrolling to read a sentence. These floors bend the
   type to the screen. Above 420px nothing changes at all. */
@media (max-width: 420px) {
  .sj-hero-h1 { font-size: clamp(38px, 16vw, 64px); }
  .sj-h2 { font-size: clamp(32px, 12.5vw, 48px); }
  .sj-footer-h { font-size: clamp(28px, 11vw, 40px); }
  .sj-page-h { font-size: clamp(30px, 11vw, 38px); }
}


/* ── the Refined scale ────────────────────────────────────────────────────
   Same design, less shouting. The shipped page runs 10.3 screens tall at
   1440px with 280px between every section and a 115px headline; a bakery's
   job is to show the cakes and take the order, and that much air puts the
   order form five screens from the fold. This tightens the rhythm, closes
   the hole in the type scale between the headings and the body, and gives
   the cards a little real elevation. Nothing is removed — it is one class
   on the root, so switching back is instant. */
:root.sj-refined {
  --rhythm: 96px;
  --h1-size: clamp(52px, 6.2vw, 92px);
  --h2-size: clamp(38px, 4vw, 54px);
}
:root.sj-refined .sj-section-head { margin-bottom: 40px; }
:root.sj-refined .sj-hero-sub { font-size: 19px; max-width: 34em; }
:root.sj-refined .sj-menu-name { font-size: 21px; }
:root.sj-refined .sj-menu-card-img { aspect-ratio: 5 / 4; }
:root.sj-refined .sj-menu-grid { gap: 24px; }
/* Cards lift off the page instead of sitting flat inside a hairline — the
   single change that most reads as "made" rather than "templated". */
:root.sj-refined .sj-menu-card,
:root.sj-refined .sj-testimonial {
  box-shadow: 0 1px 2px rgba(79, 15, 48, .04), 0 6px 18px rgba(79, 15, 48, .06);
}
:root.sj-refined .sj-menu-card:hover { box-shadow: 0 2px 4px rgba(79, 15, 48, .06), 0 14px 32px rgba(79, 15, 48, .10); }
@media (max-width: 640px) { :root.sj-refined { --rhythm: 64px; } }

/* ── deals: the flyers Jenny is running now ──────────────────────────────
   Tall posters, so a shelf rather than a stack — three of these stacked is
   three screens of scrolling before anyone reaches the menu.

   The strip scrolls sideways on its own, which is the one place on this site
   that is allowed to: it is a deliberate, contained gesture with the cards
   sized so the next one peeks in and says "there is more this way". Scroll
   snapping makes it land on a card instead of halfway between two. */
/* position:relative so a floating word anchors to THIS section, not to the
   page — the accent layer is inset:0 against its nearest positioned parent. */
.sj-deals { padding: var(--rhythm) 0; background: var(--cream-deep); position: relative; }
.sj-deals-blurb { margin-top: 8px; color: var(--ink-soft); }
.sj-deals-strip {
  display: flex; gap: 22px; margin: 28px 0 0; padding: 4px 4px 14px;
  list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory;
  /* Room for the lift on hover, and for the shadow, without clipping either. */
  scrollbar-width: thin;
}
.sj-deal { flex: 0 0 auto; width: min(300px, 74vw); scroll-snap-align: start; }
.sj-deal-card {
  display: block; position: relative; width: 100%; padding: 0;
  border: 0; background: none; cursor: zoom-in;
  border-radius: var(--r-md);
  transition: transform .18s ease, box-shadow .18s ease;
}
.sj-deal-card img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-md);
  border: 8px solid var(--cream);
  box-shadow: var(--shadow-md);
}
.sj-deal-card:hover { transform: translateY(-3px); }
.sj-deal-card:focus-visible { outline: 3px solid var(--rosa-600); outline-offset: 3px; }
/* The badge sits ON the flyer, top-left, where a real sticker would go. */
.sj-deal-tag {
  position: absolute; top: 18px; left: 18px;
  background: var(--rosa-600); color: var(--cream);
  font: 700 11px/1 var(--font-ui); letter-spacing: .09em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.sj-deal-name {
  margin: 12px 2px 0; font: 600 14.5px/1.4 var(--font-ui); color: var(--ink);
}
@media (max-width: 640px) {
  .sj-deals-strip { gap: 16px; padding-left: 0; }
  .sj-deal { width: min(260px, 78vw); }
  .sj-deal-tag { top: 14px; left: 14px; font-size: 10px; padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sj-deal-card { transition: none; }
  .sj-deal-card:hover { transform: none; }
}

/* ── when Jenny can bake ────────────────────────────────────────────────────
 *
 * A month grid under the date field. It exists because <input type=date>
 * understands a range and nothing else — it can refuse everything before
 * Thursday, but it cannot say that the 14th is booked and the 15th is free,
 * and that is exactly what a customer needs to know BEFORE choosing. */
.sj-cal {
  margin: 10px 0 4px; padding: 12px;
  background: var(--cream-deep); border: 1px solid var(--line);
  border-radius: 14px;
}
.sj-cal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.sj-cal-head strong { font: 700 14px var(--font-ui); color: var(--rosa-800); }
.sj-cal-head button {
  width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; color: var(--rosa-600); font-size: 20px; cursor: pointer; line-height: 1;
}
.sj-cal-head button:hover { border-color: var(--rosa-400); }
.sj-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.sj-cal-dow {
  text-align: center; font: 700 10px var(--font-ui); color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .06em; padding-bottom: 4px;
}
.sj-cal-day {
  /* 44px so a finger can hit a single day without magnifying the page. */
  min-height: 44px; border-radius: 10px; border: 1px solid transparent;
  background: #fff; color: var(--ink); font: 600 14px var(--font-ui); cursor: pointer;
}
.sj-cal-day:hover:not(:disabled) { border-color: var(--rosa-400); background: var(--rosa-50); }
.sj-cal-day.is-on { background: var(--rosa-600); color: var(--cream); border-color: var(--rosa-600); }
/* Struck through as well as faded. Colour alone is not a message — on a dim
   phone in a kitchen, and to anyone who does not see this pink, the strike is
   what carries it. */
.sj-cal-day.is-off {
  background: transparent; color: var(--ink-soft); opacity: .45;
  text-decoration: line-through; cursor: not-allowed;
}
.sj-cal-key {
  margin: 8px 0 0; font: 400 11.5px/1.4 var(--font-ui); color: var(--ink-soft);
  display: flex; align-items: center; gap: 6px;
}
.sj-cal-swatch {
  width: 14px; height: 14px; border-radius: 4px; flex: none;
  background: repeating-linear-gradient(45deg, var(--line), var(--line) 3px, transparent 3px, transparent 6px);
}
.sj-date-warn {
  margin: 8px 0 0; padding: 10px 12px; border-radius: 12px;
  background: var(--rosa-50); border: 1px solid var(--line);
  font: 400 13.5px/1.5 var(--font-ui); color: var(--ink);
}
.sj-date-fix {
  display: inline; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--rosa-600); text-decoration: underline;
}