/* Self-hosted (was render-blocking Google Fonts; also stops EU visitor IPs going to Google). */
@font-face{
  font-family:'Baloo 2';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/baloo-2-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;
}
@font-face{
  font-family:'Baloo 2';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/baloo-2-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;
}
@font-face{
  font-family:'Baloo 2';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/baloo-2-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;
}
@font-face{
  font-family:'Baloo 2';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/baloo-2-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;
}
@font-face{
  font-family:'Baloo 2';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/baloo-2-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;
}
@font-face{
  font-family:'Baloo 2';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/baloo-2-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;
}
@font-face{
  font-family:'Baloo 2';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('/assets/fonts/baloo-2-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;
}
@font-face{
  font-family:'Baloo 2';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('/assets/fonts/baloo-2-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;
}
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/nunito-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;
}
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/nunito-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;
}
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/nunito-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;
}
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/nunito-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;
}
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/nunito-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;
}
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/nunito-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;
}
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('/assets/fonts/nunito-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;
}
@font-face{
  font-family:'Nunito Sans';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('/assets/fonts/nunito-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;
}

/* ============================================================================
   PrintableBloom — site.css  (shared stylesheet for the static build)
   ----------------------------------------------------------------------------
   The prototypes use INLINE layout styles; keep those verbatim on each page.
   This file only owns: base reset/body, converted pseudo-states (was
   style-hover / style-focus), :focus-visible, the mobile hamburger nav, the
   sticky-offset resets on mobile, transitions (+ reduced-motion), toast anim.

   COMPONENT CLASS MAP  (apply these on the matching inline-styled elements)
   ---------------------------------------------------------------------------
   .pb-navlink        header nav link (Shop / Free printables / Blog / About).
                      Add .is-active on the current page's link (coral, no hover shift).
   .pb-navlink--foot  footer link on the dark #3A3330 footer (cream -> coral tint).
   .pb-footlink       alias of .pb-navlink--foot (use either; identical).
   .pb-btn-primary    coral CTA button/link (#F2937E -> #F5A28D on hover).
                      Label is ink #3A3330, NOT white: white on #F2937E is 2.27:1
                      (WCAG AA fail). Ink gives 5.45:1, and hover lightens rather
                      than darkens so the dark label keeps its contrast. Buy/Add/Send.
   .pb-btn-primary--lift  same, but also translateY(-1px) on hover (hero + product Buy).
   .pb-btn-secondary  outline "sage" button (white/border -> #EAF0E8).
   .pb-pill-free      the pale-green "Free pack"/"Get it free" pill (#EAF0E8 -> #DDE8DA).
   .pb-btn-cart       dark Cart button (#3A3330 -> #524A45).
   .pb-btn-ghost      text-only coral button e.g. "Clear all" (#C9684F -> #A8523D).
   .pb-card           lifting card (white product/category/blog card): translateY(-3px)+shadow.
   .pb-card--soft     lifting card WITHOUT its own border shadow baseline (product "goes well with").
   .pb-cardlink       product/blog TITLE link inside a card (#3A3330 -> #C9684F).
   .pb-catcard        colored "Shop by age" block cards (lift only, keep inline bg).
   .pb-input          email/text input (border #F2C4B5/#EDE2D2 -> focus #E07E68).
   .pb-select         the sort <select> (focus outline).
   .pb-chip           filter/category toggle chip; page JS still sets on/off inline bg,
                      this adds hover + focus only.
   .pb-thumb          product-page peek thumbnail button (focus outline; active border via JS).
   .pb-toast          fixed toast pill (uses @keyframes pbToast).  Add [role=status] in markup.
   ---------------------------------------------------------------------------
   MOBILE NAV MARKUP (see _partials/header.html):
     .pb-navbar        the flex row inside the sticky header
     .pb-nav           the 4-link cluster (becomes the drawer <=720px)
     .pb-nav-toggle    hamburger button (hidden >720px, shown <=720px)
     .pb-header.is-open  toggled by JS -> reveals .pb-nav drawer
   ============================================================================ */

/* ---- base reset / body (from prototype <style>) --------------------------- */
html, body {
  margin: 0;
  padding: 0;
  background: #FBF7F1;
  color: #3A3330;
  font-family: 'Nunito Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: #A8523D; text-decoration: none; }
a:hover { color: #8F4432; }
::selection { background: #FCE0D6; }
img { max-width: 100%; }

/* Skip link for keyboard users (visually hidden until focused) */
.pb-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: #3A3330;
  color: #FBF7F1;
  padding: 10px 16px;
  border-radius: 0 0 10px 0;
  font-weight: 800;
  font-size: 14px;
}
.pb-skip:focus { left: 0; color: #FBF7F1; }

/* ---- toast keyframes (from prototype) ------------------------------------- */
@keyframes pbToast {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.pb-toast { animation: pbToast .25s ease; }

/* ===========================================================================
   PSEUDO-STATE COMPONENTS  (converted from style-hover / style-focus)
   Transitions live here; layout/color baselines stay inline on the element.
   =========================================================================== */

.pb-navlink,
.pb-navlink--foot,
.pb-footlink,
.pb-btn-primary,
.pb-btn-primary--lift,
.pb-btn-secondary,
.pb-pill-free,
.pb-btn-cart,
.pb-btn-ghost,
.pb-card,
.pb-card--soft,
.pb-catcard,
.pb-cardlink,
.pb-input,
.pb-select,
.pb-chip,
.pb-thumb {
  transition: color .18s ease, background-color .18s ease,
              border-color .18s ease, box-shadow .2s ease, transform .2s ease;
}

/* Header nav links -> coral on hover */
.pb-navlink:hover,
.pb-navlink:focus-visible { color: #A8523D; }
.pb-navlink.is-active { color: #A8523D; }

/* Dark-footer links -> coral tint on hover */
.pb-navlink--foot:hover,
.pb-navlink--foot:focus-visible,
.pb-footlink:hover,
.pb-footlink:focus-visible { color: #F6B4A2; }

/* Primary coral CTA */
.pb-btn-primary:hover,
.pb-btn-primary:focus-visible { background: #F5A28D; color: #3A3330; }
.pb-btn-primary--lift:hover,
.pb-btn-primary--lift:focus-visible {
  background: #F5A28D; color: #3A3330; transform: translateY(-1px);
}

/* Secondary sage-outline CTA */
.pb-btn-secondary:hover,
.pb-btn-secondary:focus-visible { background: #EAF0E8; color: #3A3330; }

/* Free pack / Get it free pill */
.pb-pill-free:hover,
.pb-pill-free:focus-visible { background: #DDE8DA; color: #3D4F3F; }

/* Dark Cart button */
.pb-btn-cart:hover,
.pb-btn-cart:focus-visible { background: #524A45; color: #FBF7F1; }

/* Text-only ghost button (Clear all) */
.pb-btn-ghost:hover,
.pb-btn-ghost:focus-visible { color: #A8523D; }

/* Lifting white cards */
.pb-card:hover,
.pb-card--soft:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(58, 51, 48, .11);
}
/* Colored age blocks: lift + soft shadow, keep inline bg/color */
.pb-catcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(58, 51, 48, .1);
}

/* Card TITLE link -> coral (color stays #3A3330 baseline inline) */
.pb-cardlink:hover,
.pb-cardlink:focus-visible { color: #A8523D; }

/* Inputs: focus recolors border (was style-focus="border-color:#E07E68") */
.pb-input:focus { border-color: #E07E68; }
/* Free-Printables hero input additionally brightens its bg on focus */
.pb-input--brighten:focus { border-color: #E07E68; background: #fff; }

/* Filter/category chips: page JS toggles on/off bg inline; add hover feedback.
   Only nudge the OFF state (light chips); the ON (dark) state stays put. */
.pb-chip:hover { border-color: #E0CDBC; }
.pb-chip:focus-visible { border-color: #E07E68; }

/* Product peek thumbnails: JS sets active border; add hover/focus */
.pb-thumb:hover { border-color: #E9C6B8; }

/* ===========================================================================
   :focus-visible — 2px coral outline on every interactive element
   =========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.pb-navlink:focus-visible,
.pb-footlink:focus-visible,
.pb-btn-primary:focus-visible,
.pb-btn-primary--lift:focus-visible,
.pb-btn-secondary:focus-visible,
.pb-pill-free:focus-visible,
.pb-btn-cart:focus-visible,
.pb-btn-ghost:focus-visible,
.pb-chip:focus-visible,
.pb-thumb:focus-visible,
.pb-cardlink:focus-visible {
  outline: 2px solid #E07E68;
  outline-offset: 2px;
  border-radius: 6px;
}
/* Inputs already have rounded borders; keep the outline snug */
.pb-input:focus-visible,
.pb-select:focus-visible { outline-offset: 1px; }

/* Remove the outline for pointer users (focus, not focus-visible) */
:focus:not(:focus-visible) { outline: none; }

/* ===========================================================================
   MOBILE HAMBURGER NAV
   Desktop: hamburger hidden, nav is the normal inline flex cluster.
   <=720px: nav links collapse into a drawer toggled by .pb-nav-toggle.
   =========================================================================== */

/* Hamburger button — hidden on desktop */
.pb-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #F0E7DA;
  border-radius: 12px;
  background: #fff;
  color: #3A3330;
  cursor: pointer;
}
.pb-nav-toggle .pb-burger,
.pb-nav-toggle .pb-burger::before,
.pb-nav-toggle .pb-burger::after {
  display: block;
  width: 20px;
  height: 2.5px;
  border-radius: 2px;
  background: #3A3330;
  transition: transform .2s ease, opacity .2s ease;
}
.pb-nav-toggle .pb-burger { position: relative; }
.pb-nav-toggle .pb-burger::before { content: ""; position: absolute; top: -6px; left: 0; }
.pb-nav-toggle .pb-burger::after  { content: ""; position: absolute; top:  6px; left: 0; }

/* Open state: burger morphs into an X */
.pb-header.is-open .pb-nav-toggle .pb-burger { background: transparent; }
.pb-header.is-open .pb-nav-toggle .pb-burger::before { transform: translateY(6px) rotate(45deg); }
.pb-header.is-open .pb-nav-toggle .pb-burger::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 720px) {
  .pb-nav-toggle { display: inline-flex; order: 3; margin-left: auto; }

  /* The 4-link cluster becomes a full-width drawer below the bar */
  .pb-nav {
    order: 5;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch !important;
    gap: 2px !important;
    margin-top: 6px;
    padding: 8px 0 4px;
    border-top: 1px solid #F0E7DA;

    /* collapsed by default */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    /* visibility also removes the links from the tab order + a11y tree;
       delayed so it only flips after the collapse animation finishes. */
    visibility: hidden;
    transition: max-height .28s ease, opacity .2s ease, visibility 0s linear .28s;
  }
  .pb-header.is-open .pb-nav {
    max-height: 340px;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: max-height .28s ease, opacity .2s ease, visibility 0s linear 0s;
  }
  .pb-nav .pb-navlink {
    display: block;
    padding: 12px 6px !important;
    font-size: 16px;
    border-radius: 10px;
  }
  .pb-nav .pb-navlink:hover { background: #FCE9E2; }

  /* Right-cluster (Free pack + Cart) sits on the top bar next to the burger */
  .pb-header-actions { order: 2; }
}

/* Below the drawer breakpoint, kill the magic-number sticky offsets so the
   filter sidebar / product summary don't overlap the sticky header. */
@media (max-width: 900px) {
  .pb-sticky-aside { position: static !important; top: auto !important; }
}

/* Let the announcement bar text wrap gracefully on tiny screens */
@media (max-width: 420px) {
  .pb-announce { font-size: 12px; padding: 8px 14px; }
}

/* ===========================================================================
   Small shared utilities used by the legal / contact / 404 pages
   =========================================================================== */
.pb-prose { max-width: 760px; margin: 0 auto; padding: 40px 24px 72px; }
.pb-prose h1 { font: 800 clamp(30px,4vw,44px)/1.1 'Baloo 2', cursive; margin: 10px 0 8px; }
.pb-prose h2 { font: 800 22px/1.25 'Baloo 2', cursive; margin: 30px 0 8px; }
.pb-prose p,
.pb-prose li { font-size: 15.5px; line-height: 1.7; color: #524A45; }
.pb-prose a { font-weight: 700; }
.pb-prose ul { padding-left: 20px; }
.pb-prose .pb-updated { font-size: 13px; color: #6E635B; font-weight: 700; margin-bottom: 24px; }

/* ===========================================================================
   Reduced motion — honor the OS preference
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .pb-card:hover,
  .pb-card--soft:hover,
  .pb-catcard:hover,
  .pb-btn-primary--lift:hover { transform: none; }
  .pb-nav { transition: none; }
}

/* ===========================================================================
   Mobile sticky buy bar (product pages) — built by site.js, shown <=900px
   only after the main CTA scrolls out of view.
   =========================================================================== */
.pb-mobile-buybar { display: none; }
@media (max-width: 900px) {
  .pb-mobile-buybar.is-on {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: #fff;
    border-top: 1px solid #F0E7DA;
    box-shadow: 0 -8px 24px rgba(58, 51, 48, .14);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    align-items: center;
    gap: 12px;
  }
  .pb-mobile-buybar button {
    flex: 1;
    background: #F2937E;
    color: #3A3330;
    border: none;
    cursor: pointer;
    font: 800 15px 'Nunito Sans', sans-serif;
    padding: 14px 20px;
    border-radius: 999px;
  }
}